ティラノスクリプトに強引に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]
・・・
・・・
・・・
変わった！！
まとめ
ティラノスクリプトでもVueは使える！！
ただし、ティラノスクリプトが優秀なのでVueを使う必要があるかは疑問ですけれど。。
それでは