ฉันจะสร้างกราฟิกการ์ดแบบเคลื่อนไหวได้ใน Hearthstone ได้อย่างไร

ในเกม Hearthstone มีการ์ดที่มีภาพเคลื่อนไหวอยู่ด้วย ตัวอย่างบางส่วน:

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

ดูเหมือนว่าภาพเคลื่อนไหวจะประกอบด้วยเอฟเฟกต์หลายอย่าง:

• ระบบอนุภาค
• จางหายไปสไปรต์เข้าและออก / หมุนพวกเขา
• พื้นผิวเลื่อนที่เรียบง่าย
• เอฟเฟกต์การบิดเบือนชัดเจนมากในแหลมและผมของตัวอย่างที่ 1
• เอฟเฟกต์การหมุนวนแสงในตัวอย่างที่ 1 และแสงสีเขียว / สีม่วงในตัวอย่างที่ 2

องค์ประกอบสามประการแรกนั้นเล็กน้อยสิ่งที่ฉันอยากรู้ก็คือวิธีที่สองสิ่งสุดท้ายสามารถทำได้ สามารถทำได้แบบเรียลไทม์ในเกมหรือภาพเคลื่อนไหวที่แสดงล่วงหน้าหรือไม่

ฉันไม่รู้ว่ามันเกี่ยวข้องกันอีกหรือไม่ แต่คำตอบของดั๊กทำให้ถูกต้อง

ฉันแค่อยากจะเพิ่มว่าตัวฉันเองจัดการเพื่อสร้างภาพเคลื่อนไหวให้ตรงตามที่พวกเขาสร้างขึ้นในเกมด้วยตนเองโดยใช้เนื้อหาเดียวกันลองดูที่นี่

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

ความคิดบางอย่างอยู่ในใจและการใช้งานของพวกเขาจะขึ้นอยู่กับเครื่องยนต์เครื่องมือและในที่สุดการทำงานและการส่งเนื้อหา

เทพดานิเมชั่น

1. สร้างภาพเคลื่อนไหวโดยใช้เครื่องมือเช่น Photoshop และ After Effects
2. เรนเดอร์เฟรมทีละเฟรมเป็นแอตลาส (แผ่นสไปรต์)
3. ใช้ภาพเคลื่อนไหวตามรหัส
4. แสดงเลย์เอาต์ของการ์ดโดยใช้การปิดบังที่เหมาะสมหรือพื้นหลังโปร่งใสหากต้องการ

ภาพเคลื่อนไหววิดีโอ

1. สร้างภาพเคลื่อนไหวโดยใช้เครื่องมือเช่น Photoshop และ After Effects
2. ส่งออกวิดีโอนั้นเป็นรูปแบบที่สามารถอ่านได้โดยโปรแกรมเกม
3. เล่นภาพเคลื่อนไหวตามรหัส
4. แสดงเลย์เอาต์การ์ดที่ด้านบนของวิดีโอโดยใช้มาสก์ที่เหมาะสมหรือพื้นหลังโปร่งใสหากจำเป็น

ภาพเคลื่อนไหวในเครื่องยนต์

1. สร้างสินทรัพย์ทั้งหมดสำหรับภาพเคลื่อนไหวโดยใช้เครื่องมือเช่น Photoshop
2. สร้างรูปแบบการ์ดภายในเครื่องยนต์โดยใช้ทรัพย์สินทั้งหมดที่จำเป็น
3. เคลื่อนไหวโดยใช้เอ็นจิ้นโดยใช้แอนิเมชั่นแก้ไขที่กำหนดเองและบันทึกไว้
4. เล่นภาพเคลื่อนไหวตามรหัสเมื่อจำเป็น

นี่เป็นอนิเมชั่นสามประเภทที่ฉันรู้จักและฉันทำงานด้วย มีข้อดีข้อเสียสำหรับแต่ละคนและในกรณีนี้ฉันมีแนวโน้มที่จะสไปรต์และภาพเคลื่อนไหววิดีโอเพราะพวกเขาใช้ GPU น้อยลง

ในกรณีเช่นนี้วิธีที่ง่ายที่สุดน่าจะเป็นวิธีที่เหมาะสม

• วิธีหนึ่งในการทำเช่นนั้นก็คือใช้วิดีโอแทนพื้นผิว วิดีโอนั้นจะต้องเตรียมล่วงหน้าและจะต้องวนซ้ำ

• อีกวิธีคือการให้ฉาก "ตัวละคร, อนุภาค, การเคลื่อนที่เคปปิ้ง" ทั้งหมดกลายเป็นบัฟเฟอร์ซึ่งต่อมาในการเรนเดอร์เฟรมจะถูกนำมาใช้แทนที่พื้นผิว

ฉันไม่มีประสบการณ์เกี่ยวกับวิธีการแก้ปัญหาทั้งสองนี้ในเครื่องมือ 3D แต่ฉันคิดว่าทั้งสองเป็นไปได้ในเครื่องมือ 2D (ฉันคิดว่าฉันสามารถทำงานใน MOAI ได้เป็นตัวอย่าง)

ทั้ง 4 และ 5 ทำโดยการเลื่อนพื้นผิว UV ไปทั่วพื้นที่อาจมีตาข่ายอยู่เหนือการ์ดที่บิดเบี้ยวเล็กน้อย (ในลักษณะคงที่) ดูเหมือนว่าเลือดจะมีพื้นผิวที่สองที่ทวีคูณพื้นผิวแรกและไม่เลื่อนรังสียูวี

โดยรวมแล้วพวกเขาไม่ได้มีผลกระทบราคาแพง พวกเขาไม่ดีเท่าที่พวกเขามองแวบแรก

เอฟเฟ็กต์เกือบทั้งหมดสามารถทำได้ด้วยเครื่องมือแอนิเมชั่นโครงกระดูก 2 มิติเช่น Spine สไปรท์นั้นเป็นพื้นผิวของตาข่าย 2 มิติ จากนั้นตาข่ายจะถูกเปลี่ยนเพื่อให้แหลมเคลื่อนย้ายเป็นต้น
ลองดูตัวอย่างของเอฟเฟกต์ดังกล่าว http://esotericsoftware.com/spine-in-depth#Featuresมี runtimes สำหรับเอ็นจิ้น / ภาษาส่วนใหญ่ เครื่องมือที่คล้ายกันคือ Spriter: http://www.brashmonkey.com