【Couple Flip 1】Video Parkour(split videos)
3D parkour game is harder to make playable ads because it has models and other elements. 😎But using the game video recording as material for playable production, the effect can be easily achieved! This chapter will show you how to use split game recording videos to create a playable that can be interacted multiple times!
1. Objectives
Game screen recording selection & split: Record a game screen recording that includes multiple operations, and by splitting the game recording, you can complete the playables that can interact multiple times;Game Recording
2. Tags
【Difficulty】:⭐⭐⭐
【Product】:Hyper Casual Game
【Gameplay】:Parkour, Racing
【Interactive Event】:Click
【Story branch】:One-way
【Feature】:Emphasize Animation, Timing Trigger
3. Preview
View on mobile | Portrait | Landscape |
---|---|---|
Scan to play |
4. Design Methods
1)Game Recording Selection✨
Selection Criteria:Game Recording
① Select the part of the game with simple and clear operations (such as: click, swipe, etc.);
② Recording contains more than 1 interactive operations;
③ When recording the game screen, pause for a while before each operation to split the video (please refer to the following video as example);
2)Scene Split✨
Objective:Split the game recording into different scenes according to the interactive operation.
Scenes | Scene 1 - 1st Guide | Scene 2 - 1st Flip | Scene 3 - 2nd Guide | Scene 4 - 2nd Flip | |||
---|---|---|---|---|---|---|---|
✨video clips Game Recording | / | ||||||
Effect | |||||||
✨Scence Description | Guide the player to click to start the game | Couple flip the 1st section of the journey | Play the standby action, and the 2nd operation guide appears | Couple flip the 2nd section of the journey | Play the standby action, and the 3rd operation guide appears | Couple flip the 3rd section of the journey, then redirect to the ending page | Product information and CTA buttons |
Animation | 【text guide】:universal animation- scale easing | / | (same as scene 1) | // | (same as scene 1) | 【celebration effects】:animation effect library - emoji, ribbon | 【CTA Button】:emphasize animation- pulse front |
Scence Event✨ | Trigger object:scene 1 Trigger event:click Response event:redirect to the next scene | Trigger object:video clip 2 Trigger event:ending time Response event:redirect to the next scene | Trigger object:scene 3 Trigger event:click Response event:redirect to the next scene | Trigger object:video clip 4 Trigger event:ending time Response event:redirect to the next scene | Trigger object:scene 5 Trigger event:click Response event:redirect to the next scene | Trigger object:scene 6 Trigger event:timing trigger Response event 1:execution delay 2s - show material 【celebration effects】 Response event 2:execution delay 2s - redirect to the next scene | / |
Asset | 【images】: background image, logo, finger guide, CTA button 【text guide】 【video】video clip 1 Game Recording 【background music】 | 【video】video clip 1 Game Recording 【Audio】:click (optional) | 【video】video clip 3 Game Recording | 【video】video clip 4 Game Recording 【Audio】:click (optional)) | 【video】video clip 5 Game Recording | 【video】video clip 6 Game Recording 【Audio】:click, victory (optional) |
5. Steps
Step1 - Basic Scene
Diagrams | Steps | Steps |
---|---|---|
1 | Global Settings Add background image, background music in global settings. |
Step2 - Scene 1(1st Guide)
Objective:Add appropriate operation guide to the game recording.
Diagrams | Steps | Steps |
---|---|---|
1 | ✨Add【video 1】Game Recording Add the pre-recorded game recording in scene 1 and adjust it to a suitable position. Tips: Check the "Loop" for the video. | |
2 | Add【Logo】&【CTA Button】 Add logo and CTA button pictures, and adjust the size and position. | |
3 | ✨Add【guide】 Add text guide & finger guide and set appropriate animation. Recommended animation: 【text guide】:universal animation- scale easing 【finger guide】:universal animation- displacement easing | |
4 | Add【heart animation effect】(optional) There are various heart effects in the animation effect library to choose from. | |
5 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
6 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step3 - Scene 2(1st Flip)
Objective: Replace game recording video clip.
Diagrams | Steps | Steps |
---|---|---|
1 | Add scene 2 Scene 2 can be copied from Scene 1, some elements can be kept/removed as needed. | |
2 | ✨Replace【video 1】with【video 2】Game Recording Tips: Click the "Replace" button to replace the video directly | |
3 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
/ | 4 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step4 - Scene 3(2nd Guide)
Objective::Add appropriate operation guide to the game recording.
Diagrams | Steps | Steps |
---|---|---|
1 | Add scene 3 | |
2 | ✨Replace【video 2】with【video 3】Game Recording Tips: Click the "Replace" button to replace the video directly. | |
3 | ✨Add【2nd Guide】 It can be copied directly from scene 1. | |
4 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
/ | 5 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step5 - Scene 4(2nd Flip)
Objective: Replace game recording video clip.
Diagrams | Steps | Steps |
---|---|---|
1 | Add scene 4 | |
2 | ✨Replace【video 3】with【video 4】Game Recording Tips: Click the "Replace" button to replace the video directly. | |
3 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
/ | 4 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step6 - Scene 5(3rd Guide)
Objective:Add appropriate operation guide to the game recording.
Diagrams | Steps | Steps |
---|---|---|
1 | Add scene 5 | |
2 | ✨Replace【video 4】with【video 5】Game Recording Tips: Click the "Replace" button to replace the video directly. | |
3 | ✨Add【3rd Guide】 It can be copied directly from scene 1. | |
4 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
/ | 5 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step7 - Scene 6(3rd Flip)
Objective: Replace game recording video clip, and show the "celebration effects" at the end of the video.
Diagrams | Steps | Steps |
---|---|---|
1 | Add scene 6 | |
2 | ✨Replace【video 5】with【video 6】Game Recording Tips: Click the "Replace" button to replace the video directly. | |
3 | ✨Add【celebration effects】 Celebration effects (emoji & ribbon) appear at the end of the video.
(Timed trigger setting method: reference case Rugby Parkour) | |
4 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
/ | 5 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step8 - Scene 7(Ending Page)
Objective:Display product information (logo, CTA button, etc).
Diagrams | Steps | Steps |
---|---|---|
1 | Add scene 7 | |
2 | Adjust the position of 【Logo & CTA button】
| |
3 | Horizontal Screen Layout After the vertical screen production of each scene is completed, the horizontal screen layout is required. | |
/ | 4 | Screen Adaptation Perform screen adaptation for each device / horizontal & portrait screens, and preview whether the adaptation effect is appropriate. |
Step9 - Scenes Connection
Objective:Clarify the redirect logic between scenes.
Diagrams | Steps | Steps |
---|---|---|
1 | Scene1 - Scene2 Add an event to [scene 1]: click - redirect to next scene | |
2 | Scene2- Scene3 Add an event to [video 2]: ending time- redirect to next scene | |
3 | Scene3 - Scene4 Add an event to [scene 3]: click - redirect to next scene | |
4 | Scene4 - Scene5 Add an event to [video 4]: ending time- redirect to next scene | |
5 | Scene5 - Scene6 Add an event to [scene 5]: click - redirect to next scene | |
6 | Scene6 - Scene7 Objective: Redirect to the ending page when the animation effect plays for 2s. Add an event to [celebration effects]: timing trigger - execution delay 3s - redirect to next scene |
Step10 - Overall Preview
Diagrams | Steps | Steps |
---|---|---|
1 | Overall preview After the production, you can preview the whole playable of different devices / horizontal and portrait screens. |
Last updated