やっぱりUnityでゲームを作ってみる(1)

Unityでのゲーム作りは当面しない予定だったのですが，訳あってやっぱり始めて見ることにしました（察してください...）．

インストール方法は比較的簡単ですし，詳しく解説しているサイトが沢山ありますので，そちらを参考にしてください．こことか：

https://create.unity3d.com/jp-howto-install-win

さて，今回作るゲームはこんな感じのゲームです：

f:id:lagrangian:20210116175805g:plain — ボールキャッチゲーム

地味ですね．ええ地味ですorz... でも最初にUnityで作るにはこのくらい簡単な方が分かりやすいかもしれません．今回は4回に分けてUnityでこのボールキャッチゲームを作ってみます．

まず今回作成するゲームの紹介をします．横長のバーがあって落ちてくるボールを1つづつキャッチするたびに得点が入り，キャッチし損ねるとゲームオーバーというものです．シンプルですね．このゲームを作るにはまず横長のバーとボールの画像を用意する必要があります．またボールは周りの背景が見えるようにボールの周囲の背景を透過する画像が是非とも使いたいので，透過したpngファイルを使用しました．画像作りは簡単ですので他にゆずるとして，簡単に素材をここに貼り付けておきます：横長のバーがこれです：

f:id:lagrangian:20210116181830p:plain — バー

ボールがこれです．

ボール

素材を作るのが面倒な人はこれらをファイル保存して使ってください．今回はバーのファイル名はbar.png，ボールのファイル名はball.pngで保存しておいてください．

それでは早速ボールキャッチゲームの開発を始めてみましょう．まずUnityを立ち上げます．

プロジェクトの新規作成からテンプレートの2Dを選択し，プロジェクト名を「BallCatchGame」とし，保存先も同じ名前のフォルダを作成して[作成]をクリックします：

f:id:lagrangian:20210116183312p:plain — プロジェクト作成画面

Unityのメイン画面が出てきますので下のProjectのAssetsが選択されていることを確認の上，上の二つのpng画像をAssetsタブのウィンドウにドロップして画像を取り込みます．取り込みが終わると下の画面になります：

f:id:lagrangian:20210116190500p:plain — プロジェクトに画像を追加する

次に中央のウィンドウでSceneが選択されていると思いますが，Gameタブをクリックして10:10 Aspectを選択します．選択肢の一つにFree Aspectがあるので正方形以外の縦横比にしたいときはそれを選んで設定してください．

次に再びSceneタブをクリックして，そこにProjectのAssetsの中からバーの画像を選択して四角い領域内にドロップします：

f:id:lagrangian:20210116192400p:plain — バー登録

簡単に画面に登録できました！・・・でもこれだけでは画像を配置しただけですので，何も動かすことはできません．そこでこの物体に取り付けるプログラムが必要ですね．ちなみにゲーム上に登場するこのような物体をgameObject，gameObjectに取り付けることをアタッチ，取り付けるプログラムのことを特にスクリプトと言います．今回やることはやや専門的な言い方にすればgameObject"bar"にC#スクリプトをアタッチするということになります．そこでProjectの中のAssetsのタブのウィンドウを右クリックして[Create]→[C# Script]を選択してください．同じ表示領域に"NewBehaviourScript"という名前でシャープマークのアイコンができているはずです（ちなみに名前全体は画面に表示しきれていません）．これを右クリックでリネームして"barController"という名前で保存してください．

f:id:lagrangian:20210116194841p:plain — barControllerスクリプトを作成

次にスクリプトの編集です．barControllerのアイコンをダブルクリックするとvisual studioがインストールされた環境ではvisual studioが立ち上がり次のように表示されているはずです：

f:id:lagrangian:20210116195645p:plain — visual studio C#スクリプト編集画面

コードの方がこの画像だとみにくいのでコード部分だけ取り出してみます：

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

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

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

このコードはまだ何も実行しないコードなのですが，注目してほしいのが，void Start(){}の部分です．この{}内に書かれたことはスクリプトが実行されたときに最初に実行される部分です．例えばbarにアタッチした場合barの初期状態などがこれに対応します．

一方，void Update(){}の部分は{}内に書かれたことがフレームレートである一般的に1秒間に60回程度は毎回実行される部分です．仮に「→」キーを2秒間押し続けたとすると，この部分にbarが1回あたり1ピクセル右に移動するように記述してあれば，2秒かけてbarは右に合計120ピクセル移動することになります． 120回実行されるからです．ただしフレームレートは1秒間に60回ではない場合もありますのでここでの話は一応の目安と思っておいてください．今回の制作ではフレームレートを気にするようなシビアな話は全く出てこないです．さて今回の目玉はこのUpdate(){}の中に「→」を押したら右に，「←」を押したら左にbarが動くようにすることです．次のように書きます：

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

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

    // Update is called once per frame
    void Update()
    {
        if (Input.GetKey(KeyCode.LeftArrow) && transform.position.x > -4)
        {
            transform.Translate(-0.01f, 0, 0);
        }
        if (Input.GetKey(KeyCode.RightArrow) && transform.position.x < 4)
        {
            transform.Translate(0.01f, 0, 0);
        }

    }
}

このコードですが，1フレーム当り単精度実数でそれぞれ左右に0.01だけx座標が移動するようになってます．また画面の端まで行くとif文が実行されず，移動しなくなることに注意してください．これをbarにアタッチします． barControllerのアイコンをProjectビューのAssetsの中からドラッグし画面のHierarchyビューの中のbarの上にドロップします． barまで持っていく途中は禁止マークのカーソルですがbarまで持っていくとちゃんと図のように+マークが出てアタッチできます．