【備忘録】ティラノスクリプトでHTMLを使う（※Ver506a時点での内容です）
こんにちは。HTMLが大好き、ななづこです。
今回は、ティラノスクリプトでHTML（とcssとjs）を使おうというお話です。
基本的な内容なので、既にいろんな方がまとめていると思うのですが、
自分の備忘録も兼ねてまとめました。
HTML（とcssとjs）があれば何でもできる！
※以下はティラノスクリプトVer506a時点での内容です。
----------------------------------------
【2021.03.08 更新】
・jsの記述方法の解説が不足していたので、追記しました。
・誤表記修正しました。
----------------------------------------
▼もくじ
１．使用するタグ【3/8 更新】
２．[html]が活躍するところ
３．コードの例【3/8 更新】
４．[html]とティラノスクリプトタグの併用について
５．さいごに
１．使用するタグ【3/8 更新】
※3/8 [loadjs]の誤表記を修正しました。[iscript]の解説を更新しました。
[html]～[endhtml]
この中にhtmlタグを記述していきます。
表示させたいタイミングで、シナリオファイルに記述します。
特徴としては、
・ゲーム画面の一番手前に表示される
・ティラノスクリプトのタグも併用できる（詳しくは後記）
・消したい時は[cm]で消せる
という感じになります。
詳しいことは公式のタグリファレンスをご参照ください。
[html name="test"]
<p>test</p>
[endhtml]
分かる方向けに説明しておくと、このタグが実行されると
index.htmlの下記の位置（layer_freeの中）に<div>が挿入されます。
※ティラノスクリプトVer506a現在
（デバッグの「Elements」タブで確認できます）
nameを指定すると、上記のように親要素に同名のclass名がつきます。
指定しなくても大丈夫です。
[loadcss]
外部cssファイルを読み込むタグです。
first.ksなど、最初の方に記述しておきます。
cssファイルは「data/others」の中に置いてください。
[loadcss file="./data/others/myStyle.css"]
[loadjs]
外部jsファイルを読み込むタグです。
first.ksなど、最初の方に記述しておきます。
jsファイルは「data/others」の中に置いてください。
[loadjs storage="myScript.js"]
※3/8 「loadcss」と表記してしまっていましたが、正しくは「loadjs」です。
[iscript]～[endscript]
ティラノスクリプトでjsを埋め込むタグです。
外部jsの関数を呼び出したり （詳しくは「３．コードの例」）、
「一か所でしか使わないしコードも短いな…」なんて時に使います。
[iscript]
console.log("テスト");
[endscript]
２．[html]が活躍するところ
（『リベリオン・ヒーローズ』より）
例えばこの画面の表情パーツのボタンは、htmlベースで作りました。
ボタンの文字・色・配置などなど、htmlとcssで実装しています。
これは「画像でいちいち書き出して座標ちまちま指定するのめんどくさい」
と思ったので、htmlで組んだ記憶があります。
画像が減るのでゲームの容量もちょっと軽くできます。
この画面もhtmlを使っています。
スマホ画像のアニメーションはティラノスクリプトの[anim]ですが、
アイコンと台詞のところはhtmlとcssで配置して、動きはjsで作ってます。
これは、下からすいすい上がって行くアニメーション演出がやりたくて、
「ティラノスクリプトわからん…！jsでなら確実にできるのに…！」
と思ったので、htmlベースで実装しました。web脳です。
３．コードの例【3/8 更新】
※3/8 外部jsの説明を追記しました。
htmlで作ったボタンで、他のラベルにジャンプさせるサンプルです。
html
[html]
<div class="test-btn">ボタンです</div>
[endhtml]
css
/* ボタンのデザイン */
.test-btn {
color: #000;
background: #fff;
transition: .3s;
}
/* マウスが乗っている時のデザイン */
.test-btn:hover {
color: #fff;
background: #000;
}
js（埋め込む場合）
[iscript]
// 「.test-btn」がクリックされた時の動作
$(".test-btn").click(function(){
// jumpタグを実行
tyrano.plugin.kag.ftag.startTag("jump", {storage:"title.ks", target:"*start"});
});
[endscript]
「tyrano.plugin.kag.ftag.startTag」を使えば、
jsからもティラノスクリプトのタグを実行することが可能です。
今回の例では、jumpタグを実行させてみました。
js（外部jsを使う場合） ※3/8 追記
外部jsを使う時は、ちょっと書き方が変わります。
htmlをクリックしてjsを動かす…という動作をさせたい場合、
htmlが記述された後にjsを記述しないと動いてくれません。
なので外部jsには、任意のタイミング（htmlを記述したあと）で
jsの機能を設定できるように記述します。
▼外部jsでの記述
function btnTest(){
// ↓埋め込みjsと同じ記述
$(".test-btn").click(function(){
tyrano.plugin.kag.ftag.startTag("jump", {storage:"title.ks", target:"*start"});
});
// ↑埋め込みjsと同じ記述
};
「btnTest」という関数に、呼び出したい機能をセットします。
この時点では、まだボタンを押しても反応しません。
▼ティラノスクリプトでの記述
[iscript]
btnTest();
[endscript]
ボタンになるhtmlを表示したあとに記述して
外部jsに登録した内容を呼び出します。
これで「click」の動作が付いて、ボタンを押すと反応するようになります。
「btnTest」は好きな言葉に変えていただて大丈夫です（半角英字）
４．[html]とティラノスクリプトタグの併用について
公式のタグリファレンスにもある通り、
[html]～[endhtml]の中にはティラノスクリプトのタグも記述できるため、
変数やif文を使うことができます。
例えば、クリア状況によって出し分けたい時は…
[html]
[if exp="sf.gameclear == true"]
<p class="hogehoge">ゲームクリアしたよ</p>
[else]
<p class="hogehoge">ゲームクリアしてないよ</p>
[endif]
[endhtml]
こんな感じで記述できます。
５．さいごに
ティラノスクリプトを触る時、私は吉里吉里という前世の記憶と
htmlという相棒で戦っているので、ティラノスクリプトそのもののことは
実のところまだよくわかっていなかったりします。
あれこれ試行錯誤しながら組んでいくのがとても楽しいです。