どうも、雨丸です。
今回はRPG民のロマン、体力ゲージをティラノスクリプトで作ってみた話をします。
(ci-enで記事を書くのに不慣れなため、画像はなしです、すいません。)
作った理由はノリと好奇心です。
プラグイン化が自分には難しそうだったので、記事として残すことにしました。
なお、この記事はたぶんWebプログラミングの知識がないとわかりにくいです。ご了承下さい。
あと、この記事を読みやすくするために、文章のノリが軽いです。不快に思われた方には申し訳ありません。
使ったツール：ティラノスクリプトV6／HTML／CSS／JavaScriptの４つです。
ティラノスクリプトV6は出力が不安定（自分調べ）なので、ゲームにできるかどうかは自己責任でお願いします！
また、この記事を参考にして不利益が出ましても、筆者は責任を負いません。ご了承下さい。
前置きが長くなりましたが、次から体力ゲージ作りの話をしたいと思います。
０． 結論（ティラノスクリプト上級者向け）
記事が長いので一言でまとめてみます。
ksファイル内でCSSで体力ゲージを作り、JavaScriptで横幅を変数で動かしました。
わからない方、ごめんなさい。
１，きっかけ
※どうでもいい方は読み飛ばして下さい。
体力ゲージを作ろうと思ったきっかけは、現在自分が『魔法少女攻略中』というADVを公開中なのですが、そのゲームのメイン画面を見て思いました。
（あれ……？ コマンドバトルみたい……）
メイン画面は変数の条件が決まるまでループする仕様なのですが、
（これ、バトルできるくね……？）
と思いました。ゲーム脳です。
ボタンが技のコマンドに見えたんです（末期）
ということで、自分の体力ゲージ作りの挑戦が始まりました。
２．アイデア出し
『画像作りたくないな……』と思いました（唐突）
なので、ティラノスクリプトではCSSとJavaScriptが使えますので、CSSでまず体力ゲージ（以下HPゲージ）を満タンの状態で作ることにしました。
３．CSSで体力ゲージを画面に表示しよう
ティラノスクリプトではHTMLが表示できます。
加えてCSS、JavaScriptが使えます。
勘のいい方ならわかったと思いますが、
CSSでゲーム画面上にHPゲージを作りました。
そして、JavaScriptでゲージのCSSの幅を変更して、ゲージを動かしてしまおうというアイデアです。
具体的にアイデアの肝心なところを書きますと、
１．JavaScriptでCSSは書き換えられる。
２．CSSは色つきの四角形をHTMLで表現できる。
３．CSSで四角形の高さと幅を指定しているので、
幅をJavaScriptで変更できる。
４．それなら満タンの体力からダメージの数値を、
CSSで表現した四角のの幅にJavaScriptで変更してしまおう！
です。
わかりにくかったらすいません……。
そもそもHTMLやCSSやJavaScriptの知識がなければ、意味不明だと思います。
自分は本を読んで勉強しました。
ティラノスクリプト関係はWebからです。
『note』様、お世話になっております（謝辞）
４．考え方
少し脱線しますが、どうやってアイデアを練ったのかをここに書きます。
紙です。
コピー用紙に書きながら考えました。
超アナログです。
でもPC上でコードを打ちながら考えていたら、絶対完成しなかったと思います。
ゲームとしては作っていませんが。
HPゲージの仕組みだけできました。
※なお、まだ体力ゼロになった状態は試しておりません、すいません。対策は後述します。
５．PCでコードを打とう
話が戻ってきました。
アイデアの要点は、
HTMLの<div>タグで表現したHPゲージの幅（width）を、JavaScriptで体力からダメージ数を引いた幅に書き換える、でした。
なんで画像使わねえの？ と思われそうですが、筆者が面倒だっただけです。
なので、CSSを使いました。
６．ティラノスクリプトでコードを打とう
まず、CSSファイルをお好きなエディタで書きます。
自分は白枠の中に赤いHPゲージを表現したかったので、
HTMLで<div>タグを入れ子にして、それぞれにidで名前をつけました。
#waku
#gezi
です。
名前のセンスはないです。
なんでお前HTML詳しいねん、という話ですが、サイトを作っていただけです。あと、ティラノ製ゲーム用に勉強してました。
で、CSSファイルで、外側の枠とHPゲージの四角のサイズや色を指定します。
書き方はWebや専門書を参考にしてください（丸投げ）
指定するのはdivではなくid名です。
#waku
#gezi
です。
で、次はティラノスクリプトでHTMLを書きます。
[html]と[endhtml]タグです。
[html]タグの前に[loadcss]タグでCSSファイルをロードしておきます。
CSSファイルはdataフォルダの中のothersフォルダ内に置きます。
（パスはdataフォルダから指定して下さい。）
で、
[html top=100 left=100]
と、ksファイルに書きます。
これで、上から100px,左から100pxのところにHPゲージを表示させることができます。
四角は枠もゲージも<div>タグで表現します。
先ほども言いましたがこの時id（名前）をつけておきます。
枠とゲージを区別して、ゲージだけ幅を変えるためです。
で、
[endhtml]
タグで閉じて、後述のCSSファイルを書き、無事体力満タンのHPゲージが表示されれば完成……、ではないですね、はい。
HPが減らなければこの記事の意味はありません。
７．CSSファイルを準備しよう
順番がめちゃくちゃですがお許し下さい……。
まず、お好きなエディタでCSSファイルを書きます。
UTF-8で保存しましょう。
わからない方は調べて下さい（無責任）。
名前も適当でいいです。このファイルをあとで移動するので、デスクトップなど、
わかりやすい場所に保存しておきましょう。
CSSファイルの内容：
#waku（#geziの四角のサイズより）大きめ。 色は白。中に#geziを入れる。
#gezi
小さめ。横幅は満タンにした体力の値。
色は赤でもいいですが、自分の場合は『tomato』で色指定しました。
ここで、HPゲージとしてクオリティアップの呪文を書きます。
justify-content: flex-start;
です。わかりにくいですがコロンとセミコロンがあります。
日本語で言うと『左揃え』です。簡単です。
上下は適当に余白を#wakuの方でpaddingプロパティで付けて下さい。
話についてこられなくなっている方、すいません。
さあ、これで任意のティラノスクリプトのプロジェクトを
プレビューして、体力満タンのHPゲージが表示されたと思います。
されてなくても問い合わせないで下さい。バグを探しましょう。
何度も言いますが、
減らなきゃ意味がありません。
次でHPゲージから体力を奪いましょう。（言い方）
８．JavaScriptを書こう
待って！ ブラウザ閉じないで！
仕組みは簡単ですので！
その前に、マクロについて説明します。
大丈夫！ 怖くないよ！
えー、マクロについては、
富井サカナ様の『note』を参考にさせていただきました。
ぜひご一読下さい。『note』はすごい。
で、シナリオフォルダにマクロ専用のksファイルを作ります。
ファイル名はなんでもいいです。
必要なマクロは２つです。
i. 体力に初期値を入れるマクロ
ii. 攻撃（体力を減らす）マクロ
上記の２つです。
で、iは、[iscript]タグで書きます。
で、重要なのが、体力をティラノスクリプト上の変数(tf.xxx)にすることです。
じゃないと減りません。
で、iiには、
コメントも入れます。
ダメージは今回は固定ですので、
１００のダメージ！[p]
とします。コメントなのでご自由にどうぞ。
で、再び[iscript]タグの出番です。
話がそれますがカッコを間違えないようにしてください。
自分はよく間違えます。
[iscript]タグ内で
[eval]タグで体力の変数からダメージの値を引いて、再び入れます。
上書きと同じです。
そして、この記事で一番重要なところです。
document.querySelector(‘#gezi’).style.width=`${f.tairyoku}`px;
これがHPゲージをダメージの値ぶん減らす魔法の呪文（違）です。
『f.tairyoku』の部分が体力の変数です。
『#gezi』を囲っているのはダブルクォーテーションではなく、シングルクォーテーションです。
$の横のシングルクォーテーションに似ているモノは、shiftキーを押しながら＠キーを押すと出ます。
間違えないようにしましょう。最後のセミコロン忘れにも注意です。
で、ここからはもう、自由でいいのですが、
ダメージを受けた方のコメントを書きましょう。
「まだまだですね」[p]
とかで十分です。
[endmacro]タグで閉じて下さい。
９．シナリオファイルでマクロを使おう
HPゲージは出ましたか？
出てない？ バグを探して下さい。
シナリオファイルは普通でいいです。
普通にストーリーを書きましょう。
で、この記事の項目８で作ったiiのマクロを使う前に、iのマクロを使って、
体力の変数を初期化しておきます。しておかないと、体力が計算されません。
で、攻撃のシーンを書き、iiのマクロを使います。
赤いゲージが減るはずです。
アニメーションのようになめらかに減らないのが残念ですが、自分の精一杯はここまでです。
で、攻撃マクロを体力がなくなるまでやってみましょう。
実は、体力の変数でマイナスの値はまだ試しておりません。申し訳ありません。
対策としては、if文でループにして、条件式で『体力変数 <= 0』の条件分岐を作れば、エラーは出ないようになると思います。
以下は応用です。
[glink]タグでボタンを作って、すぐ下にラベルを置いてジャンプさせると攻撃感が出ると思います。
ダメージを乱数にしたり、敵の反応を体力の残り具合で条件分岐させるといいと思います。
わかりにくかったらすいません。
では、この長すぎる記事を最後までお読みいただき、誠にありがとうございました！
お疲れ様でした！
おまけ：
攻撃を相手が受けた際、相手の立ち絵をtime=100ほどで消したり表示させたりすると（４回ほど）、ダメージを受けた感があります。
蛇足でした！
ありがとうございました！
この記事にはコメントできません。