D日記

モーションアーティストの技術ブログだよ。日常も書くよ。

MENU

【ゲーム開発】そらとぶかえるの裏側をご紹介

今回は昨年末にリリースした「そらとぶかえる」のゲームの裏側をご紹介していきます(^^)v

開発背景

なにかアプリを出したいけど、あんまり大きい規模のものだと完成しないので、比較的規模の小さいミニゲームを作ろうって話になりました。
ゲームの元ネタは妻が出したもので、レベルデザインとプログラムを私が担当しました。

シーン数について

このゲームは「Main」シーンだけで構成されています。
シーンが遷移しているように見えるのは、UIの表示非表示を切り替えているだけです。
f:id:ponta565:20190313203214p:plain

ゲームを動かしているスクリプト達

上記のシーン内に「GameManager」オブジェクトを配置して、基本的に全てのスクリプトをここに割り当てています。
f:id:ponta565:20190313204248p:plain

ゲームマネージャー

プレイヤースピード、風船の膨らみ、スコア、風船アニメ制御、背景画像を切り替える仕組み などなどを制御しています。
f:id:ponta565:20190313204454p:plain

UIマネージャー

ゲーム中の全てのUIはこのスクリプトを介してしか制御できません。別スクリプトからUIを呼び出す時は必ずこのクラスを通します。できるだけ疎結合な作りを心がけました
f:id:ponta565:20190313204839p:plain

ジェネレーター

障害物と風船を生成するクラスです。風船サイズは範囲内でランダムに切り替わります。
f:id:ponta565:20190313205133p:plain

f:id:ponta565:20190313205322p:plain

プレイヤー制御

プレイヤーがどれくらいのスピードで上昇するか?左右移動速度は?などを制御するクラスです。
f:id:ponta565:20190313205358p:plain

実はけろたんは上にのぼっているわけではないんですよね。風船が下に落ちているだけです(笑)
f:id:ponta565:20190313205652g:plain

表情切り替え

このゲームの主人公(けろたん)は状況に応じて表情が変化します。
これは、ゲームを作ってる途中で「表情が切り替わった方がいいよね!」ってノリで実装したやつです。

ゲームを実行していない時はけろたんの顔はこんな感じになっています。全ての顔が表示しているのですね笑
f:id:ponta565:20190313202559p:plain

表情はグループ化して、それぞれのSpriteをプログラムで切り替えを行っています。
f:id:ponta565:20190313203730p:plain

上記の画像を表情マネージャークラスで制御しています。けろたんの状況毎の配列があり、配列内にSprite(画像)をセット。
そしてゲーム実行時に、けろたんの状況に応じて、配列内でランダムに表情が表示されるって仕組みです。
今思えば、そんなに表情データも無いからもっと簡単な実装で良かったような・・・
f:id:ponta565:20190313210202p:plain

サウンドマネージャー

音を再生する時は必ずこのクラスを通すようにしています。
BGMとSEをそれぞれ配列で分けて、予めAudioをセットしておくのです。
再生する時は「PlaySE("se_balloonCrash)」のように、引数に文字列を入れればいいので簡単です。
f:id:ponta565:20190313210535p:plain

エフェクトマネージャー

これもサウントと同じ仕組みですね。使いたいエフェクトをセットして呼び出す。このクラスを必ず介する。
f:id:ponta565:20190313210723p:plain

セーブと設定

ゲーム内での情報の保存はこのクラスを介します。
f:id:ponta565:20190313210844p:plain

プレイヤーと風船

プレイヤーはそれぞれ、「風船」「腕」「体」でパーツがわかれています。
f:id:ponta565:20190313234003p:plain

全パーツに「Rigidbody2D」が適用されており、「腕」「体」には「Hinge Joint 2D」がついております。
f:id:ponta565:20190313234514p:plain

これで、キャラのプラプラを表現しています。
f:id:ponta565:20190313234150g:plain

背景

細長い画像をリピートして使用しています。
f:id:ponta565:20190313232046p:plain また、Nメートル毎に 昼→夕方→夜 と時間帯の変化に合わせて、背景画像をフェードで切り替えています。
これは簡単なシェーダーを組みました。Lerpを使って2枚の画像を切り替えるだけのシェーダーです。
f:id:ponta565:20190313233157g:plain

UIアニメーション

CanvasのルートなどにAnimatorを追加して、ステートマシンで制御したり、iTweenを使用したりしています。
複雑な動きや、ワンアクション後にループが必要なものをAnimatorで制御するって使い分けをしていました。
f:id:ponta565:20190313232558p:plain


とこんなかんじで、開発の裏側をお見せしました。これからゲーム開発をやってみたい人のお役に少しでも立てれば幸いです。

良ければゲームの方もDLして遊んでみてください。
これが本当の目的です!

play.google.com

www.deathponta.com