Version: 2023.2
言語: 日本語
Sprite エディター
自動スライス

スプライトエディターの使用

それぞれが独立して動く車輪を備えた車など、さまざまなパーツを持つ 1 つのキャラクターの画像がある場合、Sprite Editor (スプライトエディター) を使用してその画像からさまざまなパーツを抽出し、同じテクスチャの個別のスプライトに加えることができます。

ノート: 編集したい画像の Texture Type を確実に Sprite (2D and UI) に設定してください。スプライトのインポートと設定に関しては スプライトの設定 を参照してください。

複数のコンポーネントを持つスプライトテクスチャは、Inspector で Sprite ModeMultiple に設定する必要があります。

スプライトエディターを開く

Sprite Editor (スプライトエディター) を開くには、以下を行います。

  1. Project ウィンドウ から編集したい 2D 画像を選択します (図 1: Project ウィンドウ)。

  2. テクスチャインポート InspectorSprite Editor ボタンをクリックします (図 2: テクスチャインポート Inspector)。すると Sprite Editor が表示されます (図 3: Sprite Editor)。

ノート: Sprite Editor ボタンは画像の Texture TypeSprite (2D and UI) に設定している場合にのみ表示されます。

Project ウィンドウ
Project ウィンドウ
Sprite Editor ボタンが表示されている Texture Import Inspector
Sprite Editor ボタンが表示されている Texture Import Inspector

ノート: 画像に複数の要素がある場合は、Texture Import InspectorSprite ModeMultiple に設定してください。

Sprite Editor
Sprite Editor

複合した画像とともにウィンドウ上部のバーにいくつかのコントロールがあります。右上のスライダーでズームして、すぐ左のカラーバーのボタンで画像そのもの、またはアルファレベルを表示するかを切り替えます。一番右にあるスライダーは、テクスチャのピクセル化 (ミップマップ) を制御します。スライダーを左に動かすと、テクスチャの解像度を下げます。もっとも重要なのは左上の Slice メニューで、画像を自動的に分割するオプションを提供します。

Select the Apply and Revert buttons to keep or discard any changes you have made in the Sprite Editor window respectively. You set these buttons to display a confirmation dialog before applying their effects in Unity’s Preferences window. In the Preferences window, go to 2D > Sprite Editor Window to open the Sprite Editor window options.

Sprite Editor ウィンドウの環境設定
Sprite Editor ウィンドウの環境設定

それぞれのオプションを選択すると、Apply または Revert を選択した後にダイアログが表示され、選択を確認し、加えた変更が誤って保存または破棄されるのを防ぎます。

エディターを使う

手動で要素を識別するものとしてもっとも直接的な方法はエディターを使用することです。画像をクリックすると隅にハンドルが表示された矩形領域が表示されます。サイズ調整はハンドルかスプライトの矩形の端をドラッグすることで行うことができます。要素を分割したら、別のものを追加するには画像の別の部分の矩形をドラッグします。矩形を選択すると、ウィンドウの左下にパネルが表示されます。

パネルのコントロールでスプライト画像の名前を選択し、座標によってスプライトの矩形の位置とサイズを設定できます。左、上、右、下の境界線の幅をピクセル単位で指定できます。ボーダーはスプライトを 9 スライス するときに便利です。スプライトのピボットの設定もあり、Unity はそれらをグラフィックスの座標の原点と主要な “アンカーポイント” として使用します。デフォルトの矩形に相対的な位置 (中央、右上など) から選択するか、カスタム座標を使用できます。

Slice メニューの隣にある Trim ボタンは、透明度に基づいて画像の端の周りにぴったり合うように、スプライトの矩形のサイズを変更します。

ノート: Border は 2D SpriteRenderer ではなく、UI システムでのみサポートされています。

Sprite エディター
自動スライス