
【プロジェクト:Neith】編成画面作成〜みんなで作るゲーム制作【4/26(日)-4/27(月)10,11日目】
■今回やった事
今回は以下の処理を作り込みました!
お手伝い(金策)機能の実装
編成画面の作成
■お手伝い(金策)機能の実装
■編成画面の実装
■募集中のアイディア
①「古代エジプト編」で発生しそうなイベント
(例:ピラミッドでの過酷な修行、ナイル川での予期せぬハプニング など)
※期限はありません!皆さんの自由でユニークな発想をお待ちしています。
② 主人公・ネイトの「スキル」(4/28(火)まで!)
(例:ファイアボール / 射程:2マス先の一体 / 効果:対象に小ダメージ)
※王道からちょっと笑えるネタスキルまで、
どんなアイディアでも大歓迎です!
こんにちは、まる。です!
本日は、4/26(日)、4/27(月)の二日分の作業を合わせて5時間分の超特大スペシャルをお送りします!✨
(ガッツリ進めすぎてしまったので、
細かい部分は少し割愛しちゃうかもしれませんが…!🙇♂️)
いよいよ今回は、戦闘の要となる「編成画面」の作り込みに突入します。
かなり難易度の高そうなシステムですが、果たして無事に実装することができるのでしょうか…!?
長期戦となるプロジェクト10・11日目、さっそくスタートです!
二人の茶番
🎧今日の作業用BGM
Tipsy_Dance/作(編)曲 :ヒオ
【民族音楽風/酒場/踊り】Tipsy Dance【フリーBGM】

「よお、おまえら!オレだよ、ポマイラ様だ!
突然だけどお前ら、最近気になってるゲームとかあるか?
オレ様はやっぱり、『ポケモンチャンピオンズ』だな!
元々ポケモンは大好きなゲームだから、絶対遊んでみたいぜ!」

「みなさん、こんばんは! ポケモン、良いわよね!
ちなみに私の推しポケモンは、ヤドンとマスカーニャよ」

「おうおう、ネイトさんよ!
ゲームの話もいいけど、昨日の開発はどうしたんだよ!
丸一日サボ……いや、休んじゃったじゃねぇか!」

「うぅ…ごめんなさいね。
ちょっと疲れが溜まっていたみたいで、ぐっすり眠っちゃったの……。
それに、少し『別件の予定』もあって、
そっちに集中させてもらっていたわ」

「まぁ!でも、しっかり休んだおかげで今日は準備万端よ!
遅れた分、一気に開発を進めていくわよー!」

「ほお……そりゃ、期待して良いんだな?
まぁ、張り切りすぎて倒れられても困るからな。
無理せずじっくり進めていこうぜ!」
今日の予定

「そんで、今日はどんな感じで進めていくんだ?」

「前回、開発時間を1時間に短縮したでしょ? その時の残り時間に加えて、昨日と今日の分の作業時間……
全て足して、一気に5時間分を開発に回すわ!」

「ご……5時間!?
おいおい、ネイトさんよ。
そりゃいくらなんでも詰め込み過ぎじゃないか?」

「まぁ、途中でしっかり休憩は挟むつもりだけど……
それでもハードなことには変わりないわね。
でも、今日実装するシステムはそれだけ難易度が高そうなの。
それに私、本当は『じっくり長い時間長考してシステムを組み上げる』のが得意な開発スタイルなのよ」

「正直、今日の開発は5時間あっても足りないかもしれないわ。
……それだけ本気って話よ」

「ネイトの本気か……!
確かにそりゃワクワクするぜ。
それで、今日は何を作るんだ?」

「今日のメインテーマはズバリ、『編成画面の作成』よ!
そして、この仕組みがもしかしたら、
今後のバトルシステムの制作に繋がる”大きな一歩”になるんじゃないかと思ってるの」

「編成システムか……!
いよいよシミュレーションRPGっぽくなってきたじゃねぇか。
そりゃ燃えるな!」

「正直、今日1日だけで完璧なものは出来ないと思うから……
今回はいつものスピード重視の開発スタイルじゃなくて、
じっくり考えながら進めていくわね!
だからもし、中途半端なところで終わっちゃったらごめんなさいね」

「気にすんな!
…思いきりぶちかましてこい!ネイト!」
前回の微修正(19:00-19:10)

「まずは、前回の微修正からね。
アルカステラの詳細画面を開いた時に、
スキルやフレーバーテキストの情報が空っぽのままだったから、ちゃんと表示されるように直すわ」
■修正後


「おお、バッチリ表示されるようになったな!
で、原因は何だったんだ?」

「シンプルに設定もれね!
他の機能と同じように、アルカステラのデータからフレーバーの情報を読み取ってテキストに反映させるだけだったから、
ここはサクッと簡単に修正できたわ!」

「なるほどな。
まぁ、システムがデカくなってくるとデータの管理も大変になってくるもんな。
気付いた時に都度直していくのも悪くないんじゃないか」

「そうね。他にも少し気になる部分はいくつかあるんだけど……
今はとにかく『不格好でもまずは動かすこと』が最優先だから、一旦置いておくわ」

「本当は、細かいバグ取りや微修正を完璧にこなさないと気が済まない性格なんだけど……。
うぅ、こういうところ、短期集中プロジェクトの歯がゆいところよね」
■ お手伝い(金策)機能の追加(19:10 - 20:40)

「次は『お手伝い(金策)』の機能を実装していくわ!
せっかく前回、お金(ルクス)の概念を追加したんだしね!」

「いいじゃねぇか!
がっぽがっぽ儲けられるようにしてくれよな!」

「まぁ、そこはゲームバランスと相談しながら…ね。」

「お手伝いの仕様は、こんな感じの仕様にしようと思ってるの」
#####
【お手伝いの仕様】
お手伝い内容は以下の3つから選択
体力消費【小】/ 報酬【少額】
体力消費【中】/ 報酬【そこそこ】
体力消費【大】/ 報酬【大金】
報酬額の計算: 基本給 + ランダムな差分(ボーナス)
おまけ効果: お手伝いをすることで、特定のステータスも少し上昇する
#####

「おお! 働きながらステータスまで上げられるなんて、一石二鳥じゃねぇか!」

「そうね。
『遊びに行く』コマンドのイベントでもルクス(お金)が手に入ることがあるから、それとの差別化でもあるわ。」

「あとね、個人的な印象だけど……こういう育成ゲームって、
『貴重なターンを消費してまで、お金稼ぎだけをする』のって、
あまり実行したくないコマンドになりがちじゃない?
だから、少しでもお手伝いを選ぶメリットを作れたらなと思って。
……もちろん、純粋な『特訓』よりは能力値の上がり幅は小さいけどね」
UI制作(19:10-19:40)

「それじゃ、早速UIを作っていくわ」

「そういや、ほぼ毎日何かしらのUIを作ってるよな。
よく飽きないな?」

「正直、UI制作自体は楽しいから嫌いではないんだけど……。
この作業って、本来はじっくり時間をかけて一個ずつ愛情をこめて丁寧に作るべきものなのよね」

「だから、『もっと時間をかけることができれば、本当はこんな感じにしたいのになぁ……』って歯がゆく思うことは多くなったわ。
やっぱり、時間ってすごく大事なリソースなのね」

「まぁ、そうだな。 そこに気づけただけでも御の字じゃねぇか」

「そうね!
あと、この企画を始めてからUIの作成スピードは格段に上がった気がするわ!
良い意味での『手の抜き方』も覚えてきたし……成長の証だと思うわ!」


「とりあえず、こんな感じで作ってみたわ。
イラストを用意するのを忘れてたから、AIでのイラスト生成にちょっと時間はかかっちゃったんだけど……。
一応、これで最低限の形はできたはずよ!」

「おお。……なんか、特訓コマンドの画面とレイアウトが似てないか?」

「まぁ、流用できるからコスパが良いっていうのもあるんだけどね!
でも、UIのレイアウトはなるべく統一させたいのよ。
画面の構成が同じ方が、プレイヤーも迷わなくて安心するでしょ?」

「なるほど、そりゃ一理あるな!
ネイトなりに、ちゃんとプレイヤー目線で考えてるってわけだ!」
お手伝い機能を動かしてみる(19:40-20:40)

「今回もClaudeさんにコードを書いてもらったから、あとは組み込むだけよ。
さっそく、テストしてみましょうか!」
・・・

「おい、ネイト。
さっき作った選択画面が出ないでいきなりお手伝いイベントが始まったぞ」

「あれ? おかしいわね。
直接イベント(宴)が呼び出されてるってことは、
さっき作ったメニューを展開する処理が丸ごとスキップされてるってことよね?
ちょっと、Claudeさんに聞いてみるわ」
……💻💦

「……どうやら、このお手伝いのパネルだけは例外的みたい。
UIのスクリプト側で処理するんじゃなくて、ブリッジ(UtageとUnityの橋渡し役)の方に情報を渡さないとダメみたいね。
ブリッジ用のスクリプトを改良してもらったわ」
……💻💦💦

「……ダメだ。 さっきとまったく症状が変わらないな」

「あー……分かったかも。
ブリッジの方で処理を走らせる関係で、
お手伝いの選択画面がUI側の『子』になっているから、
親オブジェクトが非表示になったタイミングで、子の選択画面も一緒に消えちゃうのね……。
UIと同じ階層にこの選択画面を置けば解決するんだろうけど、
この子だけ例外的に親のUIオブジェクトの外に置いて管理するのは……
システム的にすごく気持ち悪いわ。
Claudeさん、もう一回相談に乗ってー!」
……💻💦💦💦

「よし、たぶんこれで大丈夫なはず……。
一応、宴側の処理ももう一回確認して、動かしてみるわ!」


■お手伝い実装動画

「やっと…動いたわ!!!」

「やったな、ネイト! ……だけど、思いのほか時間が掛かっちまったな」

「そうね……。
AIにお願いしても、こういう構造的なエラーの解決には時間がかかっちゃうことがあるわ。
まぁ、開発してればこんな日もあるわよ!」

「よし! ちょっと30分だけ休憩して、また再開しましょう」

「了解だぜ! ゆっくり休めよ、ネイト!」
パーティ編成画面作成(21:10-24:00)

「ふぅ…ただいま、みんな!」

「それじゃ、今日の主役のパーティ編成画面をじっくり作っていくわよ!」

「おう!がんばれよ!ネイト!」
■ 編成画面のUI作成(21:10 - 21:45)


「ふぅ……やっぱり、1日に2つも新しいUIを作ると結構疲れるわね」

「でも、なかなか良い感じに仕上がってるじゃないか?
『パーティ編成』画面、見た目的にもカッコよくて悪くないぞ」

「…何言ってるの、ポマイラ。
ここからが本番よ?」

「へ?」

「右の画面のパネルを見てちょうだい」

「右?
……あぁ、『ステータス』と『配置』って切り替えボタンみたいなのがあるな」

「そうよ?
これから、そのタブに合わせて『アルカステラの詳細なステータスが見られる画面』と、
『バトルの初期配置を設定する画面』の中身をそれぞれ作っていくのよ」

「……まじかよ。
一つのUI画面に、どんだけ機能を詰め込むつもりなんだ!?」

「とはいえ、どれもシミュレーションRPGの戦闘には絶対に欠かせない機能よ。
さぁ、無駄口は叩かない! 作業に戻るわよ!」

「ひ、ひぇえええええ……!」
グリッドマップの作成(21:45-22:10)


「右側の『配置』タブを開いた時の画面ね。
まずは土台となるグリッドマップを作ってみたわ。
まぁ、こんな感じかしら?」

「おお、斜めになってて奥行きがある!
一気にシミュレーションRPGっぽくなっていい感じだな!
さぁ、さっさと次に行こうぜ!」

「慌てないの。
ちなみに、UIでこんな風に奥行き(アイソメトリック風)を表現したい時は、
Rect Transformの『位置』や『回転』、『スケール』のX軸・Y軸を調整するといいのよ。
例えば、ここにキャラクターを乗せてみると……こんな感じ!」



「おおおっ! ネイトがグリッドの上にちゃんと立ってる!!!」

「ふふん、なかなか良いでしょ?
ちなみに、この3×3のパネルは1枚1枚手で配置しているわけじゃなくて、Unityの『Vertical Layout Group』や『Horizontal Layout Group』を組み合わせて作っているの。
UIでちょっとした立体感を出したい時は、良かったら参考にしてみてね!」
ステータス画面作成(22:10-22:50)


「『ステータス』タブを開いた時の画面はこんな感じだわ!
すでに前回(アルカステラの詳細画面で)似たようなものを作っていたから、そのノウハウを活かして組んでみたの」

「……でも、もっと時間があれば、もっとすごいデザインのものが作れるのになぁ。
ねぇ、ポマイラ。やっぱりここ、もう一回作りなおs……」

「いや! いい!!
ネイトは天才だ!!! よし、これで行こう! 絶対にそうしよう!!」

「あら? そうかしら? ふふっ」

(……あぶねぇ……。
これ以上、こだわり始めて作り直しとか言い出したら、本当に朝になっちまうよ)

「ん? なにか言った?」

「な、なんでもねぇよ!
ほら、これで画面のベースはできたんだろ!?
次は何を作ってくれるんだ!?」
実装前の最終ブラッシュアップ(22:50-23:20)

「さて、さっそく編成画面を動かしたいのだけど……
Claudeさんに作ってもらったスクリプトの構成と、こっちで作ったUIの階層構造が微妙にかみ合わないのよね。
仕方ないから、少しだけブラッシュアップしていくわ」


「まずは、メインメンバーの編成枠ね。
ここは、アルカステラが『編成されているパターン』と『されていない(空き)パターン』でオブジェクトを分けておくわ」


「次に、アルカステラの候補リスト用のオブジェクトは事前にプレハブ化(部品化)しておくわ。
これで量産化の準備はバッチリね」


「あとは、各UIのスクリプトに必要なテキストやパネルをアタッチ(紐づけ)していくわね。
この辺りは全体的な構成のややこしいお話になるから、詳しい説明は割愛するわ」



「……なにせ、今回の実装だけでこれだけのファイルを扱うわけだし……ね」


「気になる『初期配置の編集システム』の裏側なんだけど……。
実はこれ、キャラクターを本当に移動させているわけじゃないの。
電気のスイッチを切り替えるみたいに、パネル上のキャラクターの画像(Image)を表示・非表示にすることで、
疑似的に場所を入れ替えているように見せているだけなのよ。
だから、裏側ではパネルの上に常にキャラクターの画像が乗っている状態ね」


「ただ、普段はずっと表示されていると邪魔になっちゃうから、これらは非表示にして見えなくしておくわ」
実行テスト(23:40-24:20)

「ふぅ…さすがに疲れたわね。
あとは、実際に動かしてみて確認するわ。
何も問題がないと良いのだけど」


「大型システム…何も起きないはずもなく」

「……原因ははっきりしているわ。
私(ネイト)と他のアルカステラとでデータの参照先が違うせいで、
私のデータだけ上手く見つけられていないみたい。
もう一度、Claudeさんに投げて修正してもらうわ」
……💻💦

「おい、今度は画面を開いた瞬間のネイトのステータスが、とんでもない数値になってるぞ!」

「メニューを開いた瞬間に、UIに仮置きしていたデフォルトのテキストがそのまま表示されちゃってるわね。
画面を開くと同時に、最新のステータス情報に更新(上書き)するように処理を追加しましょう」
……💻💦💦

「ダメだ、今度は配置の移動が上手く行かないぞ!」

「あー……。キャラクターの画像(Image)にクリックの判定が吸われちゃってるわね。
画像の『レイキャストターゲット(クリック判定)』をオフにして、ちゃんと後ろのパネルをクリックできるように直すわ」
……💻💦💦💦
■ 編成画面の実装テスト(動画)

「…なんとか動いたな」

「そうね……。動作的には問題ないし、編成の保存も上手く行っているわ。
とはいえ、『パネルを正確にクリックしないと配置の移動ができない』
『今誰を選択中なのか分からない』
『スキルのテキストが重なって見えちゃう』みたいな、
細かい不具合や使いにくさがまだまだ結構あるわね……」

「…この辺りのUIのブラッシュアップはまた明日に回して……
とりあえず、今日の5時間耐久開発はこの辺にしましょうか!」

「おう! 限界突破する前に休もうぜ。今日はお疲れ様だ、ネイト!」
最後に
かくして、5時間にも及ぶネイトたちの激闘は静かに幕を閉じた。
「お手伝い(金策)機能」という新たなシステムを組み込み、シミュレーションRPGの心臓部とも言える「編成画面」の土台を作り上げるという、過酷なミッション。
理想のUIと現実のギャップに悩み、
立ちはだかる数々のバグ(とUnityの仕様)に翻弄されながらも、
彼女たちは決して歩みを止めなかった。
画面上で重なる文字、吸い込まれていくクリック判定……残された課題はまだまだ山積みである。
しかし、不格好ながらも確かに動き出したそのシステムは、
この「プロジェクトネイト」が完成へと向かっている何よりの証拠だろう。
フル回転させた頭を休め、明日への活力を養うネイトとポマイラ。
果たして次は、どんな開発の試練が彼女たちを待ち受けているのだろうか。
次回も、どうぞ乞うご期待!
#プロジェクトNeith #HorizonNotes #ゲーム制作 #個人開発 #Unity #開発日記 #読者参加型 #毎日note