1. スプライトフュージョンとアセットの準備

1.1 スプライトフュージョン

スプライトフュージョンは、マップチップを使った2Dタイルマップを作成できるサイトです
https://www.spritefusion.com/editor



Unityの2Dタイルマップは
パレットの作成・保存や編集などがちょっと使いづらかったので試してみました。

オートタイルの設定もできてすごく使いやすい！
今回はこちらを使ってマップを作っていきます。

スプライトフュージョンの使い方は動画の00:17から

マップの素材は「ドット絵世界」で配布されているのを使いました。

とくに解説の必要がないくらい、直感的に使えます。


左のタイルパレットから、タイルを選び
右のマップエリアに、タイルを配置していきます。



マップが完成したら、右上の「Export」ボタンを押すと
いろんなゲームの形式で書き出しすることができます。

Unityをクリックして、ユニティパッケージをダウンロードしましょう。
これでマップは完成です！

1.2 キャラのドット絵と追跡アセットのダウンロード

• ドット絵の準備: 

• A* Pathfinding Projectのダウンロード: 

敵の追跡AIに使用するアセットです。
こちらからダウンロードすることができます。
今回はフリーバージョンを使用しました

2. パッケージのインポートとマップの作成

2.1 プロジェクトの作成とパッケージのインポート

プロジェクトの作成は動画の3:39から

UnityHubを起動して、新しいプロジェクトを作成しましょう。




2Dゲームを作りたいので、Universal 2Dを選びました。
プロジェクトの名前や保存場所は自由に決めましょう。
ここではaooniという名前にしました。





プロジェクトが立ち上がったら、さっそくマップを表示しましょう。
上のメニューの
「アセット」→「パッケージをインポート」→「カスタムパッケージ」を選びます。




さきほどスプライトフュージョンからダウンロードしておいた
「map.unitypackage」を選択しましょう


インポートすると
「Assets」→「SpriteFusion」→「Maps」の中に
マップのプレハブが入っています。

これをシーンにドラッグして、マップを配置しましょう。

2.2 マップの表示

マップの位置は小数点が出ないように、transformから調節しましょう。
（ここではｘ-9・ｙ6としましたが、マップによって座標はかわります）

2.3 レイヤーの設定

ヒエラルキーの　「map」 の▼をクリックすると
障害物（Obstacles）と地面（Ground）にわかれています。

レイヤーを設定して、障害物だとわかるようにしましょう。

Obstaclesを選択します




インスペクターの「レイヤー」をクリックして「レイヤーを追加」を選びましょう。




レイヤーの名前をつける画面が開きます。
Obstacllesレイヤーを追加しましょう。



もういちど、ヒエラルキーから「Obstacles」を選択し
レイヤーを「Obstacles」に設定しましょう。



これで、レイヤーの設定ができました。
（動画ではGroundレイヤーも作ってましたが、使わなかったです）

2.4 コライダーコンポーネントの取り付け

キャラクターと壁が衝突するためには、コライダーが必要です
Obstaclesのインスペクターから
「コンポーネントを追加」をクリックし
「Tilemap Collider 2D」を選びましょう。



これでマップの準備は完了です。

3. プレイヤーの作成

キャラクターの追加は動画の5:01から

3.1 キャラクターのスプライトをスライス

使いたいキャラクターのスプライトシートを
Assetsフォルダにドラッグします。



Assetsフォルダに保存できたら、プレイヤーに使う画像をクリックし
インスペクターを開きましょう。

今回使うキャラクターは32*32ピクセルの画像なので
1マスに32ピクセルで表示したいです。

「単位毎のピクセル数」を32に設定しましょう。

「スプライトエディターを開く」ボタンをクリックします。



スプライトエディターで、32ピクセルごとにキャラチップを分割しましょう
「スライス」をクリックし
タイプを「Grid By Cell Size」に
ピクセルサイズを「32*32」に設定します。

「スライス」ボタンをクリックし、プレビューできれいに分割されていることを確認しましょう。



スプライトエディターの右上の「適用」ボタンをクリックすると、分割が適用されます。

3.2 アニメーターコントローラーの作成

アニメーションの切り替えを管理するコントローラーを作成しましょう。

さきほど分割したキャラクターの画像をみてみましょう（ここではreimuの画像）
▶矢印ボタンをクリックすると、スプライトを分割した画像の一覧が表示されます。

Ctrlキーを押しながら、前向きの歩行アニメーションのマップチップを選択し
シーンにドラッグしましょう。




シーンにドラッグすると、アニメーションの名前を決めて保存する画面が現れます。
このアニメーションは前向きのアニメーションなので、frontという名前にしました。




Assetsフォルダを確認すると
frontというアニメーションと
reimu_0というコントローラーが作成されました。

コントローラーはわかりやすい名前に変更します。
ここでは「walk」という名前にしました。

3.3 ソートレイヤーの設定

マップの後ろにキャラクターが隠れてしまうので
手前に表示するようにしましょう。

ヒエラルキーからプレイヤーのキャラクターをクリックし
インスペクターから
Sprite Rendererの中の
「「「ソートレイヤー」をクリックし「 Add Sorting Layer 」を選びましょう。

ソートレイヤーを設定する画面が開きました。
「+」ボタンをクリックして新しいレイヤーを作成し
Layer1 に Charという名前をつけましょう。



ヒエラルキーからもういちどプレイヤーのオブジェクトを選択し
SpriteRendererのソートレイヤーを「Char」に変更しましょう。



インスペクターのTransformから
グリッドにぴったりに表示されるように、座標を決めましょう。
（ここではX0.5 Y-0.5にしましたが、マップによってかわります）

3.4 アニメーションの編集

再生してみると、アニメーションが少し速すぎるようだったので調整します。
Assetsから「walk」のアニメーターコントローラーをダブルクリックして開きましょう。



Assetsフォルダが表示されていたウィンドウに
「アニメーター」タブが表示されました。

frontのアニメーションをクリックしてインスペクターを開きましょう。



インスペクターから、アニメーションの速度を変更しましょう。
ここでは速度を0.5にしました。
（使用している画像によって速度はかわるので、自分の好きな速度にします）

3.5 他の向きのアニメーション

前向きだけではなく、左向き・右向き・後ろ向きのアニメーションも作りましょう。

前向きアニメーションと同じように、アニメーションに使用する画像を
Ctrlキーで複数選択し、シーンにドラッグして名前をつけます。

アニメーションがほしいだけなので
ヒエラルキーにできたオブジェクトは削除します。



同じように、アニメーターコントローラーも
たくさんできてしまうので削除します。




次に、walkのアニメーターコントローラーを開き
ほかのアニメーションクリップを登録しましょう。

frontのアニメーションクリップをクリックし
Ctrl+C　Ctrl+Vでコピーします。




コピーすると、front 0 という名前のアニメーションができます。
これをクリックして、インスペクターを開きましょう。

名前を「Back」に変更
Motionをクリックして、backのアニメーションを選択しましょう。

これで、プログラムからPlay("Back")と命令すれば
backのアニメーションを再生することができます。




同じようにアニメーションをコピーして
Left ・ Right のアニメーションも登録しましょう。




これでアニメーターコントローラーは完成です。

3.5 プレイヤーの当たり判定

プレイヤーの当たり判定追加は動画の8:33から

ヒエラルキーからプレイヤーを選択して、コンポーネントを追加しましょう。

壁と衝突させるには
Rigidbody2D（物理エンジン）とCollider2D（当たり判定）が必要です。


インスペクターから「コンポーネントの追加」をクリックして
Rigidbody 2Dを追加します。


見下ろし型の2Dマップなので、下に落ちないように重力を０にしておきましょう。
重力スケールを０にします。


また、移動中に回転してしまうのをふせぐために
Constraintsを開いて
回転を固定 Z にチェックを入れましょう。




同じように、コンポーネントの追加から
「Box Collider 2D」を追加します。




大きさ１のオブジェクトが、１のスキマを通るのはむずかしいので
当たり判定をすこし小さくしておきます。
今回はサイズを0.8にしました




これで、プレイヤーが壁に衝突するようになりました。

3.7 プレイヤーの移動プログラム

プレイヤーの移動プログラムは動画の9:15から


プレイヤーにスクリプトを追加しましょう。
コンポーネントの追加をクリックし、検索窓に「Player」と入力します。

「New script」をクリックしましょう。


「作成して追加」ボタンをクリックすると
Playerという空のスクリプトが追加されます。



インスペクターにスクリプトが追加されました。
「Player」をダブルクリックしてエディタを開きましょう。





これでプレイヤーの移動ができました。

4. 追いかけてくる敵を作ろう

4.1 プレイヤーをコピーして敵を作成

敵キャラクターの作成波動がの12:23から


ヒエラルキーでプレイヤーを選択して Ctrl+Dを押してオブジェクトを複製しましょう。
複製したオブジェクトに好きな名前をつけます（ここではmarisaにしました）



Assetsの中の、敵キャラとして使用する画像をスライスしましょう。



インスペクターから
単位毎のピクセル数を32に変更し
スプライトエディターをひらきます。



スプライトエディターの「スライス」をクリックし
タイプを Grid By Cell Sizeに
ピクセルサイズを32*32にして「スライス」します


最後に「適用する」をクリックして、スプライトエディターを閉じましょう。

4.2 テクスチャの差し替え

敵キャラは、プレイヤーのオブジェクトをコピーしているので
コンポーネントもコピーされています。

敵きゃらのインスペクターを開きます。

Playerのスクリプトはいらないので
「・・・」から「コンポーネントの削除」を選びましょう



アニメーションをキャラごとに作るのは大変なので
アニメーションはプレイヤーのものを流用し、テクスチャだけを変更する方法でアニメーションさせましょう。

テラシュールブログに紹介されていましたので、このプログラムをそのまま使います。
以下のリンクから、プログラムを保存しましょう。



Assetsフォルダに、OverrideSpriteAnimationsTexture.cs
のプログラムをドラッグします


Assetsに保存したプログラムを
敵キャラクターのインスペクターにドラッグしましょう。



スクリプトに、テクスチャを設定する変数があります。
ここに、敵キャラのテクスチャをドラッグして代入しましょう。



これで、敵キャラクターがアニメーションするようになりました。

4.3 A*Pathfinding Projectを使おう

アセットの使い方は動画の13:39から

まず、上のメニューの
アセット　→　パッケージをインポート　→　カスタムパッケージ
を順にクリックし



ダウンロードしておいた、astarpathfindingprojectのユニティーパッケージをえらびましょう。
全部インポートします。




つぎに、マップをサーチするためのオブジェクトを作成します。
ヒエラルキーを右クリックして「空のオブジェクトを作成」をえらびます。



オブジェクト名はなんでもいいですが、ここでは「A*」という名前にしました



A*のインスペクターをひらき
「コンポーネントの追加」から
「Pathfinder」を追加しましょう。




Pathfinderから「Graphs」をクリックし
Add New Graphから「Grid Graph」をえらびます。

これでグリッドマップ（タイルマップ）のサーチができるようになります


Grid Graphの設定を行います。

今回は2Dマップなので、2Dにチェックを入れましょう。
Widthを18
Depthを14にしました
これはマップによって大きさがかわるので、自分のマップにあわせて大きさを変えて下さい




マップの大きさを入力すると
シーンに赤いドットが現れるので、どこまでサーチしてくれるかがわかりやすくなっています。




キャラクターの移動を上下左右だけにしたいときは
ConnectionsをFourにしておきましょう。（Eightだと８方向に移動できる）



下の方に行くと、コライダーの設定があります。

Use 2D Physicsにチェックを入れ
Diameterを0.8に設定します。
Obstacle Layer Maskには壁のレイヤー（ここではObstacles）を設定しましょう。

１のスキマに、１のキャラは通れないので
プレイヤーと同じく0.8くらいのサイズにしましたが
これは自分のゲームにあわせて設定してください




最後に、一番したの「スキャン」をクリックすると




シーンのマップが、通れるところと通れないところにわかれました。
青いエリアが通れるところ、赤いドットが障害物です

4.4 追いかけてくるキャラの設定

敵キャラクターが追いかけてくるスクリプトを追加しましょう。
ヒエラルキーから敵キャラクターを選択し、インスペクターを開きます。

コンポーネントの追加から
「Seeker」のスクリプトを選びます。
おいかけルートをきめるスクリプトです



作成したルートを、かっちりと移動してほしいときは
Seekerの「Start End Modifier」をクリックし

Start Point Snapping　を　Node Connectionに
End Pint Snapping　を　Node Center（Snap To Node）

に設定しましょう。




つぎに
「AI Distination Setter」も追加します。
これはターゲットを決めるためのスクリプトです



AI Distination Setterの
「Target」に追いかけてほしいキャラクター（ここではReimu)を設定しましょう



次に、キャラクターの移動方法をきめるスクリプトを追加します。
コンポーネントの追加から「AILerp」を選びましょう。




同じ移動プログラムで、AIPathというスクリプトもあります。
AIPathは、物理演算をつかって自然なカンジに
AILerpは、Lerp（線形補間）を使ってパスに沿って移動
みたいなイメージです。かっちり移動してほしいのでLerpを選びました


AILerpの設定で
Speedで、追いかけるスピードを設定しましょう。（好きなスピードにしてね）
Enable Rotationのチェックを外すと、敵キャラが回転しなくなります。




再生して、シーンを見てみると
どんなルートで追いかけてくるかを見ることができます。
ちゃんとマス目に沿って移動してくれていますね。

4.5 敵キャラのアニメーション

敵キャラのアニメーションは動画の16:44から


最後に、敵キャラが進行方向にあわせてアニメーションするようにしましょう。

敵キャラのコンポーネントの追加から
「Enemy」という名前で新しいスクリプトを追加しました。



追加されたEnemyのスクリプトをダブルクリックして
エディタで開きましょう。



こんなスクリプトにしました


これで、キャラクターが進行方向を向くようになりました

5. 一定時間後に敵が出現

敵キャラを非アクティブにしておき
コルーチンで一定時間まったあとに、アクティブにすることにしました。

シーンに、空のオブジェクトを用意して


スクリプトを追加します。
Spawnerという名前にしました


めっちゃカンタンなプログラム


プログラムができたら
インスペクターからEnemyを設定しましょう。
（ここではMarisaを設定）



これで、5秒後に敵キャラがでてくるようになりました。

6. さいごに

これで敵キャラ追跡プログラムは完成です
A*PathFindingは高性能で、設定項目があって大変ですが
なれると使いやすいみたいなので
興味がある人は使ってみて下さいね！

A*PathFinding Projectのドキュメントはこちら

3Dもほとんど同じオペレーションで追いかけてくる敵が作れます！