Làm cách nào để tạo đồ họa thẻ hoạt hình như trong Hearthstone?

Trong trò chơi Hearthstone, có những lá bài với hình ảnh hoạt hình trên đó. Một vài ví dụ:

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

Các hình ảnh động dường như bao gồm nhiều hiệu ứng:

• Hệ thống hạt.
• Làm mờ dần các sprite trong và ngoài / xoay chúng
• Hoạ tiết cuộn đơn giản
• Một hiệu ứng méo, rất rõ ràng ở mũi và tóc của ví dụ 1.
• Hiệu ứng khói xoáy, ánh sáng trong ví dụ 1 và ánh sáng xanh lục / tím trong ví dụ 2.

Ba yếu tố đầu tiên là tầm thường, điều tôi muốn biết là làm thế nào hai yếu tố cuối cùng có thể được thực hiện. Điều này thậm chí có thể được thực hiện trong thời gian thực trong một trò chơi, hoặc chúng là hình ảnh động được kết xuất trước?

Tôi không biết nó có liên quan nữa không, nhưng câu trả lời của Doug đã đúng

Tôi chỉ muốn thêm rằng bản thân tôi đã quản lý để tạo lại hình ảnh động chính xác như chúng được xây dựng trong trò chơi mà nó tự sử dụng cùng một tài sản, hãy xem tại đây

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

Một số ý tưởng xuất hiện và việc thực hiện chúng sẽ phụ thuộc hoàn toàn vào công cụ, công cụ và cuối cùng là đường ống công việc và nội dung.

Hoạt hình Sprite

1. Tạo hoạt hình bằng các công cụ như Photoshop và After Effects
2. Kết xuất từng khung hình thành một tập bản đồ (tấm sprite)
3. Áp dụng hình ảnh động theo mã
4. Kết xuất bố cục thẻ trên đó bằng cách sử dụng mặt nạ trong suốt hoặc nền trong suốt nếu cần.

Video hoạt hình

1. Tạo hoạt hình bằng các công cụ như Photoshop và After Effects
2. Xuất video đó thành định dạng mà công cụ trò chơi có thể đọc được
3. Chơi hoạt hình bằng mã
4. Kết xuất bố cục thẻ trên đầu video bằng cách sử dụng mặt nạ trong suốt hoặc nền trong suốt nếu cần

Hoạt hình trong động cơ

1. Tạo tất cả các tài sản cho hoạt hình bằng các công cụ như Photoshop
2. Tạo mô hình thẻ bên trong động cơ với tất cả các tài sản cần thiết
3. Animate bằng cách sử dụng công cụ bằng trình chỉnh sửa hoạt hình tùy chỉnh của nó và lưu nó
4. Chơi hoạt hình bằng mã khi cần thiết

Đây là ba loại hoạt hình mà tôi biết và tôi đã làm việc cùng. Có những ưu và nhược điểm đối với từng người, và trong trường hợp cụ thể này, tôi thiên về sprite và hoạt hình video hơn, vì chúng ít sử dụng GPU hơn.

Trong những trường hợp như thế này, cách tiếp cận đơn giản nhất có lẽ là cách tiếp cận đúng.

• Một cách để làm điều đó là chỉ sử dụng một video thay cho kết cấu. Video đó sẽ phải được chuẩn bị trước và sẽ cần phải được lặp lại.

• Một cách khác là để toàn bộ cảnh "nhân vật, hạt, di chuyển mũi" được kết xuất vào một bộ đệm mà sau này trong kết xuất khung sẽ được sử dụng thay cho kết cấu.

Tôi không có bất kỳ kinh nghiệm nào về cách đạt được hai giải pháp này trong công cụ 3D nhưng tôi nghĩ rằng cả hai đều có thể trong công cụ 2D (tôi nghĩ rằng tôi có thể thực hiện công việc này trong MOAI chẳng hạn).

Cả 4 & 5 đều được thực hiện bằng cách cuộn UV một họa tiết trên khu vực, có thể có một lưới trên thẻ hơi bị méo (theo cách tĩnh). Imp máu dường như cũng có kết cấu thứ hai nhân lên kết cấu thứ nhất và không cuộn UV.

Nhìn chung, chúng không phải là hiệu ứng đắt tiền. Họ chỉ không tốt như cái nhìn đầu tiên.

Gần như tất cả các hiệu ứng có thể đạt được với các công cụ hoạt hình xương 2D như Spine. Một sprite về cơ bản là một kết cấu trên lưới 2D. Sau đó, lưới được chuyển đổi để làm cho mũi di chuyển, v.v.
Kiểm tra cuộn demo để biết ví dụ về các hiệu ứng như vậy. http://esotericsoftware.com/spine-in-depth#Features có thời gian chạy cho hầu hết các công cụ / ngôn ngữ phổ biến. Một công cụ tương tự là Spriter: http://www.brashmonkey.com