スプライトとスプライトアニメーションの作成

確認済のバージョン: 5.5

-

難易度: 初級

Sprite (スプライト)

スプライトは2Dゲームで登場するキャラクターやアイテムなどの2Dのグラフィックスオブジェクトことを指します。詳しくはドキュメントのSprite、SpriteRendererを御覧ください。

1.1　Sprite Editor（スプライトエディター）で1枚のテクスチャから複数のスプライトを作成する

プロジェクトビューでSprites/SpaceshipフォルダにあるSpaceshipを選択してください。

図1.1: マウスカーソルでテクスチャのSpaceshipを選択した状態。

Texture Import Settings の確認

2Dモード時にテクスチャをインポートしていれば既にSprite（スプライト）としてインポートされているはずです。もしTexture TypeがTexture（テクスチャ）になっている場合は図1.2のようにSpriteへ変更してApplyボタンを押しましょう。

図1.2:

1つのTextureに複数のSpriteがある場合はTexture Import SettingsのSprite ModeをMultipleに、Pixels Per Unitsを50に変更します。

図1.3:

Pixels Per Units

Unityでは長さの単位をUnit (ユニット)と表します。更に細かく言えば1ユニットは1メートルです。「Pixels Per Units」はピクセルとユニットの関係性を表すものです。

Pixels Per Unitsが1の時

1ピクセルの大きさが1ユニットと同じになります。

Pixels Per Unitsが100の時

100ピクセルの大きさが1ユニットと同じになります。

Texture Import Settingsの「SpriteEditor」ボタンを押してSpriteEditorを開いてみましょう。

図1.4:

「SpriteEditor」 (スプライトエディター)

スプライトはひとつのグラフィック要素しか含まない場合もありますが、複数のグラフィックをひとつのテクスチャに含めたほうが効率が良いです。そこで、スプライトエディターで複数のスプライトを作成します。詳しくはドキュメントのSpriteEditorを御覧ください。

Grid By Cell Size（セルサイズ単位のグリッド）で分割

テクスチャから複数のスプライトを作成します。左上のSlice（スライス）をクリックしてください。 TypeをAutomatic（オートマチック）からGrid By Cell Sizeに変更します。

図1.5:

Pixel SizeをX 48 Y 48に変更します。

図1.6:

Sliceボタンを押してテクスチャに枠線が付いたことを確認しApplyボタンを押して反映します。

図1.7:

Project View（プロジェクトビュー）で図1.8のようになっていればOKです。

図1.8:

1.2　自機（Player（プレイヤー））のアニメーション

図1.9のようなアニメーションをUnity上で作成します。

図1.9: GIFファイルです

Animation Controller（アニメーションコントローラー）とAnimation Clip（アニメーションクリップ）ファイルの作成

複数のSpriteをScene View（シーンビュー）にDrag & Drop（ドラッグアンドドロップ）すると自動でAnimatorControllerとAnimationClipファイルが作られます。今回はSpaceship_0からSpaceship_3までの4つを選択し、シーンビューにドラッグ&ドロップしましょう。

図1.10:

するとAnimation Clip ファイルと対応するAnimationController ファイルがSpaceshipのフォルダに作成されます。 AnimationController ファイルの名前をPlayerに、Animation Clipのファイルの名前をNormalに変更して、 Animations/PlayerフォルダにDrag & Dropして移動しましょう。

図1.11: SpaceshipのフォルダにAnimation ClipとAnimationControllerが作成される