开发心得接力：用一张图做动态背景和点击即进入游戏的丝滑过渡

精华03/3191 浏览开发交流包含 AI 合成内容

作者：浠涫

分类#开发心得 #视频互动游戏 #TapTap制造 #聚光灯游戏开发心得接力

开发引擎：TapTap Maker (UrhoX)

项目：方格屋（半成品）

一、为什么做这种效果

方格屋的标题页是一扇门。

我想让玩家打开游戏的第一眼就看到一扇微微呼吸的门——不是一张静态截图，而是一段循环播放的短视频。门缝里透出暖光，光影在动，像真的有人在里面。

然后点击继续游戏等，门缓缓打开，白光涌出——无缝过渡到游戏。

这个效果用一张静态图也能做，但视频的呼吸感和光影变化是静态图给不了的。问题是：TapTap Maker 的视频播放只在 WASM（网页端）支持，手机端完全不支持。所以必须做 fallback——视频加载失败时自动降级为静态图片，不能让游戏卡在标题页。

二、技术方案：一张图 → 两段视频

整个方案只需要一张 AI 生成的图片，然后基于这张图生成两段视频：

核心思路：两段视频共享同一帧画面作为衔接点。循环视频的最后一帧 = 开门视频的第一帧。点击开始时，从循环视频无缝切到开门视频，玩家感知不到切换。

2.1 生成标题图

先用 AI 画图机生成一张标题页背景图：

治愈系动画风格，一扇老旧的木门，门缝透出暖黄色光芒，门前有斑驳的台阶和落叶，

周围是温暖的午后光线，竖屏 9:16，水彩质感

这张图就是整个标题页的视觉基调。

2.2 生成循环视频（title_loop.mp4）

用 create_video_task

的 first_frame

模式，以标题图作为首帧：

模式：first_frame

首帧图片：[标题图]

提示词：门缝中透出的暖光微微呼吸般明暗变化，光影在门板上缓慢流动，

阶梯上的落叶被微风轻轻吹动，整体氛围安静而温暖

时长：10-15 秒

循环：是

关键点：

动作幅度要小——这是背景，不能抢按钮的风头

光影变化用 sin 曲线控制呼吸感，不要突变

循环播放时首尾要能衔接（让 AI 生成时注意这一点）

2.3 生成开门视频（title_door.mp4）

同样用 first_last_frame

模式，首帧 = 标题图，尾帧 = 纯白光：

模式：first_last_frame

首帧图片：[标题图]（和循环视频的最后一帧一致）

尾帧图片：[一张纯白/暖白光的图片]

提示词：木门缓缓向内打开，门缝中涌出温暖的白色光芒，光芒逐渐充满整个画面，

门打开的过程中可以看到门内模糊的温暖空间

时长：3-5 秒

关键点：

首帧必须和循环视频的最后一帧一致——这是无缝衔接的前提

尾帧是纯白光，方便后续接网格转场（GridTransition）

开门速度不要太快，2-3 秒比较舒服

三、代码实现

3.1 标题页视频播放

在 BuildTitleUI()

中，用 Video.VideoPlayer

组件做循环背景：

```lua

-- 视频背景（WASM 支持 + 加载成功时使用）

if Video.isSupported and titleVideoWorks_ then

titleVideoPlayer_ = Video.VideoPlayer {

id = "titleVideo",

src = Config.TITLEVIDEOLOOP, -- "video/title_loop.mp4"

width = "100%",

height = "100%",

textureWidth = 1080,

textureHeight = 1920,

autoPlay = true,

loop = true, -- 循环播放

muted = true, -- 静音

objectFit = "cover", -- 填满屏幕

pointerEvents = "none", -- 禁用视频自身的点击暂停

onReady = function(self)

titleVideoLoadTimer_ = -1 -- 加载成功，停止超时计时

end,

}

else

-- fallback：静态图片背景

titleVideoPlayer_ = nil

uiRoot_ = UI.Panel {

width = "100%", height = "100%",

backgroundImage = Config.TITLEBGIMAGE, -- 静态 fallback 图

backgroundSize = "cover",

}

end

```

几个细节：

pointerEvents = "none"

+ 覆写 OnPointerUp

——彻底禁用视频的点击暂停行为，否则玩家点按钮时会误触发视频暂停

objectFit = "cover"

——视频填满整个屏幕，不留黑边

textureWidth/Height

设为 1080×1920——匹配竖屏分辨率

3.2 点击开始 → 开门过渡

点击"推开门"按钮后，切换视频源并播放开门动画：

```lua

function TitleStartDoorTransition(startGameFn)

if titleTransitioning_ then return end

titleTransitioning_ = true

FadeBGMOut(2.0)

PlaySFX("door_open", 0.6)

if titleVideoPlayer_ and Video.isSupported and titleVideoWorks_ then

-- 隐藏 UI 叠加层

local overlay = uiRoot_ and uiRoot_:FindById("titleOverlay")

if overlay then overlay:SetVisible(false) end

-- 切换到开门视频

titleVideoPlayer_.props.loop = false

titleVideoPlayer_:SetSrc(Config.TITLE_VIDEO_DOOR)

titleVideoPlayer_:Play()

-- 开门视频播完 → 网格转场 → 进入游戏

titleVideoPlayer_.props.onEnded = function(self)

titleVideoPlayer_ = nil

GridTransition.Start({

colorA = { 255, 255, 255, 255 }, -- 白（承接视频结尾的白光）

colorB = { 0, 0, 0, 255 }, -- 黑

onMiddle = function()

startGameFn() -- 全黑时切换游戏状态

end,

})

end

else

-- 无视频支持：直接用网格转场

GridTransition.Start({ ... })

end

```

核心逻辑：

1. SetSrc()

切换视频源——从循环视频切到开门视频

2. 开门视频播完触发 onEnded

→ 启动网格翻转转场

3. 转场进行到一半（全黑时）切换游戏状态——玩家看不到切换过程

4. 如果视频不可用，直接走网格转场——降级方案

3.3 超时保护

视频加载可能失败，必须加超时：

lua

-- 标题视频：3 秒内必须 onReady，否则 fallback 到静态图

-- 开门视频：5 秒内必须播完，否则强制转场

四、踩坑记录

坑 1：点击按钮时视频被暂停

Video.VideoPlayer

默认支持点击暂停。标题页的按钮浮在视频上方，点击按钮时事件会冒泡到视频组件。

解法：pointerEvents = "none"

+ 覆写 OnPointerUp

吞掉事件。

坑 2：视频加载失败时白屏

Video.isSupported

返回 true 但视频文件加载失败时，页面会卡白屏。

解法：3 秒超时计时器。onReady

没触发就自动 fallback 到静态图片。

坑 3：两段视频衔接不自然

分别生成导致首帧不完全一致。

解法：开门视频的 first_frame

直接用循环视频的最后一帧截图，而不是原始标题图。

坑 4：手机端完全不支持视频

Video.isSupported

在手机端返回 false。

解法：fallback 静态图也要选好看的那张，保证两端体验一致（只是手机端没有动态效果）。

五、成本和效果

| 项目 | 数据 |

|------|------|

| AI 生图（标题图） | 1 次 |

| AI 生成视频（循环 + 开门） | 2 次 |

| 总积分消耗 | 约 3000-5000 |

| 代码量 | 约 80 行 |

| 效果 | 桌面端动态呼吸背景 + 丝滑开门；手机端静态图 + 网格转场 |

一句话总结：用一张图做种子，生成两段首尾帧衔接的视频，配合 fallback 机制，就能用很低的成本实现标题页的动态背景和丝滑过渡。

猜你想搜

taptap 制造动态背景制作

TapTap 制造应用

9.8

前往论坛