하스 스톤과 같은 애니메이션 카드 그래픽을 만들려면 어떻게해야합니까?

하스 스톤 게임에는 애니메이션 이미지가있는 카드가 있습니다. 몇 가지 예 :

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

애니메이션은 여러 효과로 구성된 것 같습니다.

• 입자 시스템.
• 스프라이트 페이드 인 / 아웃 / 회전
• 간단한 스크롤 텍스처
• 실시 예 1의 망토 및 모발에서 매우 명백한 왜곡 효과.
• 소용돌이 치는 연기 효과, 예 1의 빛과 예 2의 녹색 / 보라색 빛.

처음 세 요소는 사소한 것입니다. 내가 알고 싶은 것은 마지막 두 요소를 수행하는 방법입니다. 게임에서 실시간으로 수행 할 수 있습니까? 아니면 사전 렌더링 된 애니메이션입니까?

더 이상 관련이 있는지 모르겠지만 Doug 답변이 맞았습니다.

방금 게임에 내장 된 애니메이션과 동일한 에셋을 사용하여 애니메이션을 정확하게 재현 할 수 있다고 덧붙이고 싶었습니다.

마 그니 :

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. 필요한 경우 적절한 마스킹 또는 투명한 배경을 사용하여 비디오 위에 카드 레이아웃을 렌더링하십시오.

엔진 내 애니메이션

1. Photoshop과 같은 도구를 사용하여 애니메이션에 대한 모든 에셋 만들기
2. 필요한 모든 자산으로 엔진 내부에 카드 모델을 만듭니다.
3. 사용자 정의 애니메이션 편집기를 사용하여 엔진을 사용하여 애니메이션을 적용하고 저장
4. 필요할 때 코드로 애니메이션 재생

이것들은 내가 알고 작업 한 세 가지 유형의 애니메이션입니다. 각각의 장단점이 있으며,이 경우 GPU 집약도가 낮기 때문에 스프라이트 및 비디오 애니메이션에 더 관심이 있습니다.

이와 같은 경우 가장 간단한 방법이 올바른 방법 일 것입니다.

• 이를 수행하는 한 가지 방법은 텍스처 대신 비디오를 사용하는 것입니다. 해당 비디오는 미리 준비해야하며 반복되어야합니다.

• 또 다른 방법은 전체 "캐릭터, 입자, 케이프 이동"장면을 버퍼로 렌더링하여 나중에 프레임 렌더링에서 텍스처 대신 사용하는 것입니다.

3D 엔진에서 이러한 두 가지 솔루션을 달성하는 방법에 대한 경험이 없지만 두 가지 모두 2D 엔진에서 가능하다고 생각합니다 (예를 들어 MOAI 에서이 작업을 수행 할 수 있다고 생각합니다).

4 & 5는 모두 영역에서 텍스처를 UV 스크롤하여 수행되며, 카드 위에 약간 왜곡 된 (정적 방식으로) 메쉬가있을 수 있습니다. 블러드 임프도 첫 번째 텍스처를 곱하고 UV 스크롤하지 않는 두 번째 텍스처를 갖는 것 같습니다.

전반적으로, 그들은 비싼 효과가 아닙니다. 얼핏보기에는 좋지 않습니다.

Spine과 같은 2D 골격 애니메이션 도구를 사용하면 거의 모든 효과를 얻을 수 있습니다. 스프라이트는 기본적으로 2D 메쉬의 텍스처입니다. 메쉬는 케이프 등을 움직 이도록 변형됩니다
. 이러한 효과의 예는 데모 릴을 확인하십시오. http://esotericsoftware.com/spine-in-depth# 특징 가장 일반적인 엔진 / 언어에는 런타임이 있습니다. 비슷한 도구가 Spriter입니다 : http://www.brashmonkey.com