TyranoBuilder Script
TyranoBuilder Script
The Scripts
1
Índex
1. Introduction ............................................................................................................................. 3
2. Supported Languages ........................................................................................................... 3
2.1. HTML ................................................................................................................................ 3
2.2. JavaScript / ECMAScript ............................................................................................... 3
2.3. TyranoScript .................................................................................................................... 4
3. Supported Programs ............................................................................................................. 4
3.1. Live2D............................................................................................................................... 4
4. Language Explanation and Examples ................................................................................ 5
4.1. HTML ................................................................................................................................ 5
4.2. JavaScript / ECMAScript ............................................................................................... 5
4.3. TyranoScript .................................................................................................................... 5
4.3.1. Audio ......................................................................................................................... 5
4.3.2. Macros, Variables, JavaScript, Interface ........................................................... 11
4.3.3. System Settings ..................................................................................................... 20
4.3.4. Other ........................................................................................................................ 30
4.3.5. Form ........................................................................................................................ 33
4.3.6. Layers ...................................................................................................................... 35
4.3.7. Animation ................................................................................................................ 45
4.3.8. Characters .............................................................................................................. 51
4.3.9. Messages ............................................................................................................... 56
4.3.10. Links ...................................................................................................................... 61
4.3.11. Live2D ................................................................................................................... 66
2
1. Introduction
This guide aims to explain the languages supported by TyranoBuilder
with examples and links to learn the scripts.
TyranoBuilder supports the languages: HTML, JavaScript / ECMAScript,
TyranoScript. This program can be integrated with Live2D.
2. Supported Languages
2.1. HTML
HTML (abbreviation for the English expression HyperText Markup
Language , which means Hypertext Markup Language ) is a markup language
used to build web pages. HTML documents can be interpreted by browsers.
The technology is the result of the junction between the HyTime and SGML
standards.
HyTime is a standard for structured representation of hypermedia and
time -based content . A document is seen as a set of concurrent time
dependent events (such as audio, video, etc.) , connected by links . The default
is independent of other general word processing standards.
SGML is a standard for formatting text . It was developed for hypertext,
but it has become desirable to convert documents into hyper - objects and to
describe the connections.
The version supported by TyranoBuilder is HTML5.
3
based prototypes, weak typing and dynamic and first-class functions. It supports
functional programming and introduces features like closures and high order
functions commonly unavailable in popular languages like Java and C ++.
In TyranoBuilder this language has the designation iScript.
2.3. TyranoScript
TyranoScript is a Japanese scripting/IF/Dating Sim game engine that
powered "Jurassic Heart". It is a high level scripting language similar to Ren'Py
with the advantage that it produces HTML5/JS games, so you can release your
work on browsers and smartphones with no extra effort.
Although the scripting language supports many common tasks, it is a real
game engine with support for arbitrary HTML and JavaScript as well.
3. Supported Programs
3.1. Live2D
At the moment Live2D is the only program that can be integrated with
Tyranobuilder.
4
4. Language Explanation and Examples
4.1. HTML
I advise you to consult the follow links to learn about HTML:
http://www.html-5-tutorial.com/all-html-tags.htm
http://www.tutorialspoint.com/html5/html5_tutorial.pdf
Or just check in google “HTML Tutorials” or “HTML Book”.
4.3. TyranoScript
http://tyranobuilder.com/tyranoscript-tags-reference/
4.3.1. Audio
Parameter
Needed? Explanation
Name
5
will start in smart phone browsers.With smart phones
without a click no sound is assigned to play. For example
after a scene change when you want music playback if you
do not set this to true no music will play. In the middle of
most text false is ok for playback. Check if music is playing
on smartphones and set this to true if necessary.
time no number of miliseconds for the playback to start
Sample Code
[playbgm storage="music.mp3"]
[stopbgm ]
6
Parameter
Needed? Explanation
Name
[fadeoutbgm time=3000]
7
[xchgbgm] Crossfade BGM
Crossfade BGM
Mix one music in as another fades out.
PLEASE NOTE: This is not compatible with Firefox and Safari browsers. In
these cases, they will fall back to playbgm.
Parameter
Needed? Explanation
Name
8
[playse] Play a Sound Effect
Play a sound effect
Sound effect files are stored in the project’s \sound folder
Parameter
Needed? Explanation
Name
[stopse ]
9
[fadeinse] Fade in a Sound Effect
Fade in a sound effect
[fadeoutse time=2000 ]
10
4.3.2. Macros, Variables, JavaScript, Interface
[eval exp="f.test=500"]
;↑assign to game variable test to a number
[eval exp="sf.test=400"]
;↑assign system variable test to a number
[eval exp="f.test2=f.test*3"]
;↑assign game variable test2 to 3x game variable test
11
[clearsysvar] Clear All System Variables
Clear all system variables
[iscript]
var test = 22;
f.name = test;
alert("javascript functions are available");
//jquery commands and javascript methods can also be used.
$("body").html();
[endscript]
12
[emb] Embed Expression
The the result of an evaluated expression can be embedded.
Use this when you want to display a variable in a scenario.
Parameter
Needed? Explanation
Name
[if] If
if the evaluation of the expression is true (or a non-zero number), the
statements and tags up until elsif, else and endif tag are executed, otherwise
those statements and tags are ignored and the statements and tags inside of
elsif or else would be executed instead.
Parameter
Needed? Explanation
Name
13
Sample Code
; example 1
[if exp="false"]
This will not be displayed
[else]
This will be displayed
[endif]
; example 2
[if exp="false"]
This will not be displayed
[elsif exp="false"]
This will not be displayed
[else]
This will be displayed
[endif]
; example 3
[if exp="false"]
This will not be displayed
[elsif exp="true"]
This will be displayed
[else]
This will not be displayed
[endif]
; example 4
[if exp="true"]
This will be displayed
[elsif exp="true"]
This will not be displayed
[else]
This will not be displayed
[endif]
14
[elsif] Else If
between the [if] and [endif] tags, this can be used. If statements in a previous [if]
or [elsif] tag have not been executed yet, the statements in this tag will be
evaluated if the expression in the exp parameter evaluates to true until the point
where an elsif, else, or endif tag is reached.
For usage examples, see the entry for the [if] tag.
[else] Else
If an [if] tag or [elsif] tag have not been executed, statements between [else]
and [endif] are executed.
For usage examples, see the entry for the [if] tag.
[endif] End If
End an if statement. when you use an [if] tag, you must have an [endif]
15
[call] Call a Subroutine
Call a subroutine by label and scenario file.
if a subroutine contains a [return] tag, execution will pick up after where the
subroutine was called
Parameter
Needed? Explanation
Name
16
[macro] Describe Macro
Start macro definition.
The statements between this tag and the [endmacro]tag will register a new tag
named after the name attribute. Then you can use this new tag.
When an inner tag’s attribute value is prefixed with the % symbol, that
parameter is passed through when defined by the macro. If a | is used in
conjunction with the %, a default parameter can be defined.
Also, all parameters are passed through when the “*” is used.
Parameter
Needed? Explanation
Name
17
[endmacro] End Macro
This ends the macro
18
[loadjs] Load JavaScript File
Read in external JavaScript File
There are no restrictions on how the js will work.
The JS file should be in data/others folder
[loadjs storage="sample.js" ]
19
4.3.3. System Settings
Parameter
Needed? Explanation
Name
20
[savesnap] Create a Save Snapshot
Save the current game conditions. After that, tyrano.ks’s expansion [setsave] is
peformed. This records the save data.
Parameter
Needed? Explanation
Name
enter the full path for previously entered images. They are
storage yes
set in the order that they are passed in.
this can be set to true or false. The default is false. When
wait no this is set to true all the game is paused until the images
are loaded. You will need a loading screen.
Sample Code
;Use the full path below the project directory
[preload storage="data/fgimage/girl.jpg"]
;You can also specify an array
[iscript]
f.preload_images =
["data/fgimage/girl.jpg","data/fgimage/haruko.png","data/fgimage/miku1.p
ng","data/fgimage/miku2.png"];
[endscript]
[preload storage=&f.preload_images]
21
[showsave] Show Save Screen
Show save screen
[showsave]
[showload]
[showmenu]
22
[showmenubutton] Show Menu Button
Show menu button
[showmenubutton]
[hidemenubutton]
23
[skipstop] Skip Stop
Stop “skip mode” where the characters move faster
[link target=*select1] This won't work after the [s] tag executes [endlink][r]
[link target=*select2] This won't work after the [s] tag executes [endlink][r]
[s]
24
[quake] Shake the Screen
For a set number of milliseconds、the screen will shake. (KAG3 does not
support setting the number of characters) if you set the vmax attribute to 0 it will
only shake horizontally. if you set the hmax attribute to 0 it will only shake
vertically.
Parameter
Needed? Explanation
Name
25
[font] Set Font Attributes
Set various attributes of text.
These attributes are set for each message layer.
If any of the attributes are omitted, the default set in Config.tjs is used.
When these tags are used: [resetfont] [ct] [cm] [er]、the defaults set in
Config.tjs or in the [deffont] are used.
Parameter
Needed? Explanation
Name
26
[deffont] Default Font Attributes
Sets the default font attributes for the current message layer.
If the [resetfont] tag is used, these attributes will take effect.
In other words, by only using this tag, the font attribute will not be reflected.
Parameter
Needed? Explanation
Name
27
[nowait] Instant Text
Without waiting, text will appear on the screen. (contrast with [delay])
28
[locate] Display Location Settings
Set placement of graphical buttons.
There is no support for writing text.
Parameter
Needed? Explanation
Name
29
4.3.4. Other
[trace exp="f.test"]
; ↑ game variable test's details are output to the console
30
Parameter
Needed? Explanation
Name
[endhtml]
31
[endhtml] End HTML
End HTML input
32
4.3.5. Form
Parameter
Needed? Explanation
Name
[edit name="f.test"]
[locate x=200 y=300 ]
[button graphic="start.png" target=*commit]
[s]
33
*commit
[commit]
[cm]
;show the contents of entered Text
Value is set as [1]
[emb exp=f.test]
This is what you entered.[1]
34
4.3.6. Layers
Parameter
Needed? Explanation
Name
35
left no message layer’s position from the left in pixels
top no message layer’s position from the top in pixels
width no message layer’s width in pixels
height no message layer’s height in pixels
set image for the message layer’s frame image.
use this to customize the message area.
adjust image size is according to the width and height
attributes.
frame no futhermore you should use this to regulate the places
where the message will be displayed by margin attributes.
if you set this to “none” it will return to the standard margin.
You can also change it to designate a different frame
image.
sets the color of the message layer with a 0xRRGGBB
color no
format
this sets the opacity for the message layer. This does not
opacity no affect the opacity of the text itself or the layer.0 is
completely transparent.
marginl no message layer’s left margin
margint no message layer’s top margin
marginr no message layer’s left margin
marginb no message layer’s bottom margin
set message layer’s vertical mode with “true”. Use “false”
vertical no
for horizontal mode.
if set to “true” message layer is visible
visible no
“false” hides the message layer.
Sample Code
36
[ image ] Display an Image
Show an image for the layer. you can use this to change the image of the
background or character. visible must be set to true in order to show the
foreground layer
Parameter
Needed? Explanation
Name
37
foreground layer. This attribute can be set as left
left_center center right_center right. You can change how
far it is from the center in the Config.tjs file. You can also
abbreviations l lc c rc and r.
Setting these will override the top and left attributes.
Don’t set this attribute for the layer that you intend to use
as base. Set these positions beforehand in Config.tjs
Sample Code
Parameter
Needed? Explanation
Name
[backlay]
;Show character
[image layer=0 page=back visible=true top=100 left=300 storage =
chara.png] [trans time=2000]
@wt
38
@backlay
;Hide character
[freeimage layer=0 page=back]
@trans time=2000
[wt]
Parameter
Needed? Explanation
Name
layer yes this sets the target layer. you can reference it by number.
sets the target page. can be set as set as “fore” or “back”.
page no
defaults to “fore”
text no text contents to show
x yes horizontal position from left border in pixels
y yes vertical position from top border in pixels
set to true or false (this is the default). If set to true the text
vertical no
reads vertically. If false the text is horizontal.
size no set the font size in pixels
set the font type. This is not KAG compatible but you can
face no
use web fonts
color no set the font color
name no TyranoScript only (not KAG3). This name is used later to
39
reference this by tags like [anim] tag. Basically by setting
this name you can set this as a JS class. If you divide them
with commas you can designate multiple names.
this sets the text as bold. You can use font-style for the
bold no
HTML5 compatible method.
Sample Code
[backlay]
[ptext page=back text="texttext" size=30 x=200 y=300 color=red
vertical=true]
[trans time=2000]
[wt]
[1]
Clear the displayed text
[freeimage layer = 0]
40
Parameter
Needed? Explanation
Name
41
[wt] Wait on Transition
wait until transition is finished
[backlay]
[image layer=base page=back storage=rouka.jpg]
[trans time=2000]
;don't advance until transition is finished
[wt]
42
[layopt] Layer Options
set layer options.
Parameter
Needed? Explanation
Name
This sets the target layer or message layer. if you only set
the message it will be set with the [current] tag and the
layer yes
current layer that you’re working with will become the
message layer
page no sets as “fore” (default) or “back”. But if layer
sets whether or not the layer is visible. The visibility will not
visible no
change if this attribute is omitted
sets the layer position from the left. If this omitted there is
left no no position change. If you want to change the position of
message0 or message1 use the [position] tag instead
sets the layer position from the top. If this omitted there is
top no no position change. If you want to change the position of
message0 or message1 use the [position] tag instead
sets the opacity of the layer from 0-255. 255 is totally
opacity no
transparent.
Sample Code
43
[trans] Transition Layer
Transition to the set layer.
Transition is a way to move the back layer to the front.
after transition, the surface page’s status of the target layer image’s placement,
size, visibility, invisibility are made to be the same as the back page.
Also, during a transition do not change the properties of the layers
Parameter
Needed? Explanation
Name
44
4.3.7. Animation
[anim] Animation
With this you can animate a picture, button or even the contents of a layer.
You should call the element that you want to animate by using the name you
gave it when it was created with the [ptext] or [ button ] tags.
When you set a layer, the animation will affect all elements in the layer.
This tag does not wait for the animation to stop. If you use the [wa] tag, you can
wait for the completion of all animations that are being performed.
You can set the position of the animation using the values of -100 through 100.
(From where it is currently, it can be moved to the left 100px)
If you set the opacity, you can also make something disappear.
Parameter
Needed? Explanation
Name
45
easeInOutCubic |easeInQuart |easeOutQuart |
easeInOutQuart |easeInQuint |easeOutQuint |
easeInOutQuint |easeInSine |easeOutSine |
easeInOutSine |easeInExpo |easeOutExpo |
easeInOutExpo |easeInCirc |easeOutCirc |
easeInOutCirc |easeInElastic |easeOutElastic |
easeInOutElastic |easeInBack |easeOutBack |
easeInOutBack |easeInBounce |easeOutBounce |
easeInOutBounce
Sample Code
Animations over
46
[wa] Pause Animation
Pause the currently playing animation
Parameter
Needed? Explanation
Name
Sets the names of the key frame. This will be the name to
name yes
use if you use the kanim tag later.
Sample Code
47
[endkeyframe] End Keyframe
Stop the definition of keyframe animations
Parameter Needed?Explanation
Set the percentage. For example an animation that
takes 5 seconds you will want to set each slide at
p yes 20% (?). Set it to 0-100%. If you omit putting it to
0% you can continue from the previous animation
and start a new animation.
Set the pixels the amount that the animation should
move on the X axis. Or if you start it with an
x no
asterisk (*) you can set it at an absolute position.
(For example) x
Set the pixels the amount that the animation should
y no move on the Y axis. Or if you start it with an
asterisk (*)
you can set it at an
absolute position.no “100” (it will move 100px forward) y
(For example) y
Set the pixels the amount that the animation should
move on the Z axis. Or if you start it with an
z no
asterisk (*) you can set it at an absolute position.
(For example) z
48
You can rotate the target. As an example using
rotate no
notation like rotate
You can rotate the target on the X axis. As an
rotateX no
example
using notation like
no “360deg” will turn the image 360 degrees.
rotate
You can rotate the target on the Y axis. As an
rotateY no
example
using notation like
no “360deg” will turn the image 360 degrees.
rotate
You can rotate the target on the Z axis. As an
rotateZ no
example
using notation like
no “360deg” will turn the image 360 degrees.
rotate
scale no You can enlarge or shrink the target. (Ex) scale
scaleX no Enlarge or shrink the target horizontally.
scaleY no Enlarge or shrink the target vertically.
scaleZ no Enlarge or shrink the target in the 3rd dimension.
skew no skew
skewX no Xskew
skewY no Yskew
perspective no You can change perspective. Only select browsers.
By setting this to 0-1 you can set the opacity of
every element. It is possible to make an element
opacity no
disappear this way. At 0 it is completely
transparent.
Others no You can also use CSS to set other properties.
49
[kanim] Execute Keyframe
This executes a keyframe animation. You can implement a complex animation
by defining the name as well as the text and pictures you want to animate with
the [keyframe] tag.
Parameter
Needed? Explanation
Name
name no sets the name of the text or image that will be animated
if you don’t set the name and set the layer instead this will
layer no
animate all elements in the layer
keyframe yes sets the name of the keyframe animation
time no the time of the animation in milliseconds
set the pattern of change for the animation.Some of the
things you can set are:ease(smoothly at the beginning and
end)linear(plays at a set interval)ease-in(plays back slowly
easing no at the beginning)ease-out(plays back slowly at the
end)ease-in-out(plays back slowly at the beginning and
end)it’s possible to set the easing your own way by using
the cubic-bezier function
set the number of times it plays. The default is one. If you
count no
set it to “infinite” the animation will play forever.
delay no milliseconds before playback. default is 0
animations can alternate between their reverse and normal
direction no progression. default is “normal” and “alternate” sets the
animation to alternate between normal and reverse
set the status before and after playback. Default is
“forwards” and it maintains the same configuration after
mode no
play. If set to “none” it will not maintain the same
configuration.
50
4.3.8. Characters
Parameter
Needed? Explanation
Name
51
[chara_new] New Character
Set the info for a new character. after that, it can be further manipulated with the
[chara_show] tag and others.
Also you can set the name here which is referenced by the [anim] tag later.
In other words, after you add a character, you can freely animate it.
Parameter
Needed? Explanation
Name
52
[chara_show] Show Character
Show a previously defined character.
Parameter
Needed? Explanation
Name
[chara_show name="yuko" ]
53
[chara_hide] Hide Character
hide a character that has been displayed with [chara_show]
Parameter
Needed? Explanation
Name
[chara_hide name="yuko" ]
[chara_delete name="yuko" ]
54
[chara_mod] Change Character Appearance
Change the sprite of a character on the screen. Likely useful for changing facial
expressions.
Parameter
Needed? Explanation
Name
Sample Code
55
4.3.9. Messages
Show text[p]
Show text[p][r]
56
[graph] Show Image Inline
Show arbitrary images inside of a message.
You can use pictographs or special characters, etc.
Put images you want to show in the image folder.
Also, for frequently used symbols, it’s easy to set up a macro.
Show text[1]
Put text on a new line[1][r]
Put text on a new line[1][r]
57
[er] Erase
Erase the characters of the current layer
58
[ct] Reset the Message Layers
Resets the message layers
Clears all of the characters from the message layers. Current message layer is
set to message0.
Also, font styles will return to defaults.
Position and/or layopt settings will take effect.
Show text[l]
Clear screen[l][ct]
Clear screen again[l][ct]
Needed? Explanation
Name
59
Sample Code
[current layer="message0"]
Show message0 layer[l]
[current layer="message1"]
Show message1 layer[l]
Parameter
Needed? Explanation
Name
sets ruby characters to show for kanji (“漢” gets “かん” and
text yes
“字” gets “じ”).
Sample Code
[ruby text="かん"]漢[ruby text="じ"]字
60
4.3.10. Links
Parameter
Needed? Explanation
Name
; Go to the scenario file second.ks in the place with the label: *start
[jump storage=second.ks target=*start]
Parameter
Needed? Explanation
Name
storage no set the scenario file to jump to. if omitted the current
61
scenario file
set the label to jump to. If omitted the script will be
target no
executed from the beginning of the file
Sample Code
[endlink] Hyperlink(Choice)Ending
closing tag for hyperlinks (choices)
62
[button ] Display a Graphical Button
Show a graphical button.
This is the image version of a [link] tag.
By implementing this button, it forces the scenario to stop, so you need to
include a jump target.
The location of the graphical button is determined by most recent [locate] tag.
However, if x and y are set, it will use those attributes to determine the location.
If it is moved from here, it will not remain on the call stack. In other words, you
cannot return to here.
After the jump you have to use the [cm] tag to stop displaying the button.
Parameter
Needed? Explanation
Name
sets the image for the button. Put this file in the image
graphic no
folder
set the scenario file to jump to. If this is omitted the current
storage no
scenario file is used.
sets the label to jump to. If this is omitted the beginning of
target no
the file is used
TyranoScript only (not KAG3). This name is used later to
reference this by tags like [anim] tag. Basically by setting
name no
this name you can set this as a JS class. If you divide them
with commas you can designate multiple names.
x no sets the button’s horizontal position
y no sets the button’s vertical position
width no sets the button’s horizontal position
width no sets the button’s width
height no sets the button’s height
set to true or false. The default is false. If set to true it
fix no moves the button to a fixed layer and this scenario file can
be continued even though the button is being shown. For
63
example if you always wanted to show a save button you
would use this. And if you wanted to remove a component
from a fixed layer you would user the [fixclear] tag
set as true or false. default is false. When the button is
savesnap no
pressed a save state (savesnap) is created.
set the folder. The foreground image defaults to fgimage
folder no and the background image defaults to bgimage but folder
can be set and used.
exp no Set JavaScript to be performed when you set this button
this can put the value of something into memory. When the
preexp no button is clicked any variables can declared in this can be
used.
Sample Code
64
Parameter
Needed? Explanation
Name
You can show a border of the area with a line. The style
of the line looks like this: “thickness:style:color”.
borderstyle no
Possible line types are solid double groove dashed
dotted etc
Sample Code
65
4.3.11. Live2D
Needed? Explanation
Name
Sample Code
[live2d_new name="nasuka"]
66
[live2d_show] Display Live2D Model
Parameter Needed? Explanation
name yes Live2D Model’s ID (name applied to model.json)
time no Transition time (1000=1 second)
Sample Code
[live2d_show name="nasuka"]
[live2d_hide name="nasuka"]
[live2d_opacity name="nasuka"]
67
[live2d_delete] Remove Live2D Model
Parameter Needed? Explanation
name yes Live2D Model’s ID (name applied to model.json)
Sample Code
[live2d_delete name="nasuka"]
[live2d_motion name="nasuka"]
[live2d_trans name="nasuka"]
68
[live2d_rotate] Rotate Live2D Model
Parameter Needed? Explanation
name yes Live2D Model’s ID (name applied to model.json)
rotate yes Angle of rotation
time no transition time (1000=1 second)
Sample Code
[live2d_rotate name="nasuka"]
[live2d_scale name="nasuka"]
[live2d_shake name="nasuka"]
69