Jarek Majewski 氏はフリーランスの 2D アーティスト・コーダーで、Unity 最新の 2D サンプルプロジェクト『Dragon Crashers』のアートとアニメーションを担当しました。Unity 2D チームの Eduardo が、Jarek の制作プロセス、スプライト制作のヒント、2D のライティングとアニメーション、および彼がアートやデザインの仕事で好んで使うソフトウェア、Affinity Designer と Affinity Photo の活用について、話を伺いました。
子供のころからずっと絵を描いてきました。私は自分の想像力を働かせて、世界とお話とキャラクターを作り出したいと思っていました。そんな時にビデオゲームと出会い、すっかりとりこになったのです。自分のアートへの情熱を、ビデオゲームへの情熱に掛け合わせたのです。
私の場合は、鉛筆を使うのが最も手っ取り早く、また最小限の労力で自分の考えを視覚化する手段です。何も準備しなくていいし、ソフトを立ち上げる必要もないし、絵を描く時にツールや色を選ぶ必要もありません。考えていることがそのまま絵になっていきます。
元々『センター・オブ・ジ・アース』、『Castle Siege』や、海賊船をモチーフにした別のコンセプトがあったのですが、最終的に提案したのは黄金の山の上で眠るドラゴンの棲み処となっている水晶鉱山をモチーフにしたものでした。そしてデモチームもこちらをプロジェクトのコンセプトとして選びました。
このコンセプトを選んだことは Sprite Shape や 2D Lights のような Unity の機能の使い方を示す上で良い選択だったと思います。たとえば、Sprite Shape は鉱山の通路を作るのに使われています。このプロジェクトには 2 本足や 4 本足のキャラクターがいろいろと登場しますが、これらのキャラクターにはスプライトリギング機能が使われています。ストーリー、アート、テクノロジーを結びつけるための完璧な組み合わせだと言えるでしょう。
私は作ろうとしているスプライトの実際の画像を探すところから始めます。なぜなら、様式化された絵でも現実味がなくてはならないと考えるからです。
新しいゲームで使う最初の 1 枚のスプライトを作ろうとする時は、いくつかバリエーションを作って、それから順を追ってぴったりくる絵のスタイルを見つけていくというやり方もあります。すでにスタイルが確立しているゲームで使うスプライトを作るなら、作ったスプライトを置いて確かめることが出来る環境を持っておく必要があります。こうした環境は、正しいプロポーション、正しいカラーパレット、正しい角度を探る上で役に立ちます(等角投影法で描かれた見下ろし型ビューのように、スプライトを上からちょっと角度を付けて見るようなカメラアングルを使うゲームを作る時、これは重要なポイントとなります)。
アウトラインを使ったアートを制作するなら、アウトラインの幅が環境内の他のオブジェクトと合っているか確かめましょう。これはピクセルアートを作る時にも重要なポイントです。ゲームのパレットに合わないスプライトを作ってしまっても調整できますが、ピクセルのサイズが合っていない場合は 1 から作り直すことになります。
スケッチができてスプライトを置いて試す環境も手に入ったら、スプライトの制作に入りましょう。
私は単純な図形やシルエットをまず描き、それから細かいところを詰めていく作り方をします。柔軟で編集も簡単なので、ほとんどの場合はベクターグラフィックスを使います。スプライトの色や形や大きさをクオリティを落とさずに変えられるところも便利です。
ラスターベース、ベクターベースのどちらで制作を進める場合でも、私は出来るだけ修正が利く形でスプライトを作っていきます。ですからレイヤーはどんどん分けていき、パフォーマンスを落とさないようにしています。スプライトの一部のパーツや色を変えて違ったスプライトを作れるように、オリジナルのファイルにいつでも戻れるようにしておくことも重要です。
スプライトのレイヤーを 1 つにまとめるのは PNG 形式にエクスポートするときだけです。エクスポートに一番使っているツールは Affinity Designer に入っている Export Persona です。このツールを使えばすべてのスプライトを 1 つのファイルにまとめ、ワンクリックでエクスポートすることができます。エクスポートの時に Continuous モードを選べば、何か変更を加えた時にスプライトが自動的にエクスポートされるようにもできます。時間を大幅に節約してくれるツールです。
法線マップの質によっては、スプライトがまるで 3D 画像のように見えることもあります。法線マップの各ピクセルには、メインのテクスチャがどの角度を向いているかのデータが入っています。R、G、B の各チャネルのデータが、X、Y、Z の各軸の角度データに対応します。ここでは、RGB 値が法線マップの角度にどのように影響するかを見てみましょう。
上の画像はピクセルがカメラの方を向いている平坦な法線マップです。このマップの RGB 値は (127, 127, 255) です。各カラーチャネルは 0 から 255 までの値を持つので、127 というのはほぼ真ん中の値ということになります。もし表面を左(-90 度)に向かせたいなら、R の値を 0 にします。右に向かせたいなら R を 255 にします。また、真上を向かせたいなら G チャネルの値を 0 に、真下を向かせたいなら G チャネルの値を 255 にします。
法線マップを作る方法の 1 つに、いろいろな方向から照らされたスプライトを描き、それを 1 つのテクスチャに統合するというやり方があります。この方法で作ったスプライトの R チャネルには右から照らされたスプライト、G チャネルには上から照らされたスプライトが入っている形になります。B チャネルには正面から照らされたスプライトが入ることになりますが、必要以上に複雑にしないよう、2D のスプライトの場合はこのチャネルは省略してしまいます。
ここまで説明しましたが、この方法は照らされた向きに応じたテクスチャを最低 2 回描かなければならないので時間がかかります。
もう 1 つの方法は法線マップ生成アプリを使うことです。法線マップ生成アプリでスプライトを開き、数回クリックすれば法線マップを生成できます。法線マップ生成アプリはスプライトの向きは考慮しないので、スプライト全体にこれを使うのは避けるべきです。鎖、ケーブル、ドラゴンの尾など、縁が切り立った部分のスプライトの法線マップを生成するのに使うのがよいでしょう。実際には、スプライトを生成する部分を法線マップ生成アプリに取り込み、値を調整してエクスポートし、必要な部分やディテールは自分で追加するという使い方になります。
『Dragon Crashers』のスプライトの法線マップを作るのに私が使ったテクニックは、スプライトの上に直接色を置いていくというものです。このテクニックについて説明する前に、ベースカラースプライトについて少し補足しておきたいと思います。もしゲームで 2D ライティングを積極的に使って、法線マップをフル活用しようとしているなら、スプライトに光や陰は描き込まないようにしましょう。
陰がすでに描き込まれているスプライトに対して 2D ライティングを掛けても上手くいきません。しかも、法線マップにもライティングのデータを描き込むのですから、作業量は 2 倍になってしまいます。無指向性の陰(アンビエントオクルージョン)の一部だけを描き込むようにすると、スプライトの見た目は良くなります。一方、太陽のようなディレクショナルライトによる光をスプライトに描き込むのは避けたほうがよいでしょう。
法線マップを描き込むには、角度を変えた時に使う色を把握しておくことが必要です。『Dragon Crashers』では、オンラインにある法線マップのパレットを参照することでこれを行いました。そして自分用のパレットを Blender で作り、これを PNG ファイルとしてエクスポートしました。パレットは単純な球体です。そこから角度に応じた色を取り、スプライトに乗せていきました。スプライトの形を描く時はほぼベクター図形を使っており、そこに色を入れていく形でスプライトを作っていきます。もちろん、絵を描く時のように好きなブラシを使って色を入れていってもいいですし、ピクセルアートを描く時のようにピクセルごとに色を打っていってもいいでしょう。
角度を表す色は 100% 正確なものでなくても構いません。2、3 度ずれていても大きな違いにはなりません。しかし、スプライト全体の形はそれらしいものになっている必要があります。もし文脈に合わない形で角度の色を描き込んでしまうと、ライトを当てた時に全体の形は崩れてしまいます。
空間把握のスキルを要求されるために、法線マップを描き込む作業は最初難しいと感じるかもしれません。そういう時は、箱やタルのような単純な形をしたものに法線マップを付けるところから始めましょう。いくつか数をこなせば、どのようにすればいい感じになるかをつかめるはずです。
ちょっと時短テクニックもご紹介しておきましょう。球面になっている部分がある時は、球体のパレット全体をそのままコピーアンドペーストできます。円筒形の部分には球体のパレットの一部をコピーして、引き延ばせば法線マップが描けます。
法線マップの一部をコピーアンドペーストして回転して使うとシェーディングが崩れることに注意してください。しかしこれを上手く使う方法もあります。たとえば、凹んだ球面を表現したい時は、普通の球面の法線マップをコピーして 180 度回転させます。これで穴を作ることができます。
自分に合った法線マップの生成方法を選んでください。いずれにしてもゲームを作る時にたくさんのアセットを作ることになりますので、ほとんどの時間で見ることになるオブジェクトに力を入れて、そうではないものは簡単に済ませるようにしましょう。最小の労力で最高の結果を得られるテクニックを使いましょう。以下のようなツールも役に立つでしょう。
Normal Painter Krita's Tangent brush Sprite Illuminator Laigter Sprite Lamp
与えられた制約の中で達成することを絞り込むために、私はいつも事前にアニメーションについてプランを練っておきます。
『Dragon Crashers』の場合、最初の 1 体のキャラクターを良いプロポーションで作り、このキャラクターを他のキャラクターのベースとして使いました。2 本足で歩く 3 人のプレイヤーキャラクターと 1 体の敵にまず注力しました(ここではドラゴンは後回しにします)。これらのキャラクターはすべて、スプライトを乗せて動かすスケルトンを共通して使うようにして、Unity 2D Animation パッケージに入っている Sprite Swap 機能(現在実験的機能として提供中)を利用できるようにしました。同時に、各キャラクターごとに異なるビジュアルスタイルを適用して、それぞれ単にスキンを変えただけのキャラクターに見えないようにしました。
キャラクターをデザインする時、すべてのキャラクターが確実に同じスケルトンを使えるようにする必要がありました。そのため、Affinity のツールでは単純なスケルトンのオーバーレイを作りました。そうすることで、キャラクターの四肢がその下のボーン構造に合っているかをチェックすることができました。このやり方は非常に上手くいき、かつキャラクターにそれぞれユニークな見た目を持たせることもできました。たとえばあるキャラクターは肩幅が広く、またあるキャラクターは大きな足をしていて、またあるキャラクターは狼の頭をしているといった表現が可能になりました。
キャラクターにどのくらいのレイヤーが必要か、どのボーンが各レイヤーに影響するかの決定については多くのプランを作りました。なぜなら、これらの要素を後から変えるとかなり厄介なことになるからです。もちろん試行錯誤して決めていった部分もありますが、ベースのキャラクターがよく考えて作られていたからこそ、残りのキャラクターを簡単に作ることができたのです。
キャラクターを Unity にインポートする時には PSD Importer を使いました。このツールを使えば Affinity のツールで作ったレイヤー構造とレイヤーの位置を保ったまま Unity にインポートできるからです。キャラクターをベクター図形を使ってデザインしたので、各レイヤーは多数のパスで構成されていました。キャラクターを Unity にインポートするには各レイヤーをラスタライズして、PSD でファイルをエクスポート(その後、ファイルの拡張子を PSB に変更)する必要がありました。そのため、キャラクタースプライト 1 つに対して、2 つのファイルを作りました。一方のファイルにはソースのベクター図形を格納し、もう一方にはラスタライズしたバージョンを格納したのです。こうすることで、キャラクターを調整したいと思った時のために編集可能なファイルを確保しておくことができます。
PSB ファイルを Unity にインポートした後、Skinning Editor を使ってキャラクターにリグを付けました。すべてのボーンを作り、各レイヤーに対してメッシュを自動生成し、Auto Weights 機能を使ってボーンのバインドを行いました。
キャラクターリグの最適化については、まずメッシュをクリンナップして頂点の数を出来るだけ減らし、次にボーンのウェイトを整理して、キャラクターがどんなポーズでも美しく見えるようにするという順番で進めていきました。また、足首、膝、肘など、関節が曲がる場所についてはダブルチェックを行いました。注意深くメッシュポイントの配置とウェイトを決め、手足の曲がり方がそれらしく見えるようにしました。
リギング作業の後、Sprite Library Asset を作りました。これは複数のスプライトをカテゴリにまとめ、一意なラベル名を付けてグループ化するものです。こうしておくと、Sprite Library Asset を入れ替えるだけで、あるキャラクターを別のキャラクターに切り替えることができます。 さらに Sprite Swap を目や口にも追加して顔の表情を表現できるようにし、2D IK をキャラクターの手足に追加してキャラクターをアニメーションさせる時に制御しやすいようにしました。
これらの工程の後、キャラクターをプレハブ化しておき、変更を加えたら他のキャラクターにもその変更が適用されるようにしました。これで、IK を調整したり、ソーティングレイヤーに変更を加えたり、武器や付属品を追加したり、スクリプトをアタッチしたりと、さまざまな変更を加えることがあっても、ベースのプレハブに対してそれらの変更が適用されたなら他のキャラクターにもその変更は自動的に反映されるようになりました。こうした仕掛けは、特に多くのキャラクターを扱う時に大きく時間を節約してくれます。
他のキャラクターについても前と同じように PSB ファイルをインポートしました。しかしこの時はスケルトンを作る必要はありませんでした。単純にベースのキャラクターからスケルトンをコピーして、スプライトメッシュのトポロジとウェイトを調整して、新しいキャラクターの形に合わせればよかったのです。
法線マップのインポートとマップのマスク設定はさらに簡単でした。Ctrl + D(Mac では Cmd + D)のショートカットを使ってキャラクターを Unity にコピーして、それを Affinity のツールで開き、すべてのレイヤーをそのキャラクターの対応する法線マップ(またはマスクマップ)に入れ替えるだけでした。法線マップは色を付けるテクスチャではないので、Advanced > Sprite Import Settings で RGB オプションのチェックを外す必要はありましたが、ともかくこれだけで法線マップとマスクマップを Sprite Editor の Secondary Textures として割り当てることができました。
キャラクターはこの段階でアニメーションさせられる状態で、また同じアニメーションのセットを共有している状態になっていました。ほとんどのアクションで同じアニメーションクリップを流用しましたが、静止状態と攻撃のアニメーションについては、キャラクターごとに独自のものを作り、キャラクターの個性が出るようにしました。
ドラゴンをアニメーションさせるワークフローはさらに簡単でした。カスタムのスキンが必要なかったので、特に詳しくプランを練る必要がなかったのです。私はデザインとリギングに集中することができました。多くの時間を翼、尾、それと首が正しくリグ付けされているかと、アニメーションさせた時に見た目上の欠陥がないかの確認に費やしました。リギングの時にキャラクターに極端なポーズを取らせて欠陥が無いか調べることは、後の工程で厄介な事態を招かないようにするための良いプラクティスです。
Sprite Swap、IK、および追加のマップを設定する工程は 2 本足のキャラクターの場合と足の数が 2 本違うだけで、概ね同じでした。
まず作りたい環境のビジョンを得ることが第一でした。作業を始める前に、私の頭の中では環境の雰囲気や全体的なフローは、ビジュアル、ゲームプレイ、情緒といった要素も含めて明確になっています。ディテールは後からいくらでも変えられますが、基礎となるビジョンがあってはじめて、単にプレハブをばらまくのではなく、達成したいことに集中することが可能になるのです。
まず環境で使うアセットを Unity にエクスポートし、プレハブ化するところから始めました。シーンにすべての部品がはいったら、そこからは大胆に行きます。Unity ならどんなワークフローでも採用することができます。まずタイルマップを使ってベースとなる絵を描き、その上に Sprite Shape を使ってスプライトのタイルを追加して、手でスプライトを配置し、ライティングや、フォグやパーティクルなどのエフェクトを加えるといったやり方もできます。もう一度お伝えしますが、ここに至るまでにすでにステージのレイアウトのアイデアを明確にしているからこそ、ビジュアルに集中することができるのです。
ゲームプレイを優先して、ステージの流れをデザインするというやり方もあります。このアプローチでは、足場、壁、床をまずすべて配置してから、インタラクションが発生する主要なレイヤーのジオメトリに集中するというやり方を取るのがいいでしょう。敵キャラや障害物、拾えるアイテムなどのインタラクションが発生する要素を追加してステージのテストプレイを行い、必要なだけ反復を行いステージの完成度を上げていきます。
総じて、インタラクションが発生するレイヤーとビジュアル要素を分けておくことは良いプラクティスです。このアプローチを取れば、時間と作業量を大幅に節約することができます。中核となるゲームプレイを最初に見出し、ビジュアルを後から追加するのです。このやり方なら、皆さんやレベルデザイナーがゲームプレイを作り直そうとした時に、注意深く配置された装飾物も全部配置し直す労力をかけずに済みます。
機能間の連携が取れているので、スプライトやセカンダリマップの設定は簡単です。また、各機能は法線マップのスプライト、タイルマップ、スプライトシェーダー、シェーダーグラフなどの機能と組み合わせても想定通りの動作をしてくれます。
2D ライティング
2D ライティングとマスクマップを 2D リギングと組み合わせて使うワークフローは強力です。このワークフローは 3D 環境を設定する時に使うものと似ています。簡単な unlit スプライト、法線マップ、それとマスクマップをリムライティングのために作っておけば、環境やライティング条件と合わせるためにアセットを塗り直す必要はありませんでした。スプライトはライティングを受けて塗った通りの見た目となり、まるで手描きのように見えてしかもゲームの環境にもフィットしたのです。
これはこれまでのやり方を大きく変える可能性があります。売り物にするアセットもこの設定を使って作ることができるでしょう。ゲーム環境を再利用して、キャラクターを配置し、ライトを設定すれば素晴らしい見栄えとなるのです。キャラクターを複数作る時にいちいちポーズを設定したり、光や陰を描き込んだりする必要もありません。何より、ポストプロセッシングエフェクトをかければ、シーンの雰囲気を変えることができるのは大きな利点です。
私は特に 2D Light を使って影を加えられるやり方が大好きです。Use Alpha Blend on Overlap 設定が 2D Light に適用されていて、ライトの強度が非常に弱い場合、ライトは環境に影を落とすように動作し、シャドウ領域として振る舞うようになります。私はこれをドラゴンの下に影を付けるために使いました。
Sprite Shape
Sprite Shape を使わずに 2D ゲームを作るところを想像できません。設定も編集も非常に簡単です。ものの数分でステージを作ることができるので、ラピッドプロトタイピングに適しています。私はこの機能をステージのジオメトリを作るためだけでなく、鉱山の通路、橋、ぶら下がったロープ、背景の足場や手前に見える地形を作るために使いました。
『Dragon Crashers』では、ぼかし効果(モバイル端末で動かすには高価な機能)の代用として、縁をぼかしたテクスチャを使いました。Sprite Shape をどう使うかは皆さんの想像力次第です。一度作ったものの形を数秒で変えられるので、環境を調整するための時間を大幅に節約できます。私は鋭い形状の地形を作り、Continuous Mirrored Point Mode を使ってそれを丸めるというやり方が好きです。Sprite Shape で 2D コライダーを生成し、手動でコライダーを設定する手間を省くこともできます。
もし Sprite Shape をまだ使ったことがないのなら、今すぐ試してみてください。きっと皆さんのワークフローを改善してくれます。
タイムライン
Andy Touch(Unity のシニアコンテンツデベロッパー)がタイムラインを使って『Dragon Crashers』のシステムのほぼ全体を作りました。この機能は制作プロセスをシームレスなものにしてくれました。ちょっと直したいところがある時、何も壊すことなくどのタイムラインにでも変更を加えることができたのです。システムのモジュール性の高さ、それにカットシーンなどのゲームプレイの要素をタイムラインを使って編集することの容易さには感銘を受けています。またタイムラインで入れ子構造を作ると、全体のプロセスはより効率的になりました。
Affinity Designer は Mac、Windows、iPad で使うことができます。ベクターワークフローとラスターワークフローの両方をサポートし、2D ゲームアーティストのためのツールも備えています。
Affinity Designer のペン機能には便利なショートカットが多数用意されており、これを活用すれば他のツールに切り替えることなく、どんな図形でも思いのままに作り出すことができます。Affinity Designer ウィンドウの下部に表示されているショートカットからまず使い始めるのがよいでしょう。
アートを出来るだけ編集可能な状態にしておきましょう。このために、編集可能な Compound 機能が役立ちます。通常、パスを結合すると結合したパスはそれ以降の編集ができない 1 つのパスになってしまいます。ここで Alt キー(Mac の場合は Option キー)を押しながらツールバーのジオメトリボタンのいずれかをクリックすると、Compound パスがグループを作ります。この時、すべてのレイヤーについて他のレイヤーに対してどのように作用するかのオプションを選択できます。オプションには Add、Intersect、Subtract、および X モードがあります。これは非常に便利な機能です。
ドキュメントカラーパレットを使いましょう。これらはドキュメント全体にわたって設定される色となります。パレット内の色を変えると、特定の色を使うオブジェクトも更新されます。オブジェクトやキャラクターのバリエーションを作る時に便利です。
上の動画には青い戦士のキャラクターが表示されています。このキャラクターの脚、腕、ヘルメット、それに武器はすべて青色です。このキャラクターの色を緑に変えたいとします。この時、先ほど挙げたパーツすべてにドキュメントカラーを使っておくと、スワッチのパレットから色を変え、一瞬で違うキャラクターを作ることができます。
シンボルを使いましょう。ステージのタイルやブロックなど、複製したオブジェクトがキャンバス全体に配置された状態になることがあるでしょう。この時、複製したオブジェクト全部に変更を加えたいと思ったらどうしますか。こういう時に役立つのがシンボルです。オブジェクトを 1 つ選択し、これをシンボルに変換します。それから複製してオブジェクトを作成します。あるシンボルから複製されたオブジェクトの 1 つに変更を加えると、同じシンボルを持つオブジェクトについてもその変更が反映されます。
Assets パネルを使って整理しましょう。このパネルにすべてのオブジェクトを入れておくと、ゲームに使うすべての物を 1 つの場所で管理することができます。また、オブジェクトを任意の基準でグループ分けすることもできます。たとえば、オブジェクトが使われるステージ、種類、色などの基準です。パネル内のオブジェクトは開いている任意のオブジェクトにドラッグアンドドロップして配置することができます。ビジュアル面での一貫性や大きさ、他のステージでオブジェクトがどのように見えるかなどを確認することができます。ゲームのモックアップ画面や「スクリーンショット」を作ることもできます。
さらに、ボタンのデザイン、スイッチ、アイコンなどの UI 要素を Assets パネルに入れて置き、ゲームのインターフェースをデザインする時にそれを使うこともできます。
Affinity Photo は macOS、Windows、iOS で使える、必要な機能をすべて備えた写真編集ソリューションです。
Affinity アプリスイートはスイート内のアプリを互いに交換して使えるようになっています。ドキュメントを Designer と Photo のどちらでも、どちらのアプリで最初に保存したかによらず開くことができます。また、Designer では File > Edit、Photo では File > Open のメニューを選択することでアプリを互いに切り替えることができます。
両方のアプリで多くの機能が共通しています。Asset パネルとベクター図形関連の機能の一部は Affinity Photo でも使えます。インターフェースも似ているので、2 つのアプリの切り替えも素早く行えます。
ラスター画像を扱うアプリで最も重要な機能はブラシ機能です。Affinity Photo には非常に柔軟性が高く、テーブルのサポートなど必要な機能をすべて備えたブラシエンジンが搭載されています。独自のブラシのエクスポート・インポートも可能です。私は手振れ補正オプションを愛用しています。この機能を使うとブラシの線が非常に綺麗になるので、アウトラインを描く時に重宝します。
優れたラスターグラフィックスとブラシ機能に加えて、Live Filters も私が好んで使う機能の 1 つです。この機能を使うと、あとから変更を行える状態を保ったまま、アートの見た目をガラリと変えることができます。私はパースフィルターが特に好きなのですが、それはこのフィルターがパースに合う形にレイヤーを変形してくれるからです。ビルの窓、壁のポスター、表面の質感を表現する時に便利で使っています。Live Filters に加えて、Live Adjustments Layers や Blend Modes など、適用した結果をすぐに見ることの出来る機能も備えられています。
Layer Effects を最後に挙げておきます。これはグラデーションやドロップ、内側の影やアウトライン、3D エフェクトなどを追加することのできる機能です。この機能と少しの創造性があれば、ほとんど何でも作ることができます。そして、ここまでに挙げたことはすべて非破壊的に行えるのです。Affinity のツールは実に素晴らしいです。
2D アート、Unity、Affinity Designer、Affinity Photo に関するヒントを共有してくれた Jarek に感謝します。 Unity を初めてお使いになる方は、こちらのページで Unity の 2D ツールセットについての情報をご覧ください。