Unity を検索

最新の 2D サンプルプロジェクト『Dragon Crashers』のご紹介

2021年3月19日 カテゴリ: テクノロジー | 10 分 で読めます
Blog header
Blog header
取り上げているトピック
シェア

Unity のネイティブ 2D ツールを使って、オートプレイ型 RPG の出来栄えを一段階引き上げた方法をご覧ください。

Unity の 2019 年のリリースサイクルにおいて、私たちは 2D アーティストやクリエイターに力を与えるために、2D ツールスイートを完成させるビジョンを実現しました。Unity の 2D パッケージのリリースには、キャラクターのスケルトンアニメーションとインバースキネマティクス(IK)、タイルマップによるレベルデザイン、スプラインシェイプ、ピクセルアートツールなどが盛り込まれました。Unity の 2D 機能を紹介するウェブサイトで、その概要をご覧いただけます。

Dragon Crashers demo image
『Dragon Crashers』のゲーム画面。

こちらのページで、ウェブで遊べるデモ版をプレイ可能です。Google Chrome など、WebGL 2.0 に対応したブラウザーでアクセスしてください。オートプレイ型 RPG なので自動的に進行していきますが、メーターが満杯になった時にタップすることで特別な攻撃を行うことができます。

私たちの 2D チームは、これらのワークフローを最適化し、ユニバーサルレンダーパイプラインに含まれるグラフィック技術 2D Renderer を改良しました。これらのツールを試して、どのように 2D ビジュアルの完成度を高めているかを知るには、新しいサンプルプロジェクトを試すのが一番です。『Dragon Crashers』は、現在アセットストアで無料で提供されています。

 

アセットストアで『Dragon Crashers』をダウンロード

 

『Dragon Crashers』について

Dragon Crashers』は、Unity 2020.2 で作られた、Unity のネイティブな 2D ツール群とグラフィック技術を紹介するための公式サンプルプロジェクトです。ゲームプレイ部分は、現在モバイルプラットフォームで人気のジャンルとなっている、横スクロール型オートプレイ RPG のバーティカルスライスとなっています。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

ヒーローたちのパーティが敵を自動で攻撃しますが、それぞれのアバターをタッチまたはクリックすることで特殊な攻撃を繰り出すこともできます。

サンプルプロジェクトは、デスクトップ、モバイル、Web の各プラットフォームでテストされています。

近日開催されるウェビナー

本記事でご紹介する情報に加えて、4 月 14 日午前 11 時(東部標準時。日本時間 4 月 15 日午前 1 時(14 日深夜 25 時))に『Dragon Crashers』の概要を説明ウェビナーがオンラインで開催されます。このウェビナーで有用なヒントをつかみ、加えてグローバルコンテンツ開発者の Andy Touch によるライブでのウォークスルーをお楽しみください。ご登録はこちらのリンクから行っていただけます。

Dragon and knights
初期段階と完成版の比較:アーティストの Jaroslaw 氏が作成したコンセプトアートやアセットが、シーンを構築するために必要なガイドとして活かされている。

始めよう

Unity 2020.2 または 2020 LTS をインストールした状態で、アセットストアからプロジェクトを取得してください。プロジェクトを取得したらまず、新しい 2D プロジェクトを立ち上げ、Package Manager > My Assets と移動し、『Dragon Crashers』をインポートします。Project Settings のポップアップメッセージがいくつか表示されますが、すべて受け入れてください。

何か問題が発生した場合は、2D フォーラム内に用意されたDragon Crashers』専用スレッドにてお知らせください。

unity hub screenshot

プロジェクトがインポートされると、メニューバーにプロジェクトのシーンへのショートカットを提供する新しいオプションが表示されます。Load Game Menu を選択し、再生ボタンを押して試してみてください。

Image taken in Unity of selecting 'load game menu'

ゲームビューでは、フル HD(1920×1080)や、4K UHD(3840×2160)など、高解像度ディスプレイ向けの設定を使うことをおすすめします。

Screenshot of gameplay

1 体のアニメーション化されたマネキンから 6 人のキャラクターを作る

私たちのヒーローや、地底に潜む敵たちは多彩で、いろいろな服やアクセサリーを身に付けており、またバリエーションも存在します。しかし、どのキャラクターも 2 足歩行で、似たような体の構造をしています。

キャラクター 1 人 1 人にそれぞれ 2D IK 制約をつけてアニメーションをつけなくて済むように、まずマネキンを作りました。アニメーターはこのマネキンを使ってアニメーションをつけ、キャラクターアーティストは各キャラクターのスキンやアクセサリーを作成しました。

Image of character model

マネキンのプレハブ(PV_Character_Base_Bipedal.prefab)を使って、各キャラクターのプレハブのバリアントを作成しました。これらのバリアントは「Sprite Library Asset」だけを替えて二足歩行のキャラクターの見た目を入れ替えています。

すべてのキャラクターの Sprite Library Asset には、共通のカテゴリーとラベルが付けられ、ボディパーツとそのバリアントを定義しています。例えば、ナイトと敵のスケルトンは共に「mouth(口)」というカテゴリーの付いたスプライトを持っており、アニメーション時には「mouth open」(開いた口)、「mouth teeth」(口の中の歯)、「mouth normal」(通常状態の口)というラベルの付いたスプライトのバリアントが使用されます。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

アニメーションをすべてのキャラクターに適用するには、各キャラクターのビジュアルアセットまたは PSB のリグが似たような構造を持っているようにする必要があります。つまり、同じルールで名前を付けられたボーンが、体の同じカテゴリーとラベルを持つパーツに取り付けられている必要があります。時間を節約するために、マネキンのスケルトン(または参照キャラクターのボーン)をコピーして、別のキャラクターにペーストすることができます。このオプションは、スプライトエディターの一部であるスキニングエディターで使用できます。

Image of character model with hat.
他のキャラクターのボーン情報をコピーアンドペーストする場合は、スプライトのカテゴリとボーンの名前が一致していることを確認する。また、新しいスプライトとうまく連動するようにジオメトリを調整するとよい。

プレハブには、インバースキネマティクスや、2D Lit を使う環境によりよく馴染ませるための法線マップ、マスクマップなど、キャラクターをより生き生きと見せる機能が搭載されています。

Image of dragon character model
ドラゴンは、二足歩行のキャラクターとは解剖学的に異なり、骨の構造も異なる。そのため、アニメーションも再利用されない。

シーン、スプライト、タイルマップ、スプライトシェイプの構成

プロトタイピングの段階で、レベルデザインをがっちり決めてしまう必要はありません。Unity に搭載されているワールド構築用の 2D ツールを使えば、レベルデザインを楽しみながら、簡単にイテレーションを回すことができます。タイルマップエディターやスプライトシェイプは、オブジェクトや地形の形状に合わせてコライダーを設定するなどの作業を自動化するのに役立ちます。一方、シーンビューは、ゲームをよりエキサイティングに、より美しくするための実験場所です。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

最も重要な点は、タイルパレットにすべての「ブラシ」を用意しておくことです。タイルパレットには、繰り返しのパターンになるタイル、アニメーションするタイル、等角法で描かれたタイルや六角形のタイル、さらには、1 つのレンダラー(Tilemap Renderer)だけで、すべてをパフォーマンスよくレンダリングするゲームオブジェクトを含めることができます。グリッドのすべての要素については、「Palette_GroundAndWalls」タイルパレットを参照してください。

Screenshot of game in editor
上の画面で白くなっている地面のタイルは、環境に追加された雰囲気付けのための 2D ライトであり、ゲーム内では白く見えない。

また、見落とされがちですが、レベルデザインに役立つ機能として「Sprite Draw」モードがあります。背景のレイヤーに使用されるタイリングされたスプライトは、小さなスプライトでシーン内の広い領域をカバーし、美しい視差効果を生み出すことができます。

Screenshot of game in editor. There are caves.
背景を構成する 4 つのレイヤーは、シンプルな繰り返しのパターンを持つスプライトで構成されている。

有機的な外観のオブジェクトやスプラインベースの要素をプロジェクトに追加する際に、タイルマップグリッドは最も実用的なソリューションとは言えないかもしれません。そのような場合は、ベクター描画ソフトのように描画ができる、2D Sprite Shape のようなスプラインベースのツールを使うことをお勧めします。そうしたツールで作った要素を、背景の小道具やゲームプレイの一部として使用することができます。SpriteShape Renderer を使えば、シェイプのスプラインやボーダーに取り付けられた多数のスプライトを効率よくレンダリングすることができます。P_MineCartTracks_A プレハブを見ると、スプライン曲線で線路が描かれ、支持構造のアートワークは Sprite Shape Profile の塗りつぶしテクスチャで作られているのがわかります。

Screenshot of game in editor. There are train tracks.

P_Bridge プレハブや P_MineCartTracks_B プレハブは、スプライトシェイプの境界線が単純な線である必要はなく、より精巧な要素(ここでは橋と線路)を表していることを示す他の例です。

Image of decorative sprites being used.
線路のような装飾的な要素や、木製の構造物などの前景の要素にもスプライトシェイプが使われている。

2D シェーダー、法線マップ、アニメーション化された小道具類

2D レンダラーでは、Sprite-Lit シェーダーを使って高度なライティングエフェクトを得ることができます。スプライトにセカンダリテクスチャを与えることで、これらのエフェクトを最大限に活用できます。

Image showing the process from basic character model to fully working character.
法線マップとマスクマップは、オリジナルのキャラクターアセット(PSB)のコピーで、アート制作ツールを使って作成された。

法線マップは、スプライトエディターで追加することができます。これらの RGB イメージは、ピクセルが向いている XYZ 方向を表し、2D ライトによる影響をどれだけ受けるかを決めます。マスクマップは、ライトブレンドスタイル機能の一部である 2D レンダラーデータアセット(プロジェクト内の RenderData_2D.asset)でも利用できます。「Fresnel」という名前のライトブレンドスタイルは、キャラクターやスプライトの周りのリムライトを強調するために使用されます。フレネルエフェクトを得るためには、例えば、マスクマップの R チャンネルの情報を使用するように選択します。今回のプロジェクトでは、ライトブレンドスタイルが 1 つしかないため、R、G、B の 3 つのチャンネルは同じ(白黒)に見えます。これにより、マスクマップを作成するプロセスが便利になりました。

Screenshot of editor with game art/objects.
このゲームアートは、Affinity Designer で制作された。アーティストの Jaroslaw は、法線マップとマスクマップを同時に作成したが、このプロセスについては今後のブログで紹介する。

デモでは、CPU に負担をかけずに小道具をアニメーションさせるために、シェーダーグラフが頻繁に使用されています。風がクモの巣を動かしたり(P_SpiderWeb_Blur prefab)、水晶が光ったり(P_Crystals_Cluster)、溶岩が流れたり(P_Lava_Flowing_Vertical)といったアニメーションで、フローマップテクスチャを利用して、メインテクスチャの UV 座標の方向を制御しているのがわかります。フローマップテクスチャでは、赤と緑の色を使って、各フレームでピクセルがたどる XY 方向を示しています。このエフェクトを実現する方法に興味のある方は、「FlowMap」サブグラフを開いてみてください。

Screenshot of game in editor. Lava!
手描きのフローマップが溶岩の流れに、プロジェクトのアートディレクションにマッチした漫画風の粘り気を表す表現を与えている。

同じドラゴンと戦うシーンには、「animated alpha clipping」と呼ばれるシェーダーアニメーションの手法が使われ、1 つのテクスチャから滑らかなアニメーションを作り出しています。これは、各フレームでピクセルの特定の範囲を、アルファ値に基づいて表示させることで実現します。溶岩の飛び散り(ParticleSystem_Splatters)やヒットアニメーション(P_VFX_HitEffect)などのビジュアルエフェクトは、シェーダーグラフを使ったこのテクニックで作られています。

Splatter alpha fading
このパーティクルのスムーズなアニメーションは 1 枚のテクスチャとシェーダーグラフで適用された animated alpha clipping を使って実現している。

2D ライトでシーンを彩色する

このデモのアートスタイルは、2D ライトと、その可能性を考慮して作られています。手で描いた法線マップとマスクマップによって強調されたスプライトは、見ての通り比較的平板な感じがします。そしてタイルマップの床のようないくつかのスプライトは、グレースケールで彩色されています。つまり、タイルマップレンダラーの Color オプションと、環境で照らされた部分の色を組み合わせて彩色されているということです。

Screenshot of game - 3D lights on vs 3D lights off.
Unity の 2D グラフィックスの可能性を考慮して、使える選択肢を最大限使えるようにゲームのアートを制作することが重要である。

リアルタイムの 2D ライトがあることで、Unity エディターでゲームシーンの仕上げにより多くの時間を費やすことができます。ライトやオブジェクトを使ってシーンを構成して、その結果を直接観察したり、ステージをプレイしながら、ゲームに必要なムードや雰囲気をより精度よく作り上げることができます。

さらに、それらの要素をアニメーション化することで、没入感を高めることができます。例えば、P_Lantern_HangingFromPost プレハブは、アニメーションを付けたオブジェクトにライトを取り付ける方法や、Sprite-Lit パーティクルを使った杖を魔女のキャラクターに持たせる方法の一例を示しています。

2D ライトをプロジェクトに使用するもう一つの利点は、要素を再利用できることです。環境や小道具は、ライティング条件によって見え方が大きく変わるため、同じスプライトを使って何通りものステージを作ることができます。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

ゲームプレイのアーキテクチャ

今回のデモプロジェクトでは、ゲームプレイの作成、構造化、管理、およびイテレーションのために、スクリプタブルオブジェクトプレハブを組み合わせて使用しました。

全 7 体のキャラクターは、ヒーローか敵かに関わらず、基本となる Unit プレハブからコアとなる構造を継承し、同じビヘイビアコードを使用しています。キャラクター間で設定されている値を変えるために、ユニットごとに値の異なる「ブロック」にはスクリプタブルオブジェクトを使用しました。こういう値がハードコードされていると、プログラマー以外の人がゲームバランスを取るのが難しく、ゲーム性が硬直化してしまうため、「Attack Damage Amount(攻撃によるダメージ量)」「Ability Cooldown Time in Seconds(アビリティのクールダウン時間(秒))」「Unit Health(ユニットのライフ)」などのユニットにより変わる値をスクリプタブルオブジェクトに設定し、プロジェクトの関係者なら誰でもすぐに調整できるようにしました。これらの値の変更は、ゲームプレイのコードで動的に処理されます。

Screenshot of Unity editor

各 Unit プレハブには、ユニットの「頭脳」の役割を果たすコアスクリプト「UnitController」があり、プレハブ内部のスクリプトの参照やビヘイビアのシーケンスを処理します。例えば、ドラゴンが攻撃されると、「UnitController」は関連するビヘイビアイベントを実行し、伏せるアニメーションへ移行する、吼える際の効果を再生する、ドラゴンのライフを減らすなどの処理を行います。 これらのコアビヘイビアは、カプセル化の概念を遵守し、それぞれの目的やタスクのみを処理します。 例えば、「UnitHealthBehaviour」は、ユニットのライフ値の設定や削除、「HealthChanged」や「HealthIsZero」などの重要なイベントコールバックの報告などのロジックを処理するだけです。しかし、「UnitController」は、ゲームプレイ中に発生するシナリオやアクションに基づいて、「UnitHealthBehaviour」に値を送信します。

Flow chart of unit controller

場合によっては、特定のイベントが発生した場合に、Unit の外部システムの更新が必要になることもあります。このような設定にはデリゲートが利用されます。

例えば、以下のようになります。魔女が攻撃を受けてダメージを受けたとき、「UnitHealthBehaviour」がイベント「HealthChanged(int healthAmount)」を実行すると、外部からサブスクライブされた「UIUnitHealthBehaviour」は、その値に応じて魔女のライフ残量を示すバーを更新することができます。

デリゲートを使用することで、他のシステムに依存することなく領域ごとに分離してテストすることができます。例えば、数字をポップアップするダメージ表示システムのパフォーマンスを、戦闘のゲームプレイをシミュレートすることなく、別のシーンでテストしました。

Flow chart of packages

タイムラインとシグナル

Unity のタイムラインはリニアカットシーンと各ユニットのアビリティの演出に使われています。 リニアカットシーンは、戦闘の最初と最後に発生します。カメラの切り替え(Cinemachine を使用)、キャラクターのアニメーション(Animator を使用)、オーディオクリップ、パーティクルエフェクト、UI アニメーションなど、さまざまな領域のシーケンスを処理します。各トラックは、関連するシーンのインスタンスにバインドされています。 イントロ演出の最後にタイムラインのシグナルを埋め込み、カットシーンが終了したときに Unity イベントを起動するようにしました。これにより、戦闘のゲームプレイロジックを開始するタイミングを「合図」します。

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

タイムラインは、各ユニットのプレハブに組み込まれたアビリティ発動時のシーケンスを作成するために使用されました。これにより、各ユニットは、マルチプレイヤーオンラインバトルアリーナ(MOBA)ゲームのチャンピオンアビリティのような、キャラクターに関連した独自の特別な能力を持つことができます。

各ユニットには自動で発動する「基本技(basic)」と手動で発動させる「必殺技(special)」の 2 つのアビリティ発動タイムラインがあります。「UnitAbilitiesBehaviour」スクリプトは、現在再生されているアビリティ、アビリティのシーケンスキュー、アビリティクールダウンの開始/停止(イントロのカットシーンが再生されているかどうか、ユニットが倒れたかどうかなど、高レベルのゲームプレイロジックに応じて)など、両方のアビリティ発動タイムラインのロジックを処理します。 アビリティ発動タイムラインのトラックは、攻撃アニメーションのキャラクターのアニメーターやビジュアルエフェクトのパーティクルシステムなど、Unit プレハブのローカルシステムにバインドされています。これにより、プログラマーとアーティストは、ゲーム内のユニットプレハブの各インスタンスに変更を適用する前に、プレハブ編集モードを使ってユニットの特定のアビリティを単独で作成、再生、および反復修正することができます。

 

Character slamming an axe down.

タイムラインのシグナルは、アビリティが対象となるユニットのライフに何らかの値の修正を加える際に使用されました。 例えば、ナイトが剣を振るときには、剣の振り始めや終わりではなく、剣がアニメーションの重要なポイントに達した時点でダメージを与えるようにします。 開発中にアニメーションやビジュアルエフェクトのタイミングが変わると、アーティストは「Ability Happened(アビリティ発動)」シグナルをシーケンスの変更後の望ましいポイントに再配置するだけで、プログラマーにコードの値を変更させる必要はありませんでした。これは、非常に迅速なワークフローを実現しました。

これにより、例えばドラゴンがヒーローのグループに向かって火を噴くなどの連続ヒットする攻撃の場合は、複数の「Ability Happened」シグナルを加えてそれを実現することが可能になりました。

Dragon Crashers characters fighting with a Dragon with the editor open at the bottom half of the screen

『Dragon Crashers』ウェビナーにぜひご参加ください

シニアグローバルコンテンツデベロッパーの Andy Touch が、4 月 14 日午前 11 時(米国東部標準時。日本時間 4 月 15 日午前 1 時(14 日 25 時))にウェビナーを開催し、このプロジェクトの制作に使用されたキャラクターパイプラインワークフローについて、実際にエディターを使いながらデモを行います。このウェビナーでは、以下の作業の実演を行います。

  • 2D キャラクターを Photoshop から Unity にエクスポートする
  • キャラクターのスプライトリグをセットアップする
  • キャラクターの手足の IK をセットアップする
  • スプライトを入れ替えて他のキャラクターの見た目にする
  • ネスト状のプレハブを使って武器を装備させる
  • 2D ライティングスタイルを使うためにスプライトの法線マップとマスクマップを適用する
  • キャラクターのアビリティ発動シーケンスをタイムラインを使って実装する

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

ここまで『Dragon Crashers』の内容を一緒にご覧になってくださったお礼として、2D ゲームを作るときのインスピレーションになるような壁紙、zoom 用背景などのビジュアルデータをご用意しました。画像ファイルは、こちらのリンクからダウンロードしていただけます。

Dragon Crashers Backgrounds on PC, Laptop and Tablet.
『Dragon Crashers』のキャラクターを使って、開発環境やビデオチャットの背景をカスタマイズしよう。

さらに 2D 関係のリソースをお探しの方へ

ブログやフォーラムにはすでにいくつか、新しく 2D プロジェクトを始める方のための素晴らしいガイドがあります。ツールを使い始めたばかりの方には、2D 機能のウェブページ2D ゲームを作るためのヒントを多数集めたブログ記事、および関連するプレゼンテーションをチェックして、有用なヒントを集めることをお勧めします。さらに、スケルトンアニメーションシステムの詳細については、こちらの動画をご覧ください。また、前作のプロジェクトとなる『Lost Crypt』と関連のウェビナーをチェックするのもおすすめです。また、特定の機能や API の詳細については、最新のドキュメント2D レンダラーのセクションをご参照ください。

2021年3月19日 カテゴリ: テクノロジー | 10 分 で読めます
取り上げているトピック
関連する投稿