开发心得接力：用一张图做动态背景和点击即进入游戏的丝滑过渡
精华03/3149 浏览开发心得 包含 AI 合成内容
作者：浠涫
开发引擎：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
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 机制，就能用很低的成本实现标题页的动态背景和丝滑过渡。