我如何像《炉石传说》那样创建动画卡片图形?


9

在《炉石传说》游戏中,上面有带有动画图像的卡片。一些例子:

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

动画似乎由多种效果组成:

  • 粒子系统。
  • 精灵渐入渐出/旋转/旋转
  • 简单的滚动纹理
  • 变形效果,在示例1的斗篷和头发中非常明显。
  • 旋转的烟雾效果,示例1中的灯光和示例2中的绿色/紫色发光。

前三个元素很简单,我想知道后两个元素是如何完成的。甚至可以在游戏中实时完成,还是可以预先渲染动画?


1
它可能是预先录制的动画在卡正在播放..
格里姆肖

您可能有更好的机会在graphicdesign.stackexchange.com cos上看起来像Photoshop或AfterEffects,而不是渲染。
2014年

1
我不确定是否同意迁移该问题,但是我确实有后续问题,@ Appeltaart:(1)您是否对艺术创作感兴趣或对渲染艺术的代码感兴趣?(2)您是否特别询问在浏览器游戏中该如何完成?

我对是否-以及如何通过实时渲染实现这些效果最感兴趣。因此,我对代码最感兴趣。共识似乎是《炉石传说》本身使用了预先录制的动画。至于您的第二个问题,我不是想在浏览器游戏中实现,而是在iOS中实现。
Appeltaart 2014年

Answers:


7

我不知道它是否有意义,但道格的回答是对的

我只是想补充一点,我本人设法使用相同的资源完全按照自己在游戏中构建的动画来重新创建动画,请看这里

玛格尼

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

这正是我在寻找的东西,谢谢!您在哪里学习了这种技术,它叫什么(等离子?),还有其他资源(书/文章)吗?
Appeltaart

2
我实际上是自己弄清楚的,它类似于3D渲染中的顶点变形,但是您可以直接使用它们自身的像素进行游戏。有几种不同的技术在起作用,其中大多数是基本技术,我猜您正在寻找的是“位移贴图”,它通常被称为使用纹理来移动/位移顶点,但是在这里我使用了纹理来替换另一个纹理以获得风的效果。
丹尼尔·门德尔

嘿,丹!您是否将使用过的原始资产张贴在任何地方?您的演示链接现在处于非活动状态,并且回溯机器似乎未缓存图像。我已经将您的答案添加了书签一段时间,但从未花时间研究此问题。
布兰登席尔瓦

!几年前,我使用httrack保存文件。找到他们!经过您的许可,我会将它们发布到某个地方,或者如果您不再拥有它们,则可以传递文件,并且可以将它们保存在存储库中。
布兰登席尔瓦

@BrandonSilva是的,您可以发布它们,那太好了
Daniel Mendel

4

我想到了一些想法,它们的实现将完全取决于引擎,工具,最后取决于工作和内容管道。

雪碧动画

  1. 使用Photoshop和After Effects等工具创建动画
  2. 逐帧渲染为地图集(子画面)
  3. 通过代码应用动画
  4. 如果需要,使用适当的遮罩或透明背景在卡布局的顶部渲染。

影片动画

  1. 使用Photoshop和After Effects等工具创建动画
  2. 将该视频导出为游戏引擎可读的格式
  3. 通过代码播放动画
  4. 视需要使用适当的遮罩或透明背景在视频顶部渲染卡片布局

引擎内动画

  1. 使用Photoshop等工具为动画创建所有资产
  2. 使用所需的所有资产在引擎内部创建卡模型
  3. 使用其自定义动画编辑器使用引擎进行动画处理并保存
  4. 必要时通过代码播放动画

这是我知道并且已经使用过的三种动画类型。每个都有优点和缺点,在这种情况下,我更倾向于使用sprite和视频动画,因为它们的GPU占用较少。

在这种情况下,最简单的方法可能是正确的方法。


1
  • 一种方法是仅使用视频代替纹理。该视频必须事先准备好并且需要循环播放。

  • 另一种方法是将整个“角色,粒子,斗篷移动”场景渲染到缓冲区中,然后在帧渲染中代替纹理使用该场景。

我没有在3D引擎中实现这两种解决方案的经验,但是我认为这在2D引擎中都是可行的(例如,我可以在MOAI中做到这一点)。


1

这两个4&5都是通过UV在该区域上滚动纹理来完成的,也许在卡片上有一个稍微变形(以静态方式)的网格。血腥小鬼似乎还具有第二个纹理,该第二个纹理是第一个纹理的倍数,并且不会UV滚动。

总体而言,它们并不是昂贵的效果。他们只是不像他们乍看一样好。


4&5指的是什么?
Vaillancourt

“旋转的烟雾效果,示例1中的灯光和示例2中的绿色/紫色发光”。我猜想,变形效果要么是顶点移动的固定动画,要么是在运行时更改顶点的程序化动画。也可以是具有第二个UV滚动纹理引入的纹理样本偏差的着色器。
道格

0

使用2D骨架动画工具(例如Spine)几乎可以实现所有效果。精灵基本上是2D网格上的纹理。然后转换网格以使斗篷移动等。
请查看演示卷轴以获取此类效果的示例。http://esotericsoftware.com/spine-in-depth#Features具有大多数常见引擎/语言的运行时。类似的工具是Spriter:http ://www.brashmonkey.com

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.