TopDown Engine 入門 Part 5 ～カメラ編～

カメラの作り方は自由

このままだとキャラクターが移動しても画面が動かないので、キャラクターの動きに合わせてカメラも動くようにしてみましょう。と言っても、カメラに関しては TopDown Engine 特有の決まりはありません。単純にキャラクターに追随させるだけなら、Main Camera を Player の子にしてしまえば OK です。

より高機能なカメラを実装したい場合は、Unity 公式のパッケージである「Cinemachine」を使います。最初に TopDown Engine をインストールしたときに、Cinemachine も自動でインポートされていますので、使い始めるのに追加の操作は必要ありません。早速使ってみましょう。

Cinemachine 入門

Virtual Camera と Brain

メニューバーに「Cinemachine」という項目があるので、その中にある「Create 2D Camera」をクリックします。

すると、「CM vcam1」という GameObject が作られるとともに、Main Camera に「CinemachineBrain」というコンポーネントがアタッチされます。CM vcam1 には「CinemachineVirtualCamera」というコンポーネントがアタッチされていて、この CinemachineVirtualCamera が CinemachineBrain を制御するという関係になります。

Follow の設定

CinemachineVirtualCamera の「Follow」にオブジェクトを設定することで、そのオブジェクトをカメラが追うようになります。

なので、ここに Player を設定すれば良いわけですが、前回の補遺にもあるように、実際には Player が Hierarchy に居ない場合も多いでしょう。ですが心配はいりません。TopDown Engine は、その点もカバーしています。

CM vcam1 に、「Cinemachine Camera Controller」というスクリプトをアタッチしましょう。「Add Component」ボタンを押して、検索ボックスにワードを打ち込んで見つけてください。*1

完了したら、シーンを再生し、キャラクターを動かしてみてください。カメラがキャラクターを追うようになりましたか？

Cinemachine Camera Controller は何をしているのか

次に進む前に、Cinemachine Camera Controller が実際には何をしているのかを解説します。

先程、CinemachineVirtualCamera の Follow に設定された対象をカメラが追うと説明しましたが、シーン再生中にこの項目を見てみると、「CameraTarget」というオブジェクトが自動で設定されることが分かるでしょう。そしてその CameraTarget は、Player の子の GameObject です。

どういうことかと言うと、

• Part 3 で Player にアタッチした Character が、初期化時に自身の子として CameraTarget を生成
• それを Cinemachine Camera Controller が受け取って、CinemachineVirtualCamera の Follow に設定

という処理がゲーム中に実行され、カメラが Player を追うようになるのです。

カメラの映る範囲を制限する

さて、これでカメラが動くようになったわけですが、キャラクターがマップの端に移動すると、マップの外側が見切れてしまいます。

これを防ぐには、【コンファイナ】というものを作成・設定する必要があります。これは以下の手順で行います。

カメラを 2D 用の設定に変更

• Main Camera を選択し、Camera コンポーネントの「Projection」を「Orthographic」に変更する。*2

LevelManager にコライダーをアタッチ

• LevelManager に Box Collider をアタッチする。*3
• 「Is Trigger」にチェックを入れる。*4
• 「Size」をレベルに合うように調整する。

Virtual Camera にコンファイナを設定

• CM vcam1 にアタッチされた CinemachineVirtualCamera の一番下にある「Add Extension」から「CinemachineConfiner」を選択する。「Cinemachine Confiner」がアタッチされる。

• アタッチされた Cinemachine Confiner の「Confile Mode」を「Confine 3D」に設定する。

ここまで正しく設定できたら、カメラに映る範囲が LevelManager にアタッチされた Box Collider の範囲内に制限されるようになります。

---

NEXTTopDown Engine 入門 Part 6 ～テレポーター編～

PREVTopDown Engine 入門 Part 4 ～ステージ編～

---

*1:Cinemachine 関連のスクリプトは「TopDown Engine」の項目の中には無いので、検索して見つけるか、Project から直接アタッチする必要があります。

*2:こうすることで、カメラから遠近感が無くなり、景色が常に平行に映るようになります。

*3:Box Collider "2D" ではないことに注意してください！

*4:実際には、2D 世界のオブジェクトと 3D 世界のオブジェクトが影響しあうことはないため、チェックを入れる必要はありません。自分の場合は、Inspector をパッと見た時に衝突判定が残っていると勘違いしてしまうのを防ぐため、チェックを入れています。

TopDown Engine 入門 Part 4 ～ステージ編～

ステージ？　いいえ、レベルです

キャラクターの次はステージを作っていきましょう。なお、TopDown Engine では、ステージのことを【レベル】と呼んでいますので*1、このブログでも以降はレベルと呼ぶことにします。

TopDown Engine のレベルは Unity の標準的な機能を使うように作られていますので、どのように作っても構いません。単純に Sprite Renderer を配置しても良いですし、2D Tilemap を使っても良いでしょう（デモの「KoalaDungeon」のレベルは 2D Tilemap で作られています）。Asset Store にあるような他社製のレベル制作ツールも、おそらく使うことができるかと思います。

ここでは簡便のため、以下の数枚の画像のみを使ってレベルを作っていきます。

日本を代表するトップダウンビューゲームのダンジョン

地面や壁を置く

各スプライトをシーンに配置し、コライダーを設定します。普通の Box Collider 2D などで大丈夫です。

Hierarchy の区切り線やフォルダ用の GameObject は適宜追加してください

レイヤー

TopDown Engine では、レベルの各要素をレイヤーで判別しています。付与すべきレイヤーは TopDown Engine をインポートした時点で自動で追加されていますので、自分で新しく追加したりする必要はありません。以下のように設定していきましょう。

• 地面：「Ground」
• 壁・障害物：「Obstacles」

プレイヤー

また、プレイヤーキャラクターにも「Player」というレイヤーを設定する必要があります。Part 3 で実行した AutoBuild Player Character 2D によって、親の GameObject には「Player」レイヤーが設定されていますが、子の View はそのままなので、こちらにも「Player」レイヤーを付与しておきましょう。

必要があれば、コライダーも調整してください。TopDown Engine の作者さんによると、キャラクターの下半分を囲むようにするのが良いそうです。そうすることで、キャラクターの頭が壁の前に来るようになり、良い感じの見た目になるとのこと。

こんな感じで下半分を囲む

Level Manager

最後に、レベル全体を制御するマネージャーを作成します。空の GameObject を作成して「LevelManager」とリネームし、Add Component から TopDown Engine > Managers と進んで「Level Manager」をアタッチしましょう。

そして、Inspector の「Scene Characters」に、Player を設定します。

動作確認

最後にゲームを再生して、キャラクターが壁や障害物にぶつかって止まるかどうかを確認しましょう。

補遺

なお、テスト中はプレイヤーキャラクターが最初から存在していても問題ありませんが、実際には、キャラクターがどのマップから移動してきたかや、どのセーブデータをロードしたかなどによって、初期位置や出現タイミングが定まっていないことが多いでしょう。そのため TopDown Engine では、Hierarchy に Player を直接置かずに、Player の Prefab を Level Manager の「Player Prefabs」に設定することが推奨されています。

こうすることで、ゲームの実行中に Level Manager がキャラクターを生成するようになります。

---

NEXTTopDown Engine 入門 Part 5 ～カメラ編～

PREVTopDown Engine 入門 Part 3 ～最小構成編～

---

*1:海外では一般的な用語で、例えばステージクリアのことを「Level Complete」と言ったりします。日本語でも「レベルデザイン」などと言いますね。

TopDown Engine 入門 Part 3 ～最小構成編～

最小構成のシーンを作成

いよいよ自分でシーンを作成し、キャラクターを動かしてみましょう。適当な名前でシーンを新規作成します（ここでは「sandbox」という名称にします）。

親の顔より見たデフォルトの Skybox

各種マネージャーを配置

シーンを用意できたら、空の GameObject を作成し、「GameManager」とリネームします。そして、Add Component から TopDown Engine > Managers と進み、「Game Manager」をアタッチします。

次に Main Camera を選択し、同じように Add Component から TopDown Engine > Managers と進んで「Input Manager」をアタッチします。

キャラクターを配置

今度はキャラクターを配置します。空の GameObject を作成して「Player」とリネーム、そしてさらにその子となる GameObject も作成して「View」とリネームします。この View が、キャラクターの見た目となる GameObject です。Sprite Renderer などをアタッチして、好きな画像を設定してください。

Player に戻り、Add Component から TopDown Engine > Character > Core と進んで「Character」をアタッチします。Inspector 内の Character コンポーネントの一番下に「AutoBuild ～」という複数のボタンがあるので、その中の「AutoBuild Player Character 2D」をクリックしましょう。すると、Rigidbody 2D や Box Collider 2D など、キャラクターに必要なコンポーネントが自動でアタッチ・設定されます。

キャラクターを操作できるか確認

ここまで出来たら、シーンを再生して、WASD キーでキャラクターを操作できるか確かめてみましょう。

ちゃんと操作ができれば成功です！✨

---

NEXTTopDown Engine 入門 Part 4 ～ステージ編～

PREVTopDown Engine 入門 Part 2 ～デモシーン編～

---

TopDown Engine 入門 Part 2 ～デモシーン編～

デモシーンを見てみる

TopDown Engine のインストールが完了したら、デモシーンを見てどんな機能があるかを調べていきましょう。

様々なデモシーンが用意されていますが、最初は「MinimalSandbox2D」から見ていくのがオススメです。MinimalSandbox2D では、TopDown Engine が備えている 2D の機能を一通り試すことができます。

MinimalSandbox2D

デモシーンは、キーボードの WASD とマウスで操作します。Xbox のゲームパッドを持っていれば、そちらを使うこともできます。*1

WASD で移動できる

普通のドアと、鍵が掛かっているドア

スイッチで開くドアと、押して動かせるブロックの組み合わせ

動く足場もあれば……

ワープなんかもある

武器を拾えば攻撃もできる*2

他にも、NPC と会話したり、敵を攻撃して倒したりもできます。これだけの機能があれば、トップダウンビューのゲームがだいぶ作りやすそうですね。

---

NEXTTopDown Engine 入門 Part 3 ～最小構成編～

PREVTopDown Engine 入門 Part 1 ～インストール編～

---

*1:DUALSHOCK 4 などのコントローラーでも一応動かせますが、ボタン配置がバラバラで思ったように操作ができないので、Xbox のコントローラーを持っていない場合はキーボードで操作したほうが良いでしょう。

*2:フォーカスはマウスで動かします。

TopDown Engine 入門 Part 1 ～インストール編～

はじめに

今日から「TopDown Engine」というアセットを使い始めるので、備忘録を兼ねて、このブログに学習したことを書き留めておきます。

TopDown Engine とは

「TopDown Engine」は、Unity 上で動作し、見下ろし型（"トップダウン"ビュー）のゲームを簡単に作ることのできるツール――いわばエンジン内エンジン*1です。要は『ゼルダの伝説』みたいなゲームが簡単に作れるよ、ということですね。公式の概要を読むと、軽量かつ堅牢、拡張性にも富み、PC だけでなくモバイル端末やコンソールなどあらゆる環境に対応しているとのこと。万能すぎひん……？　書いてあることが凄すぎてにわかには信じがたいですが、実際に使ってみて本当かどうか試してみたいと思います。

なお、公式サイトにはより詳しい紹介が載っていますので、そちらもご覧になることをおすすめします。英語ですが、ムービーがふんだんに使われているので、眺めるだけでもなんとなく TopDown Engine がどういうエンジンなのかを理解できるでしょう。

インストール

公式のドキュメント（英語）を頑張って読みながらインストールしていきます。

（環境：Unity 2019.4.1f1, Windows 10 Pro 2004）

まず、Unity Hub で新規プロジェクトを作成し、Asset Store から TopDown Engine をインポートします。既存のプロジェクではなく、必ず空のプロジェクトにインポートしてください。

「空のプロジェクトにインポートしてください」と警告が出てくる

Import ボタンを押すと、今度は「Package Manager で必要なパッケージをインポートします」というダイアログが出てきます。承認すると、「2D Animation」や「Cinemachine」などが自動でインポートされます。

それが終わると、見慣れたインポート画面が現れるので、すべてチェックマークが付いたままインポートしましょう。とても大きなアセットなので、ちょっと時間が掛かることにご留意ください。

動作確認

ここまで完了すると、Assets/ ディレクトリ内がこのような構成になっています。

Assets/TopDownEngine/Demos/ の中に数種類のデモシーンが入っていますので、その中の Minimal2D/MinimalSandbox2D.unity を開き、シーンを再生してみましょう。ゲームをプレイすることが確認できたら成功です🌟

---

NEXTTopDown Engine 入門 Part 2 ～デモシーン編～

---

*1:ノベルゲームでいうところの「宴」みたいな立ち位置ですね。

Visual Studio Code の Csscomb がカスタムプロパティを含む CSS でエラーになる

はじめに

CSS / SCSS のプロパティを自動で並び替えてくれる、「CSSComb」というツールがあります。Visual Studio Code 用の拡張機能も存在し、Visual Studio Code で CSS を書く際に非常に便利なのですが、カスタムプロパティを含んだ CSS に使用するとエラーが発生してしまいます。

どうやら本家 CSSComb ではすでに修正済みで、その修正が Visual Studio Code の拡張機能に取り込まれていないようです。

そこで、手動で拡張機能の中身を最新版の CSSComb にアップデートしていきます。

作業内容

まず、本家の CSSComb をクローンしてきます。

そして、クローンしてきたリポジトリの src/ ディレクトリの中身を、Visual Studio Codeの CSSComb のディレクトリ*1にコピーします。

最後に、Visual Studio Code を再起動して、エラーが起きないのを確認して完了です。

*1:Windows の場合は C:/Users/{USERNAME}/.vscode/extensions/mrmlnc.vscode-csscomb-5.3.1/node_modules/csscomb/lib/

border を可視化して、CSS の調整をやりやすくする

* {
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

いやまぁ、考えてみればめっちゃ当たり前のテクニックなんですけど、さっきこの手法を思いつくまで 10 年くらいずっとデベロッパーツールで頑張って調整してました……（´・ω・`）.;:…（´・ω...:.;::..（´・;::: .:.;: ｻﾗｻﾗ..

追記

Ryosuke さんから、borderだとレイアウトが若干変化してしまうので box-shadow を使ったほうが良いと教えていただきました！ 天才か……😳

* {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

✌