Як я можу створити графіку анімованих карток, як у Hearthstone?

У грі Hearthstone є картки з анімованими зображеннями на них. Кілька прикладів:

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

Здається, анімація складається з декількох ефектів:

• Системи частинок.
• Вицвітання спрайтів в / в / обертання їх
• Прості прокрутки текстур
• Ефект викривлення, дуже помітний на накидці та волоссі прикладу 1.
• Ефекти диму, що крутяться, світло в прикладі 1 і зелене / фіолетове світіння в прикладі 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;
}

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

Деякі ідеї приходять на думку, і їх реалізація повністю залежатиме від двигуна, інструментів і, нарешті, роботи та контенту контенту.

Спрайт-анімація

1. Створіть анімацію за допомогою таких інструментів, як Photoshop та After Effects
2. Відображайте кадр за кадром в атлас (лист спрайту)
3. Застосуйте анімацію за кодом
4. Візьміть макет картки поверх того, використовуючи належне маскування або прозорий фон, якщо потрібно.

Відеоанімація

1. Створіть анімацію за допомогою таких інструментів, як Photoshop та After Effects
2. Експортуйте це відео у формат, читаний ігровим механізмом
3. Відтворення анімації за кодом
4. Візуалізуйте макет картки вгорі відео, використовуючи належне маскування або прозорий фон, якщо потрібно

In-Engine анімація

1. Створіть усі активи для анімації за допомогою інструментів, таких як Photoshop
2. Створіть модель картки всередині двигуна з усіма необхідними активами
3. Анімуйте за допомогою двигуна за допомогою спеціального редактора анімації та збережіть його
4. Відтворюйте анімацію за кодом, коли це необхідно

Це три типи анімації, про які я знаю і з якими працював. У кожного є плюси і мінуси, і в цьому конкретному випадку я більше схильний до спрайту та відео-анімації, оскільки вони менш інтенсивні для GPU.

У таких випадках як найпростіший підхід, мабуть, є правильним.

• Один із способів зробити це - просто використовувати відео замість текстури. Це відео потрібно буде заздалегідь підготувати і його потрібно буде циклічно.

• Інший спосіб полягає в тому, щоб вся сцена «персонажів, частинок, переміщення накидки» була винесена в буфер, який пізніше в кадрі візуалізується замість текстури.

Я не маю досвіду, як досягти цих двох рішень у тривимірному двигуні, але я думаю, що обидва можливі в двовимірному двигуні (я думаю, я можу зробити цю роботу в MOAI, наприклад).

Обидва 4 та 5 виконані ультрафіолетовою прокруткою текстури по ділянці, можливо, маючи сітку над картою, яка дещо спотворена (статичним способом). Здається, кров'яна криза також має другу текстуру, яка кратна першій текстурі і не прокручується УФ-променем.

В цілому, це недешеві ефекти. Вони просто не такі гарні, як виглядають з першого погляду.

Практично всі ефекти можна досягти за допомогою 2D інструментів скелетної анімації, таких як хребет. Спрайт - це в основному текстура на 2D-сітці. Потім сітка трансформується, щоб змусити мис рухатися тощо.
Перегляньте демонстраційну котушку для прикладів таких ефектів. http://esotericsoftware.com/spine-in-depth#Features існує час виконання для більшості поширених двигунів / мов. Подібним інструментом є Spriter: http://www.brashmonkey.com