Hearthstone'da olduğu gibi nasıl animasyonlu kart grafikleri oluşturabilirim?

Hearthstone oyununda, üzerinde hareketli görüntüler bulunan kartlar var. Birkaç örnek:

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

Animasyonlar birden fazla efektten oluşuyor gibi görünüyor:

• Parçacık sistemleri.
• Spriteları içeri ve dışarı solma / döndürme
• Basit kaydırma dokuları
• Örnek 1'in pelerininde ve saçında çok belirgin bir bozulma etkisi.
• Dönen duman efektleri, örnek 1'deki ışık ve örnek 2'deki yeşil / mor parıltı.

İlk üç unsur önemsiz, bilmek istediğim son ikisinin nasıl yapılabileceğidir. Bu bir oyunda gerçek zamanlı olarak yapılabilir mi, yoksa önceden oluşturulmuş animasyonlar mı?

Artık alakalı olup olmadığını bilmiyorum, ama Doug cevap verdi

Sadece kendimi aynı varlıkları kullanarak oyunda oluşturuldukları gibi animasyonları yeniden oluşturmayı başardığımı eklemek istedim, buraya bir göz atın

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

Bazı fikirler akla geliyor ve bunların uygulanması tamamen motora, araçlara ve son olarak iş ve içerik boru hattına bağlı olacak.

Sprite animasyonu

1. Photoshop ve After Effects gibi araçları kullanarak animasyonu oluşturun
2. Kare kare atlas (hareketli sayfa) haline getirme
3. Animasyonu koda göre uygulama
4. Gerekirse uygun maskeleme veya saydam arka planı kullanarak kart düzenini bunun üstüne yerleştirin.

Video animasyonu

1. Photoshop ve After Effects gibi araçları kullanarak animasyonu oluşturun
2. Bu videoyu oyun motoru tarafından okunabilecek bir biçime dışa aktarın
3. Animasyonu koda göre oynat
4. Gerekirse uygun maskeleme veya saydam arka planı kullanarak kart düzenini videonun üzerine yerleştirin

Motor İçi animasyon

1. Photoshop gibi araçları kullanarak animasyon için tüm varlıkları oluşturun
2. Kart modelini motorun içinde gerekli tüm varlıkları kullanarak oluşturun
3. Özel animasyon düzenleyicisini kullanarak motoru kullanarak canlandırın ve kaydedin
4. Animasyonu gerektiğinde koda göre oynat

Bunlar, bildiğim ve birlikte çalıştığım üç animasyon türü. Her biri için artıları ve eksileri var ve bu durumda sprite ve video animasyonuna daha eğilimliyim, çünkü daha az GPU yoğunluğu var.

Bu gibi durumlarda, en basit yaklaşım muhtemelen doğru yaklaşımdır.

• Bunu yapmanın bir yolu, videoyu doku yerine kullanmaktır. Bu video önceden hazırlanmalı ve döngü halinde olmalıdır.

• Diğer bir yol, tüm "karakter, parçacıklar, hareketli burun" sahnesinin, daha sonra çerçeve oluşturmada doku yerine kullanıldığı bir tampon haline getirilmesidir.

Bu iki çözümü bir 3D motorda nasıl elde edeceğime dair hiçbir deneyimim yok, ancak her ikisinin de bir 2D motorda mümkün olduğunu düşünüyorum (bence bu işi örneğin MOAI'de yapabilirim).

Her ikisi de 4 ve 5, UV'nin alan üzerinde bir doku kaydırmasıyla yapılır, belki de kartın üzerinde biraz bozulmuş (statik bir şekilde) bir ağa sahiptir. Kan implantı da ilk dokuyu çoğaltan ve UV kaydırma yapmayan ikinci bir dokuya sahip gibi görünüyor.

Genel olarak, pahalı etkileri yoktur. İlk bakışta göründükleri kadar iyi değiller.

Neredeyse tüm efektler, Omurga gibi 2D iskelet animasyon araçlarıyla elde edilebilir. Sprite temel olarak 2B bir kafes üzerindeki bir dokudır. Ağ daha sonra pelerin hareket ettirilmesi vb. İçin dönüştürülür
. Bu gibi etkilerin örnekleri için demo makarasına bakın. http://esotericsoftware.com/spine-in-depth#Özellikler en yaygın motorlar / diller için çalışma zamanları vardır. Benzer bir araç da Spriter: http://www.brashmonkey.com