ファイブボックス　Unityカリキュラム　Step2　ジャンプゲーム

このサイトは「[プログラミング教室・ファイブボックス](https://www.fivebox.info/)」の　**Unity学習カリキュラム** ステップ２ 「ジャンプゲーム作成」のフェーズ１になります。

**他のサンプルカリキュラム**
[Step1　Unityの基本](https://qiita.com/drafts/d2e5ea5445d72a2c1a0b/edit)
[Step6 あつ森風、フィッシングゲゲーム作成](https://qiita.com/Yoshida003/items/101069afaf350822183e)

このプロジェクトでは以下のような作品を作ります。
[ジャンプゲーム　(クリックでゲーム開始)](https://unityroom.com/games/fivebox_jump)

[(![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/3dac6ce8-53cf-cc4a-179d-7a433f70abb0.png)](https://unityroom.com/games/fivebox_jump)

## フェーズ１,ジャンプゲームの準備
「プロジェクト１」では、Unity と C# の基本について学習しました。
「プロジェクト２」では簡単なゲーム作成を通じ、一歩進んだUnity及びC#の学習を行っていきます。

まずはこのフェーズで、ジャンプゲームの環境やプレイヤーを準備します。

### 1-1,環境の準備

##### 1-1-1,プロジェクト作成
「プロジェクト１」と同じ方法で、あらたな作品を作成します。
まずは **「Unity Hub」** にアクセスします。
>❶ 左側の「プロジェクト」を選択
（初期状態で「プロジェクト」になっていると思います）
❷ 「新しいプロジェクト」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/78fe9555-6f73-5d19-562f-ca695e86e5bb.png)

作成メニューで以下の操作を行います。
>❸ エディタバージョンを指定（最新バージョンにしておきましょう）
❹ 2D を選択
❺ プロジェクト名を指定「Step_2」にしておきます
❻ 保存場所を指定
❼「プロジェクトを作成」ボタンを押します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/1536df09-8d79-ee01-63a4-82ad679fa287.png)

##### 1-1-2,フォルダ作成
<font color="IndianRed">**【Project 】**</font> に新たなフォルダを用意しておきます。
フォルダの作り方は、**「Project」**　内で右クリック、もしくは左上の「＋ボタン」からメニューを表示し、**[Create]　⇒　[Folder]** を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/94ccd8c1-8662-10c6-754b-4c4a1b74f108.png)
以下のフォルダを用意します。

|フォルダ名|説明|
|:--|:--|
|**01_Scenes**|デフォルトの「Scenes」の名前を変更します|
|**02_Scripts**|スクリプトファイルを保管します|
|**03_Predabs**|プレハブを保管します|
|**04_Materials**|色の間定理あると、物理マテリアルを保管します|
|**05_Others**|その他の素材（取り込んだ画像やフォントなど）を保管します|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/01f1d48e-d90d-07c4-e6d9-7bd8705dfb86.png)

<font color="gray">**[01_Scenes]**</font> フォルダ内に作成された **「SampleScene」** の名前を変更します。
**「Stage01」** にしておきましょう。
警告が表示されるので　**[Ignore]** （無視）を選択しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/2fca07fb-7b69-5b60-758e-428d1c477358.png)


### 1-2,ゲームオブジェクトの準備
##### 1-2-1,地面の作成
ここから作品に登場するオブジェクトを作成していきます。
まずは地面ですが、<font color="IndianRed">**【Hierarchy】**</font> から **[ Create ] => [ 3D Object ] => [ Cube ]** で　3Dのキューブを生成。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/a4db10fe-b1ae-8603-64c9-f78d4de2b809.png)
作成した **[Cube]** を以下のように調整します。
>❶ 名前を **「Ground」**　に指定
❷ **「Ground」** というタグを作成しセット
>
><font color="deepskyblue">**【transform】コンポーネント**</font> 
❸ **Position** ： X ⇒ **0**、Y ⇒ **-3**、Z ⇒ **0**
❹ **Scale** ： X ⇒ **50**、Y ⇒ **6**、Z ⇒ **1**
>
> <font color="deepskyblue">**【Box Collider 2D】コンポーネント**</font> 
❺【Box Collider】コンポーネント を [ Remove COmponent ] で削除し、**【Box Collider 2D】コンポーネント** 追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/e1227f7b-6930-d084-5668-13994233a122.png)

作成した「Graund」に地面の色を指定します。
<font color="gray">**[04_Materials]**</font> フォルダ内で右クリック、または左上の「＋ボタン」を押してメニューを表示し、**[Create]** ⇒ **[Material]** でマテリアルを作成、茶色系を指定しておきます。
名前を **「BrownMaterial」** にしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/9361632d-533c-94de-dd5b-0e431fe9266e.png)
作成したマテリアルを **「Ground」** にセットし、地面の色を茶色にしておきます。

ただこのままでは全体的に暗いので、ライトを追加します、
<font color="IndianRed">**【Hierarchy】**</font> で右クリック、または左上の「＋ボタン」を押してメニューを表示し、**「Light」** ⇒ **「Directional Light」** でライトを追加します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/3c766ce4-d61c-ee81-252f-cd998f957234.png)

##### 1-2-2,キャラクターの作成
今回もキャラクターは、**アセットストア** から取得します。
**「spaceman」** で検索し、下の図のアセットを取得、用意します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/8e9d5f20-c600-f05b-3a66-a00a4d387705.png)
「DemoScene」は不要なのでチェックをはずし、右下の **「Import」** ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/3ebbd907-b613-e560-d7e0-4525503f5f7e.png)
取得した画像を使ってアニメーションを作成しますが、事前に大きさの調整を行います。
この素材は若干大きいようなので小さくします。
**[hero] => [walk] フォルダ** 内の **「hero_walk_0001」～「hero_walk_0012」** をまとめて選択
<font color="IndianRed">**【Inspector】 メニュー**</font>
>❶ **「Pixels Par Unit」** を **200** に指定
>❷ 右下の **「Apply」** ボタンで確定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/ea6343f1-5b30-c8e0-8950-03291438e52c.png)
同様の作業を **[hero] => [fly] フォルダ** 内の **「hero_fly_0001」～「hero_fly_0003」** に対しても行います。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/ef4d6d5d-041c-6602-e4b4-610720ae31c3.png)

この素材は「Walk」と「fly」のみで、待機状態の画像が無いようですので、ファイルを組み合わせて作ってみたいと思います。
**[hero] => [walk] フォルダ** 内の **「hero_walk_0006」** と **「hero_walk_0009」** の2つの素材を選択し、<font color="IndianRed">**【Hierarchy】**</font> にドラッグ＆ドロップし、アニメーションクリップを作成します。
AnimationClip の名前は **「idle」** にしておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/55b21b00-4c27-1743-f1fe-cb31587ee28d.png)

##### 1-2-3,キャラクターの調整

取り込んだオブジェクトを以下のように調整します。
>❶ **名前** ： **「Hero」** に変更
❷ **Tag** ： 既存の **[Player]** を指定
❸ <font color="deepskyblue">**【transform】コンポーネント**</font> から
 **Position** ： **X** ⇒　0 、**Y** ⇒　1.2 、**Z** ⇒　0 として、地面の上に表示されるように指定
❹ <font color="deepskyblue">**【BoxCollider2D】コンポーネント**</font> を追加
❺ <font color="deepskyblue">**【Rigidbody2D】コンポーネント**</font> を追加 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/133df118-fd11-41fc-2965-d76ef51c1eb7.png)

取り込んだ各コンポーネントを調整します・
<font color="deepskyblue">**【BoxCollider2D】コンポーネント**</font> 
> **[Edit Collider]** からコライダーの大きさを指定します。
ゲームの特性上、Xの幅を補足しておくといいかもしれません。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/d3ddd36a-1927-b7ad-7429-61691547d1b8.png)

 <font color="deepskyblue">**【Rigidbody2D】コンポーネント**</font> 
>**[Gravity Scale]** の値を ***2*** に指定します。
**[Freeze Ratation Z]** にチェックを入れて、Z軸上の回転（前転、後転）をなくします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/6b7bf3c6-935c-2901-16e1-f6a63ae24130.png)

さらに<font color="IndianRed">**【Animator】メニュー**</font> から
作成した **「idle」** のステートを選択し、**Inspector** で **[speed]** の値を ***0.2*** にしてアイドリング状態の動きを調整します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/48769d42-a9e4-a0a6-32fd-ef0214e1fc2c.png)

これでプレイヤーの素材ができました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/77dd05b5-349f-d0ee-a4bc-e28ac07c824f.png)

##### 1-2-4,アニメーションの準備
事前に、歩くアニメーションとジャンプのアニメーションを用意しておきます。
どちらのアニメーションも事前に用意されているので、それを活用します。
**[hero] => [walk] フォルダ** から　**[Walk]** のクリップを　<font color="IndianRed">**【Animetor】**</font>　の **Base Layer** にドラッグ＆ドロップ
同様に、**[hero] => [fly] フォルダ** から　**[fly]** のクリップを　<font color="IndianRed">**【Animetor】**</font>　の **Base Layer** にドラッグ＆ドロップ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/e5b4d021-add3-54dc-1099-ebfd748b77bd.png)

続いて、<font color="Orange">**「bool型」**</font> のパラメータ を2つ用意します。
❶　**IsWalk**　⇒　Hero がアイドリング状態から「walk」に遷移する時ののパラメータ
❷　**IsFly** ⇒　Hero が「fly」に遷移する際のパラメータ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/cccfdb39-b69c-0d62-094e-7a6f278046e2.png)

続いて、各ステートから遷移する **「Transition」** を作成し、プロパティ値を設定します。

**■ [idle] ⇒ [walk]**
>**[idle]** で右クリック、**[walk]** の上でドロップし、**Transition** を作成。
<font color="IndianRed">**【Inspector】**</font> で次のプロパティ値を指定します。
❶ **[Has Exit Time]** のチェックをはずす
　▶**Settings** を展開
❷ **[Transition Duraior]** を ***0*** に指定
>
>❸ **[Conditions]** に作成したパラメータ **[IsWalk]** をセットし、値を <font color="Orange">**true**</font> に指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/e725e00f-dc4a-1fec-fc02-6cd7595d9ee8.png)

**■  [walk] ⇒ [idle]**
>**[Walk]** で右クリック、**[idle]** の上でドロップし、**Transition** を作成。
<font color="IndianRed">**【Inspector】**</font> で次のプロパティ値を指定します。
❶ **[Has Exit Time]** のチェックをはずす
　▶**Settings** を展開
❷ **[Transition Duraior]** を ***0*** に指定
>
>❸ **[Conditions]** に作成したパラメータ **[IsWalk]** をセットし、値を <font color="Orange">**false**</font> に指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/2ee3c7c9-e89f-0b2f-8ef7-723e9ffebb9a.png)

**■  [Any State] ⇒ [fly]**
>**[Any State]** で右クリック、**[fly]** の上でドロップし、**Transition** を作成。
<font color="IndianRed">**【Inspector】**</font> で次のプロパティ値を指定します。
❶ **[Has Exit Time]** のチェックをはずす
　▶**Settings** を展開
❷ **[Transition Duraior]** を ***0*** に指定
>
>❸ **[Conditions]** に作成したパラメータ **[IsFly]** をセットし、値を <font color="Orange">**true**</font> に指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/90e3bd93-a1fc-0094-b5ee-f2db915c1950.png)

**■  [fly]　⇒　[idle]**
>**[fly]** で右クリック、**[idle]** の上でドロップし、**Transition** を作成。
<font color="IndianRed">**【Inspector】**</font> で次のプロパティ値を指定します。
❶ **[Has Exit Time]** のチェックをはずす
　▶**Settings** を展開
❷ **[Transition Duraior]** を ***0*** に指定
>
>❸ **[Conditions]** に作成したパラメータ **[IsFly]** をセットし、値を <font color="Orange">**false**</font> に指定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/556505/c2d624f0-90c8-013d-54e8-8603ad6350c6.png)

これで **Animation** の設定が完了しました。


最後までご覧いただき、ありがとうございます。
引き続きカリキュラムを参照したい場合は、「ファイブボックス」までお気軽にお問い合わせください。

https://www.fivebox.info/
Mail:ueda@fivebox.info
Tel:0268-71-7294

---
&copy; 2020 - 2022 FiveBox CORPORATION.