TyranoScript 从入门到魔改 3 Spine 播放

May 24, 2020TyranoScriptcodingSpine

这算是真正魔改内核的第一次讲解。

前置知识

TyranoScript 是一种领域专用语言,但是运行在浏览器,功能肯定还是 JavaScript 实现的。要把脚本运行起来需要先把脚本“分词”,然后按规则把词组合成一组。(这个功能的代码在 kag.parser.js 文件里)

完事之后得到的就是默认在控制台打印的信息:

consolelog

在读取这样的对象之后,框架就会根据不同的 tag 运行不同的函数,而这些函数分布在内核文件夹的 kag.tag 开头的文件里。

添加一个命令

tyrano.plugin.kag.tag 对象里的属性全都是上面说的对应的运行函数,例如 [perform_show] 这个指令,会运行 tyrano.plugin.kag.tag.perform_show 的 start 函数:

tyrano.plugin.kag.tag.perform_show = {
  pm: {
    name: '', // 同时显示多个相同表情时作区分
    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() 是必须要的,这是提示程序跑下一句命令的函数。

根据这个运行的原理,只要在tyrano.plugin.kag.tag对象里加属性就能新增自定义命令了(上面的 perform_show 就是新增的)

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

这是一个使用示例,命令中的 name storage 等属性都会传到 pm 这个参数里。

顺便说一下例子添加的功能是为 Tyrano 集成 Spine,我们可以在 Spine 官网找到官方的 JavaScript 运行时库,但是不太友好的是这些库似乎没有文档…

http://esotericsoftware.com/spine-runtimes

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

竟然有恰饭时间?!

https://store.steampowered.com/app/1224840/_/

虚忆定格的制作已经过半啦,了解一下吗?😘


暂时没有留言,要抢沙发吗?
留言
theme UsubeniFantasy
© 2018- SSShooter
一转眼 已是
powered by Gatsbyjs