Search Unity

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

, 3月 19, 2021

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

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

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

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

 

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

 

『Dragon Crashers』について

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

 

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

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

 

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

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

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

 

始めよう

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

 

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

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

ゲームビューでは、フル HD(1920×1080)設定や 4K UHD(3840×2160)など、高精細なディスプレイ設定をお使いになることを推奨します。

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

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

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

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

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

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

法線マップとマスクマップは、オリジナルのキャラクターアセット(PSB)のコピーで、アート制作ツールを使って作成された。

 

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

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

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

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

 

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

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

 

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

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

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

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

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

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

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

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

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

各 Unit プレハブには、ユニットの「頭脳」の役割を果たすコアスクリプト「UnitController」があり、プレハブ内部のスクリプトの参照やビヘイビアのシーケンスを処理します。例えば、ドラゴンが攻撃されると、「UnitController」は関連するビヘイビアイベントを実行し、伏せるアニメーションへ移行する、吼える際の効果を再生する、ドラゴンのライフを減らすなどの処理を行います。

これらのコアビヘイビアは、カプセル化の概念を遵守し、それぞれの目的やタスクのみを処理します。

例えば、「UnitHealthBehaviour」は、ユニットのライフ値の設定や削除、「HealthChanged」や「HealthIsZero」などの重要なイベントコールバックの報告などのロジックを処理するだけです。しかし、「UnitController」は、ゲームプレイ中に発生するシナリオやアクションに基づいて、「UnitHealthBehaviour」に値を送信します。

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

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

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

タイムラインとシグナル

Unity のタイムライン

リニアカットシーンは、戦闘の最初と最後に発生します。カメラの切り替え(Cinemachine を使用)、キャラクターのアニメーション(Animator を使用)、オーディオクリップ、パーティクルエフェクト、UI アニメーションなど、さまざまな領域のシーケンスを処理します。各トラックは、関連するシーンのインスタンスにバインドされています。

イントロ演出の最後にタイムラインのシグナルを埋め込み、カットシーンが終了したときに Unity イベントを起動するようにしました。これにより、戦闘のゲームプレイロジックを開始するタイミングを「合図」します。



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

各ユニットには自動で発動する「基本技(basic)」と手動で発動させる「必殺技(special)」の 2 つのアビリティ発動タイムラインがあります。「UnitAbilitiesBehaviour」スクリプトは、現在再生されているアビリティ、アビリティのシーケンスキュー、アビリティクールダウンの開始/停止(イントロのカットシーンが再生されているかどうか、ユニットが倒れたかどうかなど、高レベルのゲームプレイロジックに応じて)など、両方のアビリティ発動タイムラインのロジックを処理します。

アビリティ発動タイムラインのトラックは、攻撃アニメーションのキャラクターのアニメーターやビジュアルエフェクトのパーティクルシステムなど、Unit プレハブのローカルシステムにバインドされています。これにより、プログラマーとアーティストは、ゲーム内のユニットプレハブの各インスタンスに変更を適用する前に、プレハブ編集モードを使ってユニットの特定のアビリティを単独で作成、再生、および反復修正することができます。


タイムラインのシグナルは、アビリティが対象となるユニットのライフに何らかの値の修正を加える際に使用されました。

例えば、ナイトが剣を振るときには、剣の振り始めや終わりではなく、剣がアニメーションの重要なポイントに達した時点でダメージを与えるようにします。

開発中にアニメーションやビジュアルエフェクトのタイミングが変わると、アーティストは「Ability Happened(アビリティ発動)」シグナルをシーケンスの変更後の望ましいポイントに再配置するだけで、プログラマーにコードの値を変更させる必要はありませんでした。これは、非常に迅速なワークフローを実現しました。

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

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

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

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

 

ウェビナーに参加する

 

 

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

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

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

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

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

The 2D lighting, modeling, and animation workflows have gotten so much like 3D workflows, and the final game looks so much like a 3D game, that I have to wonder why anyone would even bother making their game 2D.

3D can look 2D, and 2D can look 3D. Importantly, each can look in many more ways, each with certain benefits. In particular regarding style and workflows. For instance, 2D allows for “incorrect” perspectives that are however part of a proud tradition of illustration and cartoons, or video games. This is either difficult to recreate in 3D or burdens you with work you aren‘t really using anyway. 3D offers to show objects from many angles (also subtle in a 2D perspective), but that‘s also a stylistic choice.

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です