在《炉石传说》游戏中,上面有带有动画图像的卡片。一些例子:
动画似乎由多种效果组成:
- 粒子系统。
- 精灵渐入渐出/旋转/旋转
- 简单的滚动纹理
- 变形效果,在示例1的斗篷和头发中非常明显。
- 旋转的烟雾效果,示例1中的灯光和示例2中的绿色/紫色发光。
前三个元素很简单,我想知道后两个元素是如何完成的。甚至可以在游戏中实时完成,还是可以预先渲染动画?
在《炉石传说》游戏中,上面有带有动画图像的卡片。一些例子:
动画似乎由多种效果组成:
前三个元素很简单,我想知道后两个元素是如何完成的。甚至可以在游戏中实时完成,还是可以预先渲染动画?
Answers:
我不知道它是否有意义,但道格的回答是对的
我只是想补充一点,我本人设法使用相同的资源完全按照自己在游戏中构建的动画来重新创建动画,请看这里
玛格尼:
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;
}
我想到了一些想法,它们的实现将完全取决于引擎,工具,最后取决于工作和内容管道。
这是我知道并且已经使用过的三种动画类型。每个都有优点和缺点,在这种情况下,我更倾向于使用sprite和视频动画,因为它们的GPU占用较少。
在这种情况下,最简单的方法可能是正确的方法。
这两个4&5都是通过UV在该区域上滚动纹理来完成的,也许在卡片上有一个稍微变形(以静态方式)的网格。血腥小鬼似乎还具有第二个纹理,该第二个纹理是第一个纹理的倍数,并且不会UV滚动。
总体而言,它们并不是昂贵的效果。他们只是不像他们乍看一样好。
使用2D骨架动画工具(例如Spine)几乎可以实现所有效果。精灵基本上是2D网格上的纹理。然后转换网格以使斗篷移动等。
请查看演示卷轴以获取此类效果的示例。http://esotericsoftware.com/spine-in-depth#Features具有大多数常见引擎/语言的运行时。类似的工具是Spriter:http ://www.brashmonkey.com