このサイトは「プログラミング教室・ファイブボックス」の Unity学習カリキュラム ステップ２ 「ジャンプゲーム作成」のフェーズ１になります。
他のサンプルカリキュラム
Step1 Unityの基本
Step6 あつ森風、フィッシングゲゲーム作成
このプロジェクトでは以下のような作品を作ります。
ジャンプゲーム (クリックでゲーム開始)
フェーズ１,ジャンプゲームの準備
「プロジェクト１」では、Unity と C# の基本について学習しました。
「プロジェクト２」では簡単なゲーム作成を通じ、一歩進んだUnity及びC#の学習を行っていきます。
まずはこのフェーズで、ジャンプゲームの環境やプレイヤーを準備します。
1-1,環境の準備
1-1-1,プロジェクト作成
「プロジェクト１」と同じ方法で、あらたな作品を作成します。
まずは 「Unity Hub」 にアクセスします。
❶ 左側の「プロジェクト」を選択
（初期状態で「プロジェクト」になっていると思います）
❷ 「新しいプロジェクト」をクリック
作成メニューで以下の操作を行います。
❸ エディタバージョンを指定（最新バージョンにしておきましょう）
❹ 2D を選択
❺ プロジェクト名を指定「Step_2」にしておきます
❻ 保存場所を指定
❼「プロジェクトを作成」ボタンを押します
1-1-2,フォルダ作成
【Project 】 に新たなフォルダを用意しておきます。
フォルダの作り方は、「Project」 内で右クリック、もしくは左上の「＋ボタン」からメニューを表示し、[Create] ⇒ [Folder] を選択します。
以下のフォルダを用意します。
| フォルダ名 | 説明 |
|---|---|
| 01_Scenes | デフォルトの「Scenes」の名前を変更します |
| 02_Scripts | スクリプトファイルを保管します |
| 03_Predabs | プレハブを保管します |
| 04_Materials | 色の間定理あると、物理マテリアルを保管します |
| 05_Others | その他の素材（取り込んだ画像やフォントなど）を保管します |
[01_Scenes] フォルダ内に作成された 「SampleScene」 の名前を変更します。
「Stage01」 にしておきましょう。
警告が表示されるので [Ignore] （無視）を選択しておきます。
1-2,ゲームオブジェクトの準備
1-2-1,地面の作成
ここから作品に登場するオブジェクトを作成していきます。
まずは地面ですが、【Hierarchy】 から [ Create ] => [ 3D Object ] => [ Cube ] で 3Dのキューブを生成。
作成した [Cube] を以下のように調整します。
❶ 名前を 「Ground」 に指定
❷ 「Ground」 というタグを作成しセット【transform】コンポーネント
❸ Position ： X ⇒ 0、Y ⇒ -3、Z ⇒ 0
❹ Scale ： X ⇒ 50、Y ⇒ 6、Z ⇒ 1【Box Collider 2D】コンポーネント
❺【Box Collider】コンポーネント を [ Remove COmponent ] で削除し、【Box Collider 2D】コンポーネント 追加します。
作成した「Graund」に地面の色を指定します。
[04_Materials] フォルダ内で右クリック、または左上の「＋ボタン」を押してメニューを表示し、[Create] ⇒ [Material] でマテリアルを作成、茶色系を指定しておきます。
名前を 「BrownMaterial」 にしておきます。
作成したマテリアルを 「Ground」 にセットし、地面の色を茶色にしておきます。
ただこのままでは全体的に暗いので、ライトを追加します、
【Hierarchy】 で右クリック、または左上の「＋ボタン」を押してメニューを表示し、「Light」 ⇒ 「Directional Light」 でライトを追加します。
1-2-2,キャラクターの作成
今回もキャラクターは、アセットストア から取得します。
「spaceman」 で検索し、下の図のアセットを取得、用意します。
「DemoScene」は不要なのでチェックをはずし、右下の 「Import」 ボタンを押します。
取得した画像を使ってアニメーションを作成しますが、事前に大きさの調整を行います。
この素材は若干大きいようなので小さくします。
[hero] => [walk] フォルダ 内の 「hero_walk_0001」～「hero_walk_0012」 をまとめて選択
【Inspector】 メニュー
❶ 「Pixels Par Unit」 を 200 に指定
❷ 右下の 「Apply」 ボタンで確定
同様の作業を [hero] => [fly] フォルダ 内の 「hero_fly_0001」～「hero_fly_0003」 に対しても行います。
この素材は「Walk」と「fly」のみで、待機状態の画像が無いようですので、ファイルを組み合わせて作ってみたいと思います。
[hero] => [walk] フォルダ 内の 「hero_walk_0006」 と 「hero_walk_0009」 の2つの素材を選択し、【Hierarchy】 にドラッグ＆ドロップし、アニメーションクリップを作成します。
AnimationClip の名前は 「idle」 にしておきます。
1-2-3,キャラクターの調整
取り込んだオブジェクトを以下のように調整します。
❶ 名前 ： 「Hero」 に変更
❷ Tag ： 既存の [Player] を指定
❸ 【transform】コンポーネント から
Position ： X ⇒ 0 、Y ⇒ 1.2 、Z ⇒ 0 として、地面の上に表示されるように指定
❹ 【BoxCollider2D】コンポーネント を追加
❺ 【Rigidbody2D】コンポーネント を追加
取り込んだ各コンポーネントを調整します・
【BoxCollider2D】コンポーネント
[Edit Collider] からコライダーの大きさを指定します。
ゲームの特性上、Xの幅を補足しておくといいかもしれません。
【Rigidbody2D】コンポーネント
[Gravity Scale] の値を 2 に指定します。
[Freeze Ratation Z] にチェックを入れて、Z軸上の回転（前転、後転）をなくします。
さらに【Animator】メニュー から
作成した 「idle」 のステートを選択し、Inspector で [speed] の値を 0.2 にしてアイドリング状態の動きを調整します。
これでプレイヤーの素材ができました。
1-2-4,アニメーションの準備
事前に、歩くアニメーションとジャンプのアニメーションを用意しておきます。
どちらのアニメーションも事前に用意されているので、それを活用します。
[hero] => [walk] フォルダ から [Walk] のクリップを 【Animetor】 の Base Layer にドラッグ＆ドロップ
同様に、[hero] => [fly] フォルダ から [fly] のクリップを 【Animetor】 の Base Layer にドラッグ＆ドロップ
続いて、「bool型」 のパラメータ を2つ用意します。
❶ IsWalk ⇒ Hero がアイドリング状態から「walk」に遷移する時ののパラメータ
❷ IsFly ⇒ Hero が「fly」に遷移する際のパラメータ
続いて、各ステートから遷移する 「Transition」 を作成し、プロパティ値を設定します。
■ [idle] ⇒ [walk]
[idle] で右クリック、[walk] の上でドロップし、Transition を作成。
【Inspector】 で次のプロパティ値を指定します。
❶ [Has Exit Time] のチェックをはずす
▶Settings を展開
❷ [Transition Duraior] を 0 に指定❸ [Conditions] に作成したパラメータ [IsWalk] をセットし、値を true に指定
■ [walk] ⇒ [idle]
[Walk] で右クリック、[idle] の上でドロップし、Transition を作成。
【Inspector】 で次のプロパティ値を指定します。
❶ [Has Exit Time] のチェックをはずす
▶Settings を展開
❷ [Transition Duraior] を 0 に指定❸ [Conditions] に作成したパラメータ [IsWalk] をセットし、値を false に指定
■ [Any State] ⇒ [fly]
[Any State] で右クリック、[fly] の上でドロップし、Transition を作成。
【Inspector】 で次のプロパティ値を指定します。
❶ [Has Exit Time] のチェックをはずす
▶Settings を展開
❷ [Transition Duraior] を 0 に指定❸ [Conditions] に作成したパラメータ [IsFly] をセットし、値を true に指定
■ [fly] ⇒ [idle]
[fly] で右クリック、[idle] の上でドロップし、Transition を作成。
【Inspector】 で次のプロパティ値を指定します。
❶ [Has Exit Time] のチェックをはずす
▶Settings を展開
❷ [Transition Duraior] を 0 に指定❸ [Conditions] に作成したパラメータ [IsFly] をセットし、値を false に指定
これで Animation の設定が完了しました。
最後までご覧いただき、ありがとうございます。
引き続きカリキュラムを参照したい場合は、「ファイブボックス」までお気軽にお問い合わせください。
https://www.fivebox.info/
Mail:ueda@fivebox.info
Tel:0268-71-7294
© 2020 - 2022 FiveBox CORPORATION.