スプライトとスプライトアニメーションの作成
確認済のバージョン: 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が作成される
ゲームオブジェクトとAnimationControllerそれぞれのSpaceship_0の名前をPlayerに変更します。
図1.12:
図1.13:
ゲームオブジェクトの名前を変更する
ゲームオブジェクトの名前を変更するには2通りの方法があります。
1.インスペクター上で名前を変更する ゲームオブジェクトを選択するとインスペクターに様々な情報が表示されます。インスペクターの上部に名前が編集可能な状態で表示されているので変更した後、Enterで名前の更新を行います。
図1.14:
2. ヒエラルキー上で名前を変更する ヒエラルキー上でゲームオブジェクトを選択し、Enterを押すと名前の編集モードになります。名前を変更した後、Enterで名前の更新を行います。
図1.15:
さて、もう既にスプライトアニメーションは完成しています。 プレイボタンを押してゲームを再生してみましょう。
1.3 敵（Enemy（エネミー））のアニメーション
図1.16のようなアニメーションをUnity上で作成します。
図1.16: GIFファイルです
同じようにSpaceship_4からSpaceship_7までの4つを選択し、シーンビューにドラッグ&ドロップしてAnimatorControllerとAnimationClipファイルを作成してください。
図1.17:
名前をEnemyとします。
図1.18:
図1.19:
1.4 弾の作成
BulletのSprite ModeをMultipleにしてSprite
Editorを開きましょう。 TypeはGrid By Cell SizeでPixel SizeをX 16 Y 16とします。
図1.20:
スライスしたらApplyボタンを押しましょう。 また、Pixels Per Unitsを100に変更します。（弾のスケールを小さくします）
1.5 爆発のアニメーション
このようなアニメーションを作成します。
図1.21: GIFファイルです
ExplosionのSprite ModeをMultipleにしてSprite
Editorを開きましょう。 TypeはGrid By Cell SizeでPixel SizeをX 80 Y 80とします。
スライスしたらApplyボタンを押しましょう。
図1.22:
同じようにExplosion_0からExplosion_10までの11つを選択し、シーンビューにドラッグ&ドロップしてAnimatorControllerとAnimationClipファイルを作成してください。アニメーション名はExplodeにします。
図1.23:
図1.24:
Prefabにする
今まで作成した「Player」、「Enemy」、「Explosion」をPrefabファイルとして保存します。
Prefabsフォルダを作成し、フォルダに向けてゲームオブジェクトを１つずつドラッグ＆ドロップします。
図1.25:
3つともPrefabにしたらシーン上にあるゲームオブジェクトは削除しましょう。 ゲームオブジェクトの上で右クリックをしてメニューを表示します。Deleteを選択してください。
Prefabとは？
図1.26:
詳しくはドキュメントのPrefabsを御覧ください。
