AI创作与游戏开发(四)类似炉石传说资料片的静态图动效制作

书接上回，在游戏开发中，资料片动画是非常重要的，因为它们可以增加游戏的吸引力和品牌价值。类比炉石传说的资料片，我们可以看到以下几个方面的重要性：

1. 增加可玩性

资料片动画可以向游戏中添加新的角色、场景和故事情节，这些元素可以增加游戏的可玩性。例如，在《炉石传说》的资料片中，新的卡牌和英雄角色背景内容，使得玩家可以体验到更多的游戏乐趣。

2. 增加品牌价值

资料片动画可以增加游戏品牌的价值和认可度。这些动画可以成为游戏品牌的标志性元素，例如《炉石传说》的资料片动画已经成为该游戏品牌的重要组成部分之一。这些动画可以向玩家和非玩家展示游戏品牌的风格、主题和价值观，从而增加品牌的认知度和忠诚度。

总之，资料片动画在游戏开发中非常重要，它们可以增加游戏的可玩性、吸引力和品牌价值。所以,我们使用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;
}