Google+ もご覧ください
ユーザーアイコン

Unityではじめるゲーム開発

Unity4.3 で追加された Sprite 機能を使ってみよう - その1

Nakamura001

Unity4.3 で追加された Sprite 機能を使ってみよう - その1

Unity 4.3 で今まで Unity の弱点だった2Dの部分が強化されました。まぁ、今までも Asset Store で公開されているライブラリを購入すれば2D処理の強化は可能でしたが標準で対応してくれるのはありがたいことです。

今回はその2D機能の基本的な部分、Sprite機能について解説します。

素材を準備しよう

今回の最終目標は2Dキャラが歩行アニメーションをしながら上下左右に移動するということとします。素材をイチから作るのは大変なので今回はOpenGameArtで公開されているパブリックドメインの画像を使用することにします1

上記ページの ada0.png というリンクから画像をダウンロードして下さい(実際のファイル名は ada0_0.png になっています)。

ライセンスがパブリックドメインですのでこちらにも転載しておきます。こちらの画像を使用してもOKです。

今回使用する画像
今回使用する画像

Spriteの設定

新規にプロジェクトを作成して先ほどの画像をに取り込んだら Texture の設定を行います。 Inspector にてTexture TypeSpriteに変更します。新規プロジェクト作成時やプロジェクトの設定で指定する Default Behavior Mode が 2D の場合には Import した時に自動的に Sprite が選択されるので、この作業は必要ありません。

Sprite に変更
Sprite に変更

次にSprite ModeMultipleに変更します。 Sprite Mode は Single だと1枚の画像をそのまま使用し、Multiple の場合は領域を指定して複数の画像として使用可能です。

Multiple に変更
Multiple に変更

Multiple に切り替えると表示されるSprite Editorというボタンを押すと以下のようなウィンドウが表示されます。ここで使用する画像の領域指定を行います。

Sprite Editor
Sprite Editor

実際に領域を指定するには左上にあるSliceと書かれた部分をクリックします。

Slice
Slice

するとこのようなポップアップが表示されるのでそのままの設定でSliceボタンを押します。

デフォルトのまま実行
デフォルトのまま実行

処理が終わると自動的に画像のギリギリの領域の所で分割されます。

Slice を実行した後の状態
Slice を実行した後の状態

微調整が必要な場合には個別に選択して縦横のサイズや切り取りの開始位置の調整が可能です。

今回はこの後、アニメーションさせるので分り易い様に名前を変更しておきましょう。

一番左上の画像を選択してポップアップ内のNamewalk_backward0に変更します。下方向に順番に選択してwalk_backward1walk_backward2walk_backward3と名前を付けていきます。右の列に移動し同じように連番の名前をwalk_left0walk_frontward0walk_right0という名前で付けていって下さい。

情報をまとめると以下の様になります。

名前を付ける
名前を付ける

なお、上方向に進む想定で考えているのでこの様な名前になっています。

名前を付け終わったらもう一度画像を順番に選択してPivotの項目をすべてBottomに変更して下さい。

 Pivot を Bottom に
Pivot を Bottom に

なお、この作業は自動的に領域選択された画像の高さが31ピクセルのものと32ピクセルのものとが混在しているために行っています。同一のサイズの場合にはデフォルトの Center の設定のままで問題ありません。

また、 Center のままの方が管理しやすいので Bottom には変更したくないという場合には Y や H の値を調整することで Center のままで作業を進められるようになります。

画面に表示

Project ビューの2Dと書かれている部分をクリックすると2Dモードに切り替わります。このモードではZが無くなり、XとY座標についてのみ移動出来る2Dゲームの作成に適した操作方法に切り替わります。

2D に切り替える
2D に切り替える

Main Camera はPosition(0, 0, -10)ProjectionOrthographicSize1に変更します。

Camera の変更
Camera の変更

続いてada00テクスチャを Scene ビューにドラッグすると画面に追加できます。追加した後に名前をPlayerに変更しておきましょう。

追加後、Position(0, 0, 0)に変更してScene ビューを確認すると、以下のように軸の中央に足元になる位置で表示されます。これは Pivot の設定を Bottom にしてあるためです。デフォルト設定で有る Center の設定の場合には軸の中央がキャクターの中央にきます。

画面に表示された Sprite
画面に表示された Sprite

この画像、よくみるとちょっとぼやけています。これはテクスチャに補完処理が行われているためです。2Dゲームらしくドットを強調したい場合にはテクスチャの Filter Mode を Point に変更します。

Filter Mode を Point に変更する
Filter Mode を Point に変更する

Point に切り替えてApplyボタンを押すと、このように綺麗なドット絵として表示されます。

Filter Mode を Point に変更
Filter Mode を Point に変更

アニメーションをさせる

歩行アニメーションをさせるために Animation Clip を作成します。

Hierarchy ビューで Player を選択し、その状態のままメニューから[Window]-[Animation]と選択して Animation ウィンドウを表示させます。なお Animator という似たものもあるのでこちらと間違えないように注意して下さい。

赤枠で囲んだ部分をクリックして[Create New Clip]を選択します。そしてwalk_backward.animという名前で Animation Clip を保存します。

 Animation Clip を新規作成
Animation Clip を新規作成

Add Curveボタンを押して[Sprite Renderer]-[Sprite]と辿り、右側にある+アイコンをクリックします。これで Sprite がアニメーション対象になります。

Add Curve
Add Curve

Animation Clip の実行時、時間経過とともに Sprite が変更されるように Sprite を配置していきます。

まずは赤枠で囲まれた部分に15と入力します。

 Frame の指定
Frame の指定

その状態のまま、 Inspector にてSprite RendererSpritewalk_backward1に変更します。

 Sprite の変更
Sprite の変更

同様に15フレーム毎に Sprite 名を変更し、最終的に以下のような設定にします。45〜60フレームの間は walkbackward3 が表示され続けて、その後に walkbackward0 に戻るというアニメーションにしたいので45フレームと60フレームにはいずれもwalk_backward3が設定してあります。

frame スプライト名
0 walk_backward0
15 walk_backward1
30 walk_backward2
45 walk_backward3
60 walk_backward3

すべての設定が終わるとこのような状態になります。

最終的な設定
最終的な設定

Animation ビューにある「再生ボタン」を押すとすぐにアニメーションの確認ができます。ボタンを押してアニメーションが正しく行われているか確認してみて下さい。

再生ボタン
再生ボタン

アニメーションに問題ないことが確認できたら、録画ボタンをクリックして編集モードを終了させた後にゲームを実行してみて下さい。

ここをクリックして編集モードを終了
ここをクリックして編集モードを終了

Animation ビューで再生ボタンを押した時と同じようにキャクターがアニメーションしているはずです。


今回はここまでです。ここまでの作業を行ったプロジェクトはこちらに置いてあります。もし、ここまでの作業が上手く行かなかった場合には記事とこのプロジェクトとを見比べながら確認してみて下さい。

次回はキー入力に合わせて移動させる方法を解説します。

Unity
タグ:

記事をリクエストする

関連記事

コメント