Search Unity

Sprite Shape を使用すると、自由形状による表情豊かな 2D 環境を直接 Unity 内で、視覚的・直感的なワークフローで作成し、自由に装飾を施すことできます。このツールは、設定の角度範囲に応じて、スプライトをスプラインのパスに沿って動的にタイリング(タイル状に配置)します。本記事では、Sprite Shape の使用方法、シェイプ用のコライダーの設定方法、そして少しのスクリプト記述によってこの機能を拡張する方法をお伝えします。

Sprite Shape はまだプレビュー版で、製品版は後日リリース予定です。このため、本記事でご紹介するワークフローやコーディング API には変更が加えられる可能性がありますが、ぜひ今のうちからご試用されることをお勧めします!

Sprite Shape をインストールする

バージョン 2018.1 以降の Unity をお使いの方は、パッケージマネージャーを使用して Sprite Shape をプロジェクトにインストールできます。

メニューを Window > Package Manager の順に進み、「All」タブを選択してください。「2D Sprite Shape」というパッケージが表示されますので、これをプロジェクトに追加してください。

シェイプを作成する

Sprite Shape Profile

Sprite Shape は、シーン内にゲームオブジェクトとして作成されたスプラインのパスに沿ってスプライトをタイリングすることで機能します。しかし、パスを作成するには、まず Sprite Shape Profile と呼ばれるアセットを作成する必要があります。これは特定のタイプの Shape に関する情報を定義したり保存したりするのに使用されます。このアセット内で、使用したいスプライトを割り当て、それをどのようにレンダーするかを Sprite Shape に伝えます。例えば、表示するスプライトをシェイプの一部が向いている方向に応じて設定したり、シェイプに塗りつぶしテクスチャを持たせるかを設定したりできます。

それでは、プロファイルを 1 つ作成してみましょう!プロジェクトの Assets ウィンドウを右クリックし、Create > Sprite Shape Profile の順に選択してください。Empty、Strip、Shape の 3 種類のプロファイルが使用可能です。これらのプロファイルの唯一の違いは、角度範囲のプリセットの数だけです。まずは、Strip プロファイルの作成から始めてみましょう。角度範囲に関しては後述します。

これで、インスペクターウィンドウでプロファイルが編集できます。「Angle Ranges(角度範囲)」の円を見ると、完全に塗りつぶされています。これは、事前定義された角度範囲が 1 つあるということを意味します。角度範囲によって、曲線がその特定の方向に面している時にどのスプライトがパスに沿ってレンダーされるかが決まります。円全体をカバーする 1 つの角度範囲を持たせた場合は、同じスプライトが常に表示されるということになります。

インスペクターウィンドウの「Sprites」の項目下で、下の「+」と「-」ボタンを使用して Angle Range に新しいスプライトを追加したり削除したりできます。では、このシェイプに最初のスプライトを追加してみましょう!この例および以降の例で使用するスプライトはすべて、無料で使用できる『2D Game Kit』 に含まれるスプライトです。

Sprite Shape ゲームオブジェクト

プロファイルのセットアップが完了したので、ここからシェイプを作成していくことができます。新しいシェイプのプロファイルを自動的に使用するには、Asset ウィンドウでそのプロファイルが選択されていることを確認し、ヒエラルキーウィンドウ内で右クリックして 2D Object > Sprite Shape の順に選択してください。

(注)Sprite Shape を間違って新規作成してしまった場合や、別のプロファイルを使用したい場合は、Sprite Shape Controller コンポーネント内でその割り当てや変更を行えます。

このゲームオブジェクトにはこの他に Sprite Shape Renderer というコンポーネントがあります。これは通常の Sprite Renderer とほぼ同様に機能し、スプライトのマテリアル、色、そしてレイヤーの順序を変更できます。

スプラインを編集する

これで、シェイプの編集を開始できます。「Sprite Shape Controller」のオプション内で「Edit Spline」をクリックしてください。これを有効化すれば、シーン内でスプラインのノードの再配置・追加・削除を行えます。新しいノードの追加は、スプライン上でノードを追加したい位置を左クリックするだけで行えます。ノードを削除するにはそれを選択して「Delete」を押してください。

 

Sprite Shape Controller 内にある Point Mode について少し触れましょう。現在は Point Mode が Linear になっています。これは、ノードが曲線を一切形成しないことを意味します。しかし、ノードを 1 つ選択した状態で、他の 2 つのモードのどちらか、例えば Mirrored モードに切り替えると、ノードが 2 つのタンジェントを持つようになります。これらを動かすと、ベジェ曲線の形を変えることができます。

最後のモードは Non-Mirrored モードです。このモードにすると 2 つのタンジェントが互いから切り離され、もう一方に影響を与えることなく 1 つずつ調整できるようになります。

スプライトエディターを使用する

特定の方法でタイリングしたい場合、手動によるスプライトの調整が必要になることもあります。上の例では橋のスプライトを使用しているため、部品の橋がいくつか連なったシェイプが作られています。これを、1 つの長い橋に見せたい場合はどうすれば良いのでしょうか?

これはスプライトエディターで解決できます。本記事ではこれに関する詳細な解説は行いませんが、Unity の YouTube チャンネルで分かりやすいチュートリアルをご覧いただけます(英語)。スプライトエディターの各部について学んでおくことで、これをより効率的に使用でき、特定のニーズに応じたスプライトの調整が行いやすくなります。

橋のスプライトを編集してみましょう!このスプライトを選択した状態で、インスペクターウィンドウに表示される「Sprite Editor」ボタンをクリックすると、スプライトエディターウィンドウが表示されます。

スプライトエディターに関して主に注目したいのは、スプライト周囲の 4 つの緑色の制御ポイントと、右下の Sprite ウィンドウにある Border の設定です。Border を使うと、シェイプのどの部分をタイリングに使用し、どの部分を Border スプライトとして機能させるかを Sprite Shape に指示できます。Border スプライトはパスの開始・終了ノードの部分や角の部分のみにレンダーされます。ここでは、橋のスプライト左右の Border を調整して、橋の中央部のみがタイリングされるようにします。

この他に、スプライトの Pivot ポイントの設定も役に立ちます。Pivot は、スプライトがスプラインに対してどのようにレンダーされるかを決定します。現在、橋のスプライトの Pivot は中央に設定されているので、スプラインがスプライトの真ん中を通るようになっています。Pivot を橋の上部に設定すると、スプライトはスプラインの下にレンダーされるようになります。これは、シェイプ用に自動生成されたコライダーの相対的位置の調整(これに関しては後述します)や、Sprite Shape を使用した環境の装飾をより高い精度で行うのに役立ちます。

スプライトのバリエーション

環境の装飾を行う際、Sprite Shape を使うと、1 つの角度範囲に複数のスプライトを割り当てて、それらの間でシェイプのスプライトを切り替えることができます。これは、シェイプに視覚的な多様性を与えたり、様々な要素や装飾の「ブラシ」を作るのにも使用できます。

2 つのスプライトが単一の角度範囲にアサインされた簡単な苔のプロファイルを用意しました。このプロファイルを使用して、シーン内の他のシェイプのひとつに、装飾的な苔を追加できます。

満足の行くシェイプが出来たら、スプラインの部分ごとに、レンダーするスプライトの種類を変更できます。これを行うには、変更したい部分の開始ノードを選択します。これで、Sprite Shape Controller 内の Sprite Index を、他のスプライトのそれに設定できます。

コリジョンを追加する

Sprite Shape の素晴らしい機能のひとつは、シェイプ用のコライダーを自動生成できることです。後から必要に応じて手動でコライダーを調整することも可能です。

Open-Ended(端の開いたタイプ)の Sprite Shape には、Edge Collider 2D コンポーネントが使用できます(ここで使用している例もこの時点では Open-Ended タイプになっています)。このコンポーネントはインスペクターウィンドウで Sprite Shape ゲームオブジェクトに追加できます。Sprite Shape Controller に Update Collider という新しいチェックボックスが表示されます。これにチェックマークを入れると、シェイプのコライダーのリアルタイムな調整が開始されます。

シェイプが完成した後に、手動で変更を行いたい場合もあるでしょう。これを行うには、まず Update Collider のチェックマークを外してください。そうしないと変更が上書きされ続けることになります。それから「Edge Collider 2D」の項目にある「Edit Collider」を探してください。これで自由にコライダーを調整できます!

シーン内にキャラクターを入れると、新しいコライダーをテストできます。

クローズエンド(端の閉じた)シェイプ

これで Sprite Shape と Strip プロファイルの基礎が理解できたので、複数の角度範囲を使用した、クローズエンド(Open-Ended ではない、端の閉じたタイプ)のシェイプの作成について確認して行きましょう。

ここで、先ほど確認した他の 2 つの Sprite Shape Profile に少し話を戻しましょう。プリセットの角度範囲がない空のプロファイルと、それが 8 つある Shape プロファイルがあります。私のシェイプに必要なのは 4 つだけですので、ここでは空のプロファイルを使って、それに独自の角度範囲を追加していく方法を学びましょう。

角度範囲を定義する

新規プロファイルが選択された状態で、プレビュー用の円形内の空の箇所をクリックするか、その下の「Create Range」ボタンを押すと、新しい角度範囲を作成できます。角度範囲が作成されたらそれをクリックで選択し、その開始点と終点を数値で設定する(以下参照)か、ギズモを目標の位置までドラッグして設定します。

ここでは角度範囲が 4 つ必要なので、それぞれが 90 度をカバーするようにします。その後、それぞれの角度範囲に個別にスプライトを 1 つずつ割り当てて、シェイプが 1 つの完全な地形に見えるようにします。これが完了したら、このプロファイルを使用して新しいシェイプをシーン内に作成できます。

定義した角度範囲の性質上、シェイプが自動的にクローズエンドになることにお気付きでしょう。シェイプのタイプは、それをシーン内で選択して Sprite Shape Controller 内の「Open Ended」チェックボックスのオン・オフを切り替えればいつでも変更できます。

また、この新しいシェイプには、いくつかおかしい事があるのにお気付きでしょう。まず、塗りつぶしテクスチャがありません。次に、シェイプの角にスプライトがレンダーされていません。これは両方とも、Sprite Shape Profile で非常に簡単に 解決できます。

塗りつぶし用テクスチャを追加する

シェイプの中をペイントするためには、プロファイルに塗りつぶし(「Fill」)用のテクスチャを設定する必要があります。これはインスペクターウィンドウの「Fill」の項目下で行えます。任意の解像度に変更も可能です。ここでは『2D Game Kit』に含まれるタイルのひとつをテクスチャとして使用します。

塗りつぶし用テクスチャに関しては理解すべき事がいくつかあります。まず、これは独立したファイルとしてインポートされる必要があること、そしてスプライトアトラスの一部にはできないことです。またインポート設定で Wrap Mode を Repeat に設定する必要があります。Wrap Mode を正しく設定しないとテクスチャがアーティファクトを発生させます。

角用スプライトを作成する

塗りつぶし用テクスチャによってシェイプの見た目は大幅に向上しましたが、角の部分にはまだスプライトがありません。このために Sprite Shape には、最高 8 つの独立した角用スプライト(それぞれがシェイプの特定の箇所に対応)を追加できるオプションが提供されています。

角用スプライトは Sprite Shape Profile 内の「Corners」のセクションで割り当て可能です。この例では、8 つのうち 6 つに角用スプライトの割り当てを行います。シェイプに使用する角用スプライトの数は、作成するパスのタイプによって変わります。

角用スプライトが割り当てられたら、それをどこで使用するかシェイプに伝える必要があります。これを行うには、Edit Spline モードで、シェイプの角ノードを個々に選択し、それぞれの Corner Mode を Automatic に設定します。

スプラインのノードにオブジェクトをアタッチする

ここまでで、Sprite Shape インターフェースとワークフローの大部分についてご説明しました。Sprite Shape は、少々のスクリプティングで簡単に拡張することも可能です。

以下は、シーン内の特定のスプラインの 1 つのノードにオブジェクトを 1 つアタッチするスクリプトの例です。

 

アンカーノードが動かされたり、そのタンジェントが回転されると、オブジェクトのトランスフォームも変更されます。

このようなスクリプトは、例えば動的環境を作成したり、それをプレイヤー入力に反応させるために使用できます。またステージのプロトタイピングが、個々の要素を再配置することなく、より簡単に行えるようになります。

Sprite Shape スクリプティング API はまだ開発中ですが、この機能をお試しになりたい方は、開発中バージョンの API ドキュメンテーションをご利用いただけます。これは Visual Studio のソリューションエクスプローラー経由でアセンブリ参照を行うことによってアクセス可能です。関連の API のほとんどは Unity.2D.SpriteShape.Runtime の配下にありますが、これには将来的に変更が加えられる可能性があることをご了承ください。

参考資料

Sprite Shape に関して更に詳しく学びたい方は、現在、以下のリソースをご利用いただけます。

基本的な機能と UI に関するドキュメンテーションはGitHub 上の Sprite Shape のレポジトリからご入手いただけます。

スクリプティング API には、Sprite Shape パッケージが追加されていればプロジェクト内からアクセス可能です。

Sprite Shape フォーラムで、Sprite Shape を使った皆さまの制作物の紹介やフィードバックをぜひご投稿ください。皆さまの素晴らしい作品を拝見できるのを楽しみにしています!