Search Unity

このたび私たちは、新しい 2D ツールの性能を試すために、2D の横スクロールデモを作成しました。この記事では、これらの統合型 2D ツールが、Unity でのハイエンドなビジュアル作成にどのように役立つかについてご紹介します。

高スキルなチームでは、これまでも Unity で魅力的な 2D ゲームが作られてきましたが、私たちは、個人レベルのアーティストから大規模なチームまで、誰もが優れたビジュアルのゲームを作成できるよう、2D ツールをさらに増やしたいと考えてきました。それらの多くは、現在ベータ版で提供されている、Unity 2019.3 の一部としてリリースされる予定です。

今回ご紹介するのは、包括的な 2D ツールスイートを使用して作成された、Lost Crypt というデモです。このゲームの生き生きとしたシーン表現には、アニメーション、ライトエフェクト、自然の地形、シェーダー、およびポストプロセッシングが使用されており、そのすべてが 2D でネイティブに作成されています。このデモは、あらゆる規模のチームやプロジェクトが、あらゆるプラットフォームを対象に、見る人を惹きつける美しい作品をよりすばやく実現できるようになったことを示すものです。

Lost Crypt はデスクトップコンピューターで快適に動作するよう作られていますが、iOS や Android デバイスでも実行できるよう、新しい Input System を使用したオンスクリーンのコントロールも実装されています。我々のテストでは、iPhone 6S などの一般的なデバイス上で、30 fps のパフォーマンスが確認されました。

 

アセットストアからダウンロード

プロジェクトのセットアップ

アセットストアから Lost Crypt をダウンロードしたら、空の「New Project」から開始し、「2D」を選択した後、パッケージマネージャーの「My Assets」からプロジェクトをインポートすることをお勧めします(アセットストアページの「My Assets」をクリックしてインポートすることもできます)。プロジェクトには、必要な 2D パッケージがすべて含まれています。インポートすると、プロジェクト設定が上書きされ、レンダリング設定がユニバーサルレンダーパイプライン内の 2D Renderer に変更されます。

Lost Crypt のレンダーパイプラインアセットに、ユニバーサルレンダーパイプラインと 2D Renderer が使用されている

プロジェクトをインポートすると、Main Scene が表示されます。「Play」をクリックすると、キーボードの矢印を使用して普通にプレイし、スペースバーでジャンプできます。

スクリプトとゲームロジックは至ってシンプルです。というのも、このデモのメインフォーカスは、2D ツールを使用してデモのコンセプトアートを具現化することだったからです。

私たちは、デモをいくつかのタスクに分割し、そのビジュアル課題の解決に利用する 2D ツールを選択しました。

もともとのコンセプトアート。このプロジェクトは、B2tGame と共同で進められた

キャラクターのアニメーション

キャラクターは Photoshop でデザインされ、2D PSD Importer で直接インポートされました。スプライトエディターで Sara.psb ファイルを開き、キャラクターの設定とリグを表示してください。Photoshop でファイルを開くと、それぞれのパーツやレイヤー名が維持されているのがわかります。

PSD Importer を使用すると、Photoshop ファイルを Unity で直接使用でき、個別のスプライトをエクスポートし、それらを後で組み立て直す必要がなくなる

ユニバーサルレンダーパイプラインで提供される機能の 1 つが、新しい Sprite Lit マテリアルです。通常のスプライトデフォルトマテリアルと違って、このマテリアルではスプライトを 2D ライティング条件に反応させることができます。

私たちは、スプライトエディターの「Secondary Textures」ドロップダウンメニューを使用して、キャラクターの法線マップをインポートしました。開発者は、2D アニメーション化したキャラクター、通常のスプライト、タイルマップ、および Sprite Shape に、法線マップとマスクマップを追加することができます。

キャラクターに使用されている法線マップは、スプライトのどの領域にライトをどの程度反映させるかを示す

キャラクターには 2D IK ソルバーがあり、これによってアニメーターは、足首と足の端(tips)を正しくポジショニングして、脚を現実感のある動きで追従させることができます。

脚と足のアニメーションプロセスを容易にするために 2D IK を使用

キャラクターのリグ付けをした後、私たちは別のアニメーションを複数作成し、Animation ツールと Animator を使用してそれらのステートを制御しました。ツールがどのように機能するかについては、GDC 2019 でのこちらのトークでご確認いただけます。

キャラクターのポニーテールは、また別の子ゲームオブジェクトになっていて、2D 物理演算によって制御されます。ポニーテールのすべてのボーンに Hinge Joint 2D コンポーネントがあり、いくつかの制限が設定されているので、ポニーテールがリアルに反応するようになっています。これによって、髪が曲がり過ぎたり、キャラクターの動きに過剰に反応したりせず、かつ自由に動くようになっています。

ポニーテールには 2D 物理演算のチェーン設定が使用され、チェーンの末端に一定のウェイトがかかる

昼夜の光のサイクル

スプライトに動的ライティングを適用することで最も効果が発揮される表現の 1 つが、環境の外観の変更です。同じスプライトを使用して、雰囲気、時間帯、場所の暗さなどを変えながら、隠された仕掛けから生き生きとしたリッチな世界観まで、さまざまなゲームプレイのメカニクスを作り出すことができます。

2D Lights をオンにした状態とオフにした状態。同じスプライトを使用して、さまざまな気象状況や雰囲気を作り出すことが可能

このデモでは、カラーグラデーション値(昼間から夜までのライト色)を保持したシンプルなスクリプトを使用してシーンのライトを制御し、親ゲームオブジェクトの Time パラメーターに応じてライトとマテリアルの色が変わるようにしました。このようなセットアップによって、異なるライト同士がどのようにブレンドし合うかを視覚的に制御できるようになっています。

ライトに色を付けることで、同じスプライトの見た目を大幅に変えることが可能。これにより、ゲームプレイとエステティックのオプションが大きく広がる

広い屋外のテクスチャ付きテレイン

2D ゲームの開発者がかつて抱えていた大きな課題の 1 つに、丘、勾配、不規則な地面など、自然の地形をいかに効率的に作成するかという課題がありました。これは、緻密に作られたタイルシートを使用しなければ達成できない表現でした。その後、これはテレインのパーツを表す複数のスプライトを使用することで表現できるようになりましたが、ワークフローやパフォーマンスについては改善の余地がありました。

地面のレイヤーと右側の Sprite Shape Profile の 1 つに、2D Sprite Shape が使用されている

2D Sprite Shape を使用すると、ベクトルベースの描画アプリケーションと同じような方法で、テレインとコライダーを生成することができます。開発者は、ブラシ(Sprite Shape Profile)を調整できるので、環境のイテレーションのたびに多数のスプライトやコライダーの調整が発生することを心配せずに、製作を開始することができます。

Lost Crypt では、NodeAttach スクリプトなど、Sprite Shape の拡張もいくらか使用されています。これによってスプラインに要素をアタッチし、それらをスプラインに追従させるようにしています。このデモでは、岩にこのスクリプトが使用されているほか、花のレイヤーに ConformingSpline が使用されていて、草スプラインの形状に追従するようになっています。開発者は、私たちがフォアグラウンドの草レイヤーで行ったように、この機能をゲームプレイや装飾要素に使用することができます。

グリッドベースのレイアウトで作成された地下室

タイルマップは、おそらく最も重要な 2D ツールの 1 つと言えるでしょう。これは、「タイル化」して繰り返し使えるグラフィックスの小さな塊によってメモリスペースを節約するという目的だけでなく、レベルデザインにおいても不可欠なツールです。

このデモではタイルシートと法線マップシートを使用

Lost Crypt では、2D タイルマップエディター(パッケージマネージャーから利用可能)を使用して地下室の内部を再現し、いくつかの Tilemap エクストラツール(GitHub から入手可能)を追加的に使用して、レベルデザインプロセスを効率化しました。たとえば、タイルをブラシのようにペイントできる、Rule Tile というタイルタイプも使用されました。これを使用すると、隣接するタイルや終端に応じて、適切なタイルが自動的に選択されます。

ワークフローを改善するために、2D-extra(GitHub)の Rule Tiles を地下室に使用

炎のエフェクト

ゲームでは、炎のエフェクトもよく使用されます。そこで私たちは、Lost Crypt でも炎のエフェクトを 1 つ追加しました。私たちはまず、パーティクルシステムと 2D 用シェーダーグラフを使用して、松明のゲームオブジェクトをいくつか作成しました。出力シェーダーには Sprite-Lit マスターノードを使用しました。そして、パーティクルシステムでアニメーションの再生に使用される従来のスプライトシートで、炎のアニメーションを作成しました。

アニメーション化された 2D シェーダーとパーティクルを使用して、炎のエフェクトを作成

私たちが炎用に作成したシェーダーでは、HDR の色合いを使用して、ボリュームポストプロセッシングを使ったオブジェクトの周囲の発光の強さが高められています。親ゲームオブジェクトには、アルコーブを照らすスパークのパーティクルとライトが含まれています。

水面のリフレクション

リフレクションや屈折も、シェーダーでよく見られるユースケースです(たとえば、水、氷、鏡、またはモニターに、そのレベルの別の領域が映る表現など)。

水のシェーダーの各種パラメーターを変えることで、様々なエフェクトを作成可能

地下室内での水のエフェクトは、すべてシェーダーグラフで作成されました。私たちは、いくつかのパラメーター(水の色、波の速さ、歪み、波紋エフェクトなど)を公開し、シーンでの最終的な外観を調整できるようにしました。環境の反射イメージを投影するために、私たちは追加のカメラを作成してイメージをテクスチャに出力し、それがシェーダーグラフによって読み取られるようにしました。また、ポストプロセッシングブルームのパスを追加して、水のコースティクスが光るようにし、水面に見栄えのよいエフェクトを加えました。

グラフにグループとわかりやすいラベルを使用して、シェーダーのロジックをわかりやすく整理

風のアニメーションとブレンドスタイル

Lost Crypt では、Sprite Shape、2D Lights、およびシェーダーグラフによって、植物の枝葉を生き生きと表現

アニメーション化した環境表現の 1 つとして、風に揺れる木の枝があります。これを表現するために、私たちはそれぞれの木の枝葉プレハブにシェーダーを 1 つだけ使用するようにしました。これにより多様性が確保され、重複が回避されています。

「Sprite」ウィンドウで、シェーダーグラフによって使用される法線マップとマスクマップを追加

Vegetation Wind-Lit グラフを見ると、私たちが作成した 2 つのエフェクトの内容を確認できます。1 つはアニメーション(揺れ)エフェクトです。これは、ノイズパターンを変更するいくつかのパラメーターに従って頂点位置を動かすことにより作成されました。もう 1 つのエフェクトは、G(緑)チャンネルを使用して、枝葉の周囲のリムライトのトーンを調整するエフェクトです。

右側を見ると、シェーダーでマスクマップの G チャンネルを使用することで、リムの色がどう変化するかが分かる

ライトのブレンドスタイルは、ライトがスプライトにどのように影響するかを示す、2D Renderer 内のプロパティのコレクションです。たとえば、特定のチャンネルだけに影響するブレンドスタイルを作成することもできます。ブレンドスタイルを使用したシーンにライトを追加した場合、そのライトは、マスクマップのチャンネル情報が示すスプライト領域にのみ影響を及ぼします。

下記の例では、パラメトリックライトで Direct Lighting ブレンドスタイルが使用されています。これは、スプライトのマスクマップの R チャンネルで示された領域にのみ影響を及ぼします。

左側は 2D Renderer のライトブレンドスタイル、右側はブレンドスタイルを使用した 2D Light

シネマティックとパーティクル

Lost Crypt には、冒険者が地下室で魔法の杖をつかんだときに使用される、短いシネマティックが含まれています。この瞬間をより特別なものにするために、私たちは環境の雰囲気を変える演出を加えました。変化がタイミングよく起こるようにしたかったので、Timeline を使ってパーティクルが適切なタイミングでスポーンされるようにしました。森の中に飛んでいくパーティクルを追いかけるために、アニメーショントラックのブレンディングカメラも設定して、Cinemachine カメラの切り替えを行いました。

Timeline を使用して、カメラ、オーディオ、およびビジュアルワークを連携させ、シネマティックな演出を作成

杖をつかんだときに現れる光のリングには、スプライトタイプのライトが使用されています。リングのグラフィックでは、光を強めたり弱めたりしながら、環境を照らすオーラが表現されます。

パーティクルのグローエフェクトは、主にボリュームポストプロセッシングのブルームエフェクトを使用して作成されました。また、パーティクルとトレイルのマテリアル/シェーダーでは、HDR カラーを使用して、このオブジェクトにポストプロセッシングエフェクトを適用する強度が定義されています。

Random Seed 機能を使用して、パーティクルが常に同じ方法でアニメーション化されるように制御

アニメーション化された幻獣

森をよく見ると、幽霊のようなキャラクターがいます。これを表現するために、私たちは他の幻獣にも使用できるシェーダーを作成しました。幻獣たちは透明ですが、フレネルエフェクトによってスプライトの縁が光り、浮遊生物のように揺らめくようになっています。

このシェーダーの面白いエフェクトの 1 つに、杖のゲームオブジェクトのトランスフォーム位置の追跡があります。たとえば、杖が幻獣に近づくと、幻獣がより明るくなるようになっています。これを表現するために、私たちは杖に小さなスクリプトをアタッチして、マテリアルシェーダーでの杖の位置が更新されるようにしました。

シェーダーの値を公開することで、ビジュアルをゲームプレイのメカニクスに基づいて調整することが可能

幻獣には、1 つのグラフィックから別のグラフィックへと切り替わる小さなアニメーションも設定されています。これを表現するために、私たちはチャンネルごとに異なるグラフィックスを使用したマスクマップを作成しました(R に 1 つのビジュアル、G に別のビジュアル、そして B にフレネルエフェクトを割り当て)。

杖との距離が離れているときの幻獣。右側はマスクマップ

ボリュームポストプロセッシング

仕上げの最終レイヤーでは、ユニバーサルレンダーパイプラインに含まれている、いくつかのポストプロセッシングエフェクトを追加しました。たとえば、空のゲームオブジェクトを作成し、それに Volume コンポーネントをアタッチしました。Lost Crypt では、ブルーム、ホワイトバランス、およびビネットを使用しましたが、2D プロジェクトで使用できるエフェクトは、ほかにもたくさんあります(モーションブラー、フィルムグレインエフェクトのカラーコレクションなど)。

Lost Crypt のボリュームポストプロセッシング設定

まとめ

Lost Crypt デモを通じて、2D ツールの統合型スイートを、類似の用途にどのように使用できるか理解していただければ幸いです。Lost Crypt についてご質問がある場合は、フォーラムを通じてお問い合わせください。

2D ツールについてご質問がある場合は、フォーラムの 2D セクションと「Beta & Experimental features」にある、専用のスレッドをご確認ください。

プロジェクトには、Lost Crypt で使用されている各種の機能間を移動するのに役立つ、チュートリアルウィンドウも同梱

Lost Crypt ウェビナーのご案内:1 月 9 日午前 10 時(東部標準時。中央ヨーロッパ時間は同日午後 4 時)より開催

Lost Crypt の制作の舞台裏についてリアルタイムに話を聞きたいですか?私たちの活気あるウェビナーにご登録ください(注:ウェビナーは好評のうちに終了いたしました)。2D Lights、シェーダー、およびポストプロセッシングが Lost Crypt でどのように使用されたかについて、グローバルコンテンツエバンジェリストの Andy Touch がご説明します。また、R&D の 2D チームが、2D ツールスイートやプロジェクト自体についてのご質問にお答えします。

 

登録

 

参加人数に限りがありますので、お早めに登録し、ご使用のカレンダーにリマインダーを追加することをお勧めします。

29 replies on “新しい 2D サンプルプロジェクト:Lost Crypt”

Quite good on your projects, its just 2D but to me it’s pretty close to 3D I always appreciate your efforts and time for every detail.

Great demo, amazing quality coming out of Unity! Question that may not have been asked before, but how long did this demo take to make with how many people working on it? Just to see what expectations one can have in applying these tools toward a full game release. Thanks!

I can’t generate the shadow of the character, but see the demo video, can you tell me how to do it?

hi~
I can’t generate the shadow of the character, but see the demo video, can you tell me how to do it?

Amazing demo. I learnt a lot from this demo. But I not able to understand how the ember particles return to the source. Is there a Force Effector or some kind of animator (the GameObejct does have an animator, but I am not sure what it is animating). Also how does TimeLine animate the effects. Please make a new tutorial for the Timeline. I feel it is a very useful tool but beginners (including me) do not fully understand how to use it in a game.

hello Mr. Eduardo,may be i get something like bug in the Camera->Volume Mask, the layer dropdown does not work when i change it.so when i add volume in my 2d project with lwrp,i cannot close the volume effect on UI or something i don’t want to appear volume, thanks again,and waiting for your replying.

Great works, will the complete workflow be posted to youtube or blog? for those one who missed the webinar

very well done. but i have still confused about how do you release the edge light effect on the tree? like halo effect, not change rim color in shader. thanks for replying!!

I imported the project but I got a bunch of errors in the compiler that I am not sure how to fix, they are mostly in the form of “‘SpriteRenderer’ does not contain a definition [x]”

Also, what you guys did is amazing! I am looking forward to learning a bunch from it

This is a really amazing demo of your new 2d tools! I’ve always had trouble starting my own game projects because there’s so many things I’m uncertain about. Like what tools are currently available, what’s the easiest way to do something, etc. Having such a well made demo is super helpful for people starting out and it honestly encouraged me to experiment with these tools instead of sitting on my lazy ass all day.

Hey, I’m working on a game and I can’t yet figure out how to do the shaders that move the trees. Is it ok to use your shaders in my project?

just amazing how far unity has come.
i wish i could work somewhere on a 2D game rather on my own at home..

Hey, nice project. I’ts a lot of work to get everything set up in a project sometimes, and trying to figure out things at the same time, so I for one appreciate it. Can I use the assets here in my own unity projects ? Thanks.

I started working on something similar but gave up due to many restrictions in the past, such as 2d lights, IK etc. Used third party solutions but wasn’t satisfied . I target mobile platforms so the results were slow and disappointing. I will definitely check this and maybe resurrect my old project.

The lit foliage was created using multiple tools, the normal map was created outside with some free normal map generation software, but in the end, a lot of the final asset is done in Photoshop and formatted for proper channel separation.
On that subject, our last experiments were done using a 2D texture as a base for a sculpt in Blender, it’s not too hard to get excellent automatic exports of normals as well as masking information.

Very impressive…I’m pouring over it now trying to figure out what I can steal for my own projects. Quick question on your lit foliage (which is quite impressive). How did you generate the mask texture that you used for lighting? Is it based off of the normal map itself, or was it a separate process?

Comments are closed.