将WebGAL整合成太微插件

林一二2024年05月31日 02:39

首先是作为游戏化的剧情部分,其次也可以作为教程使用。通过插件化,让它能和其它游戏玩法结合起来。

重构

WebGAL目前和react-redux强绑定,我复制代码到一个太微插件库里,然后把 store 改为操作临时条目,把 react 改为用 list 或 if 监听筛选器变化的 wikitext。

可以通过写一个 redux-wiki 的适配器,做加法,让现有代码跑在 wiki 上,并基于 tw-react 运行, 但我还是希望做减法,虽然对代码改动更多升级更难,但现有功能也基本够用,最多以后只用当前版本的编辑器,但整体运行时体积会变小,更适合纯网页端运行。通过拆开后重新装回去,也有助于我了解低代码Galgame是如何实现的。

排查

  • Cannot find module named 'url' required by module '$:/plugins/linonetwo/tidgal/widget/index.js'
    • 这个报错是太微提供的,来自 pixi 引用的 url 包,import_url=require(\\\"url\\\") ,不知为何 pnpm 安装了但是没打包进去,反而留下了 require。此外还有对 util 包的 require
    • 可能是 Modern 框架的配置问题
      • 的确是它的 nodejsBuiltinModules 导致的,需要加一个配置让它允许关闭这个默认列表
      • 更新了版本,加上了
  • 调用 startGame 开始后,状态是有了,但是没显示东西
    • 因为 intro 等方法里之前是用 react-dom 操作的,现在得改成把 html 写入 temp 条目然后渲染其内容
  • Pixijs画的内容看不到
    • 成功创建canvas后,用base64创建texture,但还是看不到
    • 用Edge上的pixi debugger也看不到
    • 发现 texture 的 scale 不对,原来是 width 是 1,所以 const scaleX = this.stageWidth / originalWidth 算出来巨大无比
    • 发现本该是空的 loader.resources?.[url]?.texture 返回了一个对象,但这个贴图应该是坏的,所以什么也没加载出来
    • 原来是 this.assetLoader.add 的时候如果只有第一个值就会当做 URL 来加载,所以我应该在这里把 base64 字符串作为第二个参数传入,就可以通过 base64 URL 的形式从本地加载资源了
      • this.assetLoader.add(front.url, base64String)data:${tiddler.fields.type ?? 'image/png'};base64,${tiddler.fields.text}
  • Pixijs立绘宽高超出不够高的 widget
    • 动态获取宽度
  • 本地可以加载图片,到了 GithubPages 上就不行了,难道是在线版禁止了 base64 图片加载?
    • 部署时用了 external image,会从 _canonical_uri: "./media/ExampleGame%252Fbackground%252FWebGAL_New_Enter_Image.png" 懒加载,所以 getTiddlerText 取不到值
    • 这种情况,直接把 _canonical_uri 当做 URL 返回即可

概念

脚本里的语句叫 sentence,经过 gameScript 里的方法扩充成 JSObject 后称为演出 perform。

演出会决定是否自动执行下一步;执行演出时,会通过 performController.arrangeNewPerform 将控制权交给 PerformController,随后可能会通过定时任务执行下一个演出。

做一个太微的游戏化插件 开发游戏

Undefined widget 'supertag-form'

Code
首先是作为游戏化的剧情部分,其次也可以作为教程使用。通过插件化,让它能和其它游戏玩法结合起来。

!! 重构

WebGAL目前和react-redux强绑定,我复制代码到一个太微插件库里,然后把 store 改为操作临时条目,把 react 改为用 list 或 if 监听筛选器变化的 wikitext。

可以通过写一个 redux-wiki 的适配器,做加法,让现有代码跑在 wiki 上,并基于 tw-react 运行, 但我还是希望做减法,虽然对代码改动更多升级更难,但现有功能也基本够用,最多以后只用当前版本的编辑器,但整体运行时体积会变小,更适合纯网页端运行。通过拆开后重新装回去,也有助于我了解低代码Galgame是如何实现的。

!! 排查

* `Cannot find module named 'url' required by module '$:/plugins/linonetwo/tidgal/widget/index.js'`
** 这个报错是太微提供的,来自 pixi 引用的 url 包,`import_url=require(\\\"url\\\")` ,不知为何 pnpm 安装了但是没打包进去,反而留下了 require。此外还有对 `util` 包的 require
** 可能是 Modern 框架的配置问题
*** 的确是它的 `nodejsBuiltinModules` 导致的,需要加一个配置让它允许关闭这个默认列表
*** 更新了版本,加上了
* 调用 startGame 开始后,状态是有了,但是没显示东西
** 因为 intro 等方法里之前是用 react-dom 操作的,现在得改成把 html 写入 temp 条目然后渲染其内容
* Pixijs画的内容看不到
** 成功创建canvas后,用base64创建texture,但还是看不到
** 用Edge上的pixi debugger也看不到
** 发现 texture 的 scale 不对,原来是 width 是 1,所以 `const scaleX = this.stageWidth / originalWidth` 算出来巨大无比
** 发现本该是空的 `loader.resources?.[url]?.texture` 返回了一个对象,但这个贴图应该是坏的,所以什么也没加载出来
** 原来是 `this.assetLoader.add` 的时候如果只有第一个值就会当做 URL 来加载,所以我应该在这里把 base64 字符串作为第二个参数传入,就可以通过 base64 URL 的形式从本地加载资源了
*** `this.assetLoader.add(front.url, base64String)` 和 `data:${tiddler.fields.type ?? 'image/png'};base64,${tiddler.fields.text}`
* Pixijs立绘宽高超出不够高的 widget
** 动态获取宽度
* 本地可以加载图片,到了 GithubPages 上就不行了,难道是在线版禁止了 base64 图片加载?
** 部署时用了 external image,会从 `_canonical_uri: "./media/ExampleGame%252Fbackground%252FWebGAL_New_Enter_Image.png"` 懒加载,所以 `getTiddlerText` 取不到值
** 这种情况,直接把 `_canonical_uri` 当做 URL 返回即可 


!! 概念

脚本里的语句叫 sentence,经过 gameScript 里的方法扩充成 JSObject 后称为演出 perform。

演出会决定是否自动执行下一步;执行演出时,会通过 `performController.arrangeNewPerform` 将控制权交给 `PerformController`,随后可能会通过定时任务执行下一个演出。