In TyranoScript, tags only apply to certain layers, and it is necessary to understand the hierarchy of the layers, who is higher and who is lower, so let's introduce them here.
Base Layer#
There is only one base layer, and it is always below all other layers. This layer is used to display the background, and the layer="base" attribute is used to specify the layer.
To hide the background image, use [freeimage layer="base"].
Foreground Layer#
This layer is used to display character illustrations. By default, there are three layers, and the layer="0" layer="1" attributes are used to specify the layers.
Text Layer#
This layer is used to display text information. Use [current layer="message0"] [current layer="message1"] to specify the layers.
Free Layer#
This layer is used to place buttons and clickable elements. By default, it is not displayed, but when there are buttons, it is displayed on the top layer and the script stops.
Note: There is no layer="free" attribute.
Use the [cm] tag to hide the free layer and clear its contents. Therefore, after using jump, you need to use [cm] before continuing with the script.
Fix Layer#
This layer is specified using layer=fix and is used to place elements that always exist on the screen. Only [clearfix] can be used to clear this layer.
Related Source Code#
The code related to layers is located in tyrano\plugins\kag\kag.layer.js.
The KAG code for initializing the project is compressed with no spaces or line breaks, but the variable names are not obfuscated, so it can be easily formatted.
After formatting, when you look through it, besides the layers mentioned above, there are some magical places -
var layer_menu = $(
"<div class='layer layer_menu' style='z-index:1000000000;display:none' align='center'></div>"
)
layer_menu
.css('width', this.kag.config.scWidth)
.css('height', this.kag.config.scHeight)
.css('position', 'absolute')
Suddenly, a menu layer appears, which is quite awkward because the official website does not explain it at all. As mentioned before, some pages in this project are written in .ks files, but some pages are written in HTML and involve the core written in JavaScript, which really confuses me.
This menu layer is actually the menu of the gear in the lower right corner, and it is also used when loading pages.
TIPS: Run the command below to see the menu appear.
For future modifications, you will also need to add your own title layer, so let's talk about layers in the next part! See you next time!