のぼるゲーム開発備忘録

ゲーム開発のプログラマーです。ゲーム開発関連、調べた内容をアップしていきます。Unityを使用して個人開発を行っています。

【Unity】【TopDownEngine】TopDown Engine の使い方紹介

f:id:ikeball:20200724092647p:plain

はじめに

TopDown Engineを広めたく簡単なゲーム作成手順をまとめました。
このアセットは見下ろし型のゲーム作成に必要な処理が一通り揃っており、他のアセットを組み合わせることで自分だけのゲームを作り上げることもできます。


この記事をみて私もやってみようかなって方がいてくれてら幸いです。

f:id:ikeball:20210825083811g:plain

開発環境

Unity 2020.3.16f1

使用するアセット

TopDown Engineは必須ですが、その他のアセットは別のアセットを使用しても大丈夫です。追加アセットはモデル、背景や音を使うために使用しています。

TopDown Engine

POLYGON Sci-Fi Space - Low Poly 3D Art by Synty

高価なアセットですが、見合う内容が入っています。宇宙対戦物向けの戦闘機やステージ作成に必要なモデルが一通りそろいます。(UIやエフェクトは入っていません。内容物はアセットストアにてご確認ください)

戦闘機のモデル、背景、ステージ作成に使用します。

Game Music Pack - SUITE

カジュアルからシューティング、RPG向けなど様々なBGMが入ったアセットになります。アセットストアから試聴もできます。

BGMの設定に使用します。

紹介で作成するゲームの仕様

ファイター(戦闘機)を操作し、目的地点にたどり着いたらゲームクリアとなります。

敵が存在しプレイヤーを発見すると突撃してきます。敵はプレイヤーの攻撃で破壊することができます。敵に当たったらゲームオーバーとなります。

プロジェクト作成

Unityのインストール

Unity Hubより、最新の推しUnityをインストールしました。

f:id:ikeball:20210824194803p:plain

プロジェクトの作成

新規作成ボタンを押します。
※特定のバージョンのUnityを指定して作成したい場合は新規作成ボタンの横の▼から選択できます。

f:id:ikeball:20210824195052p:plain

今回のプロジェクトはテンプレート「3D」でプロジェクト名は「TopDownFigther」としました。

f:id:ikeball:20210824200141p:plain
プロジェクトが作成されれば大丈夫です。

f:id:ikeball:20210824201251p:plain

パッケージ(アセット)の追加

TopDown Engineの追加

メニュー「Window」→「Package Manager」を選択します。
Pakagesを「My Assets」を選択の上、対象のアセットを探します。
TopDown Engineを選択後、importを押します。
※見つからない場合は検索や、UnityAssetStoreからUnityで開くなどを選択し探してください。

f:id:ikeball:20210824202737p:plain

設定を上書きしてよいか確認が入るのでImportを選択します。

f:id:ikeball:20210824203111p:plain

内容を翻訳ツールで確認しました。

f:id:ikeball:20210824203338p:plain

Install/Upgradeを選択しました。

f:id:ikeball:20210824203434p:plain

Importを選択します。

f:id:ikeball:20210824204009p:plain

しばらく待ちます。...私のPCだとだいぶかかりました。
インポート終了後に、挨拶のウィンドウが出てきました。
ボタンから公式ドキュメントが開けました。
ドキュメントの説明はここでは割愛致します。
ウィンドウを閉じます。

f:id:ikeball:20210824205049p:plain

これでTopDownEngineを追加することが出来ました。

他のアセットも追加

他の使用するアセットも追加してください。
今回の紹介では下記アセットを追加しました。

 

f:id:ikeball:20210824222537p:plain

f:id:ikeball:20210824223900p:plain

TopDownEngineデモの確認

TopDownEngineには数多くのデモが入っています。
LevelSelectionと言うデモシーンから、各デモへアクセスができるようになっています。

f:id:ikeball:20210824205616p:plain

色々なデモがありますので実行して確認してみてください。
初期設定の基本的な操作方法
WASD ... 移動
F ... ダッシュ
Space ... ジャンプ
I ... 装備メニュー
マウス ... 照準の方向
マウス左 ... 弾の発射
※サンプルによってジャンプができないものや、弾が発射できないものもあります。
f:id:ikeball:20210824210106g:plain

ゲーム画面の作成

ゲームシーンの作成

ベースとなるシーンをもとに作成していきます。
①Assets/TopDownEngine/Demos/Minimal3D/MinimalScene3Dをコピーします。
②Assets直下にTopDownFighterと言うフォルダーを作成しました。
③コピーしたMinimalScene3DをGameSceneに名前を変更しました。

f:id:ikeball:20210824230743p:plain

GameSceneの確認

この画面をベースに作成していきます。
気になるところは多々あると思いますので早速更新していきます。

f:id:ikeball:20210824231101g:plain

自機の変更

このキャラクターを戦闘機に置き換えます。

f:id:ikeball:20210824231500p:plain

プレイヤーの設定はLevelmanagerのPlayer Prefabsで行われています。
確認したところMinimalCharacterのプレハブがこの青いキャラクターのようです。

f:id:ikeball:20210824231722p:plain

Assets\TopDownEngine\Demos\Minimal3D\Prefabs\PlayableCharacters\MinimalCharacter をコピーし、TopDownFighterのフォルダへ移動させ、名前をPlayerCharacterと変更しました。

f:id:ikeball:20210824232043p:plain

PlayerCharacterのプレハブを開きます。

f:id:ikeball:20210824232430p:plain

追加アセットの中から戦闘機のプレハブを使用します。
Assets\PolygonSciFiSpace\Prefabs\Vehicles\SM_Ship_Bomber_01
※別のアセットを使用しても問題ありません。モデルに合わせて当たり判定位置の調整を行ってください。

f:id:ikeball:20210824233009p:plain

位置・サイズ感の設定

サイズ感がだいぶ違っていたので調整と、Y軸0が地面となるように設定されていたので位置の調整を行いました。

f:id:ikeball:20210824233721p:plain

分かり辛いですが、地面ぴったりではなく少し浮かせた状態にしています。
歩くタイプであればぴったりで良いと思います。戦闘機なので少し浮いてた方が良いかなと思い少し浮かせた次第です。

f:id:ikeball:20210824233829p:plain

武器装備位置の設定

WeaponAttachmentを武器の装備(弾が出る位置)に合わせて調整します。

f:id:ikeball:20210824234019p:plain

当たり判定の設定

PlayerCharacterを選択し、Character Controllerコンポーネントから当たり判定位置の設定が行えます。機体より少し小さめに設定を行いました。

f:id:ikeball:20210824234737p:plain

最後に元の青いキャラクターを削除し、プレハブを保存します。

f:id:ikeball:20210824235042p:plain

f:id:ikeball:20210824235215p:plain

LevelManagerへプレイヤープレハブの設定

設定したPlayerCharacterをLevelManagerコンポーネントのPlayer Prefabsに設定します。

f:id:ikeball:20210824235921p:plain

実行して確認

キャラクタ―が置き換えられました。
移動はWASDで行えます。
ダッシュはF, ジャンプ?はSpaceになります。
f:id:ikeball:20210824235409g:plain

記事の紹介

 CorgiEngineでの紹介となりますが、人型モデル差し替えについて紹介しています。

ikeball.hatenablog.com

UIアイコンの変更

アイコンを自作したものに置き換えます。

f:id:ikeball:20210825000334p:plain

アイコンUIの設定はMinimal3DCameras/UICamera/Canvas/HUD/HealthBar/AvatarFrontにて行われていました。これのImage設定を変更すれば変えられそうです。
サイズは256x256のPNGで用意したいと思います。

f:id:ikeball:20210825000635p:plain

画像ツールで頑張って仕上げたい所ではありますが、今回はUnity上でそれらしい状態にしてキャプチャし、Windows標準のPaintで編集し用意しました。
上の項目で用意したPlayerCharacterプレハブに背景用のCubeを用意し設定したあとに画面をキャプチャしました。
余談ですが、アセットでキャラアイコンを探し設定する形でも良いと思います。

f:id:ikeball:20210825001734p:plain

キャプチャ後にサイズを256x256に変更、白枠だけ付けてPlayerIcon.pngで保存しました。

f:id:ikeball:20210825002113p:plain

Unityに作成したアイコンを追加します。
TopDownFighter以下に追加しました。

f:id:ikeball:20210825002619p:plain

PlayerIconをクリックし、Texture TypeをSprite (2D and UI)に変更し、Applyで反映させます。

f:id:ikeball:20210825002823p:plain

AvatarFrontを選択し、Source Imageを用意したスプライト画像に置き換えます。

f:id:ikeball:20210825003011p:plain

実行して確認

アイコンが変更されました。四角いアイコンとなっていますが、画像を丸型にすれば、丸くすることができます。今回は割愛致しますが、HPバーもカッコイイ素材に置き換えたくもなります。HBバーは HUD/HealthBar 以下のオブジェクトを更新することで変更できます。

f:id:ikeball:20210825003110p:plain

弾の発射

TopDownEngineでの弾の発射は武器を装備して弾を撃ち出す形で行います。
武器を装備するためには装備枠が必要となります。

プレイヤーの装備枠設定を確認

TopDownFighter/PlayerCharacter プレハブを開きます。
PlayerCharacterを選択し、Character Inventoryの設定を確認します。
SuitMainInventoryと設定されてました。
※設定名とこの後に出てくる装備枠の名前が一致していれば好きな名前で問題ありません。

f:id:ikeball:20210825011752p:plain

装備枠の用意

シーンのManagers以下に Inventories フォルダを作成します。
プレイヤーのCharacter Inventoryに設定されている装備枠の名前のオブジェクトを作成します。
SuitMainInvetory, SuitWeaponInventoryを作成します。

f:id:ikeball:20210825013021p:plain

f:id:ikeball:20210825014321p:plain

武器の用意

デモで用意されているショットガンを改造し使用します。

Assets/TopDownEngine/Demos/Loft3D/Prefabs/Weapons/WeaponsAmmoBased/LostShotgunWithAmmo を、コピーしTopDownFighterへ移動、名前をWeaponShotgunとしました。

f:id:ikeball:20210825015710p:plain

f:id:ikeball:20210825020016p:plain

WeaponShotgun のプレハブを開き
Shotgunのモデルを非表示に(削除でも問題ありません)
Projectile Weaponの
・Magazine / Ammo Consumed Per Shot を0にし、弾切れすることを止めています。
・Position / Weapon Attackment Offset は機体の砲撃位置に合わせたいためここでは0を設定しています。
・IK は戦闘機に左手、右手の概念がないため値をクリアしました。

f:id:ikeball:20210825020612p:plain

PlayerCharacter の Character Handle Weapon / Initial Weapon にShotogun Weaponをアタッチさせます。Initial Weaponに設定した武器は初期装備武器として機能します。

f:id:ikeball:20210825021252p:plain

実行して確認

弾が発射できるようになりました。設定次第で武器の切り替えや弾数の制限なども行うことができます。デモにShotgun以外の武器も用意されているので変更するだけでも武器が切り替えられます。

f:id:ikeball:20210825021731g:plain

記事紹介

武器の設定について下記記事で紹介しています。
CorgiEngineを使ったものですが設定項目は同じです。

ikeball.hatenablog.com

 敵の作成

テンプレートから用意

Assets/TopDownEngine/Demos/Loft3D/Prefabs/AI/LoftPatrolAndPathfinderAIをベースに作成します。コピーしTopDownFighterフォルダへ移動させ、EnemyPatrolAndPatfinderAI に名前を変更しました。

f:id:ikeball:20210825025131p:plain

f:id:ikeball:20210825025424p:plain

モデルの設定

EnemyPatrolAndPatfinderAI を開きます。
元となったプレハブで使用しない部分を無効化します。
オブジェクトやコンポーネントは削除でも問題ありません。
・Dude ~ Shoesを無効化
・SuitModel の
 Scale を1に設定
 Animatorを無効化
 Weapon IKを無効化

f:id:ikeball:20210825071746p:plain

Assets\PolygonSciFiSpace\Prefabs\Vehicles\SM_Ship_Stealth_01 プレハブを配置しました。サイズ感を合わせるため、それぞれ0.15としました。
色を変更するためMesh RendererのMaterialsをPolygonScifiSpace_Material_02_Aに変更しました。
PolygonSciFiSpaceにはあらかじめ何色か用意されています。

f:id:ikeball:20210825072400p:plain

破壊されたときの表現

破壊されたときの表現が血しぶきになっていたため、既存で用意されている。
DeathFeedbackのParticles PrefabをLoftExplosionに変更しました。
※パスは Assets\TopDownEngine\Demos\Loft3D\Prefabs\Props\LoftExplosion にあります。

f:id:ikeball:20210825072653p:plain

敵に当たったらダメージ

今回はシンプルに敵にあったら即死という設定で行います。
EnemyPatrolAndPathfinderAI を選択し、DmageOnTouch と BoxCollider を追加してください。

f:id:ikeball:20210825073112p:plain

敵を配置

Level以下にEnemiesと言う空のオブジェクトを作成し、用意した敵プレハブを追加しました。
Hiearchy上から敵プレハブを選択するとSceneビュー上に番号と線が表示されます。
これがプレイヤーを見つけていない場合の移動経路になります。
MMPathから経路は変更することができます。

f:id:ikeball:20210825073508p:plain

ナビメッシュの用意

敵が追跡の移動を行うためにはあらかじめマップ情報をNavmeshとして登録しておく必要があります。
Navmeshオブジェクトをからで追加し、NavMeshSurfaceを追加してください。
設定は画像に合わせ行ってください。

f:id:ikeball:20210825073813p:plain

Include Layersの設定はObstacles / Ground を対象にしています。

f:id:ikeball:20210825074013p:plain

設定が終わったら「Bake」を押します。
Bakeはマップの配置を変えるたびに行う必要があります。

f:id:ikeball:20210825074559p:plain

実行して確認

敵に当たったら即死が確認できました。敵の当たり判定は気持ち大きめにすると動画の感じになりました。BoxColliderの各設定を2.2に調整しました。
それぞれの値は好きに変更して頂いて自分だけの設定を行ってください。
テンプレートとなる動きを簡単な動きをする敵にしましたが、弾を撃ってくる敵も用意されています。敵側からも撃ってくるとゲームとして難しくなりますが、撃ち合いは楽しいと思います。
敵の数や移動パスのルートを変更しても面白いと思います。

f:id:ikeball:20210825074959g:plain

敵は撃って倒すこともできます。

f:id:ikeball:20210825075541g:plain

記事紹介

AIの設定について下記記事で紹介しています。
CorgiEngineを使ったもので用意されている思考がTopDownEngineとは違いますが考え方は同じになります。 

ikeball.hatenablog.com

 ゴールの配置

到達したらゲームクリアとなるゴールを設定します。
Minimal3DGateToNextLevelを配置することでゴールの設定が行えます。
※Assets\TopDownEngine\Demos\Minimal3D\Prefabs\Props にあります。

f:id:ikeball:20210825080151p:plain

設置し位置の調整を行いました。

f:id:ikeball:20210825080402p:plain

遷移先のシーンにクリア画面や次のステージ、ステージ選択のシーンを設定することで好きなようにゲームを拡張できます。
設定は GoToLevelEntryPoint の LevelName で行います。
新規にシーンを作成したところへ飛ぶ場合は「BuildSettings...」シーン追加を忘れないようにしてください。

f:id:ikeball:20210825080604p:plain

実行して確認

光に触れたらシーンが変更されることが確認できました。
クリアシーンを用意して遷移させればゲームの形になります。

f:id:ikeball:20210825081014g:plain

記事紹介

シーンの追加方法についてまとめています。
こちらの記事もCorgiEngineでの紹介となりますが設定方法は同じになります。

ikeball.hatenablog.com

BGMの設定

BGMの設定

SoundManagerにBackgroundMusicコンポーネントを追加し、SoundClipに設定するとBGMが再生されるようになります。

f:id:ikeball:20210825082248p:plain

Game Music Pack - SUITEshooting_01_loop を設定しました。

f:id:ikeball:20210825082448p:plain

実行して確認してみてください。

記事紹介

BGMの他、SEの設定方法についてもまとめています。

ikeball.hatenablog.com

 ゲームの調整

プレイヤー初期位置

初期位置はLevelManagerのInitial Spawn Pointにて設定を行います。

f:id:ikeball:20210825082841p:plain

f:id:ikeball:20210825082959p:plain

実行して確認すると位置が変わっていることが確認できます。

f:id:ikeball:20210825083024p:plain

この先の改造

f:id:ikeball:20210825083811g:plain

この先の処理として

・画面を追加してみる タイトル画面 / クリア画面を用意し遷移するようにしてみる。
・ステージを拡張してみる、マップの広さを拡張したり、障害物を置いてマップの形を変えてみる。
・敵の種類を増やしてみる。HPが多い敵や、動きの速い敵など種類を増やしてみる。
・武器の種類をふやしてみる。
・ステージをこだわってみる。
考えるだけでも色々な追加要素が考えられます。
ぜひ自分だけの処理を追加してオリジナルゲームを作成してみてください。

 

おわりに

最後まで見て頂きありがとう御座います。
だいぶ駆け足気味の記事となってしまい語れないところが多くありました。武器の設定やAIの設定やギミックなどについても語りたい気持ちがいっぱいです。

なるべく手順を飛ばさずまとめたつもりですが、記事内容で分かり辛い点が御座いましたらTwitterからご連絡お願いします。

今後も時間をみて記事を書いていきたいと思います。

 

TopDownEngineにて制作物紹介

エフェクト系のアセットも追加し宇宙で対戦するゲームを制作中です。

 

今回紹介はできていませんが、2.5Dでゲームを作成することもできます。

使用アセット

TopDown Engine

POLYGON Sci-Fi Space - Low Poly 3D Art by Synty

Game Music Pack - SUITE

関連記事

ikeball.hatenablog.com

ikeball.hatenablog.comikeball.hatenablog.com

ikeball.hatenablog.com

ikeball.hatenablog.com