見出し画像

ゼロから始めるUnity開発 Part3~一筆書きゲームを作ってみる！【準備編】~

コピペテック

こんにちはハナミズキです。（…業務の合間時間にチマチマ進めているので、のんびりしたスピードの記事になっておりますね）今回はPart1、Part2を通して理解したUnityの知識を元に簡単なゲームアプリを1つ作ってみたのでPart3,Part4に区切ってチュートリアルとして紹介します。

環境

Unity Version 2020.3.18f1 Personal 

概要

今回作成するゲームアプリは「一筆書き」です。

一筆書きとは、最初から最後まで同じ所を２度と通る事なく全ての線を続けて書く作業のことです。

画像1

これをゲームにする場合、以下の仕様が重要になります。
　・プレイヤーが歩いた所がわかる事
　・同じところを２度通ったら、ゲームオーバー
　・ゲーム性としての障害物（一筆で書くのに考える必要ある）
　・最後まで描き切ったらゲームクリア

実装の流れ

　1. プロジェクトを新規作成する
　2. 床を自動生成させる
　3. 死の壁を自動生成させる
　4. プレイヤーを設置する
　5. プレイヤーを動かす
　6. メインカメラを設定する
　〜〜 これ以降はPart4にて解説します 〜〜
　7. 床の塗り潰しでゲームクリアを実装する
　8. ゲームオーバー条件を実装する
　9. 次のゲーム開始（next game）を実装する
　10. ゲームの終了（Exit game）を実装する
　11. ビルドする

1. プロジェクトを新規作成する

　Unity Hubを開き「新しいプロジェクト」を選択する

画像1

3Dを選択し、任意のプロジェクト名を入力する

画像2

[Hierachy]の "SampleScene"を右クリックし、 "Save Scene As"にて任意の名前に変更します。

画像3

今回は"stage"にしました。

画像4

また事前にAssetsに、色素材格納用に"Material"フォルダや制御用スクリプト格納用に"Script"フォルダを作っておきましょう。

画像7

2. 床を自動生成する

床を自動生成させるために、まず床オブジェクトを生成します。

[GameObject]-[3D Object]-[Plane]を選択してください。Planeが追加されるため、名前を"Ground", ScaleをX:0.2,Y:1,Z:0.2と指定します。

画像7

次にGroundをPrefabにします。
[Hierarchy]タブから、GroundをAssetにドラッグすると、Groundプレハブが出来上がります。

画像8

[Assets]-[Script]を右クリックして、[Create]-[C# Script]を選択します。この時、空のC# Scriptが生成されるため、名前を”GroundsController”に変更します。

画像9

GroundsControllerをダブルクリックして、VSCodeを開き以下のように中身を書き換えます。
※事前にC# ScriptダブルクリックでVSCodeで開く設定をしています（Part1:脱線:Unityのデバック環境を整理）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GroundsController : MonoBehaviour
{
    // 関連引数として床プレハブ指定
    public GameObject groundPrefab;

    // Start is called before the first frame update
    void Start()
    {
        // 配置する回転角を設定
        Quaternion q = new Quaternion();
        q= Quaternion.identity;

        // 5x5の正方形床をつくる
        int groundMax = 5;
        int groundStartIndex = -2;
        int groundBaseSize = 2;
        // 床初期配置する座標を設定
        // 起点 x:-2,y:0, z:-2
        Vector3 groundPosition = new Vector3(groundStartIndex,0,groundStartIndex);

        // ステージ配置
        for (int zIdx = 0; zIdx < groundMax; zIdx++)
        {
            for (int xIdx = 0; xIdx < groundMax; xIdx++)
            {
                // 床を設置
                groundPosition.y = 0;
                Instantiate(groundPrefab, groundPosition, q);
                groundPosition.x += groundBaseSize;
            }
            groundPosition.x = groundStartIndex;
            groundPosition.z += groundBaseSize;
        }
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

次に[GameObject]-[Create Empty]を選択してください。この時、空のGameObjectが生成されるため、名前を”Grounds”に変更します。
”Grounds”の[Inspector]に対して、先ほど生成した”GroundsController”をドラック&ドロップすると関連づける事が来ます。

画像10

そして、”GroundsController”の引数として定義していた”groundPrefab”に先ほど作成したGroundプレハブをドラック&ドロップで設定します。

画像11

これで、Groundが自動生成される仕組みが実現できたため、現在Hierarchyに存在するGroundは削除します。

画像12

一度、動作確認のため実行すると、以下のようにGround(Clone)が５✖️５で２５枚の床（Ground）を自動生成されます。

画像13

3. 死の壁を自動生成する

ダメージ壁をランダムに自動生成させるために、まずダメージ壁オブジェクトを生成します。

[GameObject]-[3D Object]-[Cube]を選択してください。Cubeが追加されるため、名前を"DeathWall", ScaleをX:2,Y:2,Z:2と指定します。

画像14

[Assets]-[Material]を右クリックして、[Create]-[Material]を選択します。この時、空のMaterialが生成されるため、名前を”DeathWallMaterial”に変更します。
属性としてAlbedoの色指定、Emissionのチェック、Color:色指定、Global llluminationを”Realtime”に変更します。

画像15

当たったらゲームオーバーになる死の壁として、自分の思う好みの色を指定しましょう。
先ほど作成した"DeathWall"に対して、”DeathWallMaterial”をドラック&ドロップで設定できます。

画像16

次にDeathWallをPrefabにします。
[Hierarchy]タブから、DeathWallをAssetにドラッグすると、DeathWallプレハブが出来上がります。

画像17

DeathWallプレハブができたら、既に[Hierarchy]内に含まれているDeathWallは削除しましょう。
次に”GroundsController”に対し、死の壁を自動生成するプログラムを追加します。GroundsControllerをダブルクリックして、VSCodeを開き以下のように中身を書き換えます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GroundsController : MonoBehaviour
{
    // 関連引数として床プレハブ指定
    public GameObject groundPrefab;
    // 関連引数として死の壁プレハブ指定
    public GameObject deathWallPrefab;

    // Start is called before the first frame update
    void Start()
    {
        // 配置する回転角を設定
        Quaternion q = new Quaternion();
        q= Quaternion.identity;

        // 5x5の正方形床をつくる
        int groundMax = 5;
        int groundStartIndex = -2;
        int groundBaseSize = 2;
        // 床初期配置する座標を設定
        // 起点 x:-2,y:0, z:-2
        Vector3 groundPosition = new Vector3(groundStartIndex,0,groundStartIndex);


        // 死の壁をランダムに配置するように座標計算
        List<int> deathWallIndexs = new List<int>();
        for(int i=groundStartIndex; i < (groundBaseSize*(groundMax-1)) ; i+=groundBaseSize){
          deathWallIndexs.Add(i);
        }
        int deathWall_x = GetRandom(deathWallIndexs);
        int deathWall_z = GetRandom(deathWallIndexs);

        // ステージ配置
        for (int zIdx = 0; zIdx < groundMax; zIdx++)
        {
            for (int xIdx = 0; xIdx < groundMax; xIdx++)
            {
                if ( groundPosition.x == deathWall_x && groundPosition.z == deathWall_z) {
                    // 死の壁を設置
                    // TODO:現在決め打ち1個/難易度調整の場合は要調整
                    groundPosition.y = 1;
                    Instantiate(deathWallPrefab, groundPosition, q);
                } else {
                    // 床を設置
                    groundPosition.y = 0;
                    Instantiate(groundPrefab, groundPosition, q);
                }
                groundPosition.x += groundBaseSize;
            }
            groundPosition.x = groundStartIndex;
            groundPosition.z += groundBaseSize;
        }
    }

    // Listから要素をランダムで1つ取得する
    public static T GetRandom<T>(List<T> list)
    {
      return list[ UnityEngine.Random.Range(0, list.Count) ];
    }

    // Update is called once per frame
    void Update()
    {
        
    }
}

そして、”GroundsController”の引数として定義していた”deathWallPrefab”に先ほど作成したDeathWallプレハブをドラック&ドロップで設定します。

画像18

ここで動作確認のため実行すると、以下のようにGround(Clone)が５✖️５の領域で２４枚の床（Ground）と死の壁（DeathWall）１つを自動生成されるようになりました。

画像19

4. プレイヤーを設置する（Unity Asset Store利用）

どんなプレイヤーを設置したいか…それは自由です。
今回はUnity Asset Storeに存在した可愛い猫ちゃんをプレイヤーとして設置することにしました。

[Window]-[Asset Store]を選択します。

画像20

[Search online]をクリックします。

画像21

ブラウザで[Asset Store]が表示されるため、検索画面に”cat”と入力して、好みの猫ちゃんを探すことにしましょう。

画像22

今回は以下の猫ちゃんが可愛くて気に入ったので、「Add to My Assets」をクリックしてMy Assetに追加しました。

Lowpoly Toon Cat Lite

My Assetに追加されると、「Open in Unity」というボタンが出てくるため、クリックします。
UnityのPackage Managerが起動してきます。
この時、誤って閉じてしまった場合は、[Window]-[Package Manager]を選択することで再度表示できます。
対象のパッケージを選択し、[Download]を選択します。既にローカルにダウンロードされている場合は、[Import]になります。今回作成しているアプリで利用するためにImportをクリックします。

画像23

[Import Unity Package]というダイアログが出てくるため、Importをクリックします。

なお、例えばDemoとか不要ならチェックを外すなどの選択ができます。後で[Assets]から直接削除することもできるため何をどこまでインストールするかは中身を意識しつつ選びます。今回はDemoを見ながら進めたいため、全て入れることにしました。

画像24

Importが完了するとAssetsに「Lowpoly Toon Cat Lite」が追加されている事が確認できます。

画像25

[Assets]-[Lowpoly Toon Cat Lite]-[Model]-[Cat Lite]を[Hierarchy]へドラックandドロップします。

画像26

この状態で実行すると、以下のように真っ白な物体が乗っているだけの状況になります。こちらを調整していきます。

画像27

なお、調整の参考の際は、現在の状態を一旦保存した後に、[Assets]-[Lowpoly Toon Cat Lite]-[Demo]-[Cat_Lite_Demo]をダブルクリックで一時的に登録内容を見ると確認できます。元の状態に戻るには、[Assets]-[stage(保存時のシーン名)]をダブルクリックで確認できます。

まず猫ちゃんが動くように既存のアニメーションコントローラーを関連づけます。
[Assets]-[Lowpoly Toon Cat Lite]-[Model]-[Animator]の中に入っている”Cat_Lite_AC”をstageに登録している”Cat Lite”へドラックandドロップして設定します。

画像28

次に[Assets]-[Lowpoly Toon Cat Lite]-[Model]-[Materials]の中に入っている”Mat_Cat_Lite”をstageに登録している”Cat Lite”へドラックandドロップして設定します。

画像29

この状態で実行して、Sceneタブにて猫の大きさの状態を見ながら、Cat Liteの理想の大きさを調整しましょう。

画像30

今回はScaleをX:0.3,Y:0.3,Z:0.3と指定します。

最後に猫ちゃんをプレイヤー化します。Cat Liteを選択し[Inspector]のTagにて[Player]を選択します。

画像31

5. プレイヤーを動かす

次に猫ちゃんをキーボード操作で動かす事ができるように設定します。

[Assets]-[Script]を右クリックして、[Create]-[C# Script]を選択します。この時、空のC# Scriptが生成されるため、名前を”PlayerController”に変更します。

画像32

PlayerControllerをダブルクリックして、VSCodeを開き以下のように中身を書き換えます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerController : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
      Vector3 pos = transform.position;
      Vector3 catAngle = transform.eulerAngles;

      // Upキーで前に進む
      if (Input.GetKey("up")) {
          pos.z += 0.1f;    // z座標へ0.1加算
          catAngle.y = 0;
      }
      // Downキーで後ろに進む
      if (Input.GetKey("down")) {
          pos.z -= 0.1f;    // z座標へ0.1減算
          catAngle.y = 180;
      }
      //right キーで右に進む
      if (Input.GetKey("right")) {
          pos.x += 0.1f;    // x座標へ0.1加算
          catAngle.y = 90;
      }
      //left キーで左に進む
      if (Input.GetKey("left")) {
          pos.x -= 0.1f;    // x座標へ0.1減算
          catAngle.y = 270;
      }
      //スペースキーで上に進む(ジャンプ)
      if (Input.GetKey(KeyCode.Space)) {
          pos.y += 0.1f;    // y座標へ0.1加算
      }

      transform.position = pos;  // 座標を設定
      transform.eulerAngles = catAngle; // 回転角度を設定
    }
}

”Cat Lite”へ、先ほど生成した”PlayerController”をドラック&ドロップすると関連づける事が来ます。

画像33

Cat Liteを選択し[Inspector]の[Add Component]をクリックして、[Physics]-[Rigidbody]を選択してください。

画像34

Rigidbodyとはゲームオブジェクトに物理演算処理を行うための情報を付与するコンポーネントです。このコンポーネントを設定することにより、プレイヤーが重力や質量をもち、 重力落下をしたり、移動させることができます。

この状態で実行すると重力に従って落ちていく猫ちゃんを見る事になります。

画像35

原因はプレイヤーにCollider設定をしていないからです。Collider は、物理衝突のためのオブジェクト形状を定義してくれるコンポーネントです。

Cat Liteを選択し[Inspector]の[Add Component]をクリックして、[Physics]-[Box Collider]を選択してください。たとえばPanelなどの地面にはデフォルトでColliderが付与されているため意識する必要ないですが、今回のようなAsset Storeからダウンロードしインポートするようなケースでは意識する必要があります。

6. メインカメラを設定する

ここまでの流れで猫が落ちる事なく動く事ができるようになりましたが、非常に見づらいです。よってメインカメラの位置を見直して猫の様子を見やすくします。
[Hierachy]の "Main Camera"を選択します。するとビデオマークアイコンが出てきます。これがカメラオブジェクトの状態を表しております。
実行しながら位置と傾きを調整するのがおすすめです。


画像36

今回は、PositonをX:2,Y:10,Z:-3として、RotationをX:65,Y:0,Z:0としました。

実行すると先ほどよりもだいぶ見やすい状況でステージ上を歩く猫ちゃんを見る事ができるよう環境が整いました。

　〜〜 これ以降はPart4にて解説します 〜〜

終わりに

ここまでいかがでしたでしょうか。じわりじわりと動いている様を感じられたのではないでしょうか。
今回、実行するたびに変わるステージとプレイヤーの操作ができるようになりました。次回Part4を通して死の壁を回避しながら一筆で書けるルート選び…そんなゲームとして完成させるようにします。

素材を頂いたサイト

■Lowpoly Toon Cat Lite
https://assetstore.unity.com/packages/3d/characters/animals/lowpoly-toon-cat-lite-66083

参考にしたサイト

■PrefabとInstantiateの基本（1）ブロックをScriptで配置：「はじめてのUnity」のブロック崩しを改造しながら学ぶ
https://qiita.com/JunShimura/items/7e45fc6236cf97914041
　・Prefabの作り方として参考にしました。

■UnityのRigidbodyとColliderで衝突判定
https://qiita.com/yando/items/0cd2daaf1314c0674bbe
　・床をすり抜けていく対策として大変参考になった。

■【Unity】Collider（コライダー）とは？種類、使い方をご紹介
https://miyagame.net/collider/
　・Colliderとは何かを理解するのに大変参考になりました。

以上です。ではでは！またPart4にて！

この記事が気に入ったらサポートをしてみませんか？