Bagaimana saya bisa membuat grafik kartu animasi seperti di Hearthstone?

Di gim Hearthstone, ada kartu dengan gambar animasi di atasnya. Beberapa contoh:

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

Animasi tampaknya terdiri dari beberapa efek:

• Sistem partikel.
• Spade fading masuk dan keluar / memutarnya
• Tekstur gulir sederhana
• Efek distorsi, sangat jelas di jubah dan rambut contoh 1.
• Efek asap yang berputar-putar, cahaya pada contoh 1 dan cahaya hijau / ungu pada contoh 2.

Tiga elemen pertama itu sepele, yang ingin saya ketahui adalah bagaimana dua elemen terakhir dapat dilakukan. Apakah ini dapat dilakukan secara realtime dalam game, atau apakah itu animasi yang sudah dirender?

Saya tidak tahu apakah itu relevan lagi, tetapi jawaban Doug sudah benar

Saya hanya ingin menambahkan bahwa saya sendiri berhasil membuat ulang animasi persis seperti yang dibangun dalam game itu sendiri menggunakan aset yang sama, lihat di sini

Magni :

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;
}

Medivh :

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;
}

Beberapa ide muncul di benak dan implementasinya akan bergantung sepenuhnya pada mesin, peralatan, dan, akhirnya, pipa kerja dan konten.

Animasi sprite

1. Buat animasi menggunakan alat-alat seperti Photoshop dan After Effects
2. Render bingkai demi bingkai menjadi atlas (sprite sheet)
3. Terapkan animasi dengan kode
4. Buat tata letak kartu di atas itu menggunakan masking yang tepat atau latar belakang transparan jika diperlukan.

Animasi video

1. Buat animasi menggunakan alat-alat seperti Photoshop dan After Effects
2. Ekspor video itu ke dalam format yang dapat dibaca oleh mesin gim
3. Mainkan animasi dengan kode
4. Jadikan tata letak kartu di atas video menggunakan masking yang tepat atau latar belakang transparan jika diperlukan

Animasi dalam mesin

1. Buat semua aset untuk animasi menggunakan alat seperti Photoshop
2. Buat model kartu di dalam mesin dengan semua aset yang dibutuhkan
3. Animate menggunakan mesin menggunakan editor animasi khusus dan simpan
4. Mainkan animasi dengan kode bila perlu

Ini adalah tiga jenis animasi yang saya tahu dan saya telah bekerja dengannya. Ada pro dan kontra untuk masing-masing, dan dalam kasus khusus ini saya lebih cenderung animasi sprite dan video, karena mereka kurang intensif GPU.

Dalam kasus seperti ini, pendekatan yang paling sederhana mungkin adalah pendekatan yang tepat.

• Salah satu cara untuk melakukannya adalah dengan hanya menggunakan video sebagai pengganti tekstur. Video itu harus dipersiapkan sebelumnya dan harus diulang.

• Cara lain adalah membuat seluruh adegan "karakter, partikel, tanjung bergerak" dirender menjadi buffer yang kemudian dalam rendering bingkai digunakan di tempat tekstur.

Saya tidak punya pengalaman tentang cara mencapai dua solusi ini dalam mesin 3D tapi saya pikir keduanya mungkin dalam mesin 2D (saya pikir saya bisa membuat ini bekerja di MOAI misalnya).

Kedua 4 & 5 dilakukan dengan menggulirkan UV tekstur di atas area, mungkin memiliki mesh di atas kartu yang sedikit terdistorsi (dengan cara statis). Imp darah tampaknya juga memiliki tekstur kedua yang melipatgandakan tekstur pertama dan tidak menggulirkan UV.

Secara keseluruhan, mereka bukan efek mahal. Mereka hanya tidak sebagus pandangan pertama.

Hampir semua efek dapat dicapai dengan alat animasi kerangka 2D seperti Spine. Sprite pada dasarnya adalah tekstur pada mesh 2D. Mesh kemudian ditransformasikan untuk membuat jubah bergerak dll.
Lihat demo reel untuk contoh efek seperti itu. http://esotericsoftware.com/spine-in-depth#Fitur ada runtime untuk sebagian besar mesin / bahasa umum. Alat serupa adalah Spriter: http://www.brashmonkey.com