Как я могу создать анимационную карту, как в 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;
}

Медивх :

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.

В случаях, подобных этому, самый простой подход, вероятно, правильный.

• Один из способов сделать это - просто использовать видео вместо текстуры. Это видео должно быть подготовлено заранее и должно быть зациклено.

• Другой способ - сделать всю сцену «персонаж, частицы, движущийся мыс» визуализированной в буфер, который позже при рендеринге кадра будет использоваться вместо текстуры.

У меня нет никакого опыта в достижении этих двух решений в 3D-движке, но я думаю, что оба возможны в 2D-движке (думаю, я могу сделать эту работу, например, в MOAI).

Оба варианта 4 и 5 выполняются с помощью УФ-прокрутки текстуры по области, возможно, с сеткой на карте, которая слегка искажена (статическим способом). Кровавый черт, похоже, также имеет вторую текстуру, которая умножает первую текстуру и не прокручивает УФ.

В целом, это не дорогие эффекты. Они просто не так хороши, как выглядят на первый взгляд.

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