ゲーム制作記 2024/10月：「とっても簡素な」アイテム保管倉庫作りたかった
この記事はゲーム開発知識皆無のティラノビルダー初心者が自分用につけている備忘録です。多分未来の自分自身が読んでもわけわからないと思うのでこれを読んでなんとなーくでもわかったかたはもう天才。
最初に触れておくと
ティラノビルダーのコンポーネント機能のみで何とかなる部分じゃなくなってきてますね。ティラノビルダーでここまでする方は素直にティラノスクリプトいった方が良いって言われる。でもビルダーはシンプルな物いれるとき超便利よねわかります。
(ジャンプによる処理速度や構成画面の視認性などの問題で今回くらいの小規模での運用でないと何かと大変かと思います。)
今回作った倉庫の仕様
あくまで今回は一連の仕組みを作ったというだけでデザインは全く異なる形になると思います。まああとは自由に弄るとして
この倉庫は
・②のアイテムのどれかをクリックすると、①の手持ち欄にそのアイテムの画像が表示される(手持ち状態になる)
・①にアイテムが入っている状態だと②のアイテムは拾えなくなる。
・③の倉庫を開くと、倉庫内に入っているアイテムが別枠で表示される
・倉庫内には４スペースあってそのどこかをクリックすると、そこに置いてあったアイテムと手持ちのアイテムを交換する。
・同種のアイテム同士でも重ならずそれぞれ１個ずつ扱い
・倉庫からアイテムを引き出して空欄になっても、自動で空欄を詰めない
という仕様です。今回のゲームではそこまで多くのアイテムを出し入れしないつもりなのでこれくらい簡素で十分。
こういう形式じゃなくてPRGのアイテム欄みたいなシステムチックので良い方は変数の配列で作れる・・・かと。
作る前の準備
○まず変数を用意
この動きを作るには・・
１．今どのアイテムを持っているのかを判断する「手持ちのアイテム」
２．倉庫の空欄枠スペースそれぞれ「どこの位置に入ってるのか」
※配列を使うなら１つで良い。使わないなら空欄スペースの分だけ変数を用意する。
３．手持ちと倉庫内のアイテムを入れ替えるときに使う「交換用」
そして
アイテムを倉庫に収納したらもうそのアイテムが表示されないようにしたいならそれ用のフラグ変数も追加で。
基本的にこの１~３の変数がまず必要なんだなあと
なんで３がいるの？
手持ち「りんご」と倉庫内のアイテム「バナナ」を交換するというのは、
「手持ちの「りんご」を倉庫内の「バナナ」を入れ替える」って処理をしているんですね。
で、今回は手持ちを倉庫内アイテムと同じにして、なおかつ倉庫内を手持ちアイテムと同じにするという処理にしてます。
そうです、このままだと手持ち＝倉庫で手持ちも倉庫も中身が同じになってしまうのです。
だから・・・「元々倉庫または手持ちに入っていたアイテムを保持しておく」場所が必要ということですね。
○全体の構成
ビルダーは複雑になるほど全体要素の把握がしにくくなるので、どういう動きにしたいのか最初にシステムの流れの算段つけてからとりかかるのが結構大切かなと。
各ラベルの説明もそれぞれの項目でやってます。
ラベル１：最初の表示
背景/キャラ/UIボタンなど「頻繁に切り替えなくて良い固定表示枠」を全部入れる。
ラベル２：リセットした後戻ってくる用※基本ここがスタート地点
アイコンの表示の切り替えや画像ボタン・クリッカブルは全部ここでやってます。画像はname付きで管理した方が後々の処理で楽
アイテムを入手したらその画像消したいとか、クリッカブルでないようにしたいとかそういうの。
ラベル３、ラベル５へのクリッカブルもここ。
[ゲーム停止] ここで一旦ゲームが止まり、プレイヤーのクリック操作で各ラベル３か５にいき進行します。
ラベル３+：各アイテムごとの「手持ちのアイテムにする」処理用
これは「手持ち」の変数にそのアイテムの値を入れる役割。
「○○を手に入れた」みたいなテキスト表示のあとで、name指定でアイテム画像を消せばそのアイテムの絵だけ個別に消せるので。
一度コールでラベル４に行き、リターンで戻ってきてからまたラベル２へジャンプします。
ラベル４：手持ち枠のアイテム画像を切り替える用
今回は右下に手持ちのアイテム画像を表示する枠を設けているのでそこの絵を切り替える用。このラベルにたどり着くのはアイテム取得時や倉庫内での入れかえ時に行うコール時なの、リターンでコール後の処理まで戻します。
ラベル５：倉庫開く用
倉庫画面を開く用のラベル。
ここには「倉庫のデザイン枠」をまずおいておく。
ラベル６：倉庫を開けたタイミング時の倉庫の中身の状態に応じて画像を変える
メインの部分。今回は収納スペース４枠にそれぞれ４+１(空白のとき)種のアイテム画像を振り分けるようにしています。
ラベル７：収納スペースへ(ラベル：８)の各クリッカブル配置
交換時に収納スペースの全場所のアイテム画像を何度も再配置しなくていいようにするためのラベルでもある。
各収納スペース(ラベル８)と倉庫閉じる(ラベル９)へのクリッカブルはここ。
[ゲーム停止]
ラベル８+：倉庫の収納スペース毎に用意
枠１つめ、枠２つ目って感じで飛んでその後すぐに手持ちと倉庫内のアイテムを入れ替える仕様にしてあるので。ここで各枠ごとにラベルで振り分けてます。
・手持ちアイテム→交換
・倉庫アイテム→手持ちアイテム
・交換→倉庫アイテム
って変数の受け渡しをするのもここ。
そのあとラベル４へのコールで手持ち枠のアイテムを切り替えて、リターンで戻ってきたら入れ替えた枠のアイテム画像だけを消し、
多分ここもめんどいことをしています。
ラベル９：倉庫閉じるラベル
これがないとラベル５で倉庫開いてからラベル２のメイン操作画面に戻れなくなるよねえ。
ここで倉庫で使っていたレイヤーを倉庫枠ごと全部消去させて、またラベル２へジャンプで戻る。という流れにしています。
おしまい
無駄になっがいけど、こういうのを個人でやっているときは「自分が振り返りやすく」なおかつ「動けばOK」な形でとりあえず良いらしい・・です？
各ラベルの実際の構成詳細
ここまでくると自分でも何言ってるかわからない状態になってるかも。
○ラベル１：最初の表示
上で挙げた通り、背景とかキャラとかそういうの。いちいち画像消したり追加したりしなくて良いもの、つまりベースになってるやつはみんなここで最初に表示しておく。
今回の例では、拾えるアイテムを取得して手持ちにした後も元アイテムは表示したままになっていますのでここで表示しています。
※アイテム取得後にそのアイテム画像が消えるようにしたいとき
この時点でそれぞれname付きで表示しておくと後の処理で楽です。
そのアイテムを入手済みかどうかを調べるフラグを用意して、その変数がオフのときだけ表示する流れにしておくと、手持ちに入れた後マップを移動し戻ってきたらまた表示されてるみたいなことにはならないかと。
こういうときifとcondどっちの方が良いのでしょうかね。
○ラベル２：リセットした後戻ってくる用
※基本ここがスタート地点
このゲームは調べられる物の上にアイコンを表示するというちょっと手間なことをやっているのでごちゃってますがまあこんな雰囲気だけでも。
倉庫への移動/
アイコンとクリッカブル再表示
ここで必要なのは
『クリッカブル』とか『画像ボタン』
・「アイテム取得用ラベル※ここではラベル３」に行くため用、
・「倉庫画面を開くラベル※ここではラベル５」に行くため用
そして今回は載せませんが
・「別のマップに移動する」ボタン用
「アイテム取得後はそのままクリッカブルがのこっていて欲しくない」
という方は
クリッカブルを配置するときにcondで表示する条件を指定すればよいかと。
必要になるのが「手持ちのアイテム」の変数、というわけ。
今回手持ちアイテムの変数であるf.temotiの初期値は0なので、0以外では手持ちにアイテムがある状態とします。
なので手持ちが0のときだけクリッカブルを置くってティラノスクリプトで記述します。細かい部分は恥ずかしいので見ないで
;手持ちが０の時だけクリッカブル配置
[clickable x= y= width= height= target=*ringo cond="f.手持ち == 0"]
[clickable x= y= width= height= target=*hana cond="f.手持ち == 0"]
[clickable x= y= width= height= target=*kinoko cond="f.手持ち == 0"]
[clickable x= y= width= height= target=*ki cond="f.手持ち == 0"]ここの最後に[ゲーム停止]←必須
○ラベル３：『手持ちアイテムにする』処理用
ちゃんと全体で仕組み考えないとここら辺からわけわからんになる。
これをそのシナリオマップで必要な分だけ個別にラベル作ります。
Q.これやってるの？
Ａ.平たくいうと、
手持ちの変数に拾ったアイテムを代入し、かつその変数の値を基準に別ラベルにあるアイテムごとに手持欄の画像変える工程を経由してラベル２に戻ってる
ここで必要なもの
・『改ページ』・・クリッカブルとか多用してるので毎アクションごとにリセットしておいた方が良いかも
・『変数設定』・・手持ちの変数にこのラベルで入手できるアイテムと判別できる値を入れる※自分が分かればどんな値でも良いかと数字でもOK
・『コール』・・この段階で手持ち枠内のアイテムの表示を入手アイテムの画像にしておかないといけないのでここでラベル４に一度行く必要がある。
ラベル４の最後をリターンにしているのでここにまた戻ってこれる。
・『ジャンプ』・・ラベル２へもどってねって指示。
あとは各自自分の自由に演出弄ってください。
○ラベル４：手持ち枠のアイテム画像を切り替える用
レイヤー何個も使い分けるの面倒ならnameで個別表示させておくと楽。
１度手持ち欄をクリアしたうえて手持ちの値で表示するアイテム切替/
コールリターン
シンプルだけど、実は裏で何回も実行してる縁の下の力持ちラベル。
ここで必要な物
・『改ページ』・・いるかわからんけどいれとけば安心
・まず『前から手持ち枠で表示していたアイテム画像を消す』処理
・次に『手持ち用変数の値で手持ち枠に表示するアイテムを変える』処理
・『コールリターン』・・手持ち枠が変更になるたびここにコールでジャンプしてくるから元の進行場所に帰すためのリターン。
こうやって作っておくと後に手持ちアイテムの種類が追加されたときもここ弄るだけで対応できるのでなるべく流用できるラベルは再利用しましょう。
;手持ちの値で右下の絵を変える
[free name=temotiai layer=1]
[image name=temotiai layer=1 storage="" x=580 y=500 cond="f.手持ち == 'ringo'"]
[image name=temotiai layer=1 storage="" x=580 y=500 cond="f.手持ち == 'hana'"]
[image name=temotiai layer=1 storage="" x=580 y=500 cond="f.手持ち == 'kinoko'"]
[image name=temotiai layer=1 storage="" x=580 y=500 cond="f.手持ち == 'ki'"]今回の場合、レイヤー１にはラベル１の時点で手持ち枠画像を表示しているのでそのままレイヤー１でnameつけてここを通る都度画像切り替えときます。
一番上の[free]のタグは手持ちと倉庫を交換した結果、手持ちが0になったときに空欄にするとき、または別アイテムと入れ替えたときに必要です。これが無いと上から二重に画像が表示され続けます。
○ラベル５~６：倉庫開く用
ここでは倉庫開いたとき用の演出いれるだけ
ラベル６：最初に開けたとき収納スペース毎にアイテム表示切替
ラベル５は倉庫の枠デザインの部分です。レイヤーは倉庫専用として別途に用意した方が消す時楽になるかと。今回は倉庫関連は全てレイヤー２です。
当たり前の話ですが、ラベル６以降に表示する倉庫内アイテムもそのレイヤーかそれより上に配置します。
Q．なんでラベル５と６をわける必要あるの？
A．ぶっちゃけないです。分ける必要があるのは次のラベル７です。自分がビルダー画面を見えやすくするためでしかないかも。
ここで必要な物
・「倉庫のデザイン枠をまず最初に表示する」←この枠は倉庫画面から抜けるまで表示し続けます
・「保管場所」の変数にどのアイテムの値が入っているかで表示するアイテムの画像を変える
こちらの説明がほしいんですよね、ええ
これは各収納スペース毎に変数(f.s4_item_number)が用意してあって、後の工程でその中にアイテムの単語がはいると次に倉庫を開けたときにそのままの形でアイテム画像を表示させるためにいれてたりします。
つまり実に効率の悪い「収納場所×全アイテムの配置」の全パターンの総当たり式。Javascriptできるかたはうまーく効率化してください。
ゲーム内では変数の配列を使用してますが今回のだと必要なかったかもって・・まあ初心者が仕組みを学ぶための練習ってことにしていただいて。
画像を表示するときはnameでitem1、item2・・・みたいに個別に名前を分けて置くとそこだけ入れ変えたいときなどいちいち倉庫内の画像全部消さなくて良いのでチラつきなどがなくなり便利。
ここでは１マス目ならai1、２マス目のならai2・・と分けています。
倉庫の１マス目
;倉庫のアイテム表示1
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'ringo'"]
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'hana'"]
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'kinoko'"]
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'ki'"]倉庫の２マス目
;倉庫のアイテム表示２
[image name=ai2 layer=2 storage="" x=230 y=180 cond="f.倉庫２マス目 == 'ringo'"]
[image name=ai2 layer=2 storage="" x=230 y=180 cond="f.倉庫２マス目 == 'hana'"]
[image name=ai2 layer=2 storage="" x=230 y=180 cond="f.倉庫２マス目 == 'kinoko'"]
[image name=ai2 layer=2 storage="" x=230 y=180 cond="f.倉庫２マス目 == 'ki'"]ってな感じに全収納スペース分に全アイテムの表示パターン用意してます・・・めんどいね。
まだゲーム停止はいれません、そのままラベル７へ進行します。
○ラベル７：収納スペースと倉庫閉じるボタンへ(ラベル：８・９)の各クリッカブル配置
倉庫内での操作のあとはすべてこのラベルに戻るようにする地点です。
このラベルを用意せずラベル６などを戻る地点にして何度も経由させてしまうと倉庫内のアイテムを交換時する度に、収納スペースの全場所のアイテム画像を何度も再配置していまい、絵が出しっぱなしなのでだんだん重くなってしまうかも・・ということを防ぎたくて入れてます。
各収納スペース(ラベル８)と倉庫閉じる(ラベル９)へのクリッカブルはここ。
[ゲーム停止]
上の画像のクリッカブルは実際にどこに配置されているのかというのは
ラベル：item1へが１、ラベル：item2へが2、
ラベル：item3へが3、ラベル：item4へが４
ラベル：soukotojiruは倉庫枠下のタル・・・って感じにひっそり配置
※実際のゲームではもう少しわかりやすいレイアウトデザインにします。
○ラベル８+：倉庫の収納スペース毎にラベルを用意
ラベル７で挙げた通り、ラベル：item1~4でそれぞれ個別のラベルを作っていますよね。ビルダーの画面内では収まりきらなかったので文字で。
ここで必要な物
[ラベル：item1]・・・倉庫の１マス目の場合
・「改ページ」・・クリッカブル後なので一応
①「交換」の変数の値を「手持ちの変数」と同じにする。
②「手持ちの変数」の値を「倉庫１マス目」の変数の値と同じにする
③「倉庫１マス目」の値を「交換」の変数の値と同じにする
④「コール」でラベル４に行き手持ちの画像を切り替えて戻ってくる
⑤倉庫１マス目に表示されているアイテム画像だけを消す
⑥１マス目に「倉庫1マス目」の値に応じたアイテム画像を表示させる
・「ジャンプ」・・・ラベル７へ
こちらの説明がほしいんですよね、ええ、ええ。肝ですからね。
[ラベル：item1] ・・・つまり倉庫の１マス目
まず改ページ置きまして・・・その次は
①「交換」の変数の値を「手持ちの変数」と同じにする。
つまり「手持ち」→「交換」へ値を移す
これで手持ちにあった値が一旦「交換」という変数にパスされました
「手持ち」「倉庫」「交換」の変数すべて初期値は空欄になるように指定しとかないといけません。ここでは０にしています
ここでは、わかりやすさの為、各変数名はそのまま「手持ち」「交換」「倉庫」にしています。
;手持ちのワードを交換に反映
[eval exp="f.交換用 = 0" cond="f.手持ち == 0"]
[eval exp="f.交換用 = 'ringo'" cond="f.手持ち == 'ringo'"]
[eval exp="f.交換用 = 'hana'" cond="f.手持ち== 'hana'"]
[eval exp="f.交換用 = 'kinoko'" cond="f.手持ち == 'kinoko'"]
[eval exp="f.交換用 = 'ki'" cond="f.手持ち == 'ki'"]
②「手持ちの変数」の値を「倉庫１マス目」の変数の値と同じにする
「倉庫１マス目」→「手持ち」に値を移す
倉庫の変数に入っていた値が手持ちの変数にパスされました
上のときとほぼ同じ
;倉庫１マス目の値を手持ちに反映
[eval exp="f.手持ち = 0" cond="f.倉庫１マス目 == 0"]
[eval exp="f.手持ち = 'ringo'" cond="f.倉庫1マス目 == 'ringo'"]
[eval exp="f.手持ち = 'hana'" cond="f.倉庫１マス目 == 'hana'"]
[eval exp="f.手持ち = 'kinoko'" cond="f. 倉庫１マス目 == 'kinoko'"]
[eval exp="f.手持ち = 'ki'" cond="f.倉庫１マス目 == 'ki'"]
③「倉庫１マス目」の値を「交換」の変数の値と同じにする
「交換」→「倉庫１マス」に値を移す
「交換」用の変数に一旦おいてあった値が「倉庫１マス」変数にパスされました
上のときとほぼ同じ
;手持ちのワードを交換に反映
[eval exp="f.倉庫１マス目 = 0" cond="f.交換 == 0"]
[eval exp="f.倉庫１マス目 = 'ringo'" cond="f.交換 == 'ringo'"]
[eval exp="f.倉庫１マス目 = 'hana'" cond="f.交換 == 'hana'"]
[eval exp="f.倉庫１マス目 = 'kinoko'" cond="f.交換 == 'kinoko'"]
[eval exp="f.倉庫１マス目 = 'ki'" cond="f.交換 == 'ki'"]ここまでで手持ちと倉庫１マス目の変数の受け渡しが終わりました。
次は表示されているアイテム画像を切り替えないといけません。
④「コール」でラベル４(手持ち枠のアイテム画像を切り替える)に行く。
ラベル４は「コールリターン」で終わっているはずなので、ラベル４の画像が切り替え工程がおわった後、ここまで戻ってきてこの下つまり⑤に進みます。
⑤倉庫１マス目に表示されているアイテム画像だけを消す
これは簡単
[free]タグでnameとレイヤー指定して画像をピンポイントでけすだけ
⑥１マス目に「倉庫1マス目」の値に応じたアイテム画像を表示させる
⑤でリセットしたアイテムの画像を同じnameで再表示する
;倉庫のアイテム表示1
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'ringo'"]
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'hana'"]
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 == 'kinoko'"]
[image name=ai1 layer=2 storage="" x=140 y=180 cond="f.倉庫１マス目 =='ki'"]でこの状態で
ラベル７にジャンプさせます
○ラベル９：倉庫閉じてラベル２へ戻る用
倉庫画面引っ込ませるためだけ。
ラベル７の時にここに飛んできてまたラベル２にかえります。
ここでやること
・「改ページ」
・倉庫画面である枠もアイテム画像もまとめて消去する
・「ジャンプ」でラベル２へ戻る
・「ゲーム停止」・・・不具合おきたとき用に一応
こういう処理のとき使用するレイヤーを１つの要素内であっちこっちにしてるとあれを消してこれをけしてあれあれ消えてない？ってなるのであまり増やしたくない派です。処理重くなるし。
お疲れさまでした。
もっとシンプルで無駄が無くてかっちょいい構成にできる方はそれを学んでくださいな。私ももっと勉強します。
以下今回のnoteで触れた余談
■condって何者？
すべてのタグに共通して指定可能なパラメータにcond属性があります。cond属性は『そのタグが実行される条件』であり、JavaScriptの式で記述します。
公式タグリファレンスにはこう書いてありますね。
でこれ実際にどういう意味なのってわけなのですが
例えば今回の例でいうとこの部分
;temotiの値で右下の絵を変える
[image name=temotiai layer=1 storage="" x="" y="" cond="f.temoti == 'ringo'"]
[image name=temotiai layer=1 storage="" x="" y="" cond="f.temoti == 'hana'"]
[image name=temotiai layer=1 storage="" x="" y="" cond="f.temoti == 'kinoko'"]
[image name=temotiai layer=1 storage="" x="" y="" cond="f.temoti == 'ki'"]これ、手持ちに入ってるアイテムが何かによって表示するアイテムの画像を分けてます。
この4つのimageタグそれぞれにcondがついておりそれの後にf.s4_temoti == ってあります。
このcondの中身こそが「このタグが実行される条件」を指しているんですね。
４つ[image]タグがありますが、temotiの値がringoなら、実際に実行されるのcondでringoが指定されてる上の１行だけってことになります。
これをifでやると
[if exp="f.temoti =='ringo'"]
[image name=temotiai layer=1 storage="" x="" y=""]
[elsif exp="f.temoti =='hana'"]
[image name=temotiai layer=1 storage="" x="" y=""]
[elsif exp="f.temoti =='kinoko'"]
[image name=temotiai layer=1 storage="" x="" y=""]
[elsif exp="f.temoti =='ki'"]
[image name=temotiai layer=1 storage="" x="" y=""]
[else]
[endif]ってまあまあめんどいことになります。ifの中で何十個も分岐させるならcondで指定した方が楽だし処理も早い……となります。少なくともifで簡単な比較式を入れられる人ならすぐ使える代物。
公式の説明にもある通り、condはすべてのタグに使えます。タグリファレンスの各タグ説明欄の中の指定できるパラメータ内に記載が無くても使えます。便利い
使い方は普段のタグに
cond="f.××× == １"みたいにifの条件のようにいれるだけ。Javascriptのルールは同じなので文字列の場合は’’で囲うのをお忘れなく。
cond="f.s4_temoti == 'ringo'"知っておくと便利です。
ティラノビルダーのコンポーネントだけでは同じように作れないと思う
ビルダーのコンポーネントでマウスカチャカチャするのみでは
・画像を表示するレイヤーの切替
・nameでのイメージ画像の管理
・condでの条件指定
・ifでの振り分け
などができないため
このnoteのシステム例と全く同じ仕様で作るならどうしてもティラノスクリプトを経由するしかありません。
ですが、
ゲーム内の表示を簡易化したり、
交換の度に全部のイメージ画像消えるのもご愛敬ってことで見なかったことにしたり、
ラベル：倉庫２に入っているアイテムの画像を変えるラベル
ジャンプ f.倉庫２マス目がリンゴの値の時ラベルAへ
ジャンプ f.倉庫２マス目がお花の値の時ラベルBへ
ジャンプ f.倉庫２マス目がキノコの値の時ラベルCへ
ジャンプ f.倉庫２マス目が木の値の時ラベルDへ
ーーーーーーーーーーーーーーーーーーーーー
ラベルA
倉庫２の場所にリンゴのイメージ画像を置く
ラベルB
倉庫２の場所にお花のイメージ画像をおく
みたいな膨大な量の分岐を重ねていけば可能ではあります。
なので「ビルダーなりでの作り方」を模索していけばよいかと。