Unityでミニゲーム制作を始めてから、少しずつ形になってきた「宝石キャッチ」。
前回までは、プレイヤーを左右に動かして、落ちてくる宝石をキャッチするとスコアが増える、という最低限の仕組みを作りました。
Unity初心者が「宝石キャッチ」を作り始めた話。ゲーム制作1日目の記録
ただ、この時点ではまだ見た目はかなりシンプルでした。
プレイヤーは白い四角。
落ちてくるアイテムも白い四角。
背景も特になく、画面としてはかなり仮の状態です。
もちろん、ゲームの仕組みとしては動いていました。
左右に動けるし、宝石を取れば点数も増える。
けれど、実際に画面を見ていると、やはり「ゲームを作っている」というよりは、「Unity上で四角を動かしている」という印象の方が強かったです。
そこで今回は、この「宝石キャッチ」を改造してそれっぽいものを作ってみよう！というコンセプトで行きます。
結果として、プレイヤーは青いスライムに変わり、落ちてくるアイテムは果物の形をした宝石になり、背景も草原と木々、青空のある画面になりました。
さらに、タイトル画面、ゲーム画面、ゲームオーバー画面の流れも確認し、Windows向けにビルドして、Unity上だけでなくPC上で実行できる状態まで到達しました。
今回は、その作業内容を記録としてまとめていきます。
白い四角をスライムに差し替える
まず最初に取りかかったのは、プレイヤー画像の差し替えです。
これまでプレイヤーは、Unityで仮置きした白い四角でした。
これはこれで動作確認には便利なのですが、さすがに初期仕様すぎますね。
今回のゲームは「宝石キャッチ」という名前で、落ちてくる宝石の果物を拾うミニゲームにしました。
なので、プレイヤーには「籠を持って走り回るスライム」のようなキャラクターを使うことにしました。
画像を用意してUnityに追加し、プレイヤーオブジェクトの見た目を白い四角からスライム画像に変更しました。
スライム君もChatGPTに作ってもらいました。
この瞬間、かなりゲームらしさが増しました。
同じように左右に動くだけでも、白い四角が動いているのと、スライムが動いているのとでは印象が全然違います。
「ただのテスト画面」から、「キャラクターがいるゲーム画面」に変わった感じがしました。
背景透過で少しつまずいた
ただ、画像を差し替えるだけで全部うまくいったわけではありません。
最初につまずいたのが、画像の背景透過です。
AIで作った画像を使ったのですが、背景が完全に透明になっておらず、白い背景が残って、そのまま画像に入ってしまったりしました。
Unityに入れてみると、スライムの周りに余計な背景がついてしまい、かなり不自然に見えます。
そこで画像編集ツールを使って、背景を消して透過PNGとして保存し直しました。
このあたりは、ゲーム制作というより画像素材の準備作業に近いですね。
ただ、実際にやってみると、ゲーム制作ではこういう細かい素材調整もかなり大事なんだなと感じました。
プログラムが動いていても、画像の背景が残っているだけで一気に見た目が崩れてしまいます。まさに仮置きしました！って感じになります笑
小さいことですが、こういう部分を整えると画面全体の完成度がかなり変わります。
スライムに簡単な移動アニメーションを追加
次に、スライムの移動アニメーションを追加しました。
といっても、本格的なアニメーションではありません。
左右に動いたときに、スライムの画像が少し切り替わるようにして、「動いている感じ」が出るようにしました。
これもかなり効果がありました。
ただ画像が横にスーッと移動するだけだと、少し固い印象があります。
しかし、移動に合わせて絵が切り替わるだけで、キャラクターがちゃんと動いているように見えます。
今回はChatGPTに「少し潰れているスライムを作って」とお願いしました。
通常スライムと差分スライムで、２枚の画像を用意しました。
Unity初心者としては、このくらいの小さな変化でもかなり嬉しいです。
「お、ゲームっぽい」と思える瞬間が増えていく感じです。
まずは簡単な切り替えだけでも、十分に雰囲気は出せるのだと感じました。
落ちてくるアイテムを3種類の果物宝石に変更
次に、落ちてくるアイテムを変更しました。
これまでは、落ちてくる宝石も仮の四角でした。
今回はそれを、果物の形をした宝石に差し替えました。
用意したのは3種類です。
- ルビーのリンゴ
- トパーズのオレンジ
- エメラルドの梨
それぞれ色や形が違うので、画面に落ちてくるだけでかなりにぎやかになりました。
最初は1種類だけで試して、せっかくなので複数種類を用意して、点数にも差をつけることにしました。
それぞれをUnityに追加し、Prefab化して、ランダムに出現するように設定しました。
Prefab化しておくと、同じ設定のアイテムを何度も使えるので便利です。
言われるがままに「Prefab」を設定しましたが、なかなかに便利っぽい。
実際に触ってみると、落ちてくるアイテムや敵キャラなど、同じものを繰り返し出すときに必要になる仕組みなんだなと少しずつ理解できてきました。
果物ごとに点数差をつける
次に、果物ごとに点数差をつけました。
今回の設定では、以下のようにしました。
- ルビーのリンゴ：1点
- トパーズのオレンジ：2点
- エメラルドの梨：3点
最初は、どの果物を取っても同じ点数でもいいかなと思っていました。
色々な機能を試してみたくて、せっかく3種類あるなら、点数に違いをつけてみました。
高得点の果物が落ちてきたときに、「これは取りたい」と思えるようになりますし、ただ落ちてきたものを拾うだけよりも、少しだけ判断する要素が生まれます。少しだけですがゲーム性が生まれるのを期待してしまいます。
もちろん、今回はまだかなりシンプルなミニゲームです。
それでも、点数差をつけるだけで、プレイ感が少し変わりました。
こういう小さな調整の積み重ねで、ゲームらしさが増していくのだと思います。
出現頻度と落下スピードも調整
3種類の果物宝石を追加したあとは、出現頻度と落下スピードも調整しました。
全部同じ頻度で出てもいいのですが、点数が高いものにはレア感をつけようと思いました。
そこで、果物ごとに出やすさや落ちる速さを変えてみました。
この調整は、実際に遊びながら感覚で確認しました。
「得点の割合と頻度はこうかな？」
「落ちるスピード遅すぎかも？」
「落ちるスピードに差異がなさすぎるかな？」
そんな感じで、数字を少しずつ変えながら試しました。
ここは、作っていてかなり楽しい部分でした。
プログラムを書いて終わりではなく、実際に遊んでみて、感覚に合わせて調整していく。
この作業をしていると、少しだけ「ゲームを作っている」実感が強くなります。
ゲームバランスを考える楽しさと大変さを垣間見ました。
当たり判定がうまく動かない問題
今回、特につまずいたのが当たり判定です。
果物宝石をPrefab化して、ランダムに落ちてくるようにしたあと、プレイヤーに当たっても反応しない問題が起きました。
見た目としてはちゃんと落ちてきています。
プレイヤーにも当たっているように見えます。
でも、スコアが増えない。
最初は原因がよくわかりませんでした。
いろいろ確認してみたところ、Prefab側に必要な設定が足りていなかったことが原因でした。
最終的には、果物側のRigidbody 2Dの設定忘れが原因で、修正したら当たり判定が正常に動くようになりました。
Unityでは、見た目として画像が表示されていても、それだけでは当たり判定は動きません。
当たり判定用のColliderや、物理挙動に関係するRigidbodyなど、必要な部品をきちんと設定する必要があります。（まぁ、この辺は言われるがままやってあまり理解してないんですけど）
このあたりは、初心者がかなりつまずきやすいところだと思います。
自分も最初は、「画面上では当たっているのに、なんで反応しないんだろう」と悩みました。
ここもいつものスクショ＆チャッピータイムです。
教えてもらいながらでも、原因がわかって動くようになると、かなり達成感があります。
エラーというほどではないけれど、「思った通りに動かない」問題をひとつずつ潰していくのも、ゲーム制作の大事な部分なのだと感じました。
背景画像を追加して一気にゲームらしくなった
次に、背景画像を追加しました。
これまでは背景がほとんどなく、かなり無機質な画面でした。
今回は、草原と木々、青空のある背景にしました。
ここももちろんChatGPTです。
これも効果が大きかったです。
プレイヤーや果物宝石を差し替えた時点でもゲームらしさは増していましたが、背景が入ると一気に世界観が出てきます。
スライムが草原で宝石の果物を拾っているように見えるようになりました。
ただ、背景追加でも少しつまずきました。
背景を設定したはずなのに、SpriteがMissingになって表示されないことがありました。
これは、Sprite Rendererに背景画像を設定し直すことで解決しました。この辺は言われるがままに押したのでよくわかってません（ごめんなさい）
タイトル、ゲームオーバー、リトライの流れを確認
見た目を整えたあとは、ゲーム全体の流れも確認しました。
今回は、タイトル画面、ゲーム画面、ゲームオーバー画面の流れを作っています。
SpaceキーでStartできるようにし、ゲームが終わったあとはRetryもできるようにしました。
この流れがあるだけで、かなり「1本のゲーム」らしくなります。
ただプレイ画面があるだけだと、まだテスト版という感じが強いです。
でも、タイトルから始まり、ゲームを遊び、ゲームオーバーになり、もう一度リトライできる。
この一連の流れができると、小さなミニゲームでも完成度が一段上がったように感じます。
特に、リトライできるようになったのは大きかったです。
何度も遊び直せるようになると、自分でも調整しやすくなります。
Windows向けにビルドしてPCで実行
最後に、Windows向けにビルドしました。
Unity上で動くだけではなく、PC上で実行できる形にするためです。
実際にビルドして、作ったゲームを起動できたときはかなり嬉しかったです。
小さなミニゲームではありますが、自分で作ったものがUnityの編集画面を離れて、ひとつのアプリのように動く。
これは、思っていた以上に達成感がありました。
正直、最初はUnityをダウンロードしただけで止まっていたくらいの状態でした。
そこから、白い四角を動かすところから始めて、宝石をキャッチしてスコアが増えるようになり、見た目を整えて、最後にはPC上で動く形にできました。
小さい一歩かもしれませんが、自分にとってはかなり大きな前進です。
今回の作業時間
今回の作業時間は、約4時間でした。
これまでの作業と合わせると、合計作業時間は約8時間になります。
8時間で作ったものとしては、かなり形になったのではないかと思います。
もちろん、まだまだ改善点はあります。
でも、最初のミニゲーム制作としては、とりあえずの「完成扱い」にしてもいいところまでは来られたかなと思います。
しかし、やろうと思えばいくらでもやることは出てきます。
ただ、最初のうちは、どこかで区切って「完成」とすることも大事だと思いました。
終わりのない改善を続けるより、まずは小さくても1本完成させる。
今回は、その経験ができたことが一番大きかったです。
次に改善したいこと
宝石キャッチ Ver.1としては、ひとまず完成扱いにしました。
実際にPC上で遊んでみると、次に改善したい点もいくつか見えてきました。
まず、ゲームを閉じるボタンを追加したいです。
試しに遊んでみて、これどうやって消すんだ？となりました。
また、全画面ではなくウィンドウ表示で開けるようにもしたいです。
PCでちょっと遊ぶなら、ウィンドウ表示の方が扱いやすそうです。
ScoreやTimeなどのUIも、もう少し見やすく調整したいです。
文字の大きさや位置を整えるだけでも、プレイしやすさは変わりそうです。
さらに、ブラウザ上で遊べるようにWebGLビルドにも挑戦してみたいです。
もしブラウザで遊べるようになれば、ブログやXとも相性がよさそうです。
あとは、BGMや効果音もいずれ追加したいです。
果物宝石をキャッチしたときに音が鳴るだけでも、かなり気持ちよくなりそうです。
小さくても完成させる経験は大事だった
今回、「宝石キャッチ」Ver.1を作ってみて、意外と自分いけるやん！！となりました。
最初は白い四角を動かしているだけでした。
そこから少しずつ、スライムに差し替え、果物宝石を追加し、点数差をつけ、背景を入れ、タイトルやリトライの流れを作り、最後にはPCで動くところまで進めました。
ひとつひとつの作業は、そこまで大きなものではありません。
でも、それを積み重ねることで、ちゃんとゲームらしい形になっていきました。
特に印象に残っているのは、Unity上ではなくPC上で実行できた瞬間です。
「あ、自分で作ったゲームが動いている」と感じられて、かなり嬉しかったです。
まだまだ初心者なので、わからないことも多いです。
当たり判定でつまずいたり、画像の透過で悩んだり、Inspectorがうまく表示されなくなったり、背景がMissingになったりもしました。
でも、ひとつずつ調べたり、試したりしながら解決していけば、少しずつ前に進めることもわかりました。
今回の宝石キャッチは、あくまで練習用のミニゲームです。
けれど、ゲーム制作を続けていく上で、かなり大きな一歩になったと思います。
次はVer.2として、UIや終了ボタン、WebGLビルド、BGMやSEの追加などにも挑戦していきたいです。
そして最終的には、本命である「宝石の木」の制作にもつなげていければと思います。
今回の「宝石キャッチ」はその足掛かりの第一歩になったと思います。
コメント