f:id:hollywis:20200808221334p:plain

こんにちは、ノベルゲームをHTML5を用いて気軽に作成できる

ティラノスクリプトをご存知でしょうか?

tyrano.jp

f:id:hollywis:20200809015734p:plain

最近、ノベルゲーム的な表現がしたくて触っているのですが。

使われているJsライブラリがjQueryになっていて、やはりVueの中で実行したい!

という思いが強くなって来たので、強引にVueを入れてみました。

強引にVueを入れる方法

やり方はとてもシンプルです。

index.htmlにVueのタグを入れるだけです

cliを入れたり、Nuxt.js上で実行したかったのですが、ティラノスクリプトはかなり複数のファイルとリンクしており

Vue化するには色々と問題が多かったため、シンプルにタグを入れる方法でいきます。

f:id:hollywis:20200808222156p:plain

こんな感じで、index.htmlの上の方でcdn版のvueを読み込みます。

そして、bodyタグの下の方でvue用のdivを定義して。

あとはcssでposition:absoluteとかでレイヤー化しておきます。

f:id:hollywis:20200808222307p:plain

次に、Vueをインスタンス化する必要がありますが。

やり方としては、ティラノスクリプトはJSを実行できる

[iscript]タグを利用します。

例えば,最初に実行されるfirst.ksや、シナリオ読み込み時に必ず実行されるmake.ksに

次のように書きます

f:id:hollywis:20200808222819p:plain

結果

f:id:hollywis:20200808221334p:plain

こんな感じで、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]

・・・

・・・

・・・

f:id:hollywis:20200809015507p:plain

変わった!!

まとめ

ティラノスクリプトでもVueは使える!!

ただし、ティラノスクリプトが優秀なのでVueを使う必要があるかは疑問ですけれど。。

それでは

Receive the latest news in your email
Table of content
Related articles