【ティラノスクリプト】知識０でも楽に見栄え良くしたいメモ
拙作フリーゲーム「竜と白昼夢 -Dragons & Daydream-」がアプデ分含め無事完成しましたので、参考にさせて頂いたページ等をまた次の製作の備忘録として記録させて頂きます。
制作したゲームはこちら↓から！（ブラウザ・スマホでもプレイできます）
前置き
ティラノスクリプトはHTMLやCSS、Javascript？を使えば色々できるらしいけど何も知識ない…調べても難しくて何が何だかよくわからない…頼れるものは公式のタグリファレンスとティラノに落とし込んだ形で色々解説して下さってる方々の記事（大感謝）しかない…という作者のブックマーク＆覚え書きです。
色々無知ゆえに何かおかしな事を書いているかもしれませんが、もしここ変だぞ！という所がありましたらこっそりご指摘いただけますと幸いです。
apngで目パチ口パク
目パチと口パクはapngでアニメーションpngを作成して実装しました。しかしブラウザだと環境によってはapng再生されてないのかな？
そしてそんな事をやっている間に公式で目パチ口パク機能↓が搭載されたという…次は大人しくこちらを使わせて頂こうかな笑
とりあえず今回の方法をいちおうメモ。
apngの作成には「ApngComposite」というフリーソフトを使わせて頂きました。こちらより↓
目パチはそのまま表情差分に設定するだけですが、口パクはマクロを作って毎セリフ開始時にアニメ表示、セリフ終了時に静止画に切り替えという具合で無理やり実装しています。
↓こんな感じで口パーツ差分は閉じた状態の静止画と口パクアニメに「_anim」を付ける形でそれぞれ準備して
[chara_layer name="c1" part="kuchi" id="egao1" storage="egao1.png" zindex="2"]
[chara_layer name="c1" part="kuchi" id="egao1_anim" storage="egao1a.png"]↓こんな感じでマクロを設定
;キャラの口パク(c=キャラ名 f=表情)
[macro name="talk"]
[wait time="200"]
[eval exp="tf.kuchi = mp.f + '_anim'"]
[eval exp="tf.kuchi2 = mp.f"]
[eval exp="tf.c = mp.c"]
[chara_part name="%c" kuchi="&tf.kuchi" time="1"]
[endmacro]
;口パク終わり
[macro name="p2"]
[chara_part name="&tf.c" kuchi="&tf.kuchi2" time="1"]
[p]
[endmacro]口パク始まりのマクロ[talk]ではf="◯"で指定した表情に「_anim」を付けてアニメの方を表示しています。口パク終わりは[p]の代わりにマクロ[p2]を使い、セリフの終わりに[talk]で指定した表情の静止画に切り替えます。（[talk]で指定したキャラ名、表情を[p2]でもそのまま使うためmpをtfに代入しています）
↓毎セリフこんな感じで記述
[talk c="c1" f="egao1"]
ここにセリフ[p2]シナリオが短い＆立ち絵差分なし＆表情差分も少ないので出来ましたが、ボリューム大の長編だとちょっと面倒かも。
ちなみに差分画像は前髪とかが被ることも多いので（あとapngでアニメにするとき透過画像だと残像が残るんだったかも）、こんな感じ↓でレイヤーマスクでベースごと四角く切り取って作成してます。
画像サイズは余分カットしたら容量削減できるかな？と思ったけど数kbの差だったので立ち絵そのままの大きさにしてました。
戦闘エフェクトの表示
このような綺麗な戦闘エフェクトの表示はこちら↓を参考にさせて頂きました。
書かれているままに書き換えてgifアニメのエフェクト素材表示させて頂いてます。かっこいいエフェクト素材はこちらからお借りしました！↓
そして可愛いモンスター、美麗背景はこちらから！↓
ハイクオリティな素材を無償でお借り出来て有難い限りでございます。サイドビューの戦闘画面が可愛くて好きだから素材のおかげで綺麗に作れて嬉しいな～
ちびキャラを何枚も描いて動かすのはしんどかったので（倒れ差分描くだけで大変だった）せめてと思いkeyframeでモチモチ変形してみましたが、それだけでも結構かわいくなったと思います。↓
;待機モーション
[keyframe name="chara"]
[frame p=0% y="1" scaleX="1" scaleY="1"]
[frame p=50% y="-1" scaleX="0.98" scaleY="1.02"]
[frame p=100% y="1" scaleX="1" scaleY="1"]
[endkeyframe]
;待機モーション２（ぴょこぴょこ）
[keyframe name="chara2"]
[frame p=0% scaleX="1" scaleY="1"]
[frame p=25% x="-3" y="-3" scaleX="0.97" scaleY="1.03"]
[frame p=50% x="-3" y="3" scaleX="1" scaleY="1"]
[frame p=75% x="3" y="-3" scaleX="0.97" scaleY="1.03"]
[frame p=100% x="3" y="3" scaleX="1" scaleY="1"]
[endkeyframe]セーブデータに名前などを表示
コンフィグとセーブロード画面はHTMLわからないとさっぱりなのでそのまま使わせて頂こうと思ってたのですが、どの辺まで進んだとか選択したモードとかだけでもわかるといいなぁ～と思って↓こちらを参考にさせて頂きました。
で、save.htmlの方はよくわからないのでいじらず、「tyrano/plugin/kag/kag.menu.js」にこのような感じで…↓
doSave: function (num, cb) {
var array_save = this.getSaveData(),
data = {},
that = this;
if (null == this.snap) this.snapSave(this.kag.stat.current_save_str, (function () {
(data = that.snap).save_date = that.getDateStr() + ' ' + that.kag.stat.f.name + ' ' + that.kag.stat.f.datetext + ' ' + that.kag.stat.f.mapname + ' ' + that.kag.stat.f.mode;
array_save.data[num] = data;
$.setStorage(that.kag.config.projectID + "_tyrano_data", array_save, that.kag.config.configSave);
that.kag.trigger("storage-save");
"function" == typeof cb && cb(data)
}));「doSave:～」の６行目にf.name（名前）、f.datetext（何日目）、f.mapname（現在マップ）、f.mode（選択モード）の４つの変数を空白挟んで追加しています。これでsave.htmlの{{:save_date}}の部分に日時に続いて変数が追加で表示されているっぽいです(多分)。
カーソルオンで画像を変化
「竜と白昼夢」おまけページ
こちらのおまけページのボタンは、↓の記事を参考にカーソルオンで画像が明るく＆下にちょっと動くという動きを入れています。
準備したのは絵を入れた四角い画像のみで、文字は[ptext]で乗せ、下地部分をボタンにすると文字よりも上のレイヤーに来てしまうので（設定で変えられるかもですが）同じ大きさのダミー透明画像を重ねてボタンに設定するようにしています。
文字入れした画像準備して、明るく色調変更して下に数pxズラした画像をもう１枚準備して…という作業をメニューの個数分するのは大変なので、この方法だとすごく楽です。
ボタンセットがこんな感じで↓
[image layer="1" name="button,button1" storage="extra/1.png" left="210" top="120"]
[button name="button,button1" x="210" y="120" fix="false" graphic="../fgimage/extra/0.png" target="*main" enterse="hover.mp3"]
[ptext layer="1" name="button,button1" x="220" y="205" text="メインシナリオ回想" size="20" color="0xf5f0e2" edge="2px 0x141313" bold="bold"]上記ページを参考に続きにこんな感じで書いてあります。↓ css？の部分とか調べたのを適当に入れてみたら何か動いたという感じなので書き方が合っているかどうか不明なのですが…
[iscript]
$(".button1").hover(
function(e) {
$('.button1').css({'filter':'brightness(1.2)'});
$(".button1").animate({top:'+=2px'}, 100);
},
function(e) {
$('.button1').css({'filter':'brightness(1)'});
$(".button1").animate({top:'-=2px'}, 100);
}
);
[endscript]ちなみに選択肢用glinkやfixボタンなど、表示されてる時にセーブしてロードした時に表示しっぱなしになっているボタンについてはロード時に効果が切れてしまって困っていたのですが、上記の [iscript]をmake.ksに書いておいて[call]で呼び出すようにしたら大丈夫になりました。
for文で沢山のものを簡単に表示
下にいっぱい並んでいる丸は31個ありクリックすると各ページに飛べるボタン（未発見の場合は灰色表示）になっているのですが、一個ずつX座標指定して表示していたら結構大変です。
というわけで、↑の公式ライブラリよりfor文プラグインを利用させて頂いてこのように表示しました。（選択中の丸の上にオレンジ色の丸ポチ画像を乗せるため、カラーor灰色の下地画像を表示した後に透明のダミー画像でボタンを乗せる形にしています）↓
[eval exp="tf.bukix = 160"]
[for name="tf.bukinum" from="1" to="31"]
[eval exp="tf.bukinum2 = '*arms'+tf.bukinum"]
[eval exp="tf.joken = 'sf.bukizukan' + tf.bukinum + '== 1'"]
[if exp="&tf.joken"]
[image layer="1" name="buki" storage="ap.png" left="&tf.bukix" top="630"]
[else]
[image layer="1" name="buki" storage="ap3.png" left="&tf.bukix" top="630"]
[endif]
[button graphic="../fgimage/apdummy.png" x="&tf.bukix" y="630" target="&tf.bukinum2" enterse="hover.mp3"]
[eval exp="tf.bukix = tf.bukix + 30"]
[nextfor][for]を使うことでtf.bukinumという変数に1～31の数字を順に代入しながら繰り返してくれています。
そのためtf.bukinum2で指定した飛び先のラベルはそれぞれ「*arms1」～「*arms31」になり（飛び先で武器番号の代入だけして合流してます。本当はpreexpとか使ってラベル大量に作らなくていいようにしたかったんですが何か上手くいかなかったのでゴリ押し）、
tf.jokenには「sf.bukizukan1 == 1」～「sf.bukizukan31 == 1」までの条件がそれぞれ入り、
X座標にはtf.bukixにそれぞれ繰り返した分30が足された数字が代入されているため30pxずつ横にズレて表示されていっています。
余談
システム変数でのモンスター&武器の発見済判定も配列使ってやりたかったんですけど、初回起動時のみ配列の定義して…という感じでやろうとしたのが何か上手くいかず結局大量に連番の名前付けたシステム変数作る形になりました。
そんで変数で変数指定して分岐させるために[if]のexpにはエンティティ使えたんですけど、[eval]のexpに使おうとすると上手くいかず…変なミスしてたかもなのでまた試してみたいです。
さらに余談
最初なぜか図鑑ページを表示してから戻った時のみ色々な場所でこういうエラーが出てフリーズするという事があり↓
[if]の閉じ忘れがないかしっかり見たり[clearstack]したり色々試しても上手くいかず途方に暮れていたのですが、色々検証した結果、上で使用している「tf.joken」(「条件」です。ダサい変数名)をシステム変数関連という事で元々「tf.system」という名前にしていたのが原因ということがわかりました。これを変更してみたらなぜか一発で解決。
tf.systemって何か使ったらいけないとか説明ありましたっけ？使用してるプラグインとかどこかで使われてるのかな？？普通に何か書いてあったらすいません…とりあえず奇跡的に直せてよかったねという話でした。
ちなみに素敵な武器画像素材はこちらより購入させて頂きました。↓
昔ゲームの説明書とか攻略本とかでこういうアイテムの画像眺めるの大好きだったのでむっちゃワクワクします。
HPゲージを増減させる
ダメージを受けるとHBバーがグーンと縮む動きはこの様な感じで↓
[eval exp="tf.barlong = f.monster[f.battlemonster][1] - tf.damage"]
[eval exp="tf.hpbarm = 154 * tf.barlong / f.monster[f.battlemonster][2]"]
[if exp="tf.barlong < 1"]
[eval exp="tf.hpbarm = 1"]
[endif]
[anim name="hpm" width="&tf.hpbarm" height="6" time="1000" effect="easeOutExpo"]
※モンスターのHP等は二次元配列で管理しています
f.battlemonster=戦闘中のモンスター番号
f.monster[f.battlemonster][1]=戦闘中モンスターの現在HP
f.monster[f.battlemonster][2]=戦闘中モンスターの最大HP
配列変数についてはこちらを参考にさせて頂きました↓
モンスターの現在HPからダメージ量を引き、バーの最大の長さ（154px）に減った後のHP/モンスターの最大HPを乗算して縮めた後の長さを出します。（この際、1より低くなる場合は1を代入しています）
あとは[anim]で上で設定した長さまでアニメーションするだけです。
そして、ついでに[ptext]で表示したHPの数字が１ずつ減ってゆく演出も入れるとそれっぽいです↓
[eval exp="tf.hpdowntime = 300 / tf.damage"]
[for name="tf.for" from="1" to="&tf.damage"]
[eval exp="f.monster[f.battlemonster][1] = f.monster[f.battlemonster][1] - 1"]
[if exp="f.monster[f.battlemonster][1] < 0"]
[eval exp="f.monster[f.battlemonster][1] = 0"]
[endif]
[free layer="0" name="m_hptext"]
[eval exp="f.hpm='HP ' + f.monster[f.battlemonster][1] + '/' + f.monster[f.battlemonster][2]"]
[ptext layer="0" name="m_status,m_hptext" text="&f.hpm" size="15" x="10" y="67" color="0xf5f0e2" bold="bold"]
[wait time="&tf.hpdowntime"]
[nextfor]数字が１減るあたりにかかる時間が全て同じだとダメージが多いほど長くなってしまうので、時間はtf.hpdowntime＝300(適当)÷ダメージ数という風にしてダメージが多いほど短くなるようにしてみました。
そして[for]を用い、数字を消去→HPを１減らす（０よりも低くなる場合は０を代入）→減らしたHPで数字再表示→tf.hpdowntimeの時間分[wait]…をダメージ量と同じ回数分繰り返しています。
増える場合は足し引き逆にするだけOKです。
画像glinkにカーソルオンで文字の色も変える
前作では使わなかったのですが、次作準備の取っ掛かりで躓いたのでメモ。
↑こちらの記事を参考に、「3. 独自のクラス設定」の「hoverしたとき」の部分をtyrano/css/glink.cssに書き加え、設定したクラス名をglinkのnameに指定すれば画像と同時に文字の色も変えることが出来ました。
ちなみに前作も制作中の上画像もご存じ「空想曲線」様よりUI素材購入させて頂いております。この素敵な素材を使いたくてゲームを作っているといっても過言ではない。ランダム値取得プラグインにも大いにお世話になりました～
反省点
デバッグルーム的なのを作る
ここだけチェックするぞ～というときに該当箇所までジャンプしたり敵のHPを全部１にしてサクサク進めたりマップ部分だけ飛ばしたり…というのをちまちまスクリプト書き加えてやってたので今思うとめちゃめちゃ面倒でした。
シナリオ回想も全部書いてチェックし終えてから作ったので、これ先に作ってたらシナリオ部分だけ確認するんめっちゃ楽だったじゃん……とやっと気付き、ボタン押すだけで飛んだり何やかんや切り替えたりできるページとか仮で作っとけばよかった～とかなり後悔しました。次は絶対やろう！
cond属性を使う
これも完成間近になるまで存在を知りませんでした。タグリファレンスの最初にめっちゃ書いてあった…
細かな所でいちいち[if]～[endif]使わなくていいのすごくスッキリする！行数ものすごく減らせそうです。
よかったこと・総括
とにかく何よりもシステムは凝りすぎず、シナリオは短く書きたいとこだけ断片的に、描く絵は少なく丁寧すぎず、頼れる所は素材に頼りまくる、思いついたことはすぐスマホでメモ…というの徹底したおかげで何とか初めて完成に漕ぎつけられたと思います。あと、個人的には毎日コツコツ…とか思わずやれる時間とやる気が両立した時にガーッとやる方が向いている笑
という訳で次作もまた発表できるようマイペースに頑張ります。
この記事が気に入ったらサポートをしてみませんか？