【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 mobilePortraitLandscape

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.

ScenesScene 1 - 1st GuideScene 2 - 1st FlipScene 3 - 2nd GuideScene 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

DiagramsStepsSteps

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.

DiagramsStepsSteps

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.

DiagramsStepsSteps

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.

DiagramsStepsSteps

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.

DiagramsStepsSteps

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.

DiagramsStepsSteps

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.

DiagramsStepsSteps

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.

  1. Added 【Celebration Effects】: animation effect library-emoji, Ribbon

  2. Set an event for the 【Celebration Effects】 group: timing trigger

(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).

DiagramsStepsSteps

1

Add scene 7

2

Adjust the position of 【Logo & CTA button】

  • How to make CTA button with Bounce Effect

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.

DiagramsStepsSteps

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

DiagramsStepsSteps

1

Overall preview

After the production, you can preview the whole playable of different devices / horizontal and portrait screens.

Last updated