TyranoScript Tutorial Part 2: Layer

The tags in TyranoScript only apply to certain layers, so it’s necessary to understand the hierarchical relationship, who’s higher, who’s lower. Let’s start with an introduction.

Base Layer

There is only one base layer, and it definitely stays below all other layers. This layer is used to display the background, and when specifying the layer, use layer="base".

To hide the background image, use [freeimage layer="base"].

Foreground Layer

Used to display character illustrations, defaults to three layers, using layer="0" layer="1" to specify the layers.

Text Layer

Layer for displaying text information, use [current layer="message0"] [current layer="message1"] to specify the layers.

Free Layer

Used to place buttons and clickable elements, not visible by default. When buttons are present, they are displayed on the top layer, and the script stops.

Note: There is no layer=“free” notation.

Use the [cm] tag to hide the free layer and clear internal elements. So, after using jump, it’s necessary to [cm] first in order to continue running the following script.

Fix Layer

Specified by layer=fix, used to place elements that always exist on the screen, and only [clearfix] can be used to clear them.

Related Source Code

The code related to layers is located in tyrano\plugins\kag\kag.layer.js.

The init project’s kag code is all minified with spaces and line breaks, but the variable names have not been obfuscated, so a simple formatting is all that’s needed.

After formatting, when you look through it, there are some mysterious places in addition to the layers mentioned above ——

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 pops up, which is quite awkward, as the official website does not mention it at all. As mentioned earlier, some pages in this project are written in .ks files, while others are written in HTML, and even involve core JavaScript, which really confuses me.

This menu is actually the menu from the gear icon in the bottom right corner and is also used to load pages.

TIPS: Running the command below will make the menu appear

For future modifications, you’ll also need to add your own title layer, so let’s talk about layers first! See you in the next post!