今回はいよいよアニメーションを作成していこうと思います。↑の動画でも解説しています。わからない、うまくいかない事があったら質問される前に、一回、動画の方で手順を確認してください
この記事は本のように順を追って解説しています。この記事は途中のページになります。
この記事を見ていて、現在の状況がわからない場合や忘れてしまった事などが出てきたら↓のリンクから目次ページへ飛べますので立ち戻って見てください。
＜キャラクターを作ろう＞
どんなキャラにするか
さて、まずは2Dアクションを作るに当たって、どんな感じで進めていくのか、どんなキャラクターで作っていくのかを考える必要があります。
とりあえず、今回は解説という事で、汎用的な人型のキャラクターでアクションを作成していこうと思います。
ですが、前回解説した通り、とりあえず下書きから入った方がいいので棒人間で適当に書いていく事にしましょう。
人型にしたくない人も極力適当な絵で書いていきましょう。
後で丁寧に作っていけばいいです。
画像の大きさについて
一つキーポイントとしては画像の大きさを2のべき乗にしましょう。
というのも、別に２のべき乗以外の大きさの画像も使用する事ができるのですが、圧縮ができなくなり、画像のサイズが非常に大きくなってしまうからです。
圧縮のかかっていない、綺麗な画像にこだわりたい場合は、２のべき乗以外のサイズにするのもアリですが、容量が大きくなってしまいますし、メモリも食ってしまうので、ロードも遅くなります。
そのため、２のべき乗のサイズにしましょう。
２のべき乗の数値のウチ、どのような大きさにしたいかは解像度と容量との相談で決めましょう。
とりあえず、小さい容量から試してみてジャギって見えるようなら解像度を高くしていって納得いく解像度にしていくのがいいと思います。そのための下書きですから。
人型であれば、おそらく縦長になるでしょうから、だいたい縦256、横128の大きさくらいがとりあえずの基準でしょうか。解像度が気に食わなければ、２ずつかけていって色々試してみてください。
ちなみに、iOSのゲームを作成する場合は、正方形でなければ圧縮できない為、例え変な余白ができたとしても正方形にした方がいいです。
当たり前ですが、大きくすればするほど画像は綺麗にできますが、ロード時間は長くなります。死ぬほど大きくするとゲームが落ちますので小さいところから納得のいくところまで上げていく事をオススメします。
とりあえず筆者は128×256で一旦作っていこうと思います。
このサイトでは下書きを推奨しています。ということで適当でOKです。
・画像の幅、高さは２のべき乗にするといいよ！（iOSは正方形）
・２のべき乗じゃなくてもいいけど、重いよ！
・納得のいく解像度は下から調査しよう！
＜アニメーションの種類を決めよう＞
次に、そのキャラクターにどういった動作をさせるのかを決めましょう。
基本形としては、立ち、走り、ジャンプでしょうか。あとやられモーションも欲しいですし、ステージクリア時のポーズもあると雰囲気がでるかもしれません。
何を行わせるかはどういうギミックにするのかによりますが、最初なので複雑にせず、今回の解説では基本的な行動のみにしていきたいと思います。
各自必要だと思うアニメーションの種類を考えてみてください。
＜パラパラ漫画を作ろう＞
アニメーションの種類が決まったらいよいよアニメーションを作ってみましょう。
さて、基本的なキャラクターのアニメーションのさせ方としてパラパラ漫画にする方法があります。
２Dのアクションなので今回はこの方法を取ろうと思います。
では、立ち、走り、ジャンプ、ステージクリア、やられ時のアニメーションを作っていきましょうか。まぁ、適当に書いてみてください。
今回ばかりはペイント等でやると背景を透明にできないので、GIMPなどの背景を透明にできる無料お絵かきツールを使うといいと思います。詳しくはググってね！
それでは、各アニメーションを描いてみましょう。
立ち
走り
ジャンプ（上昇）
ジャンプ（下降）
クリア（喜びとか）
ダウン
ここで書く際の注意点があります。
1. 地面についている場合の絵は必ず画像の一番下の位置に足を持ってくる事
2. 可能な限り同じ大きさのテクスチャにする事
3. 違う大きさのテクスチャを使用する時中心に注意する事
4. 背景は透明にする事
5. ファイル名の頭文字を統一しよう
6. ファイル名は英語にする事
1は絵ごとに足の位置が違うと地面とどれくらいの距離にいればいいのかわからなくなるので大事です。
２はテクスチャの大きさをマチマチにしてしまうと、自分の当たり判定をコマ割りで制御しなくてはいけなくなってメンドくさいので今回は無しの方向でいきましょう。初心者の時はなるべく難しくなる要因を避けた方がいいです。
３はどうしても違う大きさのテクスチャを使用したい場合は絵の中心座標を合わせましょう。今回の場合はダウンのアニメーションがこれに当たります。ダウン中の当たり判定は切ってしまえば大丈夫なので、当たり判定の大きさの違い気にしなくても大丈夫です。地面とだけ当たるようにします。
４は不透明なテクスチャでやってしまうとキャラの周りに白い四角ができちゃうので背景は透明で書きましょう。
５はファイル整理をやりやすくするためですね。一括操作する際に、「このキーワードが入っているファイルに対して一括操作する」みたいな事ができるので一まとまりになるファイルは名前に規則性を持たせた方がいいです。今回は頭文字に「player」をつけたいと思います。
６は不具合防止です。日本語だとバグる危険性があるので極力怖い事はやめましょう。英語でも全角で打ったらダメですよ。何故バグるかというと文字コードの解釈で間違いが起こる可能性があるからです。（自分は問題なく動いても、ゲームにした時一部のプレイヤーだけ動かないなどが起こる可能性があります）
こういう色んな注意点というのが多々あるのですが、意識せずに書いてしまったり、よく理解せずに始めちゃうと、始めから書き直しになってしまったりする事がよくあります。下書きの大事さがちょっと見えてきたのではないでしょうか
＜アニメーションを作る為の設定をしよう＞
テクスチャの設定をしよう
では早速アニメーションを作っていきましょう。まずはUnityのプロジェクトウィンドウにドラッグ&ドロップで作った画像を突っ込みましょう。タイトルを作った時に作成したフォルダの中に突っ込んどくといいかもしれません。
今度は突っ込んだテクスチャをスプライトにします。UIを作成した時にやったやつと一緒ですね。
スプライトがわからない方は↓を参考にしてください。
今回はいっぺんにたくさんの画像を変更したいため、一括変換します。
まだ、ファイル数が少ないので別に一個一個やってもいいのですが、後々ファイル数が増えた時に使える手法を紹介したいと思います。
まず、タイプ分けでテクスチャを選択します。プロジェクトウィンドウ右上のアイコンをクリックしてTextureを選んでください。
検索ウィンドウに「t:Texture」と表示されたと思いますが、スペースを入れて今回設定したキーワードを入れてください（今回はplayer)
すると、お目当の画像だけになったかと思うので、Shiftを押しながら一番上と一番下を選択すれば一度に選択できます。
そして、インスペクターでSpriteにすれば全ファイル一括変換できます。
Applyを押すのを忘れずに。
ファイル名に何かしらのルールを持たせておくとこういう時に便利なのでぜひ活用してください。
AnimatorとAnimationを作成しよう
まずは、新しいシーンを作成しましょう。これまでのシーンはセーブして、New Sceneで新しいシーンを作成してください。
そうしたら、立ち用の画像をプロジェクトウィンドウからシーンビューにドラッグ＆ドロップしてください。
次に↑でドラッグ＆ドロップで作成されたゲームオブジェクトのインスペクターでAddComponent＞Animatorを選んでください。
このAnimatorという奴はアニメーションを制御してくれるコンポーネントです。
↑のようなコンポーネントがついたかと思います。この状態ではControllerがNoneになっていて機能しないので、今度はControllerを作成します。
そのために、アニメーション関連のファイルを入れておくフォルダを作っておくと便利です。自分はAnimationというフォルダを作成しました。
プロジェクトウィンドウで右クリック＞Create＞Animator Controllerというのを選んでください。
自分はplayer_animatorという名前で保存しました。
これで新しくAnimator Controllerが作成されました。
先ほどAddComponentで加えたAnimatorのControllerとなっているところの◎となっているところをクリックすると作成したAnimator Controllerを選択する事ができます。
次にヒエラルキーでキャラクターを選択している状態で、上部メニューのWindow＞Animation＞Animationを選択します。
↓のような画面ができたと思います。これはアニメーションを編集するウィンドです。
真ん中にあるCreateのボタンを押します。
とりあえず、立ちアニメーションを作成していきたいので、名前をplayer_standにしてセーブしましょう。
AnimatorとAnimationとややこしいですが、Animatorはアニメーションを管理するもの、Animationはアニメーションそのものと覚えてください
＜アニメーションを作成しよう＞
とりあえず、現在↓のような画面になっていると思います。
ここから各種アニメーションを作成していきましょう。
今は立ちモーションなので、立ちアニメーションのファイルをドラッグ&ドロップします。
すると、↑のように絵が追加されたと思います。ですが、今回自分は立ちモーションは１コマしか書いていないのであんまりアニメーションっぽくありません。
次は走りモーションを作成してみましょう。
左上のファイル名になっているところをクリックしてください。
Create New Clipをクリック
ファイル名を入れて新しいファイルを作成してください。自分はplayer_runという名前にしました。
そうすると、今アニメーションウィンドウでの編集しているファイルは新しく作成したファイルになっています。変更したければ先ほどのようにファイル名のところをクリックすればどのファイルを編集するのかを選択できます。
今度は走るモーション用に作成した画像を３つドラッグ＆ドロップします。
そうしたら画像の間隔を揃えましょう。自分は0:10間隔に画像を置きました。メモリの数字が映らない方はマウスのホイールを回転させる事で見える範囲の拡大縮小する事ができます。
その後、一番右の画像をもう一回ドラッグ&ドロップで追加して同じ感覚で一番右においてください
これは、アニメーションをループさせる際に、一番右から一瞬で一番左に行ってしまう為、一番右の画像が一瞬しか表示されない為です。その為、一番右の画像が表示される間隔を作ってあげる必要があります。
そうしたら、アニメーションウィンドウの再生ボタンを押してみてください。
シーンビューを見てみると動いている事がわかります。
この時の走るスピードというのは↓の画像の間隔によって変わります。色々調節してみてください。
何か走り方が変だなーとか、もうちょっとヌルヌル動かしたいなーとかがあれば画像を修正したりコマ割りを増やす必要があります。下書きの間にやれることをやってしまいましょう。
同じような感じでジャンプ上昇とジャンプ下降とやられモーション、クリアモーションも作ってしまいましょう。
さて、これでアニメーションファイルを作成するところまでできました。
何かうまくいかない事があった場合は↓の記事を参考にしてみてください
最低限↓の動画の要件を満たしていない質問は受けかねるので、ご理解ください。
また、筆者も間違えることはありますので、何か間違っている点などありましたら、動画コメント欄にでも書いていただけるとありがたいです。
今回はアニメーションファイルを作成するところまで行ったので、次回はアニメーションを制御を解説しようと思いますのでよろしくお願いします。