Como posso criar gráficos de cartões animados como no Hearthstone?

9

No jogo Hearthstone, existem cartas com imagens animadas. Alguns exemplos:

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

As animações parecem ser compostas de múltiplos efeitos:

  • Sistemas de partículas.
  • Desvanecendo sprites dentro e fora / girando-os
  • Texturas de rolagem simples
  • Um efeito de distorção, muito evidente na capa e no cabelo do exemplo 1.
  • Efeitos de fumaça em turbilhão, a luz no exemplo 1 e o brilho verde / roxo no exemplo 2.

Os três primeiros elementos são triviais, o que eu gostaria de saber é como os dois últimos podem ser feitos. Isso pode ser feito em tempo real em um jogo ou são animações pré-renderizadas?

Appeltaart
fonte
11
Suas animações provavelmente pré gravados sendo jogado nos cartões ..
Grimshaw
Você pode ter uma chance melhor em graphicdesign.stackexchange.com, que se parece com um Photoshop ou AfterEffects, não com a renderização.
Kromster 27/02
11
Não tenho certeza se concordo em migrar a pergunta, mas tenho perguntas de acompanhamento para você, @Appeltaart: (1) você está interessado em como a arte é feita ou no código que a processa? ? (2) Você está perguntando especificamente como isso pode ser conseguido em um jogo de navegador?
Estou mais interessado em saber se - e como esses efeitos podem ser alcançados com a renderização em tempo real. Como tal, estou mais interessado no código. O consenso parece ser que o próprio Hearthstone usa animações pré-gravadas. Quanto à sua segunda pergunta, não pretendo implementar isso em um jogo de navegador, mas no iOS.
Appeltaart 27/02

Respostas:

7

Não sei mais se é relevante, mas a resposta de Doug acertou

Eu só queria acrescentar que eu mesmo consegui recriar as animações exatamente como elas são construídas no jogo usando os mesmos recursos, dê uma olhada aqui

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;
}
Daniel Mendel
fonte
Era exatamente isso que eu procurava, obrigado! Onde você aprendeu essa técnica, como é chamada (plasma?), E existem outros recursos nela (livros / artigos)?
Appeltaart 4/08/15
2
Na verdade, eu descobri por mim mesma, é semelhante a transformar vértices na renderização 3D, mas você brinca diretamente com os pixels em si. Existem algumas técnicas diferentes em jogo, a maioria delas é básica, o que eu acho que você está procurando é chamado de Mapeamento de deslocamento, é conhecido principalmente como usar uma textura para mover / deslocar vértices, mas aqui eu usei uma textura para desloque outra textura para obter o efeito do vento.
Daniel Mendel
Hey Dan! Você tem os ativos originais que você usou postados em algum lugar? Seus links de demonstração estão inativos agora e a máquina de recuperação não parece armazenar em cache as imagens. Recebi sua resposta marcada por um bom tempo, mas nunca investi tempo para estudá-la.
Brandon Silva
Woot! Eu usei o httrack para salvar os arquivos, anos atrás. Encontrei-os! Com sua permissão, eu os publicarei em algum lugar ou posso passar os arquivos se você não os tiver mais, e você pode salvá-los em um repositório ou algo assim.
21418 Brandon Silva
@BrandonSilva Sim, você pode publicá-las, isso seria ótimo #
Daniel Mendel
4

Algumas idéias vêm à mente e sua implementação dependerá inteiramente do mecanismo, das ferramentas e, finalmente, do pipeline de trabalho e conteúdo.

Animação Sprite

  1. Crie a animação usando ferramentas como Photoshop e After Effects
  2. Renderizar quadro a quadro em um atlas (folha de sprite)
  3. Aplique a animação por código
  4. Renderize o layout do cartão em cima dele usando o mascaramento adequado ou o fundo transparente, se necessário.

Animação de vídeo

  1. Crie a animação usando ferramentas como Photoshop e After Effects
  2. Exporte esse vídeo para um formato legível pelo mecanismo de jogo
  3. Reproduzir a animação por código
  4. Renderize o layout do cartão na parte superior do vídeo usando o mascaramento adequado ou o fundo transparente, se necessário

Animação no mecanismo

  1. Crie todos os ativos para a animação usando ferramentas como o Photoshop
  2. Crie o modelo do cartão dentro do mecanismo com todos os ativos necessários
  3. Anime usando o mecanismo usando seu editor de animação personalizado e salve-o
  4. Reproduzir animação por código quando necessário

Estes são os três tipos de animação que eu conheço e com quem trabalhei. Existem prós e contras para cada um e, nesse caso em particular, estou mais inclinado a sprites e animações em vídeo, porque são menos intensivos em GPU.

Em casos como este, a abordagem mais simples é provavelmente a abordagem correta.

reefaktor
fonte
1
  • Uma maneira de fazer isso é usar apenas um vídeo no lugar de uma textura. Esse vídeo terá que ser preparado com antecedência e precisará estar em loop.

  • Outra maneira é fazer com que toda a cena "caractere, partículas, movimento da capa" seja transformada em um buffer que mais tarde na renderização do quadro seja usada no lugar da textura.

Não tenho nenhuma experiência em como obter essas duas soluções em um mecanismo 3D, mas acho que ambas são possíveis em um mecanismo 2D (acho que posso fazer isso funcionar no MOAI, por exemplo).

Kostas
fonte
1

Tanto o 4 como o 5 são feitos rolando uma textura UV sobre a área, talvez com uma malha sobre o cartão ligeiramente distorcida (de maneira estática). O diabrete do sangue também parece ter uma segunda textura que multiplica a primeira textura e não faz rolagem UV.

No geral, eles não são efeitos caros. Eles simplesmente não são tão bons quanto parecem à primeira vista.

Doug
fonte
A que 4 e 5 estão se referindo?
Vaillancourt
Os "Efeitos de fumaça em turbilhão, a luz no exemplo 1 e o brilho verde / roxo no exemplo 2". Eu diria que o efeito de distorção é uma animação enlatada de vértices em movimento ou uma alteração de procedimento em tempo de execução. Ou poderia ser um shader com um viés de amostra de textura introduzido por uma segunda textura de rolagem UV.
Doug
0

Quase todos os efeitos podem ser alcançados com as ferramentas de animação esquelética 2D, como o Spine. Um sprite é basicamente uma textura em uma malha 2D. A malha é então transformada para fazer a capa se mover etc.
Confira o demo reel para exemplos de tais efeitos. http://esotericsoftware.com/spine-in-depth#Features existem tempos de execução para os mecanismos / idiomas mais comuns. Uma ferramenta semelhante é o Spriter: http://www.brashmonkey.com

Felsir
fonte