Jak mogę tworzyć animowane grafiki kart jak w Hearthstone?

W grze Hearthstone znajdują się karty z animowanymi obrazami. Kilka przykładów:

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

Wydaje się, że animacje składają się z wielu efektów:

• Systemy cząstek
• Zanikające duszki wchodzące i wychodzące / obracające je
• Proste przewijane tekstury
• Efekt zniekształcenia, bardzo widoczny w pelerynie i włosach z przykładu 1.
• Wirujące efekty dymu, światło w przykładzie 1 i zielono-fioletowa poświata w przykładzie 2.

Pierwsze trzy elementy są trywialne. Chciałbym wiedzieć, jak można zrobić dwa ostatnie. Czy można to zrobić w czasie rzeczywistym w grze, czy są to wstępnie renderowane animacje?

Nie wiem, czy ma to znaczenie, ale odpowiedź Douga ma rację

Chciałem tylko dodać, że sam udało mi się odtworzyć animacje dokładnie tak, jak są one wbudowane w grę samodzielnie przy użyciu tych samych zasobów, spójrz tutaj

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

Przychodzą mi na myśl niektóre pomysły, a ich wdrożenie będzie zależeć całkowicie od silnika, narzędzi, a wreszcie od pracy i potoku treści.

Animacja duszka

1. Utwórz animację za pomocą narzędzi takich jak Photoshop i After Effects
2. Renderuj klatka po klatce w atlas (arkusz dusz)
3. Zastosuj animację według kodu
4. W razie potrzeby zrenderuj układ karty za pomocą odpowiedniego maskowania lub przezroczystego tła.

Animacja wideo

1. Utwórz animację za pomocą narzędzi takich jak Photoshop i After Effects
2. Wyeksportuj ten film do formatu czytelnego dla silnika gry
3. Odtwórz animację za pomocą kodu
4. Renderuj układ karty na górze filmu, używając w razie potrzeby odpowiedniego maskowania lub przezroczystego tła

Animacja w silniku

1. Utwórz wszystkie zasoby animacji za pomocą narzędzi takich jak Photoshop
2. Utwórz model karty w silniku ze wszystkimi potrzebnymi zasobami
3. Animuj za pomocą silnika za pomocą niestandardowego edytora animacji i zapisz go
4. W razie potrzeby odtwarzaj animację według kodu

Są to trzy rodzaje animacji, które znam i nad którymi pracowałem. Są zalety i wady dla każdego z nich, aw tym konkretnym przypadku jestem bardziej skłonny do tworzenia sprite'ów i animacji wideo, ponieważ są one mniej intensywne na GPU.

W przypadkach takich jak ten najprostsze podejście jest prawdopodobnie właściwym podejściem.

• Jednym ze sposobów na to jest użycie wideo zamiast tekstury. Ten film będzie musiał zostać przygotowany wcześniej i musi być zapętlony.

• Innym sposobem jest przeniesienie całej sceny „charakter, cząstki, ruch peleryny” do bufora, który później w renderowaniu klatek zostanie wykorzystany zamiast tekstury.

Nie mam doświadczenia w tym, jak osiągnąć te dwa rozwiązania w silniku 3D, ale myślę, że oba są możliwe w silniku 2D (myślę, że mogę to zrobić na przykład w MOAI).

Zarówno 4, jak i 5 są wykonywane przez UV przewijanie tekstury nad obszarem, może mieć siatkę na karcie, która jest lekko zniekształcona (w sposób statyczny). Wydaje się, że chochlik ma również drugą teksturę, która zwielokrotnia pierwszą teksturę i nie przewija się UV.

Ogólnie rzecz biorąc, nie są to drogie efekty. Po prostu nie są tak dobre, jak wyglądają na pierwszy rzut oka.

Prawie wszystkie efekty można uzyskać za pomocą narzędzi do animacji szkieletowych 2D, takich jak kręgosłup. Duszek jest w zasadzie teksturą na siatce 2D. Siatka jest następnie przekształcana, aby przylądek poruszał się itp.
Sprawdź szpulę demonstracyjną, aby zobaczyć przykłady takich efektów. http://esotericsoftware.com/spine-in-depth#Features Istnieją środowiska wykonawcze dla większości popularnych silników / języków. Podobne narzędzie to Spriter: http://www.brashmonkey.com