《情侣翻越 1》跑酷视频（分段）

《情侣翻越-1》跑酷视频（分段）

3d跑酷类游戏由于涉及模型、场景等元素，开发制作难度较高。😎但利用游戏录屏作为原料进行playable制作，可以简单快速地达到“以假乱真”的效果！本讲将通过一个案例，教会大家如何利用录制+分割游戏录屏，制作出可以多次互动的playable！

一、教学目的

• 游戏录屏选择+分割：录制包含多次操作的游戏录屏，并通过分割录屏，完成制作可以多次互动的playable；游戏录屏

二、特征标签

• 【制作难度】：⭐⭐⭐

• 【适用产品】：超休闲

• 【玩法】跑酷、竞速

• 【交互方式】：点击

• 【线程】：单线程

• 【功能】：强调动画、定时触发

三、作品预览

手机试玩效果最佳	竖屏	横屏
扫码预览	点击预览	点击预览

四、制作思路

1. 游戏录屏选择✨

游戏录屏选择标准：游戏录屏

① 选择游戏关卡中操作尽可能简单清晰的部分进行录制（如：点击、滑动等）；

② 关卡录屏包含多次交互操作；

③ 游戏录屏时，在每次玩家互操作前的画面稍作停留，以便留下动态画面，方便后续分割视频作为动态操作指引场景；（具体可参考以下本例视频）

2MB

111.mp4

2. 场景拆分✨

场景/视频拆分核心思想：根据交互操作，将游戏录屏拆分到不同场景，让单个场景里的动画和事件尽可能少，场景拆分逻辑清晰，图层结构简单。

场景拆分	场景1-第一次指引	场景2-第一次翻越	场景3-第二次指引	场景4-第二次翻越	场景5-第三次指引	场景6-第三次翻越	场景7-结束页
效果图
✨场景描述	初始画面循环播放情侣拥抱动作，引导玩家点击屏幕开始游戏	情侣翻越第一段路程	翻越暂停，循环播放情侣待机动作，出现第二次操作指引	情侣翻越第二段路程	翻越暂停，循环播放情侣待机动作，出现第三次操作指引	情侣翻越第三段路程，完成后自动跳转结束页	展示产品信息和CTA按钮
动画/特效	【文字指引】：通用动画-缩放缓动 【手指指引】：通用动画-位移缓动 【爱心】特效库-爱心特效（选做）	/	（与场景1相同）	/	（与场景1相同）	【庆祝特效】：特效库-emoji特效、特效库-彩带喷射	【CTA按钮】：强调动画-脉冲向前
场景事件	触发对象：场景1 触发操作：点击 响应事件：跳转到下一场景	触发对象：视频片段2 触发操作：结束时 响应事件：跳转到下一场景	触发对象：场景3 触发操作：点击 响应事件：跳转到下一场景	触发对象：视频片段4 触发操作：结束时 响应事件：跳转到下一场景	触发对象：场景5 触发操作：点击 响应事件：跳转到下一场景	触发对象：场景6 触发操作：定时触发 响应事件1：执行延迟2s - 显示素材【庆祝特效】 响应事件2：再执行延迟2s - 跳转到下一场景	/
核心物料清单	【图片】：背景图、logo、手指指引、CTA按钮 【文本】：文字指引 【视频】：视频片段1游戏录屏 【背景音乐】	【视频】：视频片段2游戏录屏 【音效】：点击反馈音效（可选）	【视频】：视频片段3游戏录屏	【视频】：视频片段4游戏录屏 【音效】点击反馈音效（可选）	【视频】：视频片段5游戏录屏	【视频】：视频片段6游戏录屏 【音效】点击反馈音效（可选）、胜利奖励音效（可选）	/

✨录屏分割游戏录屏

场景1-第一次指引

60KB

1.mp4

场景2-第一次翻越

763KB

2.mp4

场景3-第二次指引

138KB

3.mp4

场景4-第二次翻越

647KB

4.mp4

场景5-第三次指引

184KB

5.mp4

场景6-第三次翻越

894KB

6.mp4

五、制作指南

Step1 - 基础场景搭建

图示		步骤
	1	全局设置 在全局设置中添加背景图片、背景音乐

Step2 - 制作场景1（第一次指引）

核心目标：在游戏录屏视频片段上，添加合适的操作指引，引导玩家操作。

图示		步骤
	1	✨添加【视频片段1】游戏录屏 添加提前剪辑好的视频片段1，并调整至合适的大小和位置。 Tips：视频勾选“无限循环”按钮。
	2	添加【Logo和CTA按钮】 添加并调整logo和CTA按钮的大小/位置。
	3	✨添加【操作指引】 添加文字指引&手指指引，并设置合适动画。 （推荐动画：【文字指引】：通用动画-缩放缓动、【手指指引】：通用动画-位移缓动）
	4	添加【爱心特效】（选做） 特效库中有各种爱心特效可供选择。
	5	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
	6	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step3 - 制作场景2（第一次翻越）

核心目标：替换录屏视频片段。

图示		步骤
	1	创建场景2 可复制场景1，保留/删减一些元素成为场景2。
	2	✨替换【视频片段1】为【视频片段2】游戏录屏 为确保各场景视频片段无缝衔接，推荐使用“替换”功能直接替换视频。
	3	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
/	4	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step4 - 制作场景3（第二次指引）

核心目标：为视频添加合适的操作指引。

图示		步骤
	1	创建场景3
	2	✨替换【视频片段2】为【视频片段3】游戏录屏 为确保各场景视频片段无缝衔接，推荐使用“替换”功能直接替换视频。
	3	✨添加【第二次指引】 可直接复制场景1中的操作指引到场景3。
	4	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
/	5	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step5 - 制作场景4（第二次翻越）

核心目标：替换录屏视频片段。

图示		步骤
	1	创建场景4
	2	✨替换【视频片段3】为【视频片段4】游戏录屏 为确保各场景视频片段无缝衔接，推荐使用“替换”功能直接替换视频。
	3	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
/	4	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step6 - 制作场景5（第三次指引）

核心目标：为视频添加合适的操作指引。

图示		步骤
	1	创建场景5
	2	✨替换【视频片段4】为【视频片段5】游戏录屏 为确保各场景视频片段无缝衔接，推荐使用“替换”功能直接替换视频。
	3	✨添加【第三次指引】 可直接复制场景1中的操作指引到场景5。
	4	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
/	5	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step7 - 制作场景6（第三次翻越）

核心目标：替换录屏视频片段，并在视频末尾时段定时触发“庆祝特效”。

图示		步骤
	1	创建场景6
	2	✨替换【视频片段5】为【视频片段6】游戏录屏 为确保各场景视频片段无缝衔接，推荐使用“替换”功能直接替换视频。
	3	✨添加【庆祝特效】 庆祝特效（emoji+彩带）在视频播放快结束时出现。 添加【庆祝特效】：特效库-emoji特效、特效库-彩带喷射 为【庆祝特效】组设置事件：定时触发显示 （定时触发设置方法：参考案例橄榄球跑酷）
	4	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
/	5	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step8 - 制作场景7（结束页）

核心目标：展示logo、CTA按钮等的产品信息。

图示		步骤
	1	创建场景7
	2	调整【Logo和CTA按钮】 CTA呼吸按钮制作方法
	3	横屏排版 每个场景竖屏制作完成后，均需进行横屏排版。
/	4	屏幕适配 对各机型/横竖屏进行屏幕适配，并预览适配效果是否合适。

Step9 - 场景事件串联

核心目标：场景间跳转逻辑清晰。

图示		步骤
	1	场景1-场景2 对【场景1】添加事件：点击-跳转到下一场景
	2	场景2-场景3 对【视频片段2】添加事件：结束时-跳转到下一场景
	3	场景3-场景4 对【场景3】添加事件：点击-跳转到下一场景
	4	场景4-场景5 对【视频片段4】添加事件：结束时-跳转到下一场景
	5	场景5-场景6 对【场景5】添加事件：点击-跳转到下一场景
	6	场景6-场景7 目标：特效播放2s时跳转结束页。 对【庆祝特效】添加事件：定时触发-（再次）执行延迟3s-跳转到下一场景

Step10 - 整体预览

图示		步骤
	1	整体预览 全部制作完成后，可对不同机型/横竖屏进行整体预览。