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

版本检查: 5.5

-

难度: 新手

Sprite (スプライト)

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

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

プロジェクトビューでSprites/Spaceshipフォルダにある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 ModeMultipleに、Pixels Per Units50に変更します。


図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 SizeX 48 Y 48に変更します。


図1.6:

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


図1.7:

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


図1.8:

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


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

GIFファイルです
図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して移動しましょう。

SpaceshipのフォルダにAnimation ClipとAnimationControllerが作成される
図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上で作成します。

GIFファイルです
図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 爆発のアニメーション

このようなアニメーションを作成します。

GIFファイルです
図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つずつドラッグ&ドロップします。


図1.25:

3つともPrefabにしたらシーン上にあるゲームオブジェクトは削除しましょう。 ゲームオブジェクトの上で右クリックをしてメニューを表示します。Deleteを選択してください。

Prefabとは?


図1.26:

詳しくはドキュメントのPrefabsを御覧ください。