2024年6月の進捗とティラノの変数の話

はじめに

こんにちは。うさギョです。
先月は進捗記事を忘れていたので2か月ぶりの記事になります。

制作中作品の報告

前作に比べて新しいことを積極的に取り入れて制作しているため、制作期間が予想以上に伸びてしまいましたがTGFまでには完成予定です。

新しく取り入れてみたもの

キーフレームアニメーション

マップ上でもこもこ動くクリックオブジェクトがこれです。
アニメーションは調整しだすと止まらなくなるので、沼の気配がします。

JavascriptとCSSの活用

JSで主に利用しているのは配列関係ですが、ちょっと学んだだけでもゲームの幅がすんごい広がるので、スクリプト作業に抵抗のないティラノユーザーさんには配列の学習をぜひオススメしたいです。
配列（特にオブジェクトの配列）と配列関係のメソッドを学習するだけでもだいぶ世界が広がりますし、具体的に言うとアイテム管理系・フラグ管理系が非常に楽になります。

これについては長いので気になる人は「おわりに」の後を読んでください。

ビルダーからティラノスクリプトへ移行

これに伴いVSCodeを使いはじめたのですが、とても便利で助かってます。
というかビルダーの時点で半分以上スクリプト打ってるような状態だったので、もっと早く移行すればよかった。
割とスクリプト打ってるよ・スクリプト作業好きだよというビルダーさんは移行した方が楽になるかもしれません。

ティラノタグのcondとexpへの理解

本作を作り始めてから知ったのですが、この2つを使うと１つのタグで2つの式が書けるんです。
便利すぎて全ティラノ民理解を深めた方がいいです、本当に。

ちなみに
condはそのタグが実行される条件
expはタグが実行された時に同時に実行されるJavascript
です。

これでｉｆｉｆしながらボタンを配置したりtargetに飛んだ後で変数調整してた手間を無くせます！！！みんなも便利なcondとexpを使おう！

これについても長いので気になる人は「おわりに」の後を読んでください。

今後について

紹介記事

作っているものが全般的に割とキャラゲーなのでキャラ紹介記事を作りたいなと思ってます。

過去作のアプデ

それからＴＧＦ開始後になるかもしれませんが、カレりす完成後に過去作のアプデ(＆スクリプトへの移行)を行う予定です。バグ研あたりはバグ(ギミック)を増やすかもしれません。
それらが終わり次第、次回作を制作予定です。

次回作

作りたいものが沢山あって迷っていたのですが、いくつか合体させることで気になる要素全部まとめゲームを作りたいなと思っています。
具体的に言うとマルチエンドクリックＡＤＶ(秘匿ラボ) + ダンジョン探索ローグライト + キャラとデートできるゲーム ＝　ローグライトライフシミュレーションRPG　になる予定です。

プレイヤーは研究のため自由に生活することを許された被検体となり、短い寿命が尽きるまで研究室の外で生活していきます。

シナリオを進めるのもよし！
研究員を目指して勉強するもよし！
ダンジョンに潜り続けて冒険するもよし！

好きな行動をすることで多様な研究データが集まり新たな要素がアンロックされる形の周回要素があります。
今までの登場キャラは全員出てきて攻略対象になる予定です。

おわりに

やっとカレりすの終わりが見えてきたので、TFG締め切りまでのラストスパートを頑張りたいと思います。
来月もよろしくお願いします。

以下④ティラノタグのcondとexpへの理解の続きの話になりますので、興味のある方だけご覧ください。

condとexpとJavascript

先ほどの話の続きです。何が便利なんだ？と思われる人のために…。
↓↓こんな感じのボタンが１つのタグで書けます。

[button name="tana" cond="f.tana >0" exp="f.tana -= 1"graphic="c_02.png" enterimg="c_02h.png" target="*tana" x="768" y="144" width="232" height="195" ]

これはf.tanaが0より大きいときに表示されて、押すとf.tanaが1減るボタンです。

ちょっと複雑になりますがexpはJS式が入れられるので変数管理だけでなくifなども可能です。
expに入れるifはティラノタグではなくJSで書きます↓↓

[button cond ="f.sel[ 0 ].zai == 1 && f.sel[ 0 ].che == 0 " exp=" if (f.kaz < 3){ f.sel[ 0 ].che = 1 - f.sel[ 0 ].che } " graphic=" &'b_' + f.sel[ 0 ].id + '.png'" target="*page1 " x="40" y="123" width="138" height="142" fix="true" enterimg="&'b_' + f.sel[ 0 ].id + 'h.png'" ]

これは「あるアイテム(f.sel[0])の在庫(.zai)が有(1)」かつ「チェックマーク(.che)が入ってない(0)とき」、チェックしたアイテムの合計(f.kaz)が3未満だったら、チェックが入ってないときはチェックを入れてチェックが入ってるときはチェックを外すボタンです。
今作の料理作成画面で出てきます。

変数 = 1 - 変数 は、オンオフボタンを作るときなどに便利な式です。
変数 = 0 でオフ、変数 = 1 でオン　というように設定しておけば同じボタンを押すだけでオンオフ切り替えできます。

この記事で出てきたティラノですぐ使える簡単なJS

if　(expに入れて便利に使おう！)

if ( 条件式 ) { 実行内容 }

if (f.kaz < 3){ f.sel[ 0 ].che = 1 - f.sel[ 0 ].che }

をティラノタグで書くと

[if exp="f.kaz < 3"]
[eval exp="f.sel[ 0 ].che = 1 - f.sel[ 0 ].che"]
[endif]
です。

f.sel[ 0 ].zaiてなんだ！？

通常ティラノで『idが0、名前が牛乳、在庫が1』のアイテムを変数として設定する場合
[eval exp="f.sel_id = 0"]
[eval exp="f.sel_name = '牛乳'"]
[eval exp="f.sel_zai = 1"]

または
[iscript]
f.item_id = 0
f.item_name = '牛乳'
f.item_zaiko = 1
[endscript]
などと長々と設定すると思います。

それを配列を利用して設定すると
[iscript]
f.sel = [0 , '牛乳' , 1 ]
[endscript]
とまとめて設定することができます。

この場合
f.sel[0] = 0
f.sel[1] = '牛乳'
f.sel[2] = 1
になります。
ようは [ 0, '牛乳' , 1 ]の　, 　で区切ったところが左から順に[0][1][2]…と自動的に添え字が設定されます。0から始まります。

テキスト中に表示させたい場合は
『今日は [emb exp="f.sel[1]" ] を爆発させた！』と打てば『今日は牛乳を爆発させた！』になります。

更にこれを分かりやすくするためオブジェクトの配列にすると
[iscript]
f.sel=[
{ id:0, name:'牛乳', zai:0 },
{ id:1, name:'卵', zai:0 }]
[endscript]
となります。説明のため卵にも登場して頂きました。

（※エンジニアの皆様におかれましては大変見づらいコードの書き方でイラっとされているかと存じます。しかしプログラム知らんティラノ初ゲ制民からするとカッコが同じ行に書いてある方がティラノタグっぽくて初見で理解しやすいという側面があります。私がそうでした。この記事はそのレベルの初心者向けに書いておりますのでご理解のほどどうぞよろしくお願いいたします）

これはf.sel[0]の中身が{ id:0, name:'牛乳', zai:0 }という状態になっています。
この中身を利用したいときは　f.soz[0].id　のように記載します。
見出しに出てきたような形になりましたね！

つまり
『今日は [emb exp="f.item[0].name" ] を爆発させた！』と打てば『今日は牛乳を爆発させた！』になります。

なぜこんな書き方にしたのか？

①ぱっと見で分かりやすい

②変数設定をするときに楽

　同じような項目を大量に設定する際、表計算ソフト→CSVで変換　など行うと更に楽です。

③画像名をidにするとエンティティできるので楽

(エンティティを知らない人はティラノスクリプト公式の　実践テクニック>変数と演算　の下の方を読もう)

先述したタグのこの部分ですね。

[button cond ="f.sel[ 0 ].zai == 1 && f.sel[ 0 ].che == 0 " exp=" if (f.kaz < 3){ f.sel[ 0 ].che = 1 - f.sel[ 0 ].che } " graphic=" &'b_' + f.sel[ 0 ].id + '.png'" target="*page1 " x="40" y="123" width="138" height="142" fix="true" enterimg="&'b_' + f.sel[ 0 ].id + 'h.png'" ]

こちら画像名は　b_0.png および b_0h.png で牛乳が表示されます

Q.変数にしなくても番号を打てばよくない？
A.めんどくさいよ

突然ですが便利な利用例をお伝えします。

f.soz=[
{ id:0, name:'牛乳', zai:0, che:0 },
{ id:1, name:'卵', zai:1, che:0 },
{ id:2, name:'カレー粉', zai:1, che:0 },
{ id:3, name:'シチュ―粉', zai:0, che:0 },
{ id:4, name:'味噌', zai:0, che:0 },
{ id:5, name:'米', zai:1, che:0 },
{ id:6, name:'パン', zai:0, che:0 }]

これをJSのメソッド(ティラノで言うところの便利なマクロのようなもの)を使ってzai:1のものだけ集めた配列を作ります。　

[iscript]
f.sel = f.soz.filter( item => item.zai == 1 );
[endscript]

f.sel = f.soz.filter( item => item.zai == 1 );
新しい配列の名前　フィルタリングする元の配列　集めたい要素の条件

できたものがこちら↓↓
f.sel=[
{ id:1, name:'卵', zai:1, che:0 },
{ id:2, name:'カレー粉', zai:1, che:0 },
{ id:5, name:'米', zai:1, che:0 }]

f.soz[1].id　と f.sel[0].id　はどちらも1です。
フィルタリングして配列のどこにいっても同じidを引き出すことができます。
そしてそれを画像名で使えるようにしておけば、『毎回特定の条件でフィルタリングした画像一覧を表示させたい』ときなど便利です。

なお画像名＝変数にするのはJSを使わない場合でも便利！な場合があります。

画像の表示切替条件を変数で管理してる場合など、
f.gazou == 1 のときは　graphic="1gazou.png "
f.gazou == 2 のときは　graphic="2gazou.png" …
といちいち書くより全部　　

graphic="&f.gazou + 'gazou.png' "　

で指定した方が楽ですね！

今作で主に使ったのはfilterメソッドですが、JSには他にも並べ替える系・追加削除系・加工系など便利なメソッドが沢山あります。
その他今作で使った便利な全部足すやつ↓↓

f.yaji = f.soz.reduce((sum, element) => sum + element.zai, 0 )
新しい変数名　数える元の配列名　足したい要素　初期値

f.soz=[
{ id:0, name:'牛乳', zai:0, che:0 },
{ id:1, name:'卵', zai:1, che:0 },
{ id:2, name:'カレー粉', zai:1, che:0 },
{ id:3, name:'シチュ―粉', zai:0, che:0 },
{ id:4, name:'味噌', zai:0, che:0 },
{ id:5, name:'米', zai:1, che:0 },
{ id:6, name:'パン', zai:0, che:0 }]

この配列に前述のreduceメソッドを使うと　f.yaji = 3 という変数が生まれます。

気になった方はぜひJSの学習に手を伸ばしてみてください。