Unity 2D アニメーション

Nowy numer telefonu
17 czerwca 2020
Show all

Unity 2D アニメーション


今度は走るモーション用に作成した画像を3つドラッグ&ドロップします。検索ウィンドウに「t:Texture」と表示されたと思いますが、スペースを入れて今回設定したキーワードを入れてください(今回はplayer)3はどうしても違う大きさのテクスチャを使用したい場合は絵の中心座標を合わせましょう。今回の場合はダウンのアニメーションがこれに当たります。ダウン中の当たり判定は切ってしまえば大丈夫なので、当たり判定の大きさの違い気にしなくても大丈夫です。地面とだけ当たるようにします。というのも、別に2のべき乗以外の大きさの画像も使用する事ができるのですが、圧縮ができなくなり、画像のサイズが非常に大きくなってしまうからです。プロジェクトウィンドウで右クリック>Create>Animator Controllerというのを選んでください。人型であれば、おそらく縦長になるでしょうから、だいたい縦256、横128の大きさくらいがとりあえずの基準でしょうか。解像度が気に食わなければ、2ずつかけていって色々試してみてください。こういう色んな注意点というのが多々あるのですが、意識せずに書いてしまったり、よく理解せずに始めちゃうと、始めから書き直しになってしまったりする事がよくあります。下書きの大事さがちょっと見えてきたのではないでしょうか4は不透明なテクスチャでやってしまうとキャラの周りに白い四角ができちゃうので背景は透明で書きましょう。今度は突っ込んだテクスチャをスプライトにします。UIを作成した時にやったやつと一緒ですね。では、立ち、走り、ジャンプ、ステージクリア、やられ時のアニメーションを作っていきましょうか。まぁ、適当に書いてみてください。今は立ちモーションなので、立ちアニメーションのファイルをドラッグ&ドロップします。これで新しくAnimator Controllerが作成されました。まずは、新しいシーンを作成しましょう。これまでのシーンはセーブして、New Sceneで新しいシーンを作成してください。さて、これでアニメーションファイルを作成するところまでできました。自分はplayer_animatorという名前で保存しました。とりあえず、今回は解説という事で、汎用的な人型のキャラクターでアクションを作成していこうと思います。基本形としては、立ち、走り、ジャンプでしょうか。あとやられモーションも欲しいですし、ステージクリア時のポーズもあると雰囲気がでるかもしれません。この時の走るスピードというのは↓の画像の間隔によって変わります。色々調節してみてください。何か走り方が変だなーとか、もうちょっとヌルヌル動かしたいなーとかがあれば画像を修正したりコマ割りを増やす必要があります。下書きの間にやれることをやってしまいましょう。ファイル名を入れて新しいファイルを作成してください。自分はplayer_runという名前にしました。↓のような画面ができたと思います。これはアニメーションを編集するウィンドです。すると、お目当の画像だけになったかと思うので、Shiftを押しながら一番上と一番下を選択すれば一度に選択できます。そうしたら、アニメーションウィンドウの再生ボタンを押してみてください。まず、タイプ分けでテクスチャを選択します。プロジェクトウィンドウ右上のアイコンをクリックしてTextureを選んでください。先ほどAddComponentで加えたAnimatorのControllerとなっているところの◎となっているところをクリックすると作成したAnimator Controllerを選択する事ができます。1は絵ごとに足の位置が違うと地面とどれくらいの距離にいればいいのかわからなくなるので大事です。今回はアニメーションファイルを作成するところまで行ったので、次回はアニメーションを制御を解説しようと思いますのでよろしくお願いします。まだ、ファイル数が少ないので別に一個一個やってもいいのですが、後々ファイル数が増えた時に使える手法を紹介したいと思います。当たり前ですが、大きくすればするほど画像は綺麗にできますが、ロード時間は長くなります。死ぬほど大きくするとゲームが落ちますので小さいところから納得のいくところまで上げていく事をオススメします。5はファイル整理をやりやすくするためですね。一括操作する際に、「このキーワードが入っているファイルに対して一括操作する」みたいな事ができるので一まとまりになるファイルは名前に規則性を持たせた方がいいです。今回は頭文字に「player」をつけたいと思います。さて、まずは2Dアクションを作るに当たって、どんな感じで進めていくのか、どんなキャラクターで作っていくのかを考える必要があります。今回はいっぺんにたくさんの画像を変更したいため、一括変換します。何かうまくいかない事があった場合は↓の記事を参考にしてみてくださいこれは、アニメーションをループさせる際に、一番右から一瞬で一番左に行ってしまう為、一番右の画像が一瞬しか表示されない為です。その為、一番右の画像が表示される間隔を作ってあげる必要があります。そうすると、今アニメーションウィンドウでの編集しているファイルは新しく作成したファイルになっています。変更したければ先ほどのようにファイル名のところをクリックすればどのファイルを編集するのかを選択できます。2のべき乗の数値のウチ、どのような大きさにしたいかは解像度と容量との相談で決めましょう。↑のようなコンポーネントがついたかと思います。この状態ではControllerがNoneになっていて機能しないので、今度はControllerを作成します。何を行わせるかはどういうギミックにするのかによりますが、最初なので複雑にせず、今回の解説では基本的な行動のみにしていきたいと思います。また、筆者も間違えることはありますので、何か間違っている点などありましたら、動画コメント欄にでも書いていただけるとありがたいです。そうしたら、立ち用の画像をプロジェクトウィンドウからシーンビューにドラッグ&ドロップしてください。そのために、アニメーション関連のファイルを入れておくフォルダを作っておくと便利です。自分はAnimationというフォルダを作成しました。では早速アニメーションを作っていきましょう。まずはUnityのプロジェクトウィンドウにドラッグ&ドロップで作った画像を突っ込みましょう。タイトルを作った時に作成したフォルダの中に突っ込んどくといいかもしれません。とりあえず、小さい容量から試してみてジャギって見えるようなら解像度を高くしていって納得いく解像度にしていくのがいいと思います。そのための下書きですから。同じような感じでジャンプ上昇とジャンプ下降とやられモーション、クリアモーションも作ってしまいましょう。ちなみに、iOSのゲームを作成する場合は、正方形でなければ圧縮できない為、例え変な余白ができたとしても正方形にした方がいいです。このサイトでは下書きを推奨しています。ということで適当でOKです。そして、インスペクターでSpriteにすれば全ファイル一括変換できます。次に↑でドラッグ&ドロップで作成されたゲームオブジェクトのインスペクターでAddComponent>Animatorを選んでください。アニメーションの種類が決まったらいよいよアニメーションを作ってみましょう。ファイル名に何かしらのルールを持たせておくとこういう時に便利なのでぜひ活用してください。最低限↓の動画の要件を満たしていない質問は受けかねるので、ご理解ください。次に、そのキャラクターにどういった動作をさせるのかを決めましょう。さて、基本的なキャラクターのアニメーションのさせ方としてパラパラ漫画にする方法があります。圧縮のかかっていない、綺麗な画像にこだわりたい場合は、2のべき乗以外のサイズにするのもアリですが、容量が大きくなってしまいますし、メモリも食ってしまうので、ロードも遅くなります。すると、↑のように絵が追加されたと思います。ですが、今回自分は立ちモーションは1コマしか書いていないのであんまりアニメーションっぽくありません。このAnimatorという奴はアニメーションを制御してくれるコンポーネントです。そうしたら画像の間隔を揃えましょう。自分は0:10間隔に画像を置きました。メモリの数字が映らない方はマウスのホイールを回転させる事で見える範囲の拡大縮小する事ができます。2はテクスチャの大きさをマチマチにしてしまうと、自分の当たり判定をコマ割りで制御しなくてはいけなくなってメンドくさいので今回は無しの方向でいきましょう。初心者の時はなるべく難しくなる要因を避けた方がいいです。とりあえず、立ちアニメーションを作成していきたいので、名前をplayer_standにしてセーブしましょう。 Unity5.1.1p1 Personal(2015年6月) ひよこエッセンスの時間です〜 Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜 今回は2Dアニメーションの設定についてです〜 速習 Unity 2Dゲーム開発 ~第13回 シーンの移動処理. 次に作成されたオブジェクトのInspectorビューを見てみると、作成されたAnimator ControllerのAnimatorコンポーネントがついています〜それではアニメーションの設定をしていきます〜まずは基本的なSpriteアニメーションからです〜Projectビューの切り離されたplayer_0とplayer_1を選択し、Hierarchyビューへドラッグ&ドロップして下さい〜これでひよこが羽ばたきながら、上下に移動するアニメーションができあがっているはずです〜hiyotamaさんは、はてなブログを使っています。あなたもはてなブログをはじめてみませんか?この状態で1コマ目のひよこのダイヤマークをクリックすると、Position欄にX:0、Y:0、Z:0という位置情報が表れます〜コマごとにこの位置情報を設定して、アニメーションをさせていくというわけです〜2Dアニメーションに使われる画像は、だいたい下の画像のように1枚に複数の絵が描かれていますので、切り離します〜赤枠のSamplesは、このアニメーションが1秒間で何コマ使うかを設定しています〜この場合、1秒間12コマでアニメーションが構成されています〜もしSampleが60だったら、1秒間に60コマ分になるので、より細かいアニメーションが設定できるというわけです〜続いてplayer画像のInspectorビューの設定です〜TextureTypeをSprite(2D and UI)、Sprite ModeをMultiple、Filter Mode をPointにして下さい〜ちなみにAnimatorControllerで自動生成されたStateの名前ですが、Unity5.0より前のバージョンだと自分で名前を付けられたのですが、Unity5.1からは自動的にSprite画像の名前が付いてしまうようになってしまいました〜そして、1コマ目を0:00、2コマ目を0:06、3コマ目を1:00に設定します〜というわけで、これでアニメーションの作成は完成です〜Gameを実行してみて下さい!Pivotは画像の中心点を表します〜Rigidbodyを使って重力で地面に着地するなら、地面との距離がよく分かるBottomがオススメです〜左上のSliceをクリックすると、Type、Pivot、Methodという項目が出てきます〜Spriteアニメーションは画像を切替えるだけでしたが、ここにPositionアニメーションを追加することで、位置を変えながらアニメーションさせることができるようになります〜Add Property>Transform>Positionにあるプラスボタンを押して下さい〜そこにも無い場合は、タスクバーのWindow>Animationで開けます〜Multipleは、1枚の画像を複数枚に切り離して使う設定です〜Typeは切り離し方を表し、AutomaticだとUnityが自動的に分割してくれて、Gridを選ぶと自分で切り離す範囲を指定します〜今回はAutomaticです!Sprite(2D and UI)は、Unity2D開発で2D画像を扱うSpriteオブジェクトや、UnityのUIを扱うuGUIのImageオブジェクト等で使える画像タイプです〜Sprite画像をまとめてドラッグ&ドロップすると、自動でアニメーションを付けてオブジェクトを作成してくれるわけです〜それではSprite Editorボタンを押し、画像を切り離し設定をしていきましょう〜State名はこれはAnimationの名前を変えても連動して変更することはできませんので、Stateを選択した状態でInspectorビューから名前を変更して下さい〜その右側の赤枠0:00〜1:00が、1秒間のアニメーションを表しています〜今回は0:00でひよこの羽が上、0:01でひよこの羽が下というアニメーションを繰り返しているため、つまり1/12秒のアニメーションを繰り返していたため、とてもスピードが早かったわけです〜それではちょうどいいスピードに設定致します〜その前に、右側のplayer_1 : Spriteを開くとひよこの画像が表れて分かりやすいので、そうします〜するとplayer_1 : Positionという項目が出てくるので、更に矢印ボタンを押すと、Position.x、Position.y、Position.zという項目が出てきます〜Unity開発でよく出てくるパターンをエッセンスとしてまとめておきます〜するとSprite画像の1枚目の名前でオブジェクトができ、ゲーム画面にひよこが出現します〜また、ProjectビューのSprite画像がある階層にAnimationとAnimator Controllerが作成されているのが確認できます〜Methodは、選択済みの画像に関する設定です〜Unityの公式ドキュメントには、Delete existing とすると選択済みの部分をすべて置き換え、Smart とすると既存のものを保持または調整しつつ新規の矩形を作成すると書いてありますが、これらの違いはよくわかりません〜Safeについては、既に選択済みの範囲はそのまま残して、まだ選択されていない画像があれば切り離してくれます〜今回はDelete existingを選択します〜これらはフォルダに整理し、名前を変更しておくと管理しやすいのでおすすめです〜続いて、新しくplayer_0のSprite画像を3コマ目に持ってきます〜ちょっとスピードが早いので、速度を落としましょう〜Hierarchyビューのplayer-1を選択した状態で、Animationビューを開いて下さい〜Animationビューは、Sceneビューの上から選択できます〜Animationの表示が無い時は、Sceneビュー右上から追加できます〜Pointは、2D画像のドットを綺麗に表示するための設定です〜2Dアニメーションは基本的にSpriteアニメーションとPositionアニメーションが触れれば、だいたいのことはできるかと思います〜そしたらSprite Editor画面は閉じて下さい〜すると、Apply(適用)しますか?と聞かれるので、Applyしましょう〜 速習 Unity 2Dゲーム開発 ~第12回 BGMや効果音を鳴らす. オブジェクトが動かなくてつまらないな、アニメーションを使ってみたい、という悩みを解決します。 ここではUnityでアニメーションを使っていきます。まずアニメーションの理解をするために、アニメーションの基本知識を説明していきます。 また2Dの場合を例に出しています。

お祝いの言葉 ありがとう ござい ます メール 英語, Ten Years After 名曲, おのの のか 似てる 人, Civ6 信仰力 ユニット 購入できない, Qoo10 韓国発送 コロナ, ウルトラマン 映画 動画, 水球ヤンキース 3話 あらすじ, サッカー 日本代表 写真撮影, スポーツ ビデオ 分析, 地域 近所 英語,

Unity 2D アニメーション