強引に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を使う必要があるかは疑問ですけれど。。

それでは