Unityで作る「シューティングゲーム」Vol.01

「ファイブボックス」ではスクラッチだけではなく、ユニティを使ってプログラミング的思考、及びプログラミング言語の学習をすることができます。

　プログラミング言語と聞くと、ちょっとハードルが高い・・・と敬遠される方もいるかもしれませんが、まずは慣れること。
　当教室では小学校5年生の男の子が、スクラッチを卒業して「Unity」にチャレンジし始めました。この生徒様は「オンライン」でご参加いただいています。
　いきなり言語学なんてナンセンス。まずは「Unity」とプログラミング言語「C＃」にふれて、楽しみながら自然と言語を身につけましょう。

　今回から数回にわたり、この男子生徒と一緒に作っている「シューティングゲーム」の作り方をご紹介します。興味がありましたら是非追っかけてください！

1 Step：１　背景の準備
2 Step：2　背景のプログラム

Step：１　背景の準備

　今回一緒に作成している男子生徒は、宇宙でのシューティングゲームを作りたい、とのこと。ということで今回の目標は、宇宙の背景を準備して動かすところまで。
　早速新規作成で２Dのプロジェクトを作成しましょう。

　Unityには、だれでも使うことができる素材を管理している場所があります。アセットストアには無料のものから有料のものまであらゆる種類の素材があるので、ぜひ活用したいですね？今回はこのアセットストアから無料の「2D Space Kit」を取得して活用します。

Download　⇒　Import　でプロジェクトに取り込みましょう。
このアセットの下のディレクトリには、8種類の宇宙の背景が用意されているようです。この中から複数選択し、順番でスクロールしていく演出を作ります。それぞれの画像のつなぎ目が目立たないように、同系色の黒をベースにした背景を選択してみます。手本では（1，3，5，6）を選択します。

事前に、Hierarchy に「BackGraund」というゲームオブジェクトを作成しておき、その配下に選択した4つの画像を配置します。4つの画像が縦に並ぶように、ポジションをそれぞれ変更します。
X座標の値はすべて0、Y座標をそれぞれ（0 , 40 , 80 , 120）と配置したい順に指定します。大きさはすべてそのままでいいですね？

これでいったん背景が並びました。若干カメラが近いようなので、「MainCamera」の Cameraコンポーネントの Size の値を 8 にしておきましょう。

Camera の Size を変更することで、カメラの引き、寄り具合を調整することができます。続いてプログラミングを書いていきます。

「BackGraundController」という名前のスクリプトファイルを作成します。この作品ではスクリプトファイルが多くなるので、事前にフォルダ管理をしておくといいかもしれませんね？お手本では「02_Script」というフォルダ名を作ってそこに保存しています。なお「01_Scenes」にはSceneファイルを入れておきました。

Step：2　背景のプログラム

続いて作成したスクリプトファイル [BackGroundController.cs] に以下のコードを記述します。

public class BackGroundController : MonoBehaviour 
{
    [SerializeField] float point; //それぞれの背景のY座標
     float bgSpeed; 　            //移動速度 

    void Start() 
    {
        transform.position = new Vector3(0, point, 0);       //初期位置 
        bgSpeed = 0.01f; 
    }
     void Update() 
    {
        transform.position -= new Vector3(0, bgSpeed, 0);    //移動 
        if (transform.position.y < -40)                      //画面の下に消えたら・・・ 
        {  
           transform.position = new Vector3(0, 120, 0); }　  //最上部に行って準備
        }
    }
}

内容がわかりにくかったり、詳しい情報を知りたい場合はお問い合わせくださいね？

このスクリプトファイルを各背景にアタッチします。さらにそれぞれの背景の「BackGraundController」のパブリック変数「Point」にはそれぞれのY座標と同じ値をセットしておいてください。また、この背景は一番後ろに配置したいと思います。「SpriteRenderer」コンポーネントの「Sorting Layer」に新たなレイヤーを追加して、それぞれの背景にセットしておきます。