ティラノスクリプトに強引にVueを入れてみる
こんにちは、ノベルゲームをHTML5を用いて気軽に作成できる
ティラノスクリプトをご存知でしょうか？
最近、ノベルゲーム的な表現がしたくて触っているのですが。
使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい！
という思いが強くなって来たので、強引にVueを入れてみました。
強引にVueを入れる方法
やり方はとてもシンプルです。
index.htmlにVueのタグを入れるだけです
cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしており
Vue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。
こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。
そして、bodyタグの下の方でvue用のdivを定義して。
あとはcssでposition:absoluteとかでレイヤー化しておきます。
次に、Vueをインスタンス化する必要がありますが。
やり方としては、ティラノスクリプトはJSを実行できる
[iscript]タグを利用します。
例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに
次のように書きます
結果
こんな感じで、Hello Vue!!が出てくる
Vueを操ってみる
Vueを操るには[iscript]タグを利用していきます。
先ほどの部分を少し改変します。
first.ksでnew Vueしたインスタンスをティラノスクリプトのゲーム変数に格納します
;Vue読み込み [iscript] var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) // システム変数にVueを追加 f.vue = app; [endscript]
そうすると、例えばscene1.ksなどでvueインスタンスを呼び出すことができるので
こんな感じでmessage変数にアクセスできるはず！
[iscript] f.vue.message = "こんにちは"; [endscript]
・・・
・・・
・・・
変わった！！
