2Dスプライトを使って、パラパラ漫画風アニメーションを実装します。
ドット絵のキャラクターを歩かせるには、1コマ1コマ画像を切り替えて、歩いてる風にみせる必要があります。
Unity を使うと簡単に実装できます。
環境
- Windows 11 Home 21H2
- Unity 2021.3.11f1
手順
2Dプロジェクトの作成
今後、2Dゲームを作っていきたいので 2Dプロジェクト を新規作成して作業していきます。3Dプロジェクトでも同じことができるので好きな方で作ってください。
スプライト設定
プロジェクトの Assets フォルダーにキャラクター画像を追加します。
今回使った画像は こちら からお借りしました。
Assetsに追加したキャラクター画像を選択し、インスペクター(Inspector)で次の設定をします。
- テクスチャタイプ：スプライト(2DとUI)
- スプライトモード：複数
上記を変更してから「Sprite Editor」ボタンを押します。
スプライトエディター
キャラクター画像に合わせてスライス設定をしていきます。
スライスタイプを「Grid By Cell Count」に変更し、キャラクター画像に合う行列設定をします。
うまくできたら「スライス」ボタンを押してスライス確定をし「適応」ボタンで、キャラクター画像へ適応させます。
設定が完了すると、Assetsの画像が分割されます。
アニメーション設定
続いて分割したスプライトを使って、アニメーションを作っていきます。
アニメーションにしたいスプライトを選択し、左の ヒエラルキー(Hierarchy) にドラッグします。
今回は、右向き4枚の分割スプライトを選択しました。
アニメーションの保存ダイアログが表示されるので、アニメーション名を決めて保存します。
Assets に アニメーションクリップ(Animation Clip) と アニメーターコントローラー(Animator Controller) が保存されます。
実行
スクショだと分からないですが、メチャ早く走ってます。
遅くする
アニメーションを遅くします。
アニメーターコントローラー(Animator Controller) を選択し、Animation1 の速度を「0.5」に変更するとアニメーションが遅くなります。
程よい
Q&A
ドット絵がぼやけるんだけど？
画像のインスペクターから次の設定を変更します。
- フィルターモード：ポイント
ぼやけなくなります。
