4th week - dsuz/unity-game-dev1-1st-term-2020 GitHub Wiki

今回のテーマ 動画

  1. 音を鳴らす
  2. スプライトを入れ替える

プロジェクトの準備

  • 前回までのプロジェクトがある人は、4th_week_assets.unitypackage をプロジェクトにインポートする
  • 前回までのプロジェクトがない人は、新しくプロジェクトを作って 3rd_week_finish.unitypackage をプロジェクトにインポートすれば、「前回終了時のプロジェクト」になる
    • 作業対象のシーンは /Assets/Scenes/GameScene です

BGM を鳴らす 動画

Audio Source コンポーネントを使って音を鳴らす方法を学びます。まずは BGM を鳴らしてみましょう。

  1. 空の (Empty) GameObject を作り、以下の設定をする
    1. 名前を BGM にする
    2. Audio Source コンポーネントをアタッチする
    3. コンポーネントのプロパティ "AudioClip" に BGM1 アセットをアサインする
    4. コンポーネントのプロパティ "Play On Awake" と "Loop" にチェックを入れる
    5. コンポーネントのプロパティ "Volume" を 0.1 にする
      • BGM の音が大きいため
  2. 以下のような設定になっていればよい

この状態でシーンを実行すると、ゲームの BGM が流れます。この Audio Source コンポーネントの設定は「自動的に指定した音が流れ、ループする」という設定です。

課題

BGM2 という AudioClip アセットがプロジェクト内にあります。BGM1 の代わりに BGM2 を流してみましょう。

効果音を鳴らす 動画

次は、BGM と同じように Audio Source コンポーネントを使って効果音を鳴らします。BGM との違いは、「勝手に流れるのではなく、何かが起きた時に音が流れる」ということです。以下のようにして設定していきます。

  1. Ball のオブジェクトに Audio Source コンポーネントを追加し、以下のように設定する
    1. AudioClip プロパティに coin1 アセットをアサインする
    2. Play On Awake, Loop プロパティのチェックを外す
  2. 以下のような設定になっていればよい

この状態でシーンを実行すると、ボールが何かにぶつかると効果音が鳴る。効果音を鳴らす処理は BallController に追記されている。

OnCollisionEnter2D と OnTriggerEnter2D 動画

void OnCollisionEnter2D(Collision2D collision) は、「衝突した時に呼ばれる関数」です。これは決められた通りに書くと、衝突した時に自動的に呼ばれます。決められた通りに書かなければならないので、書くときは Visual Studio の自動補完機能を使いましょう。

この関数は以下の条件が揃うと呼ばれます。

  1. このスクリプトがアタッチされたオブジェクトに Collider がアタッチされており、それらの内一つ以上がトリガーモードでないこと
  2. この(以下同文)オブジェクトの Collider が、他のオブジェクトの Collider(トリガーモードではない)と「衝突」した時
  3. 衝突した互いのオブジェクトのどちらか一つに Rigidbody (2D) コンポーネントがアタッチされていること
  4. Transform.Position の書き変えによる瞬間移動ではなく、物理的な挙動で衝突した時

一方、void OnTriggerEnter2D(Collider2D collision)は「接触した時に呼ばれる関数」です。以下の条件下で呼ばれます。

  1. このスクリプトがアタッチされたオブジェクトと他のオブジェクトの Collider が「接触」した時
  2. 2つの Collider のどちらかがトリガーモードであること
  3. 衝突した互いのオブジェクトのどちらか一つに Rigidbody (2D) コンポーネントがアタッチされていること
  4. Transform.Position の書き変えによる瞬間移動ではなく、物理的な挙動で衝突した時

後半2つの条件は「物理的挙動での衝突・接触でないと当たり判定ができない」という意味なのですが、忘れがちです。

課題

coin2 という AudioClip アセットがプロジェクト内にあります。ボールがぶつかった時に鳴る効果音を coin1 から coin2 に変えてみましょう。

発展課題

ボールがぶつかった相手によって違う効果音を鳴らしてみましょう。例えば BlueBlock にぶつかった時だけ違う効果音を鳴らしてみましょう。

ヒント:タグと if 文を使う必要があります。また、まだ扱っていないやり方を使って別々の音を管理する必要があります。

スプライトを入れ替える1 動画

現時点ではシンプルなブロック等で作っているが、これらのスプライトを入れ替えることにより見た目を良くしていきましょう。ただし、他のスプライトを使う際にはサイズなど考慮すべき事があるため、以下の手順でそれらを試していきましょう。

  1. Asset Store から Free 8-Bit Pixel Pack をプロジェクトにインポートする
  2. シーン上に置いてあるブロックから適当なものを一つ選び、その Sprite を "Blocks_0" に入れ替える
    • オブジェクト ピッカーで以下のように選ぶのがよいでしょう
    • 以下のようにスプライトが小さすぎることがわかるでしょう
  3. 以下のようにして、スプライト アセット "Blocks" の Pixels Per Unit を 100 → 50 に変える
  4. Scale の X を 2 に、Box Collider 2D の Size X を 0.64 に変える

これで同じ大きさのブロックになった。

スプライトを入れ替える2 動画

次に壁のスプライトを入れ替える。

  1. Sprite アセット "Columns" を選び、Inspector から "Sprite Editor" ボタンをクリックして Sprite Editor を起動する
  2. Sprite Editor を起動すると、誤った形に Sprite が切り取られていることがわかる
  3. これを修正するために、Slice ボタンをクリックして、以下のように設定し、下の Slice ボタンをクリックする
    • Type: Grid by Cell Count
    • Columns & Row: 9, 1
    • 以下の動画のようにして設定する
  4. これで Columns が正しく Slice されたので、Apply ボタンをクリックして変更を確定させる
  5. Wall の Sprite を Columns_0 に変更する
    • こちらもまた小さすぎるため、Pixels Per Unit を変更する
  6. Columns アセットの Pixels Per Unit を 100 → 32 に変更する
  7. Sprite Renderer の Draw Mode を Simple → Tiled に変える
    • Scale の Y が 0.3 になってしまった時は 1 に戻す
  8. 警告に対応するために、Columns アセットの Mesh Type を Tight → Full Rect に変える
  9. Tile Mode を Continuous → Adaptive に変える
    • これにより、Tile ではあるが、適切に伸縮してぴったり収まるようになる
  10. Wall は最終的に以下のような設定になる

この手順で、重要なのは以下の3点です。

Sprite アセットはスプライトシートとして「一枚の画像に複数の部品が含まれている」ことがある。これをどのようにスライスするかは Sprite Editor で設定する。

入手したスプライトが小さすぎる、あるいは大きすぎることがある。このような場合は Pixels Per Unit を調整して利用する。本来であれば、開発前にキャラクターを何ピクセルx何ピクセルで作るか決めて、大きさ(単位:メートル)も決めておくのだが、素材を自分たちで作るのではなくどこかから手に入れてくる場合は、どうしても大きさが異なる場合があり、調整が必要になる。Pixels Per Unit で調整する以外の方法としては、「Scale で調整する」もしくは「画像を Photoshop 等で拡大・縮小して合わせる」といった方法がある。

Sprite は一枚の絵として (Draw Mode = Simple) だけでなく、タイルのように複数の絵をつなげて (Draw Mode = Tiled) 表示させることもできる。

背景をつける 動画

BKG01 アセットをシーンビュー上にドラッグ&ドロップする。適当に位置を調整して、ちょうどよくカメラに収まるようにする。ここで背景によってブロック等が隠れてしまうので、BKG01 オブジェクトの Sprite Renderer コンポーネントに対して、以下のように Order in Layer を -1 に設定すると、背景が後ろに表示される。

Order in Layer は小さい数字ほど後ろに表示される。Sorting Layer はやや高度であり、現状まだ必要ではないでしょう。

課題

スプライトの素材を自由に手に入れてきて、オリジナルの壁やブロックを作りましょう。例えばブロックが四角い必要はありません。ただし丸いブロックなどの場合は Collider も Circle Collider 2D を使うなどしてゲームとして違和感がないように仕上げましょう。

他には、例えば以下のようなことをしてみるとよいでしょう。

  1. 壊れないブロック等に Bounciness を大きくした Physics Material 2D をアサインする
  2. ブロックに Rigidbody2D をアタッチして Freeze Position するが Freeze Rotation はしない

オリジナルのステージができたら、実行中の動画をキャプチャして Slack に送って下さい。

まとめ

  1. 音を鳴らす機能は Audio Source コンポーネントが持っています
    • Play On Awake, Loop の設定に気をつけましょう
  2. どんな音を鳴らすかという音声ファイルは AudioClip アセットです
  3. Sprite を入れ替えるという作業に慣れておきましょう
  4. Sprite はスプライトシートとして提供されることもあります
    • その場合は Sprite Editor を使って自分で Slice しなければならないこともよくあります
  5. Sprite の大きさが合わない場合は Pixels Per Unit を調整しましょう
  6. Sprite の表示の仕方は Simple と Tiled があります
  7. Sprite の表示順序は Order in Layer で制御できます

今回の作業の後は、以下のようなステージができるはずです。どんどん手を加えてオリジナルなステージにしていきましょう。

参考資料

  • AudioSource コンポーネント
    • Unity の教科書: 4-7, 8-5-4
  • OnCollisionEnter2D, OnTriggerEnter2D
    • Unity の教科書: 6-9, 8-5-2 ※ただし3Dなので2Dに読み替える必要がある
    • 楽しく学ぶ Unity 2D超入門講座: Chapter4 4.3, 4.6~4.8

スプライトについては、紹介している書籍ではこれについて詳しく書いているものがなかったため、検索などして資料を見つけてください。いくつか以下に挙げておきます。

  1. スプライトエディター
  2. Sprite Renderer コンポーネント
⚠️ **GitHub.com Fallback** ⚠️