●はじめに

2D横スクロールアクション作成を目指し、プレイヤーキャラクターのアニメーションを制御してみます。

待機からスペースキーでジャンプ、左右キーで走るようにします。

アセットは無料公開されている「Warped Caves」をお借りします。

　↑これが完成します。

●走りアニメーション

▷状態と遷移

走りアニメーションを追加し、待機から相互に遷移するようにします。

①プロジェクトの「Assets>Anime>player_run」をアニメーター右側にドラッグ＆ドロップ
②アニメーターの「player_idle」を右クリックし、「遷移を作成」をクリック
③アニメーターの「player_run」をクリック
④アニメーターの「player_run」を右クリックし、「遷移を作成」をクリック
⑤アニメーターの「player_idle」をクリック

移動速度を受け取る「Float」型のパラメーター「Speed」を作成します。

①アニメーター左上のタブ「パラメーター」をクリック
②アニメーター左上の「＋」をクリックし、「Float」をクリック
③「Speed」を入力してENTERキーを押す

▷遷移設定

待機から走りへの遷移情報を設定します。

①アニメーターの「player_idle」から「player_run」への遷移をクリック
②インスペクター中央辺り「終了時間あり」右のチェックをクリック
③インスペクター下部「Conditions」右下の「＋」をクリック
④「Conditions」内のドロップダウンをクリックし、「Speed」をクリック

走りから待機への遷移情報を設定します。

①アニメーターの「player_run」から「player_idle」への遷移をクリック
②インスペクター中央辺り「終了時間あり」右のチェックをクリック
③インスペクター下部「Conditions」右下の「＋」をクリック
④「Conditions」内のドロップダウンをクリックし、「Speed」をクリック
⑤「Conditions>Speed」右のドロップダウンをクリックし、「Less」をクリック
⑥「Conditions>Speed」右端に「0.1」を入力

▷遷移制御

Playerスクリプトを修正し、パラメーターを制御してキー操作出来るようにします。

水平方向の入力値を取得しています。
左キーを押し続けると-1まで減少し、右キーを押し続けると1まで増加します。
左右関係なく扱うため、絶対値をSpeedに設定しています。

ついでにスペースキーでジャンプするよう条件を修正してます。

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

public class Player : MonoBehaviour
{
    Animator animator;      // アニメーターコンポーネントを入れる変数

    // Start is called before the first frame update
    void Start()
    {
        // 自分に割り当てられているアニメーターコンポーネントを取得
        animator = GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        // ジャンプキーが押された場合
        if (Input.GetButtonDown("Jump") == true)
        {
            // トリガー「Jump」をONにする
            animator.SetTrigger("Jump");
        }

        // 水平方向の入力値を取得
        float axisH = Input.GetAxis("Horizontal");
        // Float「Speed」に「水平方向の入力値」の絶対値を設定
        animator.SetFloat("Speed", Mathf.Abs(axisH));
    }
}

●走り中にジャンプ

▷遷移作成

走りアニメーション中にジャンプ出来ない状態です。

なので走りからジャンプへ遷移を追加します。

①アニメーターの「player_run」を右クリックし、「遷移を作成」をクリック
②アニメーターの「player_jump」をクリック

▷遷移情報

遷移情報はトリガーがONになったら即ジャンプするように設定します。

①アニメーターの「player_run」から「player_jump」への遷移をクリック
②インスペクター中央部の「終了時間あり」にあるチェックをクリック
③インスペクター下部の「Conditions」右下にある「＋」をクリック

▷動作確認

走っている最中にスペースキーを押すと即ジャンプに遷移します。

●左右方向に向く

▷スクリプト修正

左右キーどちらを押していても右向きのままです。

スケールのXを-1にすると左向きにできます。
水平入力がマイナスの時は-1とし、左向きになるようスクリプトを修正します。

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

public class Player : MonoBehaviour
{
    Animator animator;      // アニメーターコンポーネントを入れる変数

    // Start is called before the first frame update
    void Start()
    {
        // 自分に割り当てられているアニメーターコンポーネントを取得
        animator = GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        // ジャンプキーが押された場合
        if (Input.GetButtonDown("Jump") == true)
        {
            // トリガー「Jump」をONにする
            animator.SetTrigger("Jump");
        }

        // 水平方向の入力値を取得
        float axisH = Input.GetAxis("Horizontal");
        // Float「Speed」に「水平方向の入力値」の絶対値を設定
        animator.SetFloat("Speed", Mathf.Abs(axisH));

        // 水平方向入力中の場合
        if (axisH != 0)
        {
            // 水平入力がマイナスの場合はXスケールを-1、それ以外は1とする
            float xScale = axisH < 0 ? -1 : 1;
            // スケールを設定
            transform.localScale = new Vector3(xScale, 1, 1);
        }
    }
}

▷動作確認

左キー入力中は左、右キー入力中は右を向くようになりました。
停止してもそのままジャンプしても向きが継続されます。

●完成

待機、ジャンプ、走りのアニメーションが制御できるようになりました。

弾を撃つアニメーション３パターンにやられも制御したかったですが、
土曜はボルダリング、日曜はDDR、RPGツクールも考えるとなると中々厳しいですね。

弾撃ちアニメーションもいいけど、ここまで来たらちゃんと移動してジャンプしてマップ内を動きたい。
ということで、次回の目標はマップ内を動けるようにする、です。

頑張ろう。

投稿 【2D機能】走りアニメーション制御【アニメーター】 は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールアクション作成を目指し、「アニメーターコントローラー」を使ってアニメーションを切り替えてみます。

アニメーターコントローラーは奥が深く、理解が追いついてない部分もあります。
それでもアニメーション切り替え程度のことは出来るのでやってみます。

アセットは無料公開されている「Warped Caves」をお借りします。

　↑これが完成します。

●アニメーター基本

▷アセット確認

前回アニメーションを作成しましたが、その時同時に作成されたアセットに「アニメーターコントローラー」があります。
２つの四角が線で繋がったアイコンがアニメーターコントローラー、
三角形が移動しているようなアイコンがアニメーションのアセットです。

このアニメーターコントローラーをアニメーターで使用します。

▷アニメータービュー

アニメーターコントローラーをダブルクリックするとアニメータービューが表示されます。

アニメータービューの右側にスペースにアニメーションを配置し、
切り替えの条件を持っている線で繋ぎます。

現在は「Entry」と「player_idle」が繋がっていて、「Any State」は浮いた状態です。

Entryは開始時の状態で、開始時にすぐ次の状態に移動します。
ここでは開始時に状態「player_idle」に移動し、その状態に設定されたアニメーション「player_idle」が再生されます。

「Any State」は現在がどのような状態であっても移動元にできます。
条件が満たされた場合、状態に関係なくAny Stateの先の状態に移動します。

攻撃が終わったら待機、ジャンプが終了したら待機、やられが終了したら待機といった場合、
線がややこしいことになるし、条件を間違えたら全て直す必要があります。
Any Stateを使えば待機状態に線を繋ぎ、条件を１つ用意するだけで完成です。
（・・・多分こんな使い方だと思う）

もう１つデフォルトで用意されている状態「EXIT」があります。
状態が置かれた部分の背景部分を一度クリックし、「A」キーを押してみて下さい。
全ての状態が見えるように縮小表示してくれます。

①アニメータービューの右側、何もないスペースをクリック
②「A」キーを押す

赤色の状態が「Exit」で、アニメーションの終了を指定します。
上手く扱うのが難しいので使いません。

終了後、即Entryに移動するので、上手く画像がループ再生するようにしないと変になる。
結局は色んな状態に移動しまくるので、わざわざ終了させる必要はないかな。
※だから範囲外に置かれている、のかな？

状態をドラッグ＆ドロップで配置換えできます。
線は自動で繋がってくれます。
なんとなくExitも近くにいてほしいので整理しました。

①状態のドラッグ＆ドロップで配置換え
②マウスホイールの前後で拡大縮小
③マウスホイールを押し下げ、ドラッグで並行移動

▷ジャンプに切り替え

待機アニメーションが終了したらジャンプアニメーションが再生されるようにしましょう。

前回のプロジェクトを使っている場合、アニメーションが沢山置かれているので、一旦待機以外削除します。
また、プレイヤーとして扱うので名前も「Player」にします。

①ヒエラルキーの「player-hurt-1」をクリック
②Shiftキーを押しながら「player-run-shot-1」をクリック
③Deleteキーを押す

①ヒエラルキーの「player-idle-1」をクリック
②F2キーを押して「Player」と入力し、ENTER

ジャンプアニメーションをアニメータービューに配置します。

①プロジェクトの「Assets>Anime>player_jump」をアニメータービューの右側スペースにドラッグ＆ドロップ

「player_idle」と「player_jump」を繋ぎます。

①アニメーターの「player_idle」を右クリック
②「遷移を作成」をクリック

①アニメーターの「player_jump」をクリック

移動＝遷移する時の設定を行います。

デフォルトではアニメーションを滑らかにするためブレンドしていますが、
スプライトはブレンドできないので使わないように設定します。

①アニメーターで作成した遷移をクリック
②インスペクターの「Setting」左にある▶をクリック
③終了時間に「1」を入力
④遷移時間(s)に「0」を入力

このまま再生すると待機アニメーションがすぐ終わってしまってよくわからないので、
一旦Eixtに遷移を繋げて確認しやすくします。

①アニメーターの「player_jump」を右クリック
②Exitをクリック
③「遷移を作成」をクリック
④player_jumpからExitへの遷移をクリック
⑤インスペクターの「Setting」左にある▶をクリック
⑥終了時間に「1」を入力
⑦遷移時間(s)に「0」を入力

待機アニメーションとジャンプアニメーションを１ループずつ繰り返すようになりました。

プレビュー中にアニメーターを見ると現在どの状態が再生中かわかります。
青いバーが満タンになると次の状態に遷移します。

遷移状態が見えない場合はヒエラルキーの「Player」をクリックしてみて下さい。

●遷移条件

▷パラメーター作成

マウス左ボタンが押されたらジャンプするようにしたいと思います。

アニメーターは「パラメーター」を監視し、値に応じて遷移を切り替えることができます。
パラメーターはスクリプトで値を制御しますが、後回し。

プレビュー中に直接切り替える形で一旦実装してみます。

まずはExitへの遷移を削除し、

①アニメーターの「player_idle」と「Exit」を繋ぐ遷移をクリック
②Deleteキーを押す

パラメータータブを開きます。

①アニメーター左上の「パラメーター」をクリック

「トリガー」のパラメーターを追加します。

①アニメーター左上の「＋」をクリック
②「Trigger」をクリック

「Jump」と命名します。

①「Jump」と入力してENTERを押す

▷遷移条件

遷移条件を設定しましょう。
条件はインスペクターで追加します。
「トリガーがONになったら遷移する」条件が追加できました。

①アニメーターの「player_idle」と「player_jump」間の遷移をクリック
②インスペクターの「終了時間あり」にあるチェックをクリック
③インスペクターの「Conditions」にある右下の「＋」をクリック

▷遷移条件

プレビューすると待機アニメーションがループ再生されます。

アニメーターにあるパラメーター「Jump」の右側にあるラジオボタン、
これをクリックするとジャンプアニメーションがループ再生されます。

①Unity上部中央の「▶」をクリック
②アニメーターのパラメーター部分にある「Jump」のラジオボタンをクリック

アニメーションを配置して遷移で繋ぎ、条件で制御する、という手順になります。
トリガーはONになった後すぐにOFFに戻るため、プレビュー中はONになったように見えません。

●パラメータ制御

▷スクリプト準備

マウス左ボタンが押された時にトリガー「Jump」をONにしてジャンプアニメーションが再生されるようにします。

そのためにはスクリプトが必要になります。
アニメーターが持つパラメーターはコンポーネント「Animator」の機能を使います。
アニメーターはアニメーション作成時にゲームオブジェクトに割り当てられています。

つまり、ゲームオブジェクト「Player」にスクリプトを割り当て、
そのスクリプトで自分（Player）のAnimatorを取得、
Animatorのパラメーター設定機能を使ってJumpトリガーをONにする、という手順になります。

まずスクリプト「Player」を作成しましょう。

①プロジェクトの「Assets」を右クリック
②「作成＞C#スクリプト」をクリック
③「Player」と入力してENTERを押す

ゲームオブジェクトの「Player」に割り当てます。

①プロジェクトの「Assets>Player」をヒエラルキーの「Player」にドラッグ＆ドロップ

▷スクリプト作成

自分が持つアニメーターを取得し、マウス左ボタンが押された時にトリガーをONにするスクリプトを記述します。

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

public class Player : MonoBehaviour
{
    Animator animator;      // アニメーターコンポーネントを入れる変数

    // Start is called before the first frame update
    void Start()
    {
        // 自分に割り当てられているアニメーターコンポーネントを取得
        animator = GetComponent<Animator>();
    }

    // Update is called once per frame
    void Update()
    {
        // マウス左ボタンが押されている場合
        if (Input.GetMouseButtonDown(0) == true)
        {
            // トリガー「Jump」をONにする
            animator.SetTrigger("Jump");
        }
    }
}

▷動作確認

プレビューして動きを確認します。

その前に、何度も確認できるよう待機状態に戻るようにします。

①アニメーターの「player_jump」を右クリック
②「遷移を作成」をクリック
③アニメーターの「player_idle」をクリック
④player_jumpからplayer_idleへの遷移をクリック
⑤インスペクターの「Setting」左にある▶をクリック
⑥終了時間に「1」を入力
⑦遷移時間(s)に「0」を入力

ということでプレビュー。
最初は待機アニメーションが再生され、マウス左ボタンをクリックするとジャンプします。
その場で回転しているだけなのでジャンプには見えませんが…。

①Unity上部中央の「▶」をクリック

●完成

待機アニメーションからジャンプアニメーションへ切り替わるようになりました。

状態を追加して遷移を追加、パラメーターを作成して条件を設定、スクリプトで制御、
これを繰り返していけばそれっぽくなる…はず。

アニメーションの数が増えれば遷移の矢印も増えて複雑になり、
その分条件も増えて頭が混乱してくると思います。

この辺の複雑さはアニメーター左上タブにある「レイヤー」の機能で緩和できます。

次回はアニメーターのレイヤー機能を使い、他のアニメーションも追加してみようと思います。

投稿 【2D機能】アニメーション切り替え【アニメーター】 は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールアクション作成を目指し、「アニメーション」を使ってキャラクターを表示してみます。

アニメーションは結構色々できますが、とりあえず2Dでパラパラアニメを再生するまでの手順を書いていきます。

アセットは無料公開されている「Warped Caves」をお借りします。

　↑これが完成します。

●アニメーション作成

▷アセット確認

・解説

「Warped Caves」のアセットを確認します。

プレイヤーのアニメーションは「Assets>Warped Caves>Artwork>Sprites>player」の中にあります。
playerフォルダ内にある各フォルダはアニメーションのパターンで、
その中にアニメーションの１コマに当たる画像が１枚１枚格納されています。

画像を分割する必要が無いので楽ができそうです。

・手順

①プロジェクトの「Assets>Warped Caves>Artwork>Sprites>player」をクリック

②プロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle」をクリック

▷待機アニメーション作成

・解説

何も操作していない時に再生するアニメーション「アイドル」を作成します。

「player-idle-1～4」を全て選択し、「ユニット毎のピクセル数」を「16」に指定、
シーンビューかヒエラルキービューにドラッグ＆ドロップしてanimファイルを保存するだけで作成完了です。

・手順

①プロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle>player-idle-1」をクリック
②Shiftキーを押しながらプロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle>player-idle-4」をクリック

③インスペクターにある「ユニット毎のピクセル数」に「16」を入力
④インスペクターの下の方にある「適用する」をクリック

⑤プロジェクトで選択している４画像をシーンビューにドラッグ＆ドロップ
⑥playerの上にあるフォルダ「Assets」をクリック
⑦「新しいフォルダ」をクリック
⑧「Anime」と入力してENTERを押す
⑨作成したフォルダ「Anime」をダブルクリック
⑩ファイル名に「player_idle.anim」を入力してENTERを押す

▷アニメーション再生

・解説

以上でアニメーションは完成です。
プレビューを開始するとキャラクターが肩で息をするようなアニメーションが再生されます。

・手順

①Unity上部中央の「▶」をクリック

●アニメーション調整

▷ビュー表示

・解説

アニメーションの速度がちょっと早いので「アニメーションビュー」で速度調整します。

アニメーションビューはanimファイルをダブルクリックすることで開くことができます。

・手順

①プロジェクトの「Assets>Anime>player_idle」をダブルクリック
②「Sprite」の左にある▶をクリック
※右側に各コマに設定された画像が表示される

▷速度変更

・解説

アニメーションは「サンプル」という値を基準にして速度が決まります。
１秒で画像を何枚切り替えるかを表すのが「サンプル」になります。
この値を大きくすると速く、小さくすると遅くなります。

今回は遅くしたいので、サンプルを「6」にします。

・手順

①アニメーションビューのサンプルに「6」を入力してENTERを押す

▷フレーム画像調整

・解説

マウスホイールの操作でアニメーションビューの右側にあるタイムラインの拡大縮小しつつ調整します。
画像の左上にある◆をドラッグ＆ドロップで画像を配置するコマを移動したり、
画像を選択して再生範囲を広げたり縮めたりできます。

・手順

①アニメーションビュー右側のタイムライン上でマウスホイールを前に回す

②アニメーションビュー右側のタイムライン上でマウスホイールを後ろに回す

③１フレーム目の画像を７フレーム目に移動

④Unity上部中央の「▶」をクリック

⑤７フレーム目の画像を１フレーム目に移動

⑥タイムラインの空欄をクリック
⑦CTRLキーを押しながらAキーを押す

⑧出現した右側の青バーを９フレーム目にドラッグ＆ドロップ

⑨Unity上部中央の「▶」をクリック

⑩右側の青バーを３フレーム目にドラッグ＆ドロップ

●アニメーション量産

▷ダメージ、ジャンプ

・解説

ダメージを受けた時とジャンプした時のアニメーションを作成します。

・手順

①プロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle>player-hurt-1」をクリック
②CTRLキーを押しながらプロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle>player-hurt-2」をクリック
③インスペクターにある「ユニット毎のピクセル数」に「16」を入力
④インスペクターの下の方にある「適用する」をクリック

⑤プロジェクトで選択している２画像をシーンビューにドラッグ＆ドロップ
⑥「新しいアニメーションの作成」でフォルダ「Anime」をクリック
⑦ファイル名に「player_hurt.anim」を入力してENTERを押す

⑧プロジェクトの「Assets>Anime>player_hurt」をダブルクリック
⑨アニメーションビューのサンプルに「6」を入力してENTERを押す

①プロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle>player-jump-1」をクリック
②CTRLキーを押しながらプロジェクトの「Assets>Warped Caves>Artwork>Sprites>player>player_idle>player-jump-6」をクリック
③インスペクターにある「ユニット毎のピクセル数」に「16」を入力
④インスペクターの下の方にある「適用する」をクリック

⑤プロジェクトで選択している２画像をシーンビューにドラッグ＆ドロップ
⑥「新しいアニメーションの作成」でフォルダ「Anime」をクリック
⑦ファイル名に「player_jump.anim」を入力してENTERを押す

⑧プロジェクトの「Assets>Anime>player_jump」をダブルクリック
⑨アニメーションビューのサンプルに「6」を入力してENTERを押す

▷走り、走りながら弾発射、立ち止まって弾発射

・解説

アニメーション画像のある残り３つも作成します。

・手順

同様にアニメーションフォルダの画像を使ってアニメーションを作成します。
走り：player-run-shot
走りながら弾発射：player-run-shot
立ち止まって弾発射：player-stand

▷動作確認

・解説

プレビューしてアニメーションを確認します。

アニメーションビューからでも再生が確認できます。
アニメーションビューを開いてアニメーションを持ったゲームオブジェクトを選択、
ビューの左上にある▶をクリックします。

また、タイムライン上部のフレーム番号がかかれた場所をドラッグすると
どのフレームでどの画像が表示されるかよく分かります。

・手順

①Unity上部中央の「▶」をクリック

①ヒエラルキーの「player-run-shot-1」をクリック
②アニメーションの左側上部にある「▶」をクリック

①ヒエラルキーの「player-run-shot-1」をクリック
②アニメーションの右側上部にあるフレーム番号をドラッグ

●完成

キャラクターのアニメーションを作成しました。
単なるスプライト切り替えのアニメーションであれば、
アニメーションさせる画像を全て選択してシーンにドラッグ＆ドロップするだけで完成します。

プロパティを追加することで位置や拡大縮小といったアニメーションも作ることができます。
この辺は3Dでも共通の機能で、いつかやるかも知れません。

次回はアニメーターを使ってキャラクターを制御しようと思います。

投稿 【2D機能】スプライトアニメーション【アニメーション】 は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールアクション作成を目指し、「タイルマップ」を使ってマップ作成してみます。
「タイルマップの紹介」という形で投稿し、いつでも失踪できるようキリ良くいきます。

タイルマップは結構色々できますが、とりあえず編集開始できるまでの手順を書いていきます。

アセットは無料公開されている「Warped Caves」をお借りします。

　↑これが完成します。

●プロジェクト準備

▷プロジェクト作成

・解説

2Dテンプレートでプロジェクトを作成します。
2Dテンプレートにすることで、2D機能の１つ「タイルマップ」機能を使えるようにします。

・手順

①UnityHubを起動
②「新しいプロジェクト」をクリック

③中央の一覧にある「2D」をクリック
④右下のプロジェクト名に「SideACT」を入力
⑤「プロジェクトを作成」をクリック

▷マイアセット登録

・解説

アセットストアから「Warped Caves」をお借りします。
メト○イドっぽい。

・手順

①アセットストアの「Warped Caves」にアクセス
②「マイアセットに追加」をクリック

▷アセットインポート

・解説

「Warped Caves」をプロジェクトにインポートし、ファイルを扱えるようにします。

・手順

①Unityメニューの「ウィンドウ＞パッケージマネージャー」をクリック
②パッケージマネージャー左上の「パッケージ：＊＊＊＞マイアセット」をクリック
③パッケージマネージャー左側の一覧にある「Warped Caves」をクリック
④パッケージマネージャー右下の「ダウンロード」をクリック
⑤パッケージマネージャー右下の「インポート」をクリック
⑥Import Unity Package右下の「インポート」をクリック

●タイルマップ準備

▷スプライト調整

・解説

１６ドットを１ユニットとして扱うようにします。
１６ドット✕１６ドットで出来ているタイルを１枚として配置できるようになります。

・手順

①プロジェクトの「Assets>Warped Caves>Artwork>Environment>tileset-sliced」をクリック
②インスペクターの「ユニット毎のピクセル数」に(16)を入力
③インスペクターの「適用する」をクリック

▷パレット作成

・解説

タイルマップで扱うアセット、「パレット」を作成します。
パレットは分割したスプライト「タイル」を管理するアセットです。

・手順

①プロジェクトの「Assets」を右クリック
②「作成＞2D＞タイルパレット＞矩形」をクリック
③”Palette”と入力し、ENTERキーを押す

▷タイル作成

・解説

スプライトを１６ドット✕１６ドットのタイルとして分割します。
沢山作られるため、見失わないよう「Tiles」フォルダにまとめて配置します。

・手順

①Unityメニューの「ウィンドウ＞2D＞タイルパレット」をクリック

②プロジェクトの「Assets>Warped Caves>Artwork>Environment>tileset-sliced」をタイルパレットの中央部分にドラッグ＆ドロップ
③Generate tiles into folderで開かれている階層の３つ上のフォルダ、「***/SideACT/Assets」に移動
④左上の新しいフォルダー」をクリック
⑤「Tiles」を入力し、ENTERを押す
⑥右下の「フォルダーの選択」をクリック

●タイルマップ作成

▷タイルマップ作成

・解説

タイルを表示するゲームオブジェクト、「タイルマップ」を作成します。
このタイルマップに対してタイルを配置していきます。

・手順

①ヒエラルキー左上の「＋」をクリック
②「2Dオブジェクト＞タイルマップ＞矩形」をクリック

▷タイルマップ編集

・解説

タイルをクリックした位置に配置したり、箱状に配置、塗りつぶしたりしてマップを作成します。

・手順

シーン上にカーソルを持っていくと配置プレビューが見えるので、それを参考にしつつマップを作成しましょう。

①タイルパレット上部の筆アイコン「Paint with active brush (B)」をクリック
②タイルパレット中部のタイルをクリック　～　描画タイルの選択
③シーン上のタイル配置したい場所をクリック　～　タイルの配置
④タイルパレット中部のタイルをドラッグ　～　描画タイルの複数選択
⑤シーン上のタイル配置したい場所をクリック　～　タイルの配置

▷コライダー設定

・解説

衝突機能を持ったコンポーネント、「Tilemap Collider 2D」を設定します。

・手順

①ヒエラルキーの「Grid>Tilemap」をクリック
②インスペクターの「コンポーネントを追加」をクリック
③「Tilemap>Tilemap Collider 2D」をクリック

衝突判定の処理に時間がかかってしまうため、コライダーをまとめて扱ってくれるコンポーネントを設定します。
また、マップは物理的な影響を受けないよう「キネマティック」にします。

①インスペクターの「コンポーネントを追加」をクリック
②「Physics 2D>Composite Collider 2D」をクリック
③インスペクターの「Tilemap Collider 2D>コンポジットで使用」をチェック
④インスペクターの「Rigidbody 2D>ボディタイプ」を「キネマティック」に変更

●動作確認

▷球作成

・解説

動作確認のため、球を作成します。

・手順

①ヒエラルキー左上の「＋」をクリック
②「2Dオブジェクト>スプライト>サークル」をクリック

▷球設定

・解説

球が衝突、落下するようにコンポーネントを設定します。

・手順

①インスペクターの「コンポーネントを追加」をクリック
②「Physics 2D>Circle Collider 2D」をクリック
③インスペクターの「コンポーネントを追加」をクリック
④「Physics 2D>Rigidbody 2D」をクリック
⑤Circleはタイルマップの内側に配置

▷動作確認

・解説

プレビューしながら球を好きな位置に動かし、凹凸に合わせて衝突することを確認します。

・手順

①Unity上部中央の「▶」をクリック
②ヒエラルキーの「Grid>Circle」をクリック
③シーンの「ツール」にある「移動ツール」をクリック
④シーン上のCircleにある青四角をドラッグ＆ドロップ

●完成

矩形タイプのタイルマップを作成しました。
パレット、タイル、タイルマップ、グリッド、タイルマップコライダー…、
登場人物が多すぎて面倒かも知れないけど、これだけでも結構楽しい。

タイルごとの衝突設定、オートタイル、グリッド形状など、
タイルマップが持つ機能はまだまだありますが。

さて、やはり横スクロールアクションはキャラクターを動かさないと始まらない。
次回はキャラクターを動かそう。

投稿 タイルマップ【Unity-2D】 は だくまたゲーム制作ブログ に最初に表示されました。

アセットストアで無料公開されている「Warped Space Shooter」をお借りして作成しています。
また、基本操作、スクリプト、UI、テキストメッシュプロ、サウンド、アニメーションといったあたりを練習できます。

自機はマウスを追いかけるように移動し、弾は自動で発射されます。
敵は５パターンのウェーブが繰り返す形で進行します。
クリアはありません。

１本のゲームを作るまでの流れを体験してみてください。

対象：初心者、Unityに初めて触る方
使用バージョン：2021.3

シューティング作成の関連記事です。

• 横スクロールシューティング紹介
• 横スクロールシューティング①
• 横スクロールシューティング②
• 横スクロールシューティング③
• 横スクロールシューティング④
• 横スクロールシューティング⑤
• 横スクロールシューティング⑥

投稿 紹介～横スクロールシューティング は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールシューティング作成の６回目、最終回になります。
アセットストアで無料公開されている「Warped Space Shooter」をお借りして作成しています。

今回は「スコア制御」を追加し、一旦完成とします。

　↑これが完成します。

●テキスト作成

▷テキストUI作成

・解説

スコアを表示するためのテキストUIを作成します。

・手順

「テキスト – TextMeshPro」を作成し、TextMeshProのパッケージをインポートします。

1. ヒエラルキーの右上にある「＋」をクリック
2. 「UI>テキスト – TextMeshPro」をクリック
3. TMP Importerの「Import TMP Essentials」をクリック
4. TMP Importerの右上にある「✕」をクリック

▷テキストUI設定

・解説

画面の右上に寄せてテキストを表示します。

・手順

キャンバスをスクリーン範囲で表示するようにします。

1. ヒエラルキーの「Canvas」をクリック
2. インスペクターの「Canvas>レンダーモード」を「スクリーンスペース – カメラ」に変更
3. ヒエラルキーの「Main Camera」をインスペクターの「レンダーカメラ」にドラッグ＆ドロップ

テキストUIのアンカーを右上に指定します。

1. ヒエラルキーの「Canvas>Text (TMP)」をクリック
2. インスペクターの「Rect Transform」にある左上アイコンをクリック
3. SHIFTとALTを押しながらアンカープリセットの「top – right」をクリック

テキスト整列を右上に配置し、TextMeshProを設定します。

1. インスペクターの「Rect Transform>位置X」に(-10)を入力
2. インスペクターの「Rect Transform>幅」に(200)を入力
3. インスペクターの「Rect Transform>高さ」に(50)を入力
4. インスペクターの「TextMeshPro – Text>Text Input」のテキスト入力に「1234567890」を入力
5. インスペクターの「TextMeshPro – Text>Main Settings>Font Style>B」をクリック
6. インスペクターの「TextMeshPro – Text>Main Settings>Font Size」に(16)を入力
7. インスペクターの「TextMeshPro – Text>Main Settings>Alignment>Right」をクリック
8. インスペクターの「TextMeshPro – Text>Main Settings>Alignment>Top」をクリック

●スコア制御

▷スコア制御の準備

・解説

スコアそのものと、表示先とするテキストを保持するための変数を作成します。

・手順

テキストUIを使用するためTMProのusingを追加します。

1. プロジェクトの「Assets>Player」をダブルクリック
2. using最後の行に以下のusingを追加

using TMPro;

スコア値、テキストUIを保持する変数を追加します。

1. 「ゲーム管理オブジェクト」の下に以下の変数定義を追加

    public TextMeshProUGUI scoreText;   // スコアテキスト
    int score;                          // スコア

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

▷テキストとして表示

・解説

スコアとして保持している値を画面に表示します。

・手順

スコア表示処理を追加します。

1. プロジェクトの「Assets>Player」をダブルクリック
2. Update関数内に以下の処理を追加

        // スコア表示
        scoreText.text = score.ToString();

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

テキストUIをPlayerスクリプトに割り当てます。

1. ヒエラルキーの「Player1」をクリック
2. インスペクターの「Player (スクリプト）>Score Text」にあるボックスにヒエラルキーの「Canvas>Text (TMP)」をドラッグ＆ドロップ

●スコア加算

▷スコア加算機能追加

・解説

スコアを加算できるようにします。

・手順

スコアを加算する処理を追加し、他のスクリプトから使えるようにします。

1. プロジェクトの「Assets>Player」をダブルクリック
2. Update関数の次に以下の関数を追加

    // スコア加算
    public void AddScore(int value) 
    {
        score += value;
    }

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

▷加算するスコアを保存

・解説

加算するスコアをEnemyスクリプトに持たせます。

・手順

Enemyスクリプトにint型の公開変数を追加します。

1. プロジェクトの「Assets>Enemy」をダブルクリック
2. Start関数のに以下の関数を追加

    public int score = 100;         // スコア

▷破壊時にスコア加算

・解説

破壊されたら持っているスコアを自機が持つスコアに加算します。

・手順

破壊された時にPlayerスクリプトのスコア加算処理を呼び出します。

1. FixedUpdate関数の次に以下の処理を追加

    // オブジェクト削除時に処理
    void OnDestroy()
    {
        // 自機取得
        GameObject obj = GameObject.FindGameObjectWithTag("Player");
        Player player = obj.GetComponent<Player>();
        // 自機が取得できた場合
        if (player != null)
        {
            // スコア加算
            player.AddScore(score);
        }
    }

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

プロジェクトを保存して動作を確認します。

1. CTRLを押しながらSキーを押してプロジェクト保存
2. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
3. 敵を倒すとスコアが増えていくことを確認
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●完成

スコア制御を追加し、最低限シューティングと呼べそうな形になりました。

次は横スクロールアクション作ろうかな。

投稿 スコア制御～横スクロールシューティング⑥ は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールシューティング作成の５回目になります。
アセットストアで無料公開されている「Warped Space Shooter」をお借りして作成しています。

今回は「敵ウェーブ」を作成し、遊べる形にします。

　↑これが完成します。

●敵ウェーブ作成

▷ウェーブ作成準備

・解説

ウェーブを作成するための準備を行います。

・手順

敵をプレハブ化し、隕石をヒエラルキーから削除します。

1. ヒエラルキーの「enemy1」をプロジェクトの「Assets」にドラッグ＆ドロップ
2. ヒエラルキーの「enemy1」をクリック
3. Deleteキーを押す
4. ヒエラルキーの「asteroid-small」をクリック
5. Deleteキーを押す
6. ヒエラルキーの「asteroid」をクリック
7. Deleteキーを押す

▷前進する敵５機

・解説

前進のみ行う敵を横に５機、上側に並べたウェーブ「waveA」を作成します。

・手順

空オブジェクトの子として敵プレハブを５機、上の方に配置します。

1. ヒエラルキーの左上にある「＋」をクリックし、「空のオブジェクトを作成」をクリック
2. 「waveA」と入力してENTERを押す
3. インスペクターの「Transform>位置」に(0, 0, 0)を入力
4. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveA」にドラッグ＆ドロップ
5. CTRLを押しながらDキーを押す
6. CTRLを押しながらDキーを押す
7. CTRLを押しながらDキーを押す
8. CTRLを押しながらDキーを押す
9. SHIFTを押しながらヒエラルキーの「waveA>enemy1」をクリック
10. インスペクターの「Transform>位置>Y」に(3)を入力
11. インスペクターの「Transform>位置>X」に(#*-3+24)を入力
12. インスペクターの「Enemy(スクリプト)>Cycle Count」に(0)を入力
13. インスペクターの「Enemy(スクリプト)>Curve Length」に(0)を入力

weveAをプレハブ化し、ヒエラルキーから削除します。

1. ヒエラルキーの「waveA」をプロジェクトの「Assets」にドラッグ＆ドロップ
2. ヒエラルキーの「waveA」をクリック
3. DELETEキーを押す

▷浮遊する隕石３つ

・解説

上端、下端から画面内に向かって進む隕石を３つ配置します。

・手順

空オブジェクトを作成し、敵プレハブを配置してインスペクターを設定します。

1. ヒエラルキーの左上にある「＋」をクリックし、「空のオブジェクトを作成」をクリック
2. 「waveB」と入力してENTERを押す
3. インスペクターの「Transform>位置」に(0, 0, 0)を入力
4. プロジェクトの「Assets>asteroid」をヒエラルキーの「waveB」にドラッグ＆ドロップ
5. インスペクターの「Transform>位置>X」に(-1)を入力
6. インスペクターの「Transform>位置>Y」に(5)を入力
7. インスペクターの「Enemy(スクリプト)>Random Min Dir」に(45)を入力
8. インスペクターの「Enemy(スクリプト)>Random Max Dir」に(90)を入力

waveB内のasteroidを複製・調整します。

1. ヒエラルキーの「waveB>asteroid」をクリック
2. CTRLを押しながらDキーを押す
3. インスペクターの「Transform>位置>X」に(3)を入力
4. インスペクターの「Transform>位置>Y」に(-5.5)を入力
5. インスペクターの「Enemy(スクリプト)>Random Min Dir」に(270)を入力
6. インスペクターの「Enemy(スクリプト)>Random Max Dir」に(315)を入力
7. ヒエラルキーの「waveB>asteroid (1)」をクリック
8. CTRLを押しながらDキーを押す
9. インスペクターの「Transform>位置>X」に(7)を入力
10. インスペクターの「Transform>位置>Y」に(6)を入力
11. インスペクターの「Enemy(スクリプト)>Random Min Dir」に(45)を入力
12. インスペクターの「Enemy(スクリプト)>Random Max Dir」に(90)を入力

weveBをプレハブ化し、ヒエラルキーから削除します。

1. ヒエラルキーの「waveB」をプロジェクトの「Assets」にドラッグ＆ドロップ
2. ヒエラルキーの「waveB」をクリック
3. DELETEキーを押す

▷前進する敵５機②

・解説

前進のみ行う敵を横に５機、下側に並べたウェーブ「waveC」を作成します。

・手順

waveAを複製し、敵５機を下側へ移動させます。

1. プロジェクトの「Assets>waveA」をクリック
2. CTRLを押しながらDキーを押す
3. F2キーを押し、「waveC」と入力してENTERを押す
4. プロジェクトの「Assets>waveC」をダブルクリック
5. ヒエラルキーの「waveC>enemy1」をクリック
6. SHIFTキーを押しながらヒエラルキーの「waveC>enemy1 (4)」をクリック
7. インスペクターの「Transform>位置>Y」に(-3)を入力
8. ヒエラルキー左上の「<」をクリック

▷カーブ前進する敵と大きな敵

・解説

カーブする敵６機と、前進する大きな敵を配置したウェーブ「waveD」を作成します。

・手順

空オブジェクトを作成して敵プレハブを配置、大きな敵として設定します。

1. ヒエラルキーの左上にある「＋」をクリックし、「空のオブジェクトを作成」をクリック
2. 「waveD」と入力してENTERを押す
3. インスペクターの「Transform>位置」に(0, 0, 0)を入力
4. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
5. インスペクターの「Transform>位置」に(24, 0, 0)を入力
6. インスペクターの「Transform>スケール」に(12, 12, 1)を入力
7. インスペクターの「Enemy (スクリプト)>Cycle Count」に(0)を入力
8. インスペクターの「Enemy (スクリプト)>Curve Length」に(0)を入力
9. インスペクターの「Hit (スクリプト)>Energy」に(30)を入力

カーブする敵を配置します。

1. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
2. インスペクターの「Transform>位置」に(14, 0.5, 0)を入力
3. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
4. インスペクターの「Transform>位置」に(15, -0.5, 0)を入力
5. インスペクターの「Enemy (スクリプト)>Curve Length」に(-2)を入力
6. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
7. インスペクターの「Transform>位置」に(17, -1.5, 0)を入力
8. インスペクターの「Enemy (スクリプト)>Curve Length」に(-2.5)を入力
9. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
10. インスペクターの「Transform>位置」に(18, 1.5, 0)を入力
11. インスペクターの「Enemy (スクリプト)>Curve Length」に(2.5)を入力
12. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
13. インスペクターの「Transform>位置」に(21, 2, 0)を入力
14. インスペクターの「Enemy (スクリプト)>Curve Length」に(3)を入力
15. プロジェクトの「Assets>enemy1」をヒエラルキーの「waveD」にドラッグ＆ドロップ
16. インスペクターの「Transform>位置」に(22, -2, 0)を入力
17. インスペクターの「Enemy (スクリプト)>Curve Length」に(-3)を入力

weveDをプレハブ化し、ヒエラルキーから削除します。

1. ヒエラルキーの「waveD」をプロジェクトの「Assets」にドラッグ＆ドロップ
2. ヒエラルキーの「waveD」をクリック
3. DELETEキーを押す

●ウェーブ制御

▷キャラクターが動ける範囲の作成

・解説

ウェーブ管理スクリプト用に空のオブジェクトを作成し、
BoxColliderを使って画面外に出たキャラクターを判断できるようにします。

最初は動ける範囲内に既にいるため、スクリプト「Hit」で衝突してしまいます。
スクリプト「Hit」での竈突はタグを使って回避します。

・手順

空ゲームオブジェクトして位置を調整、

1. ヒエラルキー左上にある「＋」をクリックし、「空のオブジェクトを作成」をクリックします。
2. 「WaveController」と入力し、ENTERを押す
3. インスペクターの「Transform>位置」に(0, 0, 0)を入力

BoxCollider2Dを割り当て、

1. インスペクター下部にある「コンポーネントを追加」をクリック
2. 「Physics 2D>Box Collider 2D」をクリック

BoxCollider2Dを設定します。

1. インスペクターの「Box Collider 2D>トリガーにする」のチェックを入れる
2. インスペクターの「Box Collider 2D>サイズ」に(18, 10)を入力

タグ「WaveController」を作成、設定します。

1. インスペクター上部のタグドロップダウンをクリック
2. 「タグを追加…」をクリック
3. インスペクターのタグ欄右下にある「＋」をクリック
4. 「WaveController」と入力してENTERを押す
5. ヒエラルキーの「WaveController」をクリック
6. インスペクター上部のタグドロップダウンをクリック
7. 「WaveController」をクリック

スクリプト「Hit」の衝突処理でウェーブ管理と衝突しないようにします。

1. プロジェクトの「Assets>Hit」をダブルクリック
2. OnTriggerEnter2D関数内の最初に以下の処理を追加

        // ウェーブ管理とは衝突させない
        if (collider.gameObject.tag == "WaveController")
        {
            return;
        }

▷動ける範囲を出たら削除

・解説

画面外に出たら敵や弾を削除するスクリプトを作成します。

・手順

敵ウェーブを管理する変数を作成します。

1. プロジェクトの「Assets」を右クリックし、「作成＞C# スクリプト」をクリック
2. 「WaveController」と入力してENTERを押す
3. プロジェクトの「Assets>WaveController」をヒエラルキーの「WaveController」にドラッグ＆ドロップ
4. プロジェクトの「Assets>WaveController」をダブルクリック
5. Start関数の前に以下の変数を追加

    public List<GameObject> waves;              // ウェーブ一覧

    int nextWaveIndex = 0;                      // 次のウェーブ位置
    GameObject currentWave;                     // 現在のウェーブ
    Vector3 hidePos;                            // カメラの後ろ位置

弾をカメラの後ろ位置へ移動するため、Startでカメラ後ろ位置を計算しておきます。

1. Start関数内に以下の処理を追加

        // カメラの後ろ位置
        hidePos = Camera.main.transform.position - Camera.main.transform.forward;

敵が居なくなったら次のウェーブを作成する処理を作成します。
最後のウェーブだった場合、敵ウェーブ総数で割った余りを次に作成するウェーブ番号とします。
結果、敵ウェーブを永久に繰り返すようになります。

1. Update関数内に以下の処理を追加

        // ウェーブが無い、もしくは敵が居なくなった場合
        if (currentWave == null || currentWave.transform.childCount == 0)
        {
            // ウェーブ作成
            currentWave = Instantiate(waves[nextWaveIndex]);
            // 次のウェーブ位置を計算
            nextWaveIndex++;
            // ウェーブ総数以上になったら繰り返すように余りを求める
            nextWaveIndex %= waves.Count;
        }

動ける範囲の外に出たオブジェクトを削除する処理を追加します。
弾は削除すると発射されなくなるので、カメラの後ろに隠すようにします。
弾かどうかはHitスクリプトが有るか無いかで判断しています。

1. Update関数の次に以下の関数を追加

    // トリガーの外に出たら処理
    void OnTriggerExit2D(Collider2D obj)
    {
        // Hitスクリプトを持っていなかったら弾と判断
        Hit hit = obj.gameObject.GetComponent<Hit>();
        if (hit == null)
        {
            // カメラの後ろに隠す
            obj.gameObject.transform.position = hidePos;
        }
        else
        {
            // 削除
            Destroy(obj.gameObject);
        }
    }

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

▷敵ウェーブ配置

・解説

敵ウェーブが順に表示されるように設定します。

・手順

WaveControllerのWavesに敵ウェーブをABCDの順で登録します。

1. ヒエラルキーの「WaveController」をクリック
2. プロジェクトの「Assets>waveA」をインスペクターの「Wave Controller (スクリプト)>Waves」にドラッグ＆ドロップ
3. プロジェクトの「Assets>waveB」をインスペクターの「Wave Controller (スクリプト)>Waves」にドラッグ＆ドロップ
4. プロジェクトの「Assets>waveC」をインスペクターの「Wave Controller (スクリプト)>Waves」にドラッグ＆ドロップ
5. プロジェクトの「Assets>waveD」をインスペクターの「Wave Controller (スクリプト)>Waves」にドラッグ＆ドロップ

プロジェクトを保存して動作を確認します。

1. CTRLを押しながらSキーを押してプロジェクト保存
2. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
3. 各種ウェーブが順番に登場することを確認
4. waveDが終了したらwaveAに戻ってループすることを確認
5. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●完成

シューティングとして遊べる形になりました。

次回はスコア制御を作って完成とします。
ゲームオーバーやタイトル、クリア等は気が向いたら作ります。

投稿 敵ウェーブ～横スクロールシューティング⑤ は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールシューティング作成の４回目になります。
アセットストアで無料公開されている「Warped Space Shooter」をお借りして作成しています。

今回は「分裂する隕石と背景」を作成します。
手順が長くなったのと、作成ペースが上がらないのでスコア、敵ウェーブはさらに後回しにします。

　↑これが完成します。

●隕石作成

▷隕石の作成

・解説

隕石の画像２枚をそれぞれ配置し、それぞれを敵として作成してプレハブ化します。
衝突させるためHitスクリプトを割り当て、小さい方をEnergy(1)、大きい方をEnergy(5)とします。
Rigidbody2Dを割り当てて重力スケールを(0)、衝突判定を(連続的)とし、CircleCollider2Dを割り当ててトリガーとします。

・隕石小の手順

隕石画像小を配置します。

1. 「Assets>Space Shooter Assets>Artwork>asteroids>asteroid-small」をシーンにドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(4, 4, 0)を入力

Hitスクリプトを割り当てます。

1. プロジェクトの「Assets>Hit」をヒエラルキーの「asteroid-small」にドラッグ＆ドロップ
2. インスペクターの「Hit (スクリプト)>Energy」に(1)を入力

Rigidbody 2Dを割り当てます。

1. インスペクターの「コンポーネントを追加」をクリック
2. 「Physics 2D>Rigidbody 2D」をクリック
3. インスペクターの「Rigidbody 2D>重力スケール」に(0)を入力
4. インスペクターの「Rigidbody 2D>衝突判定」を(連続的)に変更

Circle Collider 2Dを割り当てます。

1. インスペクターの「コンポーネントを追加」をクリック
2. 「Physics 2D>Circle Collider 2D」をクリック
3. インスペクターの「Circle Collider 2D>トリガーにする」をチェック

Enemyスクリプトを割り当てます。

1. プロジェクトの「Assets>Enemy」をヒエラルキーの「asteroid-small」にドラッグ＆ドロップ
2. インスペクターの「Enemy (スクリプト)>速度」に(1)を入力
3. インスペクターの「Enemy (スクリプト)>Cycle Count」に(0)を入力
4. インスペクターの「Enemy (スクリプト)>Curve Length」に(0)を入力

プレハブ化します。

1. ヒエラルキーの「asteroid-small」をプロジェクトの「Assets」にドラッグ＆ドロップ

・隕石大の手順

隕石画像大を配置します。

1. 「Assets>Space Shooter Assets>Artwork>asteroids>asteroid」をシーンにドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(4, 4, 0)を入力

Hitスクリプトを割り当てます。

1. プロジェクトの「Assets>Hit」をヒエラルキーの「asteroid」にドラッグ＆ドロップ
2. インスペクターの「Hit (スクリプト)>Energy」に(5)を入力

Rigidbody 2Dを割り当てます。

1. インスペクターの「コンポーネントを追加」をクリック
2. 「Physics 2D>Rigidbody 2D」をクリック
3. インスペクターの「Rigidbody 2D>重力スケール」に(0)を入力
4. インスペクターの「Rigidbody 2D>衝突判定」を(連続的)に変更

Circle Collider 2Dを割り当てます。

1. インスペクターの「コンポーネントを追加」をクリック
2. 「Physics 2D>Circle Collider 2D」をクリック
3. インスペクターの「Circle Collider 2D>トリガーにする」をチェック

Enemyスクリプトを割り当てます。

1. 「Assets>Enemy」をヒエラルキーの「asteroid」にドラッグ＆ドロップ
2. インスペクターの「Enemy (スクリプト)>速度」に(1)を入力
3. インスペクターの「Enemy (スクリプト)>Cycle Count」に(0)を入力
4. インスペクターの「Enemy (スクリプト)>Curve Length」に(0)を入力

プレハブ化します。

1. ヒエラルキーの「asteroid」をプロジェクトの「Assets」にドラッグ＆ドロップ

・動作確認

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 隕石が画面左に向かって移動してくることを確認
3. 隕石が破壊できることを確認
4. 隕石に体当たりするとやられることを確認
5. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷隕石をランダムに動かす

・解説

隕石をランダムな方向に動かすために変数を追加し、開始時の角度をランダムに設定します。

・手順

ランダム範囲を指定する変数を追加します。

1. プロジェクトの「Assets>Enemy」をダブルクリック
2. 「１秒間に進む距離」の下に以下の変数を追加

    public float randomMinDir = 0;  // ランダム方向の最小値
    public float randomMaxDir = 0;  // ランダム方向の最大値

ランダム値を設定する処理を追加します。

1. Start関数内の最後に以下の処理を追加

        // ランダム範囲が指定されている場合
        if (randomMinDir != randomMaxDir)
        {
            // ランダム方向を設定
            float rotZ = Random.Range(randomMinDir, randomMaxDir);
            transform.rotation = Quaternion.Euler(0, 0, rotZ);
        }

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

隕石大のランダム方向を指定します。

1. プロジェクトの「Assets>asteroid-small」をダブルクリック
2. インスペクターの「Enemy (スクリプト)>Random Max Dir」に(360)を入力
3. ヒエラルキーの左上にある「<」をクリック
4. プロジェクトの「Assets>asteroid」をダブルクリック
5. インスペクターの「Enemy (スクリプト)>Random Max Dir」に(360)を入力
6. ヒエラルキーの左上にある「<」をクリック

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. プレビューを繰り返し、隕石がランダムな方向に動くことを確認
3. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷隕石大を破壊したら隕石小にする

・解説

爆発後に作成するプレハブを指定できるよう、Enemyスクリプトを修正します。

・手順

爆発後に作成するプレハブ一覧を保存するため、変数を追加します。

1. プロジェクトの「Assets>Hit」をダブルクリック
2. Start関数の前に以下の変数を追加

    // 爆発後に作成するプレハブの一覧
    public List<GameObject> leavePrefabs;
    // 爆発後に作成したゲームオブジェクトの相対位置
    public List<Vector3> leavePostions;

爆発時にプレハブを残す処理を追加します。

1. OnTriggerEnter2D内の「自分を削除」する処理の前に以下の処理を追加

            // プレハブを残す
            Vector3 pos = transform.position;
            for (int i = 0; i < leavePrefabs.Count; i++)
            {
                Instantiate(leavePrefabs[i], pos + leavePostions[i], Quaternion.identity);
            }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

爆発時に作成するプレハブを割り当てます。

1. ヒエラルキーの「asteroid」をクリック
2. プロジェクトの「Assets>asteroid-small」をインスペクターの「Hit (スクリプト)>Leave Prefabs」にドラッグ＆ドロップ
3. プロジェクトの「Assets>asteroid-small」をインスペクターの「Hit (スクリプト)>Leave Prefabs」にドラッグ＆ドロップ
4. プロジェクトの「Assets>asteroid-small」をインスペクターの「Hit (スクリプト)>Leave Prefabs」にドラッグ＆ドロップ

爆発時に作成したプレハブの相対位置を設定します。

1. インスペクターの「Hit (スクリプト)>Leave Positions」右に(3)を入力
2. インスペクターの「Hit (スクリプト)>Leave Positions」左にある▶をクリックして展開
3. インスペクターの「Hit (スクリプト)>Leave Positions>要素0>Y」に(0.5)を入力
4. インスペクターの「Hit (スクリプト)>Leave Positions>要素1」に(-0.3, -0.3, 0)を入力
5. インスペクターの「Hit (スクリプト)>Leave Positions>要素1」に(0.3, -0.3, 0)を入力

隕石大の変更をプレハブに反映します。

1. インスペクターの右上にある「オーバーライド」をクリックし、「すべてを適用する」をクリック

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 隕石大を破壊したら隕石小が３つ出現することを確認
3. 残された隕石小を破壊できることを確認
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●背景

▷背景表示

・解説

背景スクロールを作成します。

前後関係と多重スクロールを制御しやすいように空オブジェクトで整理し、
空オブジェクトの中に背景画像を配置していきます。

・手順

背景画像を配置するための空オブジェクトを作成します。

1. ヒエラルキーの左上にある「＋」をクリックし、「空のオブジェクトを作成」をクリック
2. 「background」と入力してENTERを押す
3. インスペクターの「Transform>位置」に(0, 0, 0)を入力
4. ヒエラルキーの「background」を右クリックし、「空のオブジェクトを作成」をクリック
5. 「back」と入力してENTERを押す
6. インスペクターの「Transform>スケール」に(6.6, 6.6, 1)を入力
7. ヒエラルキーの「background」を右クリックし、「空のオブジェクトを作成」をクリック
8. 「stars」と入力してENTERを押す
9. インスペクターの「Transform>スケール」に(6.6, 6.6, 1)を入力
10. ヒエラルキーの「background」を右クリックし、「空のオブジェクトを作成」をクリック
11. 「planet」と入力してENTERを押す
12. インスペクターの「Transform>スケール」に(6.6, 6.6, 1)を入力

最も奥の背景画像を表示します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>background>bg-back」をヒエラルキーの「background>back」にドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(1, 1, 1)を入力
3. インスペクターの「Sprite Renderer>追加設定>レイヤーの順序」に(-100)を入力
4. ヒエラルキーの「background>back>bg-stars」をクリック
5. CTRLを押しながらDキーを押す
6. インスペクターの「Transform>位置>X」に(2.72)を入力
7. ヒエラルキーの「background>back>bg-back (1)」をクリック
8. CTRLを押しながらDキーを押す
9. インスペクターの「Transform>位置>X」に(5.44)を入力

中央の背景画像を表示します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>background>bg-stars」をヒエラルキーの「background>stars」にドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(1, 1, 1)を入力
3. インスペクターの「Sprite Renderer>追加設定>レイヤーの順序」に(-60)を入力
4. ヒエラルキーの「background>stars>bg-stars」をクリック
5. CTRLを押しながらDキーを押す
6. インスペクターの「Transform>位置>X」に(2.72)を入力
7. インスペクターの「Sprite Renderer>反転>Y」にチェックを入れる
8. ヒエラルキーの「background>back>bg-stars (1)」をクリック
9. CTRLを押しながらDキーを押す
10. インスペクターの「Transform>位置>X」に(5.44)を入力
11. インスペクターの「Sprite Renderer>反転>Y」のチェックを外す

手前の背景画像を表示します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>background>bg-planet」をヒエラルキーの「background>planet」にドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(1, 1, 1)を入力
3. インスペクターの「Sprite Renderer>追加設定>レイヤーの順序」に(-20)を入力
4. ヒエラルキーの「background>back>bg-planet」をクリック
5. CTRLを押しながらDキーを押す
6. インスペクターの「Transform>位置>X」に(2.72)を入力
7. インスペクターの「Sprite Renderer>反転>Y」にチェックを入れる
8. ヒエラルキーの「background>back>bg-planet(1)」をクリック
9. CTRLを押しながらDキーを押す
10. インスペクターの「Transform>位置>X」に(5.44)を入力
11. インスペクターの「Sprite Renderer>反転>Y」のチェックを外す

▷背景スクロール

・解説

背景をスクロールさせるためのスクリプトを作成します。

・手順

スクリプト「Background」を作成します。

1. プロジェクトの「Assets」を右クリックし、「作成>C# スクリプト」をクリック
2. 「Background」と入力してENTERを押す
3. プロジェクトの「Assets>Background」をダブルクリック
4. Start関数の前にスクロール制御する変数を追加

    public float speed = 0.01f;             // １フレームに動く距離
    public float scrollWidth = 5.44f;       // ループ幅

自分のスケールに合わせて「ループの幅」を計算する処理を記述します。

1. Start関数に以下の処理を追加

        // 自分のスケールに合わせて「ループの幅」を計算
        scrollWidth *= transform.localScale.x;

ループしてスクロールし続けるように処理を記述します。

1. Update関数の次に以下の関数を追加

    // 物理更新時に処理
    void FixedUpdate()
    {
        // スクロール
        Vector3 pos = transform.position;
        pos.x -= speed;
        // ループ幅を超えて移動した場合
        if (-scrollWidth > pos.x)
        {
            // ループ幅分戻す
            pos.x += scrollWidth;
        }
        transform.position = pos;
    }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

スクリプトを各背景ゲームオブジェクトに割り当て、速度を設定します。

1. ヒエラルキーの「background>back」にプロジェクトの「Assets>Background」をドラッグ＆ドロップ
2. ヒエラルキーの「background>back」をクリック
3. インスペクターの「Background (スクリプト)>速度」に(0.005)を入力
4. ヒエラルキーの「background>stars」にプロジェクトの「Assets>Background」をドラッグ＆ドロップ
5. ヒエラルキーの「background>planet」にプロジェクトの「Assets>Background」をドラッグ＆ドロップ
6. ヒエラルキーの「background>planet」をクリック
7. インスペクターの「Background (スクリプト)>速度」に(0.02)を入力

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 背景画像の３つが多重スクロールすることを確認
3. 背景画像がループしてスクロールすることを確認
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●不具合修正

▷現象確認

・解説

弾が見えない状態でも敵に命中していましたので修正します。

・手順

修正後に現象が発生しなくなる事を確認するため、一旦不具合を確認します。
自機の前方に隕石大を配置します。

1. ヒエラルキーの「asteroid」をクリック
2. インスペクターの「Transform>位置」に(6, 0, 0)を入力
3. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
4. 弾が当たる前に隕石大が破壊されることを確認
5. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷衝突条件修正

・解説

Debug.Logで隕石に衝突したオブジェクトの位置を確認したところ、見えないZ位置にある弾が衝突していました。
特に深く考えてませんでしたが、2Dの衝突チェックなんだから無視されて当然でした。

・手順

Z位置が0以外の場合、衝突しないようにします。

1. プロジェクトの「Assets>Hit」をダブルクリック
2. OnTriggerEnter2Dの「タグが同じ場合は衝突させない」処理の次に以下の処理を追加

        // Z軸が0以外の場合は衝突させない
        if (collider.gameObject.transform.position.z != 0)
        {
            return;
        }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 弾が隕石台に命中してから破壊されることを確認
3. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷エフェクトが表示されない不具合

・解説

プレビューすると表示されない時がありました。
１００％の発生ではないので確認が難しいですが…。
恐らくエフェクトとキャラクターの表示順が同じために発生しているので、はっきり表示順を指定します。

・手順

命中エフェクトの「レイヤーの順序」を大きくして手前に出します。

1. プロジェクトの「Assets>hit1」をダブルクリック
2. インスペクターの「Sprite Renderer>追加設定>レイヤーの順序」に(10)を入力
3. ヒエラルキーの左上にある「＜」をクリック

同じように、爆発エフェクトの「レイヤーの順序」を大きくして手前に出します。

1. プロジェクトの「Assets>explosion1」をダブルクリック
2. インスペクターの「Sprite Renderer>追加設定>レイヤーの順序」に(10)を入力
3. ヒエラルキーの左上にある「＜」をクリック

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. プレビューし、エフェクトが手前に表示されることを確認
3. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●完成

隕石と背景を追加し、遊べそうな雰囲気が出てきました。

次回はいくつか敵ウェーブを作成したいと思います。
敵グループを順番に出現させ、ループさせて遊べる形にします。

投稿 隕石と背景～横スクロールシューティング④ は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

今回のメインはオーディオです。

2D横スクロールシューティング作成の３回目になります。
アセットストアで無料公開されている「Warped Space Shooter」をお借りして作成しています。

「自機のやられ、BGM再生、効果音再生」を作成し、シューティングっぽくなるようにします。

　↑これが完成する。

●自機のやられ

▷自機の衝突設定

・解説

Hitスクリプトを設定し、１撃でやられるようEnergyに(1)を設定します。
Rigidbody2Dを割り当てて重力スケールを(0)、衝突判定を(連続的)とし、
CircleCollider2Dを割り当ててオフセットXを(0.05)、半径を(0.05)とします。

・手順

スクリプトを割り当てます。

1. 「Assets>Hit」をヒエラルキーの「Player1」にドラッグ＆ドロップ
2. インスペクターの「Hit (スクリプト)>Energy」に(1)を入力

Rigidbody 2Dを割り当てます。

1. インスペクターの「コンポーネントを追加」をクリック
2. 「Physics 2D>Rigidbody 2D」をクリック
3. インスペクターの「Rigidbody 2D>重力スケール」に(0)を入力
4. インスペクターの「Rigidbody 2D>衝突判定」を(連続的)に変更

Circle Collider 2Dを割り当てます。

1. インスペクターの「コンポーネントを追加」をクリック
2. 「Physics 2D>Circle Collider 2D」をクリック
3. インスペクターの「Circle Collider 2D>トリガーにする」をチェック
4. インスペクターの「Circle Collider 2D>オフセット>X」に(0.05)を入力
5. インスペクターの「Circle Collider 2D>半径」を(0.05)に変更

・動作確認

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 敵に体当たりしたら自機が爆発することを確認
3. 自機が爆発したら自機の弾が停止するバグが発生することを確認…
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷弾を加速度で動かす

・解説

弾が停止しないよう弾にRigidbody2Dを割り当てて加速度を与え、自分で動くようにします。

・手順

1. プロジェクトの「Assets>Player」をダブルクリック
2. Start関数の繰り返し処理内にある「プレハブから弾を作成」の処理の後に以下の処理を追加

            // リジッドボディの加速度を指定
            Rigidbody2D rb = shotList[i].GetComponent<Rigidbody2D>();
            rb.velocity = transform.right * shotSpeed;

1. FixedUpdateの最後にある「弾移動（どうせ見えないので全部動かす）」処理を削除

スクリプトを保存してビルドします。

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

弾にRigidbody 2Dを設定します。

1. プロジェクトの「Assets>shoot1」をダブルクリック
2. インスペクターの「コンポーネントを追加」をクリック
3. 「Physics 2D>Rigidbody 2D」をクリック
4. インスペクターの「Rigidbody 2D>重力スケール」に(0)を入力
5. インスペクターの「Rigidbody 2D>衝突判定」を(連続的)に変更
6. ヒエラルキー左上の「<」をクリックしてプレハブ編集を終了

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 敵に体当たりして爆発しても弾が停止しないことを確認
3. 自機の弾に体当たりしても爆発することを確認
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷タグで衝突を制御

・解説

自機の弾は誰と衝突しても破壊できる状態です。
自機と自機の弾にPlayerタグを割り当て、自分と同じタグの場合は衝突しないようスクリプトを修正します。

・手順

自機のタグを「Player」にします。

1. ヒエラルキーの「Player1」をクリック
2. インスペクターのタグを「Player」に変更

自機の弾のタグを「Player」にします。

1. プロジェクトの「Assets>shoot1」をダブルクリック
2. インスペクターのタグを「Player」に変更
3. ヒエラルキー左上の「<」をクリックしてプレハブ編集を終了

タグが同じ場合は衝突しないように条件を追加します。

1. プロジェクトの「Assets>Hit」をダブルクリック
2. OnTriggerEnter2D関数の先頭に以下の処理を追加

        // タグが同じ場合は衝突させない
        if (tag == collider.gameObject.tag) {
            return;
        }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 敵に弾を当てて倒せることを確認
3. 自分の弾に当たっても爆発しないことを確認
4. 再度プレビューし、敵への体当たりで爆発することを確認
5. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●オーディオ制御

▷BGM設定

・解説

オーディオ機能を使ってBGMを鳴らします。

・手順

BGMに合ったインポート設定に調整します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>music>space-asteroids.ogg」をクリック
2. インスペクターの「バックグラウンドで実行」をチェック
3. インスペクターの「デフォルト＞ロードタイプ」を「ストリーミング」に変更
4. インスペクターの「適用する」をクリック

ヒエラルキーに配置してBGM再生します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>music>space-asteroids.ogg」をヒエラルキーにドラッグ＆ドロップ
2. F2キーを押して「BGM」と入力し、ENTERを押す
3. インスペクターの「Audio Source>ループ」にチェックを入れる

・動作確認

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. BGMが再生されることを確認
3. BGMがループすることを確認
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷効果音再生制御

・解説

効果音を再生するためのスクリプトを作成します。
効果音再生にはオーディオ機能だけでなく、スクリプトも必要になります。

・手順

効果音を３つ、効果音に合ったインポート設定に調整します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>Sound FX>explosion」をクリック
2. SHIFTを押しながらプロジェクトの「Assets>Space Shooter Assets>Artwork>Sound FX>shot 1」をクリック
3. インスペクターの「Mono に強制」をチェック
4. インスペクターの「適用する」をクリック

ヒエラルキーに効果音を配置し、開始時に再生しないように設定します。

1. プロジェクトの「Assets>Space Shooter Assets>Artwork>Sound FX>explosion」をクリック
2. SHIFTを押しながらプロジェクトの「Assets>Space Shooter Assets>Artwork>Sound FX>shot 1」をクリック
3. プロジェクトで選択中のアセットをヒエラルキーの「Sample Scene」にドラッグ＆ドロップ
4. インスペクターの「Audio Source>ゲーム開始時に再生」にあるチェックを外す
5. インスペクターの「Audio Source>ボリューム」を(0.5)に設定
6. ヒエラルキーで選択中のゲームオブジェクトをヒエラルキーの「GameController」にドラッグ＆ドロップ

ゲーム管理にオーディオソースを管理させます。

1. プロジェクトの「Assets>GameController」をダブルクリック
2. Start関数の前に以下の変数を追加

    // オーディオソース一覧
    public List<AudioSource> audioSrcList = new List<AudioSource>();

ゲーム管理に効果音再生の機能を追加します。

1. playEffect関数の次に以下の関数を追加

    // 効果音再生
    public void playSE(string clipName)
    {
        // オーディオクリップ一覧から指定されたと一致するオーディオクリップを取得
        AudioSource audioSrc = audioSrcList.Find(item => item.clip.name == clipName);
        // オーディオクリップが見つかった場合
        if (audioSrc != null)
        {
            // オーディオ再生
            audioSrc.Play();
        }
    }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

命中した時に効果音を再生します。

1. プロジェクトの「Assets>Hit」をダブルクリック
2. 命中エフェクト再生の前に以下の処理を追加

            // 命中音再生
            gameController.playSE("hit");

爆発した時に効果音を再生します。

1. 爆発エフェクト再生の前に以下の処理を追加

            // 爆発音再生
            gameController.playSE("explosion");

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

弾を発射した時に効果音を再生するため、Playerスクリプトを修正します。

1. プロジェクトの「Assets>Player」をダブルクリック
2. Start関数の前に以下の処理を追加

    GameController gameController;      // ゲーム管理オブジェクト

1. Start関数の最後の処理として以下を追加

        // ゲーム管理オブジェクトを取得
        GameObject[] gameObjects = GameObject.FindGameObjectsWithTag("GameController");
        gameController = gameObjects[0].GetComponent<GameController>();

1. FixedUpdate関数内の「発射効果を表示」の前に以下の処理を追加

            // 発射音再生
            gameController.playSE("shot 1");

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 弾発射のタイミングで発射音が再生されることを確認
3. 弾が敵に命中した時に命中音が再生されることを確認
4. 弾が爆発した時に爆発音が再生されることを確認
5. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●完成

敵にやられ、BGMと効果音も再生されるようになりました。
スコアは表示できませんでしたが、だいぶシューティングっぽくなったかな？

次回は「スコア表示、アステロイド作成」を実施しようと思います。

投稿 オーディオ～横スクロールシューティング③ は だくまたゲーム制作ブログ に最初に表示されました。

●はじめに

2D横スクロールシューティング作成の２回目になります。
アセットストアで無料公開されている「Warped Space Shooter」をお借りして作成しています。

今回は「敵キャラクターを２パターン」を作成し、倒せるようになるまで進めます。

　↑このような形になります。

●敵作成

▷敵アニメーション

・解説

アニメーション１枚目のスプライトをシーンに配置し、敵オブジェクトを作成します。
敵オブジェクトにコントローラーを割り当てて敵アニメーションと関連付けることで、アニメーションが再生されます。

・手順

1. 「Assets>Space Shooter Assets>Artwork>enemy>enemy1.png」をシーンにドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(4, 4, 1)を入力
3. 「Assets>Space Shooter Assets>Artwork>enemy>enemy1.controller」をヒエラルキーの「enemy1」にドラッグ＆ドロップ

▷直進する敵

・解説

自分の進行方向に向かって前進するだけのAIを作成します。
「１秒間に進む距離」を公開変数で持たせ、Unityで編集できるようにします。
物理更新処理で進行方向に経過時間を掛け、それを現在位置に足していくことで移動させます。

・手順

1. プロジェクトの「Assets」を右クリックし、「作成＞C# スクリプト」をクリック
2. Enemyと入力し、ENTERを押す
3. プロジェクトの「Assets>Enemy」をヒエラルキーの「enemy1」にドラッグ＆ドロップ
4. プロジェクトの「Assets>Enemy」をダブルクリック
5. Start関数の前に以下のスクリプトを記述

    public float speed = 3;         // １秒間に進む距離

1. Update関数の後に以下のスクリプトを記述

    // 物理更新時に処理
    void FixedUpdate()
    {
        // 現在の座標を取得
        Vector3 pos = transform.position;

        // 進行方向に向かって直進
        pos += -transform.right * speed * Time.fixedDeltaTime;

        // 新しい座標に変更
        transform.position = pos;
    }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

1. CTRLを押しながらSキーを押してプロジェクト保存

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 敵機が左に向かって移動することを確認
3. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

▷上下にカーブしながら直進する敵

・解説

動きを表す変数「タイプ」を用意し、その値に応じて「直進のみ」「上下カーブあり」の動きを切り替えます。
タイプは公開変数としてUnity上で編集可能とします。
カーブは「サインカーブ」を使います。
物理更新された回数を記録しておき、その値をサインに渡します。
直進で得た移動量に掛け合わせることで、「上下にカーブしながら直進」する移動量となります。
これを現在位置に足すことで、「上下にカーブしながら直進」が実現できます。

・手順

1. プロジェクトの「Assets>Enemy」をダブルクリック
2. 変数「１秒間に進む距離」の前に以下のスクリプトを追加

    // 動きの種類
    public enum ENEMY_TYPE {
        LINE,                       // まっすぐ進む
        CURVE                       // 上下にカーブ
    }

    // 動きの種類
    public ENEMY_TYPE type = ENEMY_TYPE.CURVE;

1. Start関数の前に以下のスクリプトを追加

    public float cycleCount = 1;    // １秒間に往復する回数
    public float curveLength = 2;   // カーブの最大距離
    float cycleRadian = 0;          // サインに渡す値
    float centerY;                  // Y座標の中心

1. Start関数に以下のスクリプトを追加

        // 初期Y座標を「Y座標の中心」として保存
        centerY = transform.position.y;

1. FixedUpdate関数内にある「新しい座標に変更」処理の前に以下のスクリプトを追加

        // 上下にカーブ
        if (type == ENEMY_TYPE.CURVE)
        {
            if (cycleCount > 0)
            {
                cycleRadian += (cycleCount * 2 * Mathf.PI) / 50;
                pos.y = Mathf.Sin(cycleRadian) * curveLength + centerY;
            }
        }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 敵機が上下しながら左に向かって移動することを確認
3. １秒間に往復する回数「Cycle Count」を変えて動作確認
4. カーブの最大距離「Curve Length」を変えて動作確認
5. 確認しずらかったら敵のSpeedを0にして確認
6. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●衝突処理作成

▷衝突設定

・解説

衝突するようにするため、「Circle Collider 2D」と「Rigidbody 2D」を割り当てます。
敵機には両方、自機の弾には「Circle Collider 2D」のみを割り当てます。

2Dで作成しているので、「2D」と付いたコンポーネントを選ぶようにしてください。

・手順

敵機に「Circle Collider 2D」と「Rigidbody 2D」を割り当てます。

1. ヒエラルキーの「enemy1」をクリック
2. インスペクターの「コンポーネントを追加」をクリック
3. 「Physics 2D>Circle Collider 2D」をクリック
4. インスペクターの「Circle Collider 2D>トリガーにする」にチェックを入れる
5. インスペクターの「Circle Collider 2D>半径」に(0.15)を入力
6. インスペクターの「コンポーネントを追加」をクリック
7. 「Physics 2D>Rigidbody 2D」をクリック
8. インスペクターの「Rigidbody 2D>重力スケール」に(0)を入力
9. インスペクターの「Rigidbody 2D>衝突判定」を(連続的)に変更

自機の弾にコンポーネント「Circle Collider 2D」を割り当てます。

1. プロジェクトの「Assets>shoot1」をダブルクリック
2. インスペクターの「コンポーネントを追加」をクリック
3. 「Physics 2D>Circle Collider 2D」をクリック
4. インスペクターの「Circle Collider 2D>トリガーにする」にチェックを入れる
5. インスペクターの「Circle Collider 2D>オフセット>X」に(0.05)を入力
6. インスペクターの「Circle Collider 2D>半径」に(0.05)を入力

弾が小さいままでした。。。スケールを４倍にします。

1. インスペクターの「Transform>スケール」に(4, 4, 1)を入力
2. ヒエラルキー左上の「＜」をクリック

▷やられ制御

・解説

「体力が失くなったら爆発して消える」というスクリプトを作成し、自機と敵、それぞれに割り当てます。
コライダーを割り当てて衝突範囲を調整することで敵を倒せるようになります。

・手順

1. プロジェクトの「Assets」を右クリックし、「作成＞C# スクリプト」をクリック
2. Hitと入力し、ENTERを押す
3. プロジェクトの「Assets>Hit」をヒエラルキーの「enemy1」にドラッグ＆ドロップ
4. プロジェクトの「Assets>Hit」をダブルクリック
5. Start関数の前に以下のスクリプトを記述

    public int energy = 3;              // 残り体力

1. Update関数の後に以下のスクリプトを記述

    // 衝突時の処理（トリガー）
    void OnTriggerEnter2D(Collider2D collider)
    {
        // 体力を減らす
        energy--;
        // 体力が無くなった場合
        if (energy <= 0)
        {
            // 自分を削除
            Destroy(gameObject);
        }
    }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 弾を当てたら敵が消えることを確認
3. ※体力を１にしても消えない場合は手順を見直してください
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●やられエフェクト

▷やられアニメーション

・解説

スッと消えてよくわからないのでエフェクトでリアクションしてもらいます。

エフェクトの１フレーム目のスプライトをシーンに配置してゲームオブジェクト化し、スケールを４倍にしてアニメーションを割り当て。
プレハブ化してヒエラルキーから削除、これを「Hit」と「explosion」のエフェクトに対して行います。

・手順

1. 「Assets>Space Shooter Assets>Artwork>hit>hit1.png」をシーンにドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(4, 4, 1)を入力
3. 「Assets>Space Shooter Assets>Artwork>hit>hit1.controller」をヒエラルキーの「hit1」にドラッグ＆ドロップ
4. ヒエラルキーの「hit1」をプロジェクトの「Assets」にドラッグ＆ドロップ
5. ヒエラルキーの「hit1」をクリックし、Deleteキーを押す

1. 「Assets>Space Shooter Assets>Artwork>explosion>explosion1.png」をシーンにドラッグ＆ドロップ
2. インスペクターの「Transform>スケール」に(4, 4, 1)を入力
3. 「Assets>Space Shooter Assets>Artwork>explosion>explosion1.controller」をヒエラルキーの「explosion1」にドラッグ＆ドロップ
4. ヒエラルキーの「explosion1」をプロジェクトの「Assets」にドラッグ＆ドロップ
5. ヒエラルキーの「explosion1」をクリックし、Deleteキーを押す

▷やられアニメーター

・解説

Hitとexplosionのフォルダにあるアニメーションを修正し、終了時に見えなくなるよう最終フレームのスケールを０にします。
また、アニメーション再生のタイミングを指定するためアニメーターコントローラーに空ステートを開始時のステートとして指定、
プロパティ「play」を追加してメインのアニメーションを呼び出すためのトリガーとします。

開始時は何も表示されず、スクリプトでplayトリガーを起動するとアニメーションが再生されるようになります。
この手順はそのための準備になります。

・手順

トリガー「play」がONになった時にはじめてアニメーションが再生されるように設定します。

1. 「Assets>Space Shooter Assets>Artwork>hit>hit1.controller」をダブルクリック
2. アニメータービューの右側背景を右クリック
3. 「ステートの作成＞空」をクリック
4. 「New State」を右クリックし、「レイヤーデフォルトステートとして設定する」をクリック
5. 「Any State」を右クリックして「遷移を作成」をクリック、そのまま「Hit-Animation」をクリックして矢印を繋げる
6. インスペクターのチェック「時間をループ」を外し、ループしないように設定

1. アニメータービューのタブ「パラメーター」をクリック
2. アニメータービューの左側上部にある「＋」をクリックし、「Trigger」をクリック
3. 「play」と入力してENTERを押す
4. 「Any State」と「Hit-Animation」の間にある矢印をクリック
5. インスペクターの「Conditions」右下にある「＋」をクリック

スケール０になるフレームを最終フレームに配置し、アニメーション終了時にスプライトが消えるように設定します。

1. プロジェクトの「Assets>hit1」をダブルクリック
2. Unityメニューの「ウィンドウ＞アニメーション＞アニメーション」をクリック
3. アニメーションビューの「プロパティを追加」をクリック
4. 「Transform」の左にある「▶」をクリック
5. 「Transform>スケール」の右にある「＋」をクリック
6. アニメーションビューのタイムライン部、上部にあるフレーム行の「３」をクリック
7. アニメーションビューのプロパティ部、右上にある「◆＋」をクリック
8. アニメーションビューのタイムライン部、上部にあるフレーム行の「４」をクリックし、４フレーム目に白い縦線を配置して操作対象とする
9. アニメーションビューのプロパティ部、右上にある「◆＋」をクリック
10. アニメーションビューのプロパティ部、スケールの左にある「▶」をクリック
11. アニメーションビューのタイムライン部、「スケール.x」の行にある「４フレーム目の◆」をクリック
12. アニメーションビューのプロパティ部、スケールのx, y, zに(0, 0, 0)を入力

爆発エフェクトのアニメーターコントローラーを設定します。

1. 「Assets>Space Shooter Assets>Artwork>explosion>explosion1.controller」をダブルクリック
2. アニメータービューの右側背景を右クリック
3. 「ステートの作成＞空」をクリック
4. 「New State」を右クリックし、「レイヤーデフォルトステートとして設定する」をクリック
5. 「Any State」を右クリックして「遷移を作成」をクリック、そのまま「explosion-Animation」をクリックして矢印を繋げる
6. 「explosion–Animation」をダブルクリック
7. インスペクターのチェック「時間をループ」を外し、ループしないように設定

1. アニメータービューのタブ「パラメーター」をクリック
2. アニメータービューの左側上部にある「＋」をクリックし、「Trigger」をクリック
3. 「play」と入力してENTERを押す
4. 「Any State」と「explosion-animation」の間にある矢印をクリック
5. インスペクターの「Conditions」右下にある「＋」をクリック

爆発エフェクトのアニメーションを設定します。

1. プロジェクトの「Assets>explosion1」をダブルクリック
2. Unityメニューの「ウィンドウ＞アニメーション＞アニメーション」をクリック
3. アニメーションビューの「プロパティを追加」をクリック
4. 「Transform」の左にある「▶」をクリック
5. 「Transform>スケール」の右にある「＋」をクリック
6. アニメーションビューのタイムライン部、上部にあるフレーム行の「４」をクリック
7. アニメーションビューのプロパティ部、右上にある「◆＋」をクリック
8. アニメーションビューのタイムライン部、上部にあるフレーム行の「５」をクリックし、５フレーム目に白い縦線を配置して操作対象とする
9. アニメーションビューのタイムライン部、「スケール.x」の行にある「５フレーム目の◆」をクリック
10. アニメーションビューのプロパティ部、右上にある「◆＋」をクリック
11. アニメーションビューのプロパティ部、スケールの左にある「▶」をクリック
12. アニメーションビューのプロパティ部、スケールのx, y, zに(0, 0, 0)を入力
13. ヒエラルキー左上の「<」をクリックしてプレハブ編集を終了

▷やられエフェクト制御

・解説

命中と爆発を管理するスクリプトを作成し、このスクリプトを呼び出すことでエフェクトが再生されるようにします。

・手順

ゲーム管理スクリプトを作成し、命中エフェクトを管理するための変数を定義します。

1. プロジェクトの「Assets」を右クリックし、「作成＞C# スクリプト」をクリック
2. GameControllerと入力し、ENTERを押す
3. ヒエラルキー左上の「＋」をクリック
4. 「空のオブジェクトを作成」をクリック
5. 「GameController」と入力してENTERを押す
6. プロジェクトの「Assets>GameController」をヒエラルキーの「GameController」にドラッグ＆ドロップ
7. プロジェクトの「Assets>GameController」をダブルクリック
8. Start関数の前に以下のスクリプトを記述

    public GameObject hitEffectPrefab;              // 命中エフェクトプレハブ
    public int MAX_HIT_EFFECT = 100;                // 命中エフェクト最大数
    List<GameObject> hitEffects;                    // 命中エフェクト一覧
    int hitIndex = 0;                               // 次に使う命中エフェクトの位置

事前に命中エフェクトを作成して隠しておきます。

1. Start関数に以下のスクリプトを記述

        // カメラの後ろ位置
        Vector3 hidePos = Camera.main.transform.position - Camera.main.transform.forward;

        // 命中エフェクト事前作成
        hitEffects = new List<GameObject>();
        for (int i = 0; i < MAX_HIT_EFFECT; i++)
        {
            hitEffects.Add(Instantiate(hitEffectPrefab));
            hitEffects[i].transform.position = hidePos;
        }

爆発エフェクトを管理するための変数を定義します。

1. Start関数の前に以下のスクリプトを記述

    public GameObject explosionEffectPrefab;        // 爆発エフェクトプレハブ
    public int MAX_EXPLOSION_EFFECT = 100;          // 爆発エフェクト最大数
    List<GameObject> explosionEffects;              // 爆発エフェクト一覧
    int explosionIndex = 0;                         // 次に使う爆発エフェクトの位置

事前に爆発エフェクトを作成して隠しておきます。

1. Start関数内の最後に以下のスクリプトを記述

        // 爆発エフェクト事前作成
        explosionEffects = new List<GameObject>();
        for (int i = 0; i < MAX_EXPLOSION_EFFECT; i++)
        {
            explosionEffects.Add(Instantiate(explosionEffectPrefab));
            explosionEffects[i].transform.position = hidePos;
        }

エフェクトを作成する処理を記述します。

1. Update関数の次に以下のスクリプトを記述

    // エフェクト再生
    public void playEffect(string id, Vector3 pos)
    {
        GameObject effect = null;
        switch (id)
        {
            // 命中エフェクト
            case "hit":
                effect = hitEffects[hitIndex];
                break;
            // 爆発エフェクト
            case "explosion":
                effect = explosionEffects[explosionIndex];
                break;
        }

        if (effect != null)
        {
            // 位置設定
            effect.transform.position = pos;
            // アニメーション再生
            Animator animator = effect.GetComponent<Animator>();
            animator.SetTrigger("play");
        }
    }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

Hitスクリプト側にエフェクトを呼び出す処理を記述します。
まずはGameControllerにアクセスするため、それを保持する変数を作成します。

1. プロジェクトの「Assets>Hit」をダブルクリック
2. Start関数の前に以下のスクリプトを記述

    GameController gameController;      // ゲーム管理オブジェクト

タグを使ってGameControllerを取得します。

1. Start関数に以下のスクリプトを記述

        // ゲーム管理オブジェクトを取得
        GameObject[] gameObjects = GameObject.FindGameObjectsWithTag("GameController");
        gameController = gameObjects[0].GetComponent<GameController>();

体力が無くなったら自分の位置で爆発エフェクトを作成し、エフェクトを再生します。

1. 「自分を削除」する処理の前に以下のスクリプトを記述

            // 爆発エフェクト再生
            gameController.playEffect("explosion", gameObject.transform.position);

体力が残っていたら自分の位置に命中エフェクトを作成し、エフェクトを再生します。

1. 条件「体力が無くなった場合」の後に以下のスクリプトを記述

        // 体力が残っている場合
        else
        {
            // 命中エフェクト再生
            gameController.playEffect("hit", gameObject.transform.position);
        }

1. CTRLを押しながらSキーを押してスクリプト保存
2. Unityエディタをクリックしてビルド

GameControllerを持ったゲームオブジェクトを検索できるようにタグを割り当てます。

最初から用意されている「GameController」を使います。

1. ヒエラルキーの「GameController」をクリック
2. インスペクターの上部、左上にあるタグを「GameController」に変更

命中エフェクト、爆発エフェクトとして扱うプレハブをGameControllerに割り当てます。

1. プロジェクトの「Assets>Hit1」をインスペクターの「Game Controller(スクリプト)>Hit Effect Prefab」にドラッグ＆ドロップ
2. プロジェクトの「Assets>explosion1」をインスペクターの「Game Controller(スクリプト)>Explosion Effect Prefab」にドラッグ＆ドロップ

プロジェクトを保存して、

1. CTRLを押しながらSキーを押してプロジェクト保存

動作を確認します。

1. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー開始
2. 弾を当てたら命中エフェクトが再生されることを確認
3. 体力が無くなったら爆発エフェクトが再生されることを確認
4. Unityエディタ上部中央のPlayボタンをクリックしてプレビュー終了

●完成

敵が上下移動しながら左に進み、弾を当てると爆発します。

シューティングの「敵作成」完了です。
敵を増やしたり、体力を増やしたり、種類を変えたりして試してみてください。

次回は「自機のやられ、BGM、効果音、スコア」といった辺りを進めようと思います。

投稿 敵作成～横スクロールシューティング②【2D】 は だくまたゲーム制作ブログ に最初に表示されました。