【Unity入門】2Dアクションを作ろう【アニメーション作成】

今回はいよいよアニメーションを作成していこうと思います。

この記事は本のように順を追って解説しています。この記事は途中のページになります。
この記事を見ていて、現在の状況がわからない場合や忘れてしまった事などが出てきたら↓のリンクから目次ページへ飛べますので立ち戻って見てください。

<キャラクターを作ろう>

どんなキャラにするか

さて、まずは2Dアクションを作るに当たって、どんな感じで進めていくのか、どんなキャラクターで作っていくのかを考える必要があります。

とりあえず、今回は解説という事で、汎用的な人型のキャラクターでアクションを作成していこうと思います。

ですが、前回解説した通り、とりあえず下書きから入った方がいいので棒人間で適当に書いていく事にしましょう。

人型にしたくない人も極力適当な絵で書いていきましょう。

後で丁寧に作っていけばいいです。

画像の大きさについて

一つキーポイントとしては画像の大きさを2のべき乗にしておくとお得です。

と、いうのもコンピュータは0と1(電気が通っているか通っていないか)で何かを表現しているので2進数で表されます。メモリを確保するのに2のべき乗分確保していくので半端な解像度にしても2のべき乗分メモリが確保されます。

例えば100×100の画像を用意したとします。
そうすると、2の6乗が64で2の7乗が128なのでメモリに確保されるのは128×128の画像の大きさになります。

別に100×100の画像を使用してもいいですが、使用されるメモリ量は128×128と同じです。

それと、2のべき乗ではない大きさを使用した場合画像を圧縮した際に端数によって1ピクセル欠ける事があります。あんまり気にはなりませんが、1ピクセルの欠けも許せない場合は画像の大きさを2のべき乗にした方がいいでしょう。

どのような大きさにしたいかは解像度と容量との相談で決めましょう。
とりあえず、小さい容量から試してみてジャギって見えるようなら解像度を高くしていって納得いく解像度にしていくのがいいと思います。そのための下書きですから。

人型であれば、おそらく縦長になるでしょうから、だいたい縦256、横128の大きさくらいがとりあえずの基準でしょうか。解像度が気に食わなければ、2ずつかけていって色々試してみてください。

当たり前ですが、大きくすればするほど画像は綺麗にできますが、ロード時間は長くなります。死ぬほど大きくするとゲームが落ちますので小さいところから納得のいくところまで上げていく事をオススメします。

とりあえず筆者は128×256で一旦作っていこうと思います。

test texture

このサイトでは下書きを推奨しています。ということで適当でOKです。

Point

・画像の幅、高さは2のべき乗にするといいよ!
・必ず2のべき乗にしなくてはならないわけではないよ!

<何ができるのか決めよう>

次に、そのキャラクターにどういった動作をさせるのかを決めましょう。基本形としては、立ち、走り、ジャンプでしょうか。あとやられモーションも欲しいですし、ステージクリア時のポーズもあると雰囲気がでるかもしれません。

何を行わせるかはどういうギミックにするのかによりますが、最初なので複雑にせず、今回の解説では基本的な行動のみにしていきたいと思います。

<パラパラ漫画を作ろう>

さて、基本的なキャラクターのアニメーションのさせ方としてパラパラ漫画にする方法があります。2Dのアクションなので今回はこの方法を取ろうと思います。

では、立ち、走り、ジャンプ、ステージクリア時のアニメーションを作っていきましょうか。まぁ、適当に書いてみてください。

今回ばかりはペイント等でやると背景を透明にできないので、GIMPなどの背景を透明にできる無料お絵かきツールを使うといいと思います。詳しくはググってね!

それでは、各アニメーションを描いてみましょう。

立ち

idle animation

走り

run animation 1
run animation 2
run animation 3

ジャンプ(上昇)

jump up

ジャンプ(下降)

jump down

クリア(喜びとか)

clear

ダウン

down1
down2
down3

ここで書く際の注意点があります。

注意

1. 地面についている場合の絵は必ず画像の一番下の位置に足を持ってくる事
2. 可能な限り同じ大きさのテクスチャにする事
3. 違う大きさのテクスチャを使用する時中心に注意する事
4. 背景は透明にする事
5. ファイル名の頭文字を統一しよう
6. ファイル名は英語にする事

1は絵ごとに足の位置が違うと地面とどれくらいの距離にいればいいのかわからなくなるので大事です。

2はテクスチャの大きさをマチマチにしてしまうと、自分の当たり判定をコマ割りで制御しなくてはいけなくなってメンドくさいので今回は無しの方向でいきましょう。初心者の時はなるべく難しくなる要因を避けた方がいいです。

3はどうしても違う大きさのテクスチャを使用したい場合は絵の中心座標を合わせましょう。今回の場合はダウンのアニメーションがこれに当たります。ダウン中の当たり判定は切ってしまえば大丈夫なので、当たり判定の大きさの違い気にしなくても大丈夫です。地面とだけ当たるようにします。

4は不透明なテクスチャでやってしまうとキャラの周りに白い四角ができちゃうので背景は透明で書きましょう。

5はファイル整理をやりやすくするためですね。一括操作する際に、「このキーワードが入っているファイルに対して一括操作する」みたいな事ができるので一まとまりになるファイルは名前に規則性を持たせた方がいいです。今回は頭文字に「player」をつけたいと思います。

6は不具合防止です。日本語だとバグる危険性があるので極力怖い事はやめましょう。英語でも全角で打ったらダメですよ。何故バグるかというと文字コードの解釈で間違いが起こる可能性があるからです。(自分は問題なく動いても、ゲームにした時一部のプレイヤーだけ動かないなどが起こる可能性があります)

こういう色んな注意点というのが多々あるのですが、意識せずに書いてしまったり、よく理解せずに始めちゃうと、始めから書き直しになってしまったりする事がよくあります。下書きの大事さがちょっと見えてきたのではないでしょうか

<アニメーションを作る為の設定をしよう>

テクスチャの設定をしよう

では早速アニメーションを作っていきましょう。まずはUnityのプロジェクトウィンドウにドラッグ&ドロップで作った画像を突っ込みましょう。タイトルを作った時に作成したフォルダの中に突っ込んどくといいかもしれません。

今度は突っ込んだテクスチャをスプライトにします。UIを作成した時にやったやつと一緒ですね。

今回はいっぺんにたくさんの画像を変更したいため、一括変換します。

まだ、ファイル数が少ないので別に一個一個やってもいいのですが、後々ファイル数が増えた時に使える手法を紹介したいと思います。

まず、タイプ分けでテクスチャを選択します。プロジェクトウィンドウ右上のアイコンをクリックしてTextureを選んでください。

select asset type

検索ウィンドウに「t:Texture」と表示されたと思いますが、スペースを入れて今回設定したキーワードを入れてください(今回はplayer)

Keyword search

すると、お目当の画像だけになったかと思うので、Shiftを押しながら一番上と一番下を選択すれば一度に選択できます。

all select

そして、インスペクターでSpriteにすれば全ファイル一括変換できます。

all type change sprite

Applyを押すのを忘れずに。

ファイル名に何かしらのルールを持たせておくとこういう時に便利なのでぜひ活用してください。

下準備

まずは、新しいシーンを作成しましょう。これまでのシーンはセーブして、New Sceneで新しいシーンを作成してください。

create new scene

そうしたら、立ち用の画像をプロジェクトウィンドウからシーンビューにドラッグ&ドロップしてください。

drag and drop sprite

次に↑でドラッグ&ドロップで作成されたゲームオブジェクトのインスペクターでAddComponent>Animatorを選んでください。

add animator

このAnimatorという奴はアニメーションを制御してくれるコンポーネントです。

animator

↑のようなコンポーネントがついたかと思います。この状態ではControllerがNoneになっていて機能しないので、今度はControllerを作成します。

そのために、アニメーション関連のファイルを入れておくフォルダを作っておくと便利です。自分はAnimationというフォルダを作成しました。

プロジェクトウィンドウで右クリック>Create>Animator Controllerというのを選んでください。

create animator controller

自分はplayer_animatorという名前で保存しました。

先ほど作成したAnimatorのControllerとなっているところの◎となっているところをクリックすると作成したAnimator Controllerを選択する事ができます。

attach animator controller

次に上部メニューのWindow>Animation>Animationを選択します。

create animation

↓のような画面ができたと思います。これはアニメーションを編集するウィンドです。

animation window

真ん中にあるCreateのボタンを押します。
とりあえず、立ちアニメーションを作成していきたいので、名前をplayer_standにしてセーブしましょう。

<アニメーションを作成しよう>

とりあえず、現在↓のような画面になっていると思います。

animation editting

ここから各種アニメーションを作成していきましょう。

今は立ちモーションなので、立ちアニメーションのファイルをドラッグ&ドロップします。

drag and drop sprite

すると、↑のように絵が追加されたと思います。ですが、今回自分は立ちモーションは1コマしか書いていないのであんまりアニメーションっぽくありません。

次は走りモーションを作成してみましょう。

左上のファイル名になっているところをクリックしてください。

select animation file

Create New Clipをクリック

create new clip

ファイル名を入れて新しいファイルを作成してください。自分はplayer_runという名前にしました。

そうすると、今アニメーションウィンドウでの編集しているファイルは新しく作成したファイルになっています。変更したければ先ほどのようにファイル名のところをクリックすればどのファイルを編集するのかを選択できます。

今度は走るモーション用に作成した画像を3つドラッグ&ドロップします。

drag and drop sprite any

そうしたら画像の間隔を揃えましょう。自分は0:10間隔に画像を置きました。メモリの数字が映らない方はマウスのホイールを回転させる事で見える範囲の拡大縮小する事ができます。

Animation interval

その後、一番右の画像をもう一回ドラッグ&ドロップで追加して同じ感覚で一番右においてください

add last sprite same first sprite

これは、アニメーションをループさせる際に、一番右から一瞬で一番左に行ってしまう為、一番右の画像が一瞬しか表示されない為です。その為、一番右の画像が表示される間隔を作ってあげる必要があります。

そうしたら、アニメーションウィンドウの再生ボタンを押してみてください。

play animation

シーンビューを見てみると動いている事がわかります。

animation human

この時の走るスピードというのは↓の画像の間隔によって変わります。色々調節してみてください。

Set animation interval

何か走り方が変だなーとか、もうちょっとヌルヌル動かしたいなーとかがあれば画像を修正したりコマ割りを増やす必要があります。下書きの間にやれることをやってしまいましょう。

同じような感じでジャンプ上昇とジャンプ下降とやられモーション、クリアモーションも作ってしまいましょう。

さて、これでアニメーションファイルを作成するところまでできました。

<わからない事、質問等があれば>

このサイトの説明ではよくわからなかったとか、もっと知りたい事などがあれば

自分の Youtubeの動画にコメントで質問していただければ動画でお答えしようと思います。

文章同士のやり取りだと伝わりづらいし、ラリーに時間がかかりそうなので動画で回答します。

↓の動画が回答の一例になります。どの動画でもいいのでご遠慮なくコメントしてください

できたらチャンネル登録よろしくお願いします!




今回はアニメーションファイルを作成するところまで行ったので、次回はアニメーションを制御を解説しようと思いますのでよろしくお願いします。




タイトルとURLをコピーしました