书接上回，在游戏开发中，材料片动画是非常重要的，由于它们能够添加游戏的吸引力和品牌价值。类比炉石传说的材料片，咱们能够看到以下几个方面的重要性：
- 添加可玩性
材料片动画能够向游戏中添加新的人物、场景和故事情节，这些元素能够添加游戏的可玩性。例如，在《炉石传说》的材料片中，新的卡牌和英雄人物背景内容，使得玩家能够体验到更多的游戏乐趣。
- 添加品牌价值
材料片动画能够添加游戏品牌的价值和认可度。这些动画能够成为游戏品牌的标志性元素，例如《炉石传说》的材料片动画已经成为该游戏品牌的重要组成部分之一。这些动画能够向玩家和非玩家展现游戏品牌的风格、主题和价值观，然后添加品牌的认知度和忠诚度。
总之，材料片动画在游戏开发中非常重要，它们能够添加游戏的可玩性、吸引力和品牌价值。所以,咱们运用AI创作开发游戏,也能够测验制作静态图动效的材料片.
AI切深度图
在游戏开发中，制作上述动画作用的首要办法有三种：播映视频动画、播映gif动态图片以及运用shader动态烘托静态图片。在移动渠道或Web渠道游戏中，资源巨细和包体巨细是非常重要的要素。因此，运用第三种方法能够大大减小资源巨细，进步游戏的加载速度，并削减玩家等待时间。
运用shader动态烘托静态图片是一种常用的办法，它能够经过改变纹路坐标、色彩、透明度等特点来完成动画作用。这种办法能够在运行时动态生成动画作用，而不需求运用额外的视频或图像资源。这样能够削减游戏的资源占用量，下降包体巨细，进步游戏的功能和加载速度。
如果要运用shader动态烘托一张静态图片，首先需求有一张图片的深度图。在本期的主题中，涉及到AI创作与游戏开发，能够选用一些AI东西来进行图像切割，以获取深度图。其中，能够运用leiapix来获取深度图，并对其进行微调，以获得更细致的分层动画作用。
比较传统的人工抠图方法，运用AI东西能够更快速、准确地获取深度图，一起也能够减轻人工操作的作业量。这样能够大大进步出产效率，一起也能够使得游戏开发者专心于游戏的中心设计和开发作业。
在游戏开发中，运用shader动态烘托静态图片能够完成各种动画作用，例如旋转、平移、缩放、淡入淡出等。经过运用深度图，能够将图片分成多层，然后运用shader来对每一层进行动态烘托，然后完成更加逼真和生动的动画作用。
下面的深度图便是经过东西获取到的.
shader作用完成
用于依据一张原图和一张黑白深度图创建分层动画的镜头特效。这个着色器程序包括一个极点着色器和一个片段着色器。极点着色器将极点从2D空间转换为3D空间，并将它们传递给片段着色器。片段着色器从原图和深度图中获取像素的色彩和深度值，并运用它们来核算每个像素的深度和偏移因子。然后，它运用深度值和偏移因子来操控像素的偏移程度，并混合原始色彩和偏移色彩。最后，咱们在每帧更新动画，并更新焦点间隔、焦距变化规模和深度图像素。
极点着色器
attribute vec4 a_Position;
attribute vec2 a_Texcoord;
varying vec2 v_Texcoord;
varying vec4 v_Position;
uniform mat4 u_MvpMatrix;
uniform mat4 u_WorldMat;
void main() {
gl_Position = u_MvpMatrix * a_Position;
v_Texcoord = a_Texcoord;
v_Position = u_WorldMat * a_Position;
}
片段着色器
precision highp float;
varying vec2 vTextureCoord;
varying vec4 vColor;
uniform sampler2D displacementMap;
uniform sampler2D uSampler;
uniform vec4 dimensions;
uniform vec2 mapDimensions;
uniform float scale;
uniform vec3 offset;
uniform float focus;
uniform float enlarge;
float aspect = dimensions.x / dimensions.y;
// mono version of perspective shader
vec3 perspective(vec2 uv,
float horizontal_parallax, // 0 - no parallax
float vertical_parallax, // same
float perspective_factor, // 0 - no perspective
float h_convergence, // 0.0 - near, 0.5 - center, 1.0 - far
float v_convergence // same
) {
const float sensitivity = 15.0; // aligns animation with the previous version where it was multiplied by 15
horizontal_parallax *= sensitivity;
vertical_parallax *= sensitivity;
vec3 ray_origin = vec3(uv.x - 0.5, uv.y - 0.5, +1.0);
vec3 ray_direction = vec3(uv.x - 0.5, uv.y - 0.5, -1.0);
ray_direction.xy *= perspective_factor;
ray_origin.xy /= 1.0 + perspective_factor;
ray_direction.x += horizontal_parallax;
ray_direction.y += vertical_parallax;
ray_origin.x -= h_convergence * horizontal_parallax;
ray_origin.y -= v_convergence * vertical_parallax;
const int step_count = 45; // affects quality and processing time
const float hit_threshold = 0.01;
ray_direction /= float(step_count);
for (int i = 0; i < step_count; i++) {
ray_origin += ray_direction;
vec2 vFlipUV = (ray_origin.xy + 0.5) * vec2(1, -1) + vec2(0, (dimensions.y - 1.0) / dimensions.y);
float scene_z = texture2D(displacementMap, vFlipUV).x;
if (ray_origin.z < scene_z) {
if (scene_z - ray_origin.z < hit_threshold) return texture2D(uSampler, ray_origin.xy + 0.5).rgb;
ray_origin -= ray_direction; // step back
ray_direction /= 2.0; // decrease ray step to approach surface with greater precision
}
}
return texture2D(uSampler, ray_origin.xy + 0.5).rgb;
}
void main(void) {
vec2 uv = (vTextureCoord - vec2(0.5)) / vec2(enlarge) + vec2(0.5);
float gain = scale * 0.075;
float persp_factor = scale * 3.0 * offset.z;
gl_FragColor = vec4(perspective(uv, -gain * offset.x, gain * offset.y * aspect, persp_factor, 1.0 - focus, 1.0 - focus), 1.0) * vColor;
}
