《情侣翻越 1》跑酷视频(分段)

#自由编辑器 #空白制作 #初级难度

《情侣翻越-1》跑酷视频(分段)

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

一、教学目的

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

二、特征标签

  • 【制作难度】:⭐⭐⭐

  • 【适用产品】:超休闲

  • 【玩法】跑酷、竞速

  • 【交互方式】:点击

  • 【线程】:单线程

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

三、作品预览

手机试玩效果最佳
竖屏
横屏

四、制作思路

1. 游戏录屏选择✨

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

① 选择游戏关卡中操作尽可能简单清晰的部分进行录制(如:点击、滑动等);

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

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

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-第一次指引

场景2-第一次翻越

场景3-第二次指引

场景4-第二次翻越

场景5-第三次指引

场景6-第三次翻越

五、制作指南

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+彩带)在视频播放快结束时出现。

  1. 添加【庆祝特效】:特效库-emoji特效、特效库-彩带喷射

  1. 为【庆祝特效】组设置事件:定时触发显示

(定时触发设置方法:参考案例橄榄球跑酷

4

横屏排版

每个场景竖屏制作完成后,均需进行横屏排版

/

5

屏幕适配

对各机型/横竖屏进行屏幕适配,并预览适配效果是否合适。

Step8 - 制作场景7(结束页)

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

图示

步骤

1

创建场景7

2

调整【Logo和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

整体预览

全部制作完成后,可对不同机型/横竖屏进行整体预览。

最后更新于