恐縮ですが、テレビ東京放送（BSテレ東）制作の2025年春 まで放送された「東京パソコンクラブ〜プログラミング女子のゼロからゲーム作り〜」のunityのパートについての考察をはじめました。非公式であります。
放送当時のUnityのバージョンと現在普及しているバージョンの違いがあって、多少放送時のプログラムソースの記述が異なるものも登場することがあります。
第48回21分43秒とか時間の紹介がありますが、放送をご覧になる環境によって多少ズレるので、参考程度にお聞きください。（4-012）
テレビ番組「東京パソコンクラブ」で紹介されたUnityを使用した「もぐらたたき」風のゲームの制作過程を非公式にプログラミングの手順や制作の工夫の補足・解説したものです。牡蠣を「愛でる」という独自のテーマに基づき、「状態遷移」の概念を用いてキャラクターの動作を管理する方法が具体的に示されています。
効率的なデバッグのためにまずはシンプルな画像でテストを行い、動作が確定してからアニメーションや音声を実装するという、実践的な開発フローを推奨している点が特徴です。
さらに、プレハブ化のタイミングや管理方法に関する注意点に加え、ゲーム全体を統括するマネージャー機能やスコア、演出効果の追加についても触れられています。
最終的には、タイトル画面やパーティクル演出を含む、一つの完成されたゲームを作り上げるためのノウハウを凝縮した内容となっています。
１．とりあえず、クリックしたら愛でるという動作までは完成させる。
第74回15分51秒
Main CameraからBack Colorの色の変更ですね。最終的にはうｐ主さんは独自の画像を貼っているので、ここは省いてもいい作業ですけどね。
林さん、あやてぃーさん、弓木さんの３人は「もぐらたたき」なので、草っぽいかわいい緑を選んでいましたけど、こちらは牡蠣ですから、海を連想する・・・水色にしましたね。
第74回16分30秒
林先生から、「状態遷移」の話がでました。「状態遷移」とは、「１つのものがいろんな状態を持っている」
たこやきゲームの場合は空→生地が入る→具材が入る→ひっくり返る
第74回19分45秒
もぐらたたきの場合は
隠れている・出ている・叩かれる
それで・・・最初からもぐら(牡蠣)が用意されているので・・・こちらも最初から用意しておかなければならない！
用意した画像は
・・・牡蠣・・・
隠れているKAKURE １枚
出ているDETERU １枚
愛でるMEDERU ４枚×２
第74回20分49秒(enum(列挙型)の宣言の出だしだけ)
public class Kaki : MonoBehaviour
public enum STATE
第74回21分22秒(enum(列挙型)の宣言の完成)
public class Kaki : MonoBehaviour
public enum STATE
{
KAKURE,
DETERU,
MEDERU,
}
STATE state = STATE.KAKURE;
float timer = 0;
第74回21分43秒（case文を状態ごとに加える、という話。「隠れ」同様、「出てる」と「愛でる」も作る。）
void Update()
{
switch(state)
{
case STATE.KAKURE：
{
}
//以下、DETERU、MEDERU
}
}
第74回22分53秒(各caseにbreakを加えないと、貫通するので、breakを加える。)
void Update()
{
switch(state)
{
case STATE.KAKURE：
{
break;
}
//以下、DETERU、MEDERU
}
}
第75回13分56秒(変数を用意して紐づける)
public GameObject body;
public GameObject bodyMederu;
第75回15分18秒
Serialize Fieldの解説
第75回17分34秒(case文の中身)
case STATE.KAKURE： //モグラが隠れている状態
{
if(timer < 0) //一定の時間が経ったら
{
state = STATE.DETERU; //モグラが出てくる
timer = deteruTime; //timerをモグラが出てくる初期値に書き換える
timer += Random.Range(-0.5f, 0.5f); //時間にランダムの加減調整
}
break;
}
以下、DETERU、MEDERUも同様に行います。
第75回17分52秒(更新の下の方に時間の経過の命令を追加）
timer -= Time.deltaTime;
第75回17分54秒(牡蠣の状態によって描く処理の作成。有効か無効かをSetActiveで命令する。)
body.SetActive(false);
ゲームの初期状態、Unityでチェックをはずす（無効）→インスペクタの上方のチェックボタン（動画の10分14秒）
隠れの時は、bodyとbodyMederuを無効。
出てるときは bodyは有効、bodyMederuを無効。
愛でるときは bodyは無効、bodyMederuは有効。
第75回21分46秒(牡蠣を愛でる時の処理)
更新の次、新たな関数（timer -= Time.deltaTime;を入力して、更新（update）のカッコの次）
public void Hit()
{
sｔate = STATE.MEDERU;
timer = 0.5f; //愛でる顔の時間
}
ここで、Ver.6の場合は、本編と仕様が異なることにつき
マウスのクリックについては、いろいろありまして(動画の11分43秒。Kaki.csを参照。)
第75回22分27秒(音の追加)
public AudioSource hit;
Hit()の中にhit.Play();を入れて音楽ファイルを紐づけをして、一匹完成。
本編の方では、プレハブで増加して→完成。
ここで試運転(一旦、「隠れる」「出てる」「愛でる」を全部画像にして動作のテスト)。
うまくいった。
ここのコーナーはおしまいです。
２．タイムとスコアを追加して完成
本編では、このようにこの時点のものをプレハブ化して増殖させて完成、というところでした。
なので、本編を追っかけることはもはやないのですが、
ええと、こちらの公表されているUnityroomのバージョンでは、タイムや点数が表示されているので、まあ、早い話、ここからの内容は放送されていない内容だということです。
でも、今までの知識で十分対応できる内容なので、気軽に観てください。
この動画での、この時点では、やはり作りこみが甘いというか、マウスのクリックで「愛でる」に状態遷移できるようにする、が目的だったので、
実際に作っていくと、すべて画像にした状態で上手くいくかテストする方が現実的なんですね。なぜかというとアニメは他のアニメと重なったりしたときの引継ぎとか、これは音の場合も同じなんですが、要するに簡単な画像とか、音が無い状態で作って後で音をつける方がいろんな条件を排除してテストできるので、完成までの失敗のリスクを少なくできるんですよね。上手にテストできたら、あとでアニメとか音をくわえればいいので、まずは画像のみで試す、ということです。
あと、アニメも複数あると、引継ぎが失敗するリスクがあります。タグやレイヤー、前の音を消してから次の音を鳴らす、とか、動画で解説できるレベルではないので、最終的に落ち着いたのが、「隠れ」と「出てる」を画像にして、「愛でる」のみをアニメ一つにした方がシンプルになりました。音も「愛でる」のとき一つです。
実際、うｐ主はこのような構成にするまで、試行錯誤がけっこうありました。プログラミングは結構ハード面に条件が制約されることもあるので、いろんなことを知らないと上達できませんねえ。
それで、プレハブ化についても、プレハブ化してからの修正は実は面倒です。
あるヒエラルキーにあるプレハブを修正してInspector上部の「Overrides」をクリックして「Apply All」をすると、Assetsにある元のプレハブは、修正後に更新されるが、既にヒエラルキーにおいてあるプレハブ・・・ここのほかの牡蠣には更新されないんだ。
あと、Inspector上部の「Overrides」をクリックして「Revert All」をすると、逆に元のプレハブに合わせて初期化する、ということなので、位置もサイズもそのプレハブの情報に書き換えられるけど、他の牡蠣にも同じ様に修正後にすることもできる。この操作のあとで、サイズや位置を修正すればよい。でも面倒で、ミスもおきやすい。
なので、やはり作りこんで、満足した一つの牡蠣を完成させてから、プレハブ化した方が正しい作り方、となる。でも実際ゲームとして遊んでみて修正したいというところもでてくるんだよね。
もう、そうなると、一旦牡蠣を一つにして、とことん修正してからプレハブ化して増やす、の方が一見遠回りに見えて、こっちの方が楽、と、うｐ主は言ってました。
それで、アニメの修正→最後の絵に目立つ色を書き加える。
牡蠣一匹が、ほぼ完成。
次に、プレハブ化して、全体がほぼ完成。
ここから、一気に話がとんじゃう。
動画としても、あんまり録画されていないので、作業がよく見えませんが、
速い話、KGameManager.csというゲームを管理するソースをもうひとつつくりまして、
ここでは、
１ 一つ愛でると１点
２ 時間は３０秒
３ タイトルからスタート。左クリックでゲーム開始。（実際は、別のタイトル専用のシーンに作業を分担しています。）
４ Enterキーでタイトルに戻る
という処理を行っています。
ざっくりと・・・・KGameManager.csは、こんな様子ですが、(動画の17分35秒頃)
ここでKaki.csの方ですね、ここで「愛でる」に移動させるためのHit関数・・・の一歩手前のOnHitByPlayer関数・・・、この中でKGameManager.csの中のAddScoreを呼んでいる命令を、新たに加えることにより、KGameManager.csとの連携をここで行っています。(動画の19分00秒頃)
あと背景の追加ですね。
それとタイトル画面を別のシーンで作成しています。このタイトル画面を別のシーンで作って、それを一つのゲームとして連携させるやり方として参考になるのは、三択ゲームとぴよキャッチですね。
それで、完成したのがこちら。ビルドまでしていますね。
それで、この時点でのソースとインスペクターをこれから見ていただきますが、
じつはタイトルの方の、「牡蠣めでーる」の、この文字の動きは、これもまたC#のKakiOpenStart.csとかの名前で作って動かしています。テキストの座標を動かす命令を追加させています。今回は、それらは別のシーンになっているので、この動画では省略させていただいています。みなさんタイトルは自由に作ってください。
それで、いつもなら、これで次の「袋とじコーナー」にうつるのですが、さらにうｐ主は演出を加えてしまいましたね。
参考なのは「アニメ初歩編」ですが、パーティクルですね。これで、光（スパーク）とハートの上昇を「愛でる」の時に加えています。
こちらのスパークとハートは公表しているソースやインスペクターに反映されていないので、付け加えたい人は、独自に付け加えてください。
ちょっとだけヒントを示しますと、プレハブにスパークとハートのパーティクル専用のオブジェクトやC#のコンポーネントをさらに作って・・・オンとオフだけのそれぞれのMederuSparkePOS.csとMederuHeartPOS.csですが、こんなかんじですね。(動画23分38秒頃参照)
ブログで配布している、ダウンロードできるWindows11用のゲームはこちらのスパークとハート付きのバージョンです。
今回のソースとインスペクター
(01)MainCameraのインスペクター
(02)Canvasのインスペクター
(03)KGameManager.cs
(04)KGameManagerのインスペクター
(05)Kaki.cs
(06)KakiBaseのインスペクター
(07)KAKURE用のインスペクター
(08)DETERU用のインスペクター
(09)MEDERU用のインスペクター
配布(Windows用 ダウンロード)
今回のゲーム「牡蠣愛デール」をBuildにより作成して、配布してみたいと思います。
今回の「牡蠣愛デール」のダウンロードサイト
今回の「牡蠣愛デール」のダウンロードはこちら(Windows用)
コメント