スプライトアニメーションのベストプラクティス


18

現実世界の人々がどのようにアニメーションを処理しているかについて、より適切に対処したいと思います。

1つの大きな画像を読み込んでから、アニメーションフレームに基づいて異なる四角形を描画しますか?

X画像ファイルを配列にロードし、アニメーションフレームに基づいて配列にアイテムを描画しますか?

さまざまなスプライトに対して異なる長さのアニメーションをどのように処理しますか。

キャラクターの歩行には4〜8フレームかかり、ビーチの波には2〜3フレームしかかかりません。その状況にどのように対処しますか?下記参照

Dim Waves(1) as Sprite
Dim Char(5) as Sprite

Sub Animate()
     Frame += 1
     Draw Char(Frame)
     Draw Waves(Frame)
     If Frame = 5 Then Frame = 0
End Sub

明らかに、Wavesは範囲外エラーになります。

または、スプライトが自身のアニメーションを心配していて、フレームをまったく気にしていないのですか。各スプライトに独自のアニメーションループを認識させますか?

回答:


23

私が過去にやった方法は、アニメーションデータアニメーション再生から分離することです。はAnimation基本的にFrames、アニメーションの動作方法(ループする場合など)を記述するいくつかのプロパティの配列となることができます。

通常、1つのイメージをロードして、その一部を描画します。

Frameアニメーションは基本的に長方形であり、時間の長さです。これにより、一部のフレームが他のフレームよりも長く表示されるようになります。アニメーション内のすべてのフレームを同じ時間表示するAnimation場合は、オブジェクトに保存します。

アニメーションを再生する必要がAnimationPlayerあるものはすべて、を指すことができる独自のものを持っていAnimationます。プレーヤーオブジェクトはアニメーションの再生を処理し、「現在のフレーム」を使用可能にします。

私にとってこれの利点は、Animation多くのオブジェクトが同時に異なる部分を指し示すことができるという単一のインスタンスを持つことができることでした。また、単にAnimationPlayer別のAnimationオブジェクトをポイントして再生をリセットするだけで、アニメーションを簡単に変更できました。

編集上記のシステムのかなり基本的なJavaScript実装ですデモとして数分で一緒に投げました。「実際の」コードには、より多くの機能があります。ただし、CanvasとData URIの両方をサポートする最新のブラウザーが必要です。


1
彼が言ったこと。また、アニメーションの各フレームにx / yオフセットを設定すると、境界ボックスにスプライト画像をしっかりと詰め込み、アニメーションの任意の場所に配置できるので便利です。また、単一の画像を使用するだけで、ジグリングなどの基本的な操作を実行できます。
顕著な

はい、完全に同意します。実際、私が使用しているアニメーションシステムではこれが可能です。画像データを編集することなく、フレームの位置を簡単に変更できます。
ザック人間

すてきな作業例、WOWサムズアップ。それをお勧めします。
-DFectuoso

アニメーションの種類の重要な制限は、フィギュアを異なる角度から見ることができないことです-視聴者から離れて歩いたり、視聴者に向かって歩いたりなど。それとも間違っていますか?
マジッドフードゥプール

@MajidFouladpourこの手法を使用すると、そのような制限が存在するとは思いません。「表示角度」ごとに異なるAnimationDataオブジェクトを用意するだけです。
ザック人間

1

私は、アニメーションにいくつのフレームがあるかを知ってもらうでしょう。これらがどこにどのように保存されるかは、パフォーマンスの問題を除いて比較的重要ではありません(同じテクスチャーでそれらを必要とする場合があります)。フレームカウントに1を追加することはありません。deltaTime* animSpeedを追加し、表示するときにその値を整数に変換します。これにより、アニメーションの速度を遅くしたり速くしたりすることができ、フレームレートに依存しません。

したがって、スプライトには、それ自体を更新するアニメーションが含まれます。


0

各オブジェクトのフレーム数だけを保存しないのはなぜですか?個人的には、アニメーションのフレーム数をコンストラクターのオブジェクトに渡し、アニメーションのフレーム量を取り込む標準のAnimate()関数を用意しています。


0

それは実装に依存します。私のエンジンでは、Direct3DとDirectDrawの両方でアニメーションを作成します。

DirectDrawでは、1つの大きな画像を作成します。とにかく、すべてシステムメモリに保存され、最終的には1次元のデータブロックになります。

長所:

  • フレーム間を移動しやすい。開始ポインタを変更し、yごとにピッチ(合計画像幅)を追加すると、黄金色になります。

短所:

  • 1つのフレームを画面にコピーするだけではなく、手動でコピーする必要があります。

  • 巨大なメモリブロック。周囲のフレームにハスリングするとペナルティが生じます。

Direct3Dでは、個別のテクスチャを使用します。これは、デバイスのテクスチャの制限がわからないため、画像全体のサイズのテクスチャをサポートするかどうかもわからないためです。

長所:

  • フレームはすべて個別のエンティティであるため、画面に直接コピーできます。

短所:

  • メモリアライメントの不足。

0

、私のゲーム、私は私のスプライトベースクラス自体を描画する方法についての知識を与えてくれた、すべてのアニメーション要素は、その知識を継承する:等のアニメーションフレームの数と期間、画面上の位置、ゲームのメインループは、ちょうどすべてを反復処理しますスプライトのそれぞれ、それが適切と思われるように自分自身を描画するように求めます。かなりうまく機能しているようで、起動するのにもう少しモジュラーです:異なるアニメーションループ(またはさらに複雑な:複数のアニメーション状態)を持つ新しいスプライトを追加する場合、Animateに戻って書き直す必要はありません()追加の複雑さに対応するルーチン:

Dim Waves as Sprite
Dim Char as Sprite

Sub Animate()
     Char.update()
     Waves.update()
End Sub

スプライトのupdate()メソッドが呼び出されるたびに、前回と同じフレームを再描画するか、現在のアニメーションの次のフレームに移動するか、新しいアニメーションに変更するかなどを知っています。

これには、Animate()を呼び出す頻度のみが変更されるため、異なるクロック/プラットフォームレンダリング速度に対応するためにフレームレートをはるかに簡単に調整できるという利点もあります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.