TyranoScript Tutorial Part 4: Using Spine

This should be the real first explanation for customizing the TyranoScript kernel.

Pre-knowledge

TyranoScript is a domain-specific language, but it runs in the browser, so its functionality is definitely implemented in JavaScript. To run the script, it needs to be “tokenized” first, and then the words are combined into a group according to certain rules. (The code for this functionality is in the kag.parser.js file.)

After this process, the information printed by default in the console is obtained:

After reading such an object, the framework will run different functions according to different tags, and these functions are distributed in the kernel folder’s files starting with kag.tag.

Adding a Command

The properties in the tyrano.plugin.kag.tag object are all corresponding to the running functions mentioned above. For example, the [perform_show] command will run the tyrano.plugin.kag.tag.perform_show start function:

tyrano.plugin.kag.tag.perform_show = {
  pm: {
    name: "", // Used to differentiate when showing multiple identical expressions
    storage: "",
    width: "",
    height: "",
    left: "",
    top: "",
  },
  start: function (pm) {
    var perform = document.querySelector("#perform" + pm.name);
    if (!perform) {
      perform = document.createElement("div");
      perform.setAttribute("id", "perform" + pm.name);
      perform.setAttribute("class", "perform");

      document.querySelector("#tyrano_base").appendChild(perform);
      new spine.SpinePlayer("perform" + pm.name, {
        jsonUrl: "data/fgimage/default/perform/" + pm.storage + ".json",
        atlasUrl: "data/fgimage/default/perform/" + pm.storage + ".atlas",
        animation: pm.storage,
        showControls: false,
        premultipliedAlpha: true,
        backgroundColor: "#00000000",
        alpha: true,
      });
    }
    perform.setAttribute(
      "style",
      "width: " +
        pm.width +
        "px;height: " +
        pm.height +
        "px;position: absolute;left: " +
        pm.left +
        "px;top: " +
        pm.top +
        "px;",
    );

    this.kag.ftag.nextOrder();
  },
};

this.kag.ftag.nextOrder() is necessary. This function prompts the program to run the next command.

Based on this running principle, as long as you add properties to the tyrano.plugin.kag.tag object, you can add custom commands (like the perform_show added above).

[perform_show name=“fx” storage=“fx” height=“100” width=“100” top=“500” left=“500” ]

This is an example of usage. The attributes such as name, storage, etc., in the command will be passed to the pm parameter.

By the way, the added functionality integrates Spine into Tyrano. We can find the official JavaScript runtime library on the Spine website, but unfortunately, these libraries seem to lack documentation…

http://esotericsoftware.com/spine-runtimes

https://github.com/EsotericSoftware/spine-runtimes/tree/3.8/spine-ts