ハースストーンのようにアニメーションカードグラフィックスを作成するにはどうすればよいですか？

ゲームハースストーンには、アニメーション画像が描かれたカードがあります。いくつかの例：

1. http://www.hearthhead.com/card=281/argent-commander
2. http://www.hearthhead.com/card=469/blood-imp

アニメーションは複数の効果で構成されているようです：

• パーティクルシステム。
• スプライトのフェードイン/アウト/回転
• シンプルなスクロールテクスチャ
• 例1のケープとヘアで非常に明らかな歪み効果。
• 渦巻く煙の効果、例1のライト、例2の緑/紫のグロー。

最初の3つの要素は取るに足らないものです。知りたいのは、最後の2つをどのように実行できるかです。これはゲームでリアルタイムで行うこともできますか、それとも事前にレンダリングされたアニメーションですか？

関連性があるかどうかはわかりませんが、ダグの答えは正しいです

私が追加したかったのは、私がアニメーションを同じアセットを使用してゲーム内で構築したとおりにアニメーションを正確に再作成したことです。ここを見てください

マグニ：

precision highp float;

uniform float uTime;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
varying vec2 texCoords;

void main(void) {
  float t = uTime;
  vec3 mask = texture2D(uSampler1,texCoords).rgb;
  vec4 img = texture2D(uSampler0,texCoords);
  img.rg*=1.1;
  vec2 flow = texture2D(uSampler3,texCoords).gr;
  flow.y+=t*3.;
  vec4 plas = texture2D(uSampler2,flow*1.2) * mask.r;
  plas *= 15.5;
  plas *= vec4(0.239, 0.224,0.488,1.);
  vec2 ct = texCoords;
  ct.y -=t*0.5;
  vec4 clouds = texture2D(uSampler4,ct*2.);
  float clouds_a = clouds.a;
  clouds *= 4.5;
  clouds *= vec4(0.275,0.23,0.161,1.);
  clouds_a *= mask.b;
  img += clouds * mask.b;
  img += plas * mask.r ;
  img += (sin(t*15.)+1.) * mask.g * vec4(0.239, 0.224,0.488,1.)*2.;
  ct.x += t * 0.5;
  vec4 clouds_overall = texture2D(uSampler5,ct  * 0.5);
  clouds_overall *= vec4(0.275,0.23,0.161,1.);
  gl_FragColor = img +clouds_overall;
}

メディフ：

precision highp float;

uniform float uTime;
uniform sampler2D uSampler0;
uniform sampler2D uSampler1;
uniform sampler2D uSampler2;
uniform sampler2D uSampler3;
uniform sampler2D uSampler4;
uniform sampler2D uSampler5;
varying vec2 texCoords;

void main(void) {
  float t = uTime;
  vec2 tc = texCoords;
  tc.x-=t*2.;
  vec4 mask = texture2D(uSampler1,texCoords);
  float bump = texture2D(uSampler4,tc*0.5).r; 
  vec4 img = texture2D(uSampler0,vec2(texCoords.x,texCoords.y+bump* 0.055 * mask.g));
  tc = texCoords;
  tc.x-=0.05;
  tc.y+= 0.05;
  vec2 flow = texture2D(uSampler3,tc).rg;
  flow.y+=t;
  flow.y*=2.;
  vec4 plasma = texture2D(uSampler2,flow*1.5);
  plasma.rgb *= vec3(0.52,0.26,0.54);
  plasma *= 3.;
  flow = texture2D(uSampler5,texCoords).rg;
  flow.g+=t;
  vec4 plasma2 = texture2D(uSampler2,flow);
  plasma2 *= 4.;
  plasma2.rgb *= vec3(0.52,0.26,0.54);
  gl_FragColor =img+plasma*mask.r+bump*mask.a*0.35+plasma2*mask.b;
}

いくつかのアイデアが思い浮かび、それらの実装はエンジン、ツール、そして最終的には作業とコンテンツのパイプラインに完全に依存します。

スプライトアニメーション

1. PhotoshopやAfter Effectsなどのツールを使用してアニメーションを作成する
2. フレームごとにアトラス（スプライトシート）にレンダリングする
3. コードでアニメーションを適用する
4. 必要に応じて、適切なマスキングまたは透明な背景を使用して、その上にカードレイアウトをレンダリングします。

ビデオアニメーション

1. PhotoshopやAfter Effectsなどのツールを使用してアニメーションを作成する
2. そのビデオをゲームエンジンで読み取り可能な形式にエクスポートする
3. コードでアニメーションを再生する
4. 必要に応じて、適切なマスキングまたは透明な背景を使用して、ビデオの上にカードレイアウトをレンダリングします

エンジン内アニメーション

1. Photoshopなどのツールを使用してアニメーションのすべてのアセットを作成する
2. 必要なすべてのアセットを使用して、エンジン内にカードモデルを作成します
3. カスタムアニメーションエディターを使用してエンジンを使用してアニメーション化し、保存します
4. 必要に応じてコードでアニメーションを再生する

これらは、私が知っていて、これまでに使用した3種類のアニメーションです。それぞれに長所と短所があり、この特定のケースでは、GPUにあまり負荷がかからないため、私はスプライトとビデオアニメーションに傾倒しています。

このような場合、最も簡単なアプローチはおそらく正しいアプローチです。

• そのための1つの方法は、テクスチャの代わりにビデオを使用することです。そのビデオは事前に準備する必要があり、ループする必要があります。

• もう1つの方法は、「キャラクタ、パーティクル、ケープの移動」シーン全体をバッファにレンダリングして、後でフレームレンダリングでテクスチャの代わりに使用することです。

3Dエンジンでこれらの2つのソリューションを実現する方法についての経験はありませんが、2Dエンジンでは両方が可能だと思います（たとえば、MOAIでこれを機能させることができると思います）。

4と5の両方は、領域上でテクスチャをUVスクロールすることによって行われます。おそらく、（静的な方法で）少し歪んだカード上にメッシュを配置します。ブラッドインプには、最初のテクスチャを倍増させ、UVスクロールしない2番目のテクスチャもあるようです。

全体として、それらは高価な効果ではありません。彼らは一見しただけでは良くありません。

ほぼすべての効果は、Spineなどの2D骨格アニメーションツールで実現できます。スプライトは基本的に2Dメッシュ上のテクスチャです。次に、メッシュを変換して岬を動かし
ます。そのような効果の例については、デモリールを確認してください。http://esotericsoftware.com/spine-in-depth#Features最も一般的なengines / languagesのランタイムがあります。同様のツールがSpriterです。http：//www.brashmonkey.com