【初心者向けチュートリアル】Boltを使用してUnityで簡単なゲームを作成する-2

こちらの記事ではゲームで使用する素材の収集～配置～当たり判定までを行います。

#素材の収集

目次にも書きましたが、今回のチュートリアルでは簡単な2Dゲームを製作していきます。
まずはゲーム内で使用する画像や音声の素材を用意していきましょう。

今回のゲームに必要な素材

• 画像

  • [背景　保存名:BackGround] (https://www.irasutoya.com/2016/01/blog-post_135.html)
  • [プレイヤー(リンク先右側の画像)　保存名:Player] (https://www.irasutoya.com/2014/08/blog-post_97.html)
  • [アイテム(いちご、オレンジ、メロン)　保存名:Strawberry、Orange、Melon] (https://www.irasutoya.com/2019/11/blog-post_314.html)

• BGM

  • [タイトル　保存名:Title] (https://amachamusic.chagasi.com/music_natsuyasuminotanken.html)
  • [ゲーム本編　保存名:Game] (https://amachamusic.chagasi.com/music_happytime.html)
  • [リザルト　保存名:Result] (https://amachamusic.chagasi.com/music_tanoshiimugibatake.html)

• SE

  • [アイテムを拾った時用(リンク先「powerup03」)　保存名:Get] (https://taira-komori.jpn.org/game01.html)
  • [ボタンクリック(リンク先「決定、ボタン押下3」)　保存名:Button] (https://soundeffect-lab.info/sound/button/)

画像はいらすとやさん、BGMは甘茶の音楽工房さん、SEは無料効果音で遊ぼう！さん、効果音ラボさんでお借りします。ありがとうございます！
音声に関しては自分が気に入ったものがあれば他の物でも大丈夫です！

素材は整理しやすいように保存名に書いてある名前にリネームしておきましょう。

DLが終わったらプロジェクト画面に移り、素材を格納するフォルダを作っていきます。
Projectウィンドウで「Assets」フォルダを開いていることを確認して、右クリック>Create>Folderから新規フォルダを作り、名前を「Resources」にします。
Resourcesフォルダーを開いたらその中に3つ新しいフォルダーを作り、それぞれ名前を「Image」、「BGM」、「SE」にしましょう。

こんな感じで名前の変更が終わったら、先ほど収集した素材をドラッグ&ドロップして
画像は「Image」フォルダに、
BGMは「BGM」フォルダに、
SEは「SE」フォルダに
それぞれ入れてください。

これで素材の収集は完了です。

#素材の配置

の前に、シーンの名前を変えておきましょう。

**まずシーンって何？**と思うかもしれませんが、ゲームというのはタイトル、ゲーム本編、リザルトなどから構成されていますよね。この「タイトル」などのひとくくりをシーンと呼びます。

Unityを使った開発では、このシーンごとに作業を進めていきます。今はSampleSceneという名前のシーンにいて、そこで作業している状態です。ここからしばらくはゲーム本編の部分を作っていきますが、シーン名がSampleSceneだと中身が何のシーンなのかわかりにくいので変更しよう、ということです。

シーンはProjectウィンドウの中に保存されていますので、Assets>Scenesに移動して確認しましょう。
中に「SampleScene」が存在していると思うので、クリック>F2を押して名前を「Game」に変更しておきましょう。

では改めて、集めた素材を実際にゲーム画面に配置していきます。
といっても全部一気に置いてしまうとごちゃごちゃするので、まずは背景から配置していきましょう。

Imageフォルダ内の「BackGround」を、左上のSceneウィンドウにドラッグ&ドロップします。
今後はこのSceneウィンドウに素材などを置いて行って作業します。
また、Sceneウィンドウ上に存在しているものは「オブジェクト」と呼ばれます。
現在のシーンに存在しているオブジェクトの一覧はHierarchyウィンドウから確認できます。

BackGroundもSceneウィンドウにドラッグして配置したので、オブジェクトになりました。

さて、Sceneウィンドウに配置したBackGroundについてですが、Gameウィンドウを確認してみましょう。

このGameウィンドウについては前記事で少し言及しましたが、このウィンドウには現在作成しているゲームの実際の実行画面が表示されます。現在は少し初期背景の青い部分が映ってしまっていますね。つまり、今のままだとBackGroundの比率が実際のゲーム実行画面の比率が合っていないことになります。

なのでBackGroundの拡大率を調整して、画面いっぱいに背景が表示されるようにしていきましょう。
HierarchyウィンドウでBackGroundを選択し、Inspectorウィンドウを確認しましょう。
このInspectorウィンドウでは、選択しているオブジェクトの情報を見たり、各種設定を行うことができます。
今回は画像を拡大したいので、Scaleの値をX,Y,Z方向共に3くらいにしてみましょう。

いい感じの比率ですね。
また背景は常に最奥に配置されていてほしい要素なので、奥行きにあたるPositionのZの値も5くらいにしておいてください。

背景が終わったらついでにPlayerも配置してしまいましょう。BackGroundと同じくHierarchyに画像をドラッグ&ドロップしてください。

巨人
こちらも先ほどと同じようにScaleの値をX,Y,Z方向共に0.3ぐらいにしておきましょう。男の子が縮んでくれるはずです。
ついでにPositionのXを0、Yは-2くらいにして男の子が床の上に立つよう位置調整しておきます。

これで素材の配置は終了です。
アイテムなどに関しては後程また配置します！

#当たり判定

次に当たり判定、「Collider」の設定です。
Colliderをつけることでオブジェクト同士の判定がとれるようになります。
今回のゲームではプレイヤーキャラクターがこの草原を床にして歩くようにしたい＝つまりプレイヤーと床の接地判定を取りたいので、まず草原の部分にColliderをつけていきます。

HierarchyでBackGroundを選択>Inspectorの下のほうにあるAddComponentをクリック>検索欄に「Collider」と入力>候補に出てくる「BoxCollider2D」を選択

これでInspectorにBoxCollider2Dが追加されます。
今後こういったColliderなどの「コンポーネント」と呼ばれるものは以上のようにアタッチしてください。

BoxCollider2Dについてですが、これは2Dゲーム用の四角い当たり判定です。名前のままですね。
Scene画面を見るとBackGroundの周りを緑の線が囲っているのがわかります。この緑の線の内側が判定部分です。
次はこの判定範囲を床の部分だけにしていきます。
Inspector>BoxCollider2D>EditColliderの右にあるボタンをクリック。

Colliderが変形できるようになるので、以下の画像の赤で囲んでいる部分をクリック&草原の境界線部分までドラッグします。

↓

これで床のあたり判定が出来ました。

次にプレイヤーに判定をつけていきましょう。
先ほどと同じくPlayerにもBoxCollider2Dをつけます。
今回はいい感じにPlayerを判定が囲ってくれるので、調整はいりません。

ではこのあたりでいったん再生してみましょう！
再生をするとGameウィンドウで実際にゲームをテストプレイできるようになります。

画面中央上部の三角のボタンが再生ボタンです。押してみます。

…といってもまだ配置をしただけなのでGame画面に変化はないのですが…。もう一度再生ボタンを押して止めてください。

ちなみに再生中でもInspectorはいじれます。
再生中に変更した設定は再生後に元に戻るので安心していろいろいじってみてください。

ちょっとまだわかりにくいですが、これで当たり判定の設定は完了です。

今回のチュートリアルはここまでです。お疲れさまでした！
次回はグラフの作成～Playerの移動までをやっていきます。
【初心者向けチュートリアル】Boltを使用してUnityで簡単なゲームを作成する-3