# Welcome to Playturbo

AN ELEMENT-BASED CREATIVE PRODUCTION PLATFORM

### Playable Tools

Create a playable ad in less than 10 minutes, no coding skills required (templates included).

[Playable Tools-Feature Changer](/playable-tools-feature-changer)

[Playable Tools-Content Editor](/playable-tools-content-editor)

[Playable Tools-Video to Playable](/playable-tools-video-to-playable)

### Video Tools

Enhance video editing with Multi-language Adaption, Size Adaption, AI splitter, AI dubbing, auto translation, batch edit/export, and a full resource library.

 [Video Tools-Video Editor](/video-tools-video-editor)

 [Video Tools-Layout Template](/video-tools-layout-template)

 [Video Tools-Avatar to Video](/video-tools-avatar-to-video)

 [Video Tools-Image to Video](/video-tools-image-to-video)

### Image Tools

Use URL to Image to generate image creatives in bulk.

 [Image Tools-URL to Image](/image-tools-url-to-image)


# Login Guide

Let's start your production journey!

## <mark style="color:blue;">Login Entry</mark>

{% embed url="<https://app.playturbo.com/#/login>" %}

## <mark style="color:blue;">Log into Playturbo</mark>

* Enter your username or registered email address.
* Enter your password.

*If you forget your password or see an incorrect-password alert, you can reset it via your registered email.*  [/pages/vLvZX3bUP1zoKqVv8vfw#id-4.password](https://doc.playturbo.com/welcome-to-playturbo/pages/vLvZX3bUP1zoKqVv8vfw#id-4.password "mention")

<figure><img src="/files/i6pcxigWUgWcaWCwY156" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Browser Recommendation</mark>

<mark style="color:red;">For the best experience, we recommend using the</mark> <mark style="color:red;"></mark><mark style="color:red;">**Chrome**</mark> <mark style="color:red;"></mark><mark style="color:red;">browser.</mark>


# Subscribed Users-Page Guide

Homepage>>>Creative Toolbox>>>Enter Tool Page

**Notes: Available tools will vary based on different subscription.**

<div align="left"><figure><img src="/files/ZjgOZ8VKMRRyZayIM5xV" alt=""><figcaption></figcaption></figure></div>


# Customized Users-Page Guide

Creative Service >>> Customized Playables /  Customized Images & videos

<div align="left"><figure><img src="/files/7rY1QLOliex12Q3X5bwX" alt=""><figcaption></figcaption></figure></div>

### 1. Login Guide&#x20;

For issues related to login, please refer to [Login Guide](/welcome-to-playturbo/login-guide)

### 2. How to create a new version

For questions regarding creating new project versions, please refer to [Customized Users - Create a version](/playable-tools-feature-changer/how-to-create-a-project-version/customized-users-create-a-version)

### 3. Feature Changer-User Guide

* Customized Users will use the **Feature Changer** for project version creation and iteration. [Playable Tools-Feature Changer](/playable-tools-feature-changer)
* The usage guide for the Feature Changer can be found in [Feature Changer-User Guide](/playable-tools-feature-changer/feature-changer-user-guide)
* The parameter settings area for Customized Users will have an additional <mark style="color:red;">**Gameplay**</mark> column where gameplay parameters will appear.&#x20;

<div align="left"><figure><img src="/files/s1i0d4AytmigXERc9mo1" alt=""><figcaption></figcaption></figure></div>

### 4.Apply and Download&#x20;

For information related to apply and download, please refer to [Feature Changer - Download\&Apply](/playable-tools-feature-changer/feature-changer-user-guide/feature-changer-download-and-apply)&#x20;

[Ad Account Authorization and Playable Push](/export-and-deployment/ad-account-authorization-and-playable-push)

[Playable Upload Specifications for Networks](/export-and-deployment/playable-upload-specifications-for-networks)

### 5.Mintegral User Guide

For instructions on associating playable creatives with Mintegral, please refer to [Mintegral Creative Operation Guide](/export-and-deployment/mintegral-creative-operation-guide)

For viewing and analyzing Mintegral performance data, please refer to [Mintegral Data Analysis](/export-and-deployment/mintegral-data-analysis)


# Playable Tools-Feature Changer

The Feature Changer we can also call it Skin Replacement Tool  informally. Based on the template, the playable can be output efficiently through simple replacement.

## About Playable Templates

* 200+ templates, covering all your creative needs
* Adjust elements and parameters quickly & easily based on your needs
* Efficient production process, build playable ads quickly and easily
* Easy to use, create playable in 10 mins

Playable templates offer two editing modes: **Feature Creation** and **Content Creation**. You can choose the one that best suits your iteration needs.&#x20;

👉If you select **Feature Creation**, you'll enter the [Feature Changer](/playable-tools-feature-changer).&#x20;

*Based on Playable Templates, replace assets, resize elements, and adjust gameplay parameters to quickly export high-quality playable ads.*

👉If you select **Content Creation**, you'll enter the [Content Editor](/playable-tools-content-editor).&#x20;

*Beyond Feature Creation, you can further tweak templates—like adjusting layouts, adding assets, or editing events—to create many versions.*

<figure><img src="/files/JYpJjMEabcIrJakbAzPq" alt=""><figcaption></figcaption></figure>

**Both customized users and playable tool subscribers can perform Feature Creation using the Feature Changer.**

[Subscribed Users-Page Guide](/welcome-to-playturbo/subscribed-users-page-guide)

[Customized Users-Page Guide](/welcome-to-playturbo/customized-users-page-guide)


# Playable Creation Flow

\#Feature Changer

**Easy & Efficient Working Process**

<figure><img src="/files/MrvYHDgvf5snrkFLp3LQ" alt=""><figcaption></figcaption></figure>


# Template Feature Creation-Case Study Video

\#Feature Changer#General Tutorial Video

{% embed url="<https://mmp-cdn.rayjump.com/res_store/1868924/64771ebe04c76.mp4>" %}


# How to create a project/version

\#Feature Changer

Subscribed Users and Customized Users have different page locations, and the methods for creating projects/versions are also different:&#x20;

* Subscribed Users: Create a new project by opening a template.  [Subscribed Users-Create a project](/playable-tools-feature-changer/how-to-create-a-project-version/subscribed-users-create-a-project)
* Customized Users: Create a new version by opening the specific project.  [Customized Users - Create a version](/playable-tools-feature-changer/how-to-create-a-project-version/customized-users-create-a-version)


# Subscribed Users-Create a project

\#Feature Changer

## STEP1: **Multiple ready-to-go templates**

* Method 1: Find your best matched playables by Method, Industry, and Template Difficulty.
* Method 2: Search keyword to find related playables

<figure><img src="/files/5QZEzb7ezsTIuQqf1gRt" alt=""><figcaption></figcaption></figure>

## **STEP2: Select a template**

* When selecting one template, the page below will pop up. You are able to preview the selected template on the site or on your phone with the QR code.
* Each template has 2 skins, so that everyone can efficiently create playable ads that match their own product style.

<div align="left"><figure><img src="/files/xTtDEH7URQYjaPuOn4KG" alt=""><figcaption></figcaption></figure></div>

## **STEP3: Select the crea**tion method

After clicking on "Feature Creation", select "General Creation"

<div align="left"><figure><img src="/files/dQAMRsVXF6GmWnhzuJDO" alt=""><figcaption></figcaption></figure></div>

## **STEP4: Fill out your product name**

After selecting the production type, please enter the creative name, and click Confirm button to start the editing.

Elements and parameters that are editable includes gameplay, pictures, text, audio, video, color etc.

<div align="left"><figure><img src="/files/bpF9qr8Wc1unuZoBC7Fx" alt=""><figcaption></figcaption></figure></div>


# Customized Users - Create a version

\#Feature Changer

## STEP 1: Login Page

[Customized Users-Page Guide](/welcome-to-playturbo/customized-users-page-guide)

## STEP 2: Choose Creation Method&#x20;

After entering the Custom Playable Ads page, you will need to select the method "General Creation" for creating the new version

<figure><img src="/files/ojXJBv7jAkhtE6aFZvjZ" alt=""><figcaption></figcaption></figure>

## STEP 3: Select Product and Project&#x20;

Click on the corresponding project name to enter the project page.

<figure><img src="/files/RomSZpTHVnluYzdtSUns" alt=""><figcaption></figcaption></figure>

## STEP 4: Create New Version&#x20;

Click the "Create New Version" button >>> Fill in the version name and confirm.

Elements and parameters that are editable includes gameplay, pictures, text, audio, video, color etc.

<div align="left"><figure><img src="/files/yvIjYkW3LJTFWPy12i30" alt="" width="464"><figcaption></figcaption></figure></div>


# Feature Changer-User Guide

It is recommended for both「Subscribed Users」and 「Customized Users」to read this guide before using the Feature Changer.

For first-time users of the Feature Changer, we recommend referring to: [How to create a project/version](/playable-tools-feature-changer/how-to-create-a-project-version)

***

🌟<mark style="color:red;background-color:red;">**PLEASE NOTE**</mark>🌟&#x20;

When replacing assets, to ensure that your product images perfectly fit the template placeholders(<mark style="background-color:red;">especially for dress-up style templates</mark>),  we recommend following these steps:

1. **Download Assets**\
   Download all assets of the template to your local device by following the path shown in the illustration. After unzipping the file, you’ll be able to view all assets used in the template. (Alternatively, you can download only the specific assets you need to replace.

<div align="center"><figure><img src="/files/L8Qghc48NLIANm5hmHMA" alt="" width="458"><figcaption></figcaption></figure> <figure><img src="/files/WimqSg9kqFRoPTw4jmgm" alt="" width="100"><figcaption></figcaption></figure></div>

2. **Process the Images to Be Replaced**\
   Import the template asset images into an image editing tool and adjust your product images to match the template's **dimensions** and **element alignment**. For example, with a dress-up gameplay template:

* The original template image and your product image may differ in size and element alignment.
* Import both the template image and your product image into an image editing tool (e.g., Photoshop).
* Use the original template image as a background and align your product image's size and element positions (especially areas that interact with other elements, such as the neck).
* Hide the original template image and export the aligned product image.

<div align="center"><figure><img src="/files/dQv1DvhvKXvDQnRmCpiQ" alt="" width="395"><figcaption><p>Template Image</p></figcaption></figure> <figure><img src="/files/B46sreMkqMr5TE92D8kZ" alt="" width="269"><figcaption><p>Your Product Image (Example)</p></figcaption></figure></div>

<div align="center"><figure><img src="/files/y1jaoRLCh7c5ID8nnkP0" alt=""><figcaption><p>Import to Image Editing Tool</p></figcaption></figure> <figure><img src="/files/wm2QROx7jlFvVPbhVveV" alt=""><figcaption><p>Align Image Size &#x26; Element Positions</p></figcaption></figure> <figure><img src="/files/JeYEehBuDqPjfaJVZ50i" alt=""><figcaption><p>Export</p></figcaption></figure></div>

3. **Replace All Assets**\
   Once you've processed all the image assets you plan to replace, you can proceed to the Feature Changer to complete the asset replacement.

<div align="center"><figure><img src="/files/4QvENBgvOkCViJBHw1zm" alt=""><figcaption></figcaption></figure></div>


# Editing Page Module Intro

\#Feature Changer

The Feature Changer interface is mainly divided into three sections: **Parameter Settings Area**, **Work Preview Area**, and **Project Operation Area**.

<div align="left"><figure><img src="/files/1DSwebnewvbNl72rmhXq" alt=""><figcaption></figcaption></figure></div>

## [Parameter Settings Area](/playable-tools-feature-changer/feature-changer-user-guide/editing-page-module-intro/parameter-settings-area)

All your modifications and adjustments can be done in this area：

* Change the images and audios and videos.
* Adjust the texts and languages.
* Adjust the gameplay parameters.

<div align="left"><figure><img src="/files/1nP2TnqJrmOn8MFjp26B" alt=""><figcaption></figcaption></figure></div>

## [Work Preview Area](/playable-tools-feature-changer/feature-changer-user-guide/editing-page-module-intro/work-preview-area)

You could select the options and preview the work you made

<div align="left"><figure><img src="/files/HGwUVqcmNTSB5vyijqlv" alt=""><figcaption></figcaption></figure></div>

## [Project Operation Area](/playable-tools-feature-changer/feature-changer-user-guide/editing-page-module-intro/project-operation-area)

The top module is the top toolbar, where you can make operations like download and apply on Mintegral. You can also use the left-side navigation to return back to the home page.

<div align="left"><figure><img src="/files/xcfYPq1OmB9aGVXbC0uL" alt=""><figcaption></figcaption></figure></div>


# Parameter Settings Area

\#Feature Changer

The Parameter Settings Area can be divided into two main areas: ① Selection；② Parameter Adjustment

<mark style="color:red;">Please Note: Selecting different levels in selection area will expand the corresponding parameter content in the parameter adjustment area.</mark>

<figure><img src="/files/OH7rE2O0is32BO8Iommv" alt=""><figcaption></figcaption></figure>

**Selection Area** consists of three parts:  Common Assets / Text Setting / Scene (including thumbnails of all scenes.)

## <mark style="color:blue;">1.Common Assets</mark>

* Generally, the gameplay-related content is placed in this level, such as logo, permanent CTA buttons, background music, etc.&#x20;
* It includes various types of parameters.&#x20;

## <mark style="color:blue;">2.Text Setting</mark>

* In this section, you can make language-related settings, including multi-language configuration and intelligent translation for multiple languages.&#x20;

## <mark style="color:blue;">3.Scene</mark>

* Under the scene level, there will be multiple scene thumbnails as different processes in the playable.
* When selecting a scene thumbnail, it will include various types of parameters.&#x20;

That is,

When selecting the "Common Assets" and "Scene" levels, the parameter adjustment area will display various types of parameters.  [Parameter Type Intro](/playable-tools-feature-changer/feature-changer-user-guide/editing-page-module-intro/parameter-settings-area/parameter-type-intro)

When selecting the "Text Setting" level, the parameter adjustment area will display relevant content for language setting. [Multi-language Configuration and Translation](/playable-tools-feature-changer/feature-changer-user-guide/editing-page-module-intro/parameter-settings-area/multi-language-configuration-and-translation)


# Parameter Type Intro

\#Feature Changer

## <mark style="color:blue;">📒Operations Supported by Feature Changer</mark>

Currently, the Feature Changer supports the following operations: Replace, Edit, View Details, Hide/Show, Adjust Gameplay Parameters, Delete, Download, Reset.

⚠️ <mark style="color:red;">If you need to make major adjustments (such as adding resources, adjusting resource positions, adjusting animation events, etc.), you will need to</mark> <mark style="color:red;"></mark><mark style="color:red;">**copy the project to Content Editor**</mark> <mark style="color:red;"></mark><mark style="color:red;">for further operation.</mark>  [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation)

<table><thead><tr><th width="185">Operation</th><th width="346">Detailed Description</th><th>Screenshot</th></tr></thead><tbody><tr><td><mark style="color:orange;"><strong>Replace Asset</strong></mark></td><td><ol><li>Click the <strong>Replace</strong> button at the asset slot or the <strong>+</strong> icon next to the slot to open the asset library.</li><li>Confirm the asset and its size.</li><li>Click <strong>Confirm</strong> to complete the asset replacement.</li><li>For text assets, simply modify the content directly in the text box.</li></ol></td><td><img src="/files/6KT2y1f3s7pog9aTO95F" alt="" data-size="original"></td></tr><tr><td><p><mark style="color:orange;"><strong>Edit Asset Size</strong></mark><strong>;</strong></p><p><mark style="color:orange;"><strong>Fine-tune Asset Locations</strong></mark></p></td><td><ol><li>Click the <strong>Edit</strong> button at the asset slot to open the editing window (the yellow frame represents the effective display area).</li><li>You can adjust the size of the image by modifying its scale within the window.</li><li>Drag the asset to fine-tune its position.</li><li>Note: The template's original assets cannot be edited.</li></ol></td><td><img src="/files/vtoYbdvQvIlgpn7XWD6R" alt="" data-size="original"></td></tr><tr><td><strong>View Details</strong></td><td><ol><li><strong>Double-clic</strong>k the slot to open the asset details window.</li><li>Here, you can view the asset's detailed information, such as previewing videos/sequence frames and listening to audio.</li><li>For image assets, you can also adjust the "filter" and "color filter."</li></ol></td><td><img src="/files/HWYbXhyJH5TSXSr2DX70" alt="" data-size="original"></td></tr><tr><td><mark style="color:orange;"><strong>Hide/Show Assets</strong></mark></td><td><ol><li>For assets that are not needed or you don't want to display, click the icon to <strong>Hide</strong> them.</li><li>Click again to restore and <strong>Show</strong> them.</li></ol></td><td><img src="/files/8xZ9cGlcX6CUeEzz1SVs" alt="" data-size="original"></td></tr><tr><td><mark style="color:orange;"><strong>Adjust Gameplay Parameters</strong></mark></td><td>Allows modification of the template's preset Gameplay Parameters.</td><td><img src="/files/zWmAk3ghEIGOw9zbveue" alt="" data-size="original"></td></tr><tr><td><strong>Delete Assets</strong></td><td>For assets that are no longer needed, you can Delete them.</td><td><img src="/files/KdoPc92n8qqGghxPcqTO" alt="" data-size="original"></td></tr><tr><td><strong>Download Assets</strong></td><td><ol><li>Supports downloading a single asset.</li><li>Supports one-click downloading all the assets of the template.</li></ol></td><td><p><img src="/files/CycLYJzDPLOliAdrUvxI" alt="" data-size="original"></p><p></p><p><img src="/files/fEpu1LalaRyuk4yBalSE" alt=""></p></td></tr><tr><td><strong>Reset Assets</strong></td><td>Click the Reset button to clear the current slot's operations and restore the template to its initial settings.</td><td><img src="/files/UNnjaLPHlOoIDQl5Omej" alt="" data-size="original"></td></tr></tbody></table>

####

## <mark style="color:blue;">📒Parameter Types & Upload Format Requirements</mark>

The Feature Changer supports modifying parameters including but not limited to: images, sequences, text, videos, audio, colors, and gameplay parameters.

💡 <mark style="color:red;">Hover your mouse over the</mark> <mark style="color:red;"></mark><mark style="color:red;">**"+"**</mark> <mark style="color:red;"></mark><mark style="color:red;">icon to view the format requirements for the corresponding asset slot!</mark> Replace assets according to the requirements to reduce package size and dimension issues.

<div align="left"><figure><img src="/files/VRD9lj2O081nGyrkY4kR" alt=""><figcaption></figcaption></figure></div>

### 1.Image

Images can be selected and uploaded from the Images Lib and My Assets Lib:

* **Images Lib**: Commercial assets provided by Playturbo.
* **My Assets**: Assets that you have uploaded personally (only show assets that meet the current formatting requirements).
  * You can browse all assets and select previously uploaded assets.
  * You can upload new assets from your local device.

<div align="left"><figure><img src="/files/87NkuITdbW0nNPz2ECE6" alt="" width="512"><figcaption></figcaption></figure></div>

### **2.Sequence**

Sequences can be selected and uploaded from the Public Motion Graphic and My Assets Lib:

* **Public Motion Graphic**: Commercial assets provided by Playturbo.
* **My Assets**: Assets that you have uploaded personally.
  * You can browse all assets and select previously uploaded assets.
  * You can upload new assets from your local device (<mark style="color:red;">Only show assets that meet the current formatting requirements.If the asset cannot be added after upload, it may be due to frame count issues.</mark>)

<div align="left"><figure><img src="/files/tDRv3Do1vAtJEi2lG3Ky" alt="" width="544"><figcaption></figcaption></figure></div>

⚠️<mark style="color:red;">**\[Please note] Upload format requirements:**</mark>

* **ZIP** format containing multiple **PNG** files (Note: The ZIP archive can only contain either one folder or multiple PNG files directly.）
* Maximum File Size: Less than 8MB
* **Naming Restriction:** PNG file names should not contain spaces. Additionally, they should end with a number and be numbered sequentially.
* Quantity Limit: **It should be greater than or equal to the original number of frames** (<mark style="color:red;">Hover your mouse over the "</mark><mark style="color:red;">**+"**</mark> <mark style="color:red;"></mark><mark style="color:red;">icon to check the specific size and frame count requirements.</mark>)

<div align="left"><figure><img src="/files/RaxURR2f16pFX6XrR6IX" alt=""><figcaption></figcaption></figure></div>

* After uploading the sequences, you can remove frames or adjust the sequence order in the window. Once done, click **Next** to complete the sequence replacement.

<div align="left"><figure><img src="/files/ebv78cBiQMpvgULeeQxL" alt=""><figcaption></figcaption></figure></div>

### 3. Text

* **Text Content**: Simply modify the content directly in the text box.
* **Text Style**: Click the brush icon to bring up the pop-up window, where you can modify the text style.
  * You can apply the current text style to other languages (excluding font and font size).
  * You can apply the current text style to the landscape mode.

<div align="left"><figure><img src="/files/8m1hEGF2umZJfqOuO5re" alt="" width="497"><figcaption></figcaption></figure></div>

🌟**Supplement：Font**

* Support "Apply to texts in the same language".
* Support selecting a font from the Public Font Library for replacement or upload custom fonts locally for replacement.
* **Local font file format requirements:** ttf;otf，max10M.
  * Click the \[+Upload] button to bring up the local assets pop-up window and select the assets that meets the requirements.
  * After successful upload, add 'Uploaded' under 'Current Font' to display the font that was successfully uploaded.
  * If the font is deleted, a missing font pop-up window will appear when the project is reopened, and a new font selection is required at this time.

<div align="left"><figure><img src="/files/cVMOaWKHHtTbndVS4DF9" alt=""><figcaption></figcaption></figure></div>

### 4. Video

Videos need to be selected from the My Assets for upload and replacement (only show assets that meet the current formatting requirements).

* You can browse all assets and select previously uploaded assets.
* You can upload new assets from your local device.

<div align="left"><figure><img src="/files/h7Kg4z4bW8DqV7Zlax6q" alt=""><figcaption></figcaption></figure></div>

### 5. Audio

Audios can be selected and uploaded from the Public Sound/Public BGM and My Assets Lib:

* **Public Sound/Public BGM**: Commercial assets provided by Playturbo.
* **My Assets**: Assets that you have uploaded personally (only show assets that meet the current formatting requirements).
  * You can browse all assets and select previously uploaded assets.
  * You can upload new assets from your local device.

<div align="left"><figure><img src="/files/vmrvKBmmjdQjAZrxBT7D" alt=""><figcaption></figcaption></figure></div>

* Support adjusting the audio volume.

<div align="left"><figure><img src="/files/ElE4nPeG23BJRfLyGCtT" alt=""><figcaption></figcaption></figure></div>

### 6. Color <a href="#ydowb" id="ydowb"></a>

Some templates may include color settings, which can be modified or cleared.

<div align="left"><figure><img src="/files/2cVxd74DgTmPDQQLyLDt" alt=""><figcaption></figcaption></figure></div>

### 7. <mark style="background-color:red;">Gameplay Parameters</mark>

* For templates that involve code, adjustments to specific gameplay elements are supported.
* Hovering over the "question mark" will display a detailed description of the parameters.
* The gameplay parameters that can be adjusted vary for each template. You can check the details by entering the project.

**\[**<mark style="color:red;">**Extra Redirection / Extra jumps**</mark>**&#x20;] Explanation:** For most templates (especially those involving code), the gameplay parameters usually include an option called “Extra Redirection” or  “Extra jumps” , which allows you to quickly adjust the number of trial steps. This means after the player performs a valid operation *x* times, it will trigger a redirection to the app store (and users can return to continue the trial). &#x20;

You can freely set this value based on your creative needs.&#x20;

*<mark style="color:orange;">\*Set to 0 to disable — no redirection will occur during the trial.</mark>*

<div align="left"><figure><img src="/files/xiYyWLcx2P9Azj6sUzpc" alt=""><figcaption></figcaption></figure></div>

**🌟 Gameplay Parameter Types Example** (including but not limited to):

<table><thead><tr><th width="323" align="center">Parameter types</th><th align="center">Screenshot reference</th></tr></thead><tbody><tr><td align="center">slider</td><td align="center"><div><figure><img src="/files/xKIo9ZGf8zVYa0BVVH2P" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td align="center">input</td><td align="center"><img src="/files/h8iZiczCGv31POavFVgH" alt=""></td></tr><tr><td align="center">switch</td><td align="center"><img src="/files/kAnqMLSIMejS0YTpGJqd" alt=""></td></tr><tr><td align="center">radio</td><td align="center"><div><figure><img src="/files/13PD1m0DihyNeEsBenTS" alt=""><figcaption></figcaption></figure></div></td></tr><tr><td align="center">checkbox</td><td align="center"><img src="/files/A7a1lwhMg4OcqwWfiAkK" alt=""></td></tr><tr><td align="center">select</td><td align="center"><img src="/files/4a3fP6joRIktRU5VinNX" alt=""></td></tr></tbody></table>


# Multi-language Configuration and Translation

\#Feature Changer

## <mark style="color:blue;">1. Multi-language configuration</mark>

One playable can contain multiple languages, which you can apply in different regions.

![](/files/jwzfcVdh7LTGNoMjtDDF)

### 1.1 PLEASE NOTE

* <mark style="color:red;">**Multiple language versions are packaged together in one playable**</mark>**.** You only need to download one package and apply it in multiple countries.
* When previewing playables on the Playturbo platform or other channels, the language displayed will prioritize the default language of your device/browser.
* **Multilanguage auto-adaptation** **only applies to text assets.** Image and video assets cannot be auto-translated. If you need localized versions, please duplicate the project for each language and manually replace the image/video content accordingly.

### 1.2.DEFAULT LANGUAGE

Playturbo supports adding, editing, and deleting languages for your project.

* Change default language: After adding multiple languages, select the added language to successfully set it as the default language.
* Click the small pencil button on the right side of the default language to configure all text content languages in the material package one by one. The text input box supports vertical stretching.
* The currently selected default language does not support deletion. Unselected languages support text content editing and direct deletion.

**🌟 About Playturbo’s&#x20;**<mark style="color:red;">**Default Language**</mark>**&#x20;Rules**

* **The system will prioritize matching the user’s device/browser language with the languages added in the playable package.**
* **If there is no match, the language set as Default Language will be displayed.**

<div align="left"><figure><img src="/files/5gDyhzQ7GVxcR36g6XL2" alt=""><figcaption></figcaption></figure></div>

<table><thead><tr><th width="177">Added Languages</th><th width="122">Default Language</th><th>The Language Users Will See</th></tr></thead><tbody><tr><td>Example A: Chinese, English, Korean</td><td>English</td><td><ul><li>If the device/browser language is Chinese → Chinese</li><li>If the device/browser language is Korean → Korean</li><li>If the device/browser language is neither of the above → English</li></ul></td></tr><tr><td>Example B: English</td><td>English</td><td>Regardless of the device/browser language → English</td></tr></tbody></table>

## <mark style="color:blue;">2.Multilingual intelligent translation</mark>

When adding a language version, you can use the existing language to make the translation by the AI translation function.

#### STEP1 Add Language

\[Text Setting]- \[Add Language]

![](/files/jwzfcVdh7LTGNoMjtDDF)

#### STEP2 Confirm source and target languages

1. Select "Source Language", which must be an existing language version.
2. Use the text in that language version for translation. Select "Target Language", which is the new language to be added
3. Select the text to be translated and click the "Translate" button.&#x20;

<figure><img src="/files/awVNA4VARBYvTTeCq6Si" alt=""><figcaption></figcaption></figure>

#### STEP3 Fine-tune

After waiting for the translation result, you can further modify the text in the text box.

After the modification is completed, click "Confirm" to add a new language version.

<figure><img src="/files/Crhh2d5Dh3KBYUKXzZgB" alt=""><figcaption></figcaption></figure>

**Note:  When dealing with different currency symbols in text, manual adjustment is required.**


# Work Preview Area

\#Feature Changer

The Preview Module allows you to view the preview effects of your work on various device models, orientations (portrait/landscape), and different language environments after completion.

<div align="left"><figure><img src="/files/ZY5YsRcRxD1AfNJkO4Qn" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">1. Switching Preview Modes</mark>

* You can switch between different devices, languages, and orientations to preview the corresponding effects of your materials.
* **Preview Device Selection**
  * Currently, previewing is supported for five device models: iPhone X, iPad, iPhone 6, Redmi, and Vivo.(Proportional adaptation allows for proportional scaling that can be applied differently to different devices. Therefore, the current five device models can cover the preview effects of most devices on the market.)
  * If you want to preview the effects on other device models: 1）You can click the "Preview" button and use your phone to scan the QR code for preview. 2）Alternatively, you can "Copy Link" and open it in a browser. Then press F12 to enter developer mode, where you can switch to different device models for preview

<div align="left"><figure><img src="/files/kqDMvUUyGLZg9JlRmuVH" alt=""><figcaption></figcaption></figure></div>

💡**Generate External Preview Link - Tool Sharing**：<https://playable-portal.mintegral.com/#/tools/mw-viewer>

* On the preview page, click **Copy Link**.
* Open the tool and paste the link.
* Click **Generate** to create the external preview link.

<div align="left"><figure><img src="/files/fKA8usGwSyVXWrS6tgv2" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">2. Preview/Refresh/Save</mark>

* Each of your edits can be previewed in real-time by using the **Refresh/Preview/Save** options.
* After completing all your edits, remember to click the **Save** button in the top right corner.

<div align="left"><figure><img src="/files/2TFZEn1QBvCkY8wkwwff" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">3. Tracking Log</mark>

When you finish creating and previewing your materials, you can click on "Tracking Log" to open a window where you can see the distribution of both "Basic Tracking" and "Custom Tracking" in real-time.

* Basic Tracking：Basic Tracking covers the fundamental tracking elements of interactive materials and is automatically included in every playable material. *Examples include the start of displaying the playable material, user's first interaction, user redirecting to the store link, etc.*
* Custom Tracking：Custom Tracking requires manual addition, and for Template Feature Creation projects(General Creation),  the custom tracking has already been set up by Mindworks, so you don't need to configure them manually.&#x20;

<div align="left"><figure><img src="/files/Y7NPa5WWwx47uAWSFe20" alt=""><figcaption></figcaption></figure></div>


# Project Operation Area

\#Feature Changer

The top area is the Project Operation Area, which supports (from left to right):

1. Click "General Feature Changer" to **return to the project list**.
2. Click the project name to **rename** the current project.
3. Display the remaining download quota.
4. **Restore Defaults**: Use with caution!  Clicking this button will clear all your operations and restore the initial settings of the template.
5. Save Project.
6. <mark style="color:red;">**Copy to Content Editor**</mark>: If you need to make major adjustments to the current project (e.g., adding assets, adjusting asset positions, modifying animation events), you can copy the project to Content Editor for further operations.  Please refer to  [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation)
7. **Download/Apply Project**   [Feature Changer - Download\&Apply](/playable-tools-feature-changer/feature-changer-user-guide/feature-changer-download-and-apply)
8. Task Center: View the export progress and download history of the project.
9. Copy Current Project.
10. Download all assets of the Current Template.

<div align="left"><figure><img src="/files/JhnofrTHCAWc8Q2pQLOu" alt=""><figcaption></figcaption></figure></div>


# Special Feature:3D Templates


# 3D Templates - Basic Feature Overview

\#Feature Changer #3D Templates

Playturbo now supports the production of 3D playable materials, which can be created using Feature Creation.

<mark style="color:red;">**NOTE：Currently, the 3D templates only support "Feature Creation",**</mark> <mark style="color:red;"></mark><mark style="color:red;">not "Content Creation."</mark>

## 📒<mark style="color:blue;">Project Creation</mark>

1）On the "Templates" - "Playable Templates" page, filter the templates by "3D" type to display all 3D templates. *(More 3D gameplay templates are in the works—stay tuned!)*

<div align="left"><figure><img src="/files/DZ6GNbq94ReR91S9uZBF" alt=""><figcaption></figcaption></figure></div>

2）Click on the template to preview it. The preview interface will display the gameplay methods of the current template, as well as the number of models and animations used in the template.

Pro Tip: A template may include multiple sets of skins for replacing different models and gameplay parameters. You can switch skins for preview and select the most suitable one to create a project.

3）Once you have decided on a skin, click on "Feature Creation" and enter the project name. You will then be taken to the editing page.

<figure><img src="/files/Iyh6zjqt6BO2bLgvHWmF" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">📒Production Process</mark>

In comparison to 2D templates, the editing page of 3D template Feature Creation has added a new module called "Preset and Camera."

⭐<mark style="color:red;">**Suggested Operation Process：**</mark>

* Start by adjusting the parameters of Preset, Screen Adaptation, and Camera in the "Preset and Camera" section.
* Then proceed to "Common Assets" and "Scene" to replace and adjust 3D model resources and other 2D resources.
* If there is a need for translating into multiple language versions, you can enter the "Text Setting" module to add or modify languages.

<div align="left"><figure><img src="/files/eeFHuBMbzYQc87MIsgal" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">📒Feature Description</mark>

### 1.Preset and Camera

The "Preset and Camera" module consists of three parts: Preset, Screen Adaptation, and Camera.&#x20;

<figure><img src="/files/cyhLQFBDMqHZ4bY5DWQ9" alt=""><figcaption></figcaption></figure>

#### <mark style="background-color:blue;">1.1 Preset</mark>

* 'Preset' are a collection of game logic and material models. By switching presets, you can produce materials with different game logic, different scenes, and different models.
* 'Preset' are single-select toggles.
* Different presets may use different models. <mark style="color:red;">**You'll need to switch presets first, then go to the scene to adjust specific assets and gameplay.**</mark>

<div align="left"><figure><img src="/files/cTNHHMHcQDsHUmoSnFAz" alt=""><figcaption><p>As shown in the figure, you can adjust the player model, bonus items, and obstacles within the template.</p></figcaption></figure></div>

#### <mark style="background-color:blue;">1.2 Screen Adaptation</mark>

Under "Screen Adaptation," you can adjust Fov Offset(Field of View) for both landscape and portrait orientation.

* Fov Offset refers to the adjustment or deviation of the Field of View (FOV), indicating the range of vision that the camera or viewpoint can see.
* Fov Offset is used to adjust the center point of the field of view, allowing the visual field to shift in a certain direction, thereby altering the user's visual experience.
* A larger Fov Offset provides a wider field of view, suitable for open environments; a smaller Fov Offset provides a more focused field of view, suitable for confined spaces.

<figure><img src="/files/tMg12TIR1SL4vLliWL1f" alt=""><figcaption><p>Before</p></figcaption></figure>

<figure><img src="/files/1AeGpxc67D8Niie6YiuZ" alt=""><figcaption><p>After</p></figcaption></figure>

#### <mark style="background-color:blue;">1.3 Camera</mark>

Help to precisely control and adjust the camera's angles and movements to provide a better visual experience and interactive effect. **The number and type of adjustable camera parameters for each template vary depending on the template's gameplay.**

For example, in the \[3D classic parkour] template, the three adjustable camera parameters are: Intro Close-up, Main Camera for Running, and Settlement Shot.

<figure><img src="/files/gY2XhFic85ZccCIPrmbY" alt=""><figcaption></figcaption></figure>

Expanding on each camera parameter allows you to adjust the camera's position and angles to achieve different visual effects.

The adjustable parameters include:

* **Polar Angle:** Represents the camera's angle of rotation in the vertical direction. A larger value indicates a greater upward rotation.
* **Azimuth Angle:** Represents the camera's angle of rotation in the horizontal direction. A larger value indicates a greater rightward rotation.
* **Radial Distance:** Represents the distance between the camera and the target object. A larger value indicates a farther camera.
* **View OffsetX/Y/Z:** Adjusts the X, Y, and Z axis coordinates of the camera to change its position.
* **Damping Factor:** Used to smooth camera movement;  a larger Damping Factor results in slower movement or rotation of the camera.

<div align="left"><figure><img src="/files/55s3UezZBKveNT3D1HNB" alt=""><figcaption></figcaption></figure></div>

***

**2.Scene: 3D Resource**

Enter the "Scene" section, where you can see all the 3D model resources in the project in addition to regular 2D resources. You can edit, replace, upload, and download 3D model resources.

### <mark style="background-color:blue;">2.1 Model Replacement & Upload</mark>

Click the "Replace" button on the model resource to open the popup window:

a. Supports selecting a preset model from the "Model Lib" for replacement.

b. Also supports uploading your own model resource locally via "My Assets" for replacement.

⚠️Note: Currently <mark style="color:red;">**3D resources only  support replacement with the same type of resources**</mark>, such as person replacing person, animal replacing animal.

<figure><img src="/files/5xigXf2gPTq3Zgb0xAOw" alt=""><figcaption></figcaption></figure>

### <mark style="background-color:red;">**🌟**</mark><mark style="color:red;background-color:red;">Uploading & Replacing Your Own</mark> <mark style="color:red;background-color:red;"></mark><mark style="color:red;background-color:red;">**Model**</mark> <mark style="color:red;background-color:red;"></mark><mark style="color:red;background-color:red;">Resource</mark>

**Kind Reminder**

* Textures must follow the specified naming conventions.
* The uploaded model file must contain only one mesh and one material. Skinning and bone binding must be processed according to the required specifications.
* The bone hierarchy must remain fully consistent with the blueprint skeleton structure, including bone names and parent relationships.

Please refer to the detailed specifications and steps below.

#### **Step 1: Download the Template Model & Skeleton**

Click the "Download Model & Skeleton" button on the model resource to download the corresponding model JSON file, texture files, and the Skeleton associated with the rigged model. Users can rebind the skin for rigged models, upload their customized models, and ensure proper animation playback.

Skeleton: A rigged model template. If users want their uploaded model to include bones and play animations, they must bind the uploaded model to the downloaded Skeleton to ensure proper animation playback.

<div align="left"><figure><img src="/files/sdG2kVw0IcbzehhEtKZG" alt=""><figcaption></figcaption></figure></div>

#### **Step 2:** Processing Models Locally

<mark style="color:red;">**⚠️Please follow the Skeleton binding requirements:**</mark>

* The model and skeleton must use the exact same scale and unit (1 in Maya; 100 in 3D Max).
* <mark style="color:red;">Please use the downloaded Skeleton directly for skinning and rigging. The structure, bone count, and naming must be exactly the same as the Skeleton!</mark>
* All bones in the provided Skeleton must be skinned and assigned weights, ensuring that every bone has a non-zero weight.
* Bip001 needs to beincluded  in the skinning.
* When importing or exporting the skeleton in Blender, an additional parent node may sometimes be automatically created. Please make sure to remove any extra nodes and ensure that the root parent bone starts with bip001.

<div align="left"><figure><img src="/files/Ar6dSnKeGBxuGgwJRUDY" alt="" width="290"><figcaption><p>Complete Skeleton Structure Diagram in 3D Max</p></figcaption></figure></div>

<mark style="color:red;">⚠️</mark> <mark style="color:red;"></mark><mark style="color:red;">**Please follow the model upload requirements:**</mark>

* The uploaded model must be placed inside a ZIP package, with both the model and texture files stored within the project folder.
* Supported model formats: "gltf", "glb", or "glb+bin".
* Supported texture formats: "JPG" or "PNG".
* Texture naming rules: Color texture suffix: "xxx\_color".  Normal map suffix: "xxx\_normal"
* Maximum ZIP file size: 5MB.

***

\*If you encounter an upload error such as“File content error.The bone names are inconsistent with the template.”or "Skeleton joint name %v is not match.", **please first verify whether your model file fully complies with the specifications above.**

In most cases, this issue occurs because the bone hierarchy structure was altered after importing the model into tools such as Blender. We recommend importing the processed model into 3D Max or Maya to compare your skeleton file with the blueprint skeleton. If there are any discrepancies, please remove any additional or unintended nodes.

*<mark style="color:$info;">The platform is currently optimizing this feature — FBX file downloads will be supported in the future.</mark>*

<div align="center"><figure><img src="/files/FPuBjJK1JTlpugkvzxII" alt=""><figcaption></figcaption></figure> <figure><img src="/files/rw9u9Nsu8WoOKQWPjorQ" alt=""><figcaption></figcaption></figure></div>

#### **Step 3:** Upload & Replace Model

Once your model has been processed locally, you can upload and replace it by: Select the model → Replace → My Assets → Upload.

After replacement, you can proceed to “Model Editing.”

<figure><img src="/files/vGvO3cohGRHY71iWPoo2" alt=""><figcaption></figcaption></figure>

🌟 Additionally, if you prefer not to process the model resources yourself, you can use the "**3D Model Order**" service ("My Assets" → "Model Processing Service"). Our team will handle the model refinement to ensure compatibility with the platform and achieve the best visual performance.

<mark style="color:blue;">For specific contents, please refer to:</mark> [3D Model Order](/playable-tools-feature-changer/feature-changer-user-guide/special-feature-3d-templates/3d-model-order)

<figure><img src="/files/LrvqDzIdV1l6N0JAA2IB" alt=""><figcaption></figcaption></figure>

### <mark style="background-color:blue;">2.2 Model Editing</mark>

Click on the "Edit" button on a model resource to open the "Model Editing" pop-up window (or automatically enter the editing window after replacing the model resource).

The left side of "Model Editing" is the parameter adjustment area, and the right side is the preview area.

* The preview area includes "Before" and "After" to show the model before and after modifications. , and allow real-time preview of the adjusted parameters.
* **The preview area** offers three different preview modes to control the camera lens. The last button is the 'Reset Camera' button.
  * **Default Mode**: The current mode, where left-click and drag rotates the view, and middle-click and drag translates the position.
  * **Pan Mode**: In this mode, left-click and drag to pan the preview camera horizontally or vertically.
  * **Zoom Mode**: Left-click and drag to zoom in or out of the scene.

<figure><img src="/files/ZNnZS3zA8gGYJSXmOhqX" alt=""><figcaption></figcaption></figure>

**The parameter adjustment area** includes three parts: "Basic Parameters", "Skin" parameters, and "Animation" parameters (for some models).&#x20;

<div align="left"><figure><img src="/files/CaOGyTlr2sMGDq0Es4K6" alt=""><figcaption></figcaption></figure></div>

#### **1）Basic Parameters**

Modify the model's X, Y, Z position, rotation, and scaling.

Pro Tip: The "Scale" is set to be linked by default. If you don't need it, you can click the icon button to unlink it.

<div align="left"><figure><img src="/files/34z8CKoT2IBBorZueUae" alt=""><figcaption></figcaption></figure></div>

#### **2）Skin**

You can adjust the "Color modification by component" and "Material parameters" of the model.

* **Color modification by component：**&#x49;t allows you to modify the colors of different parts of the model.
* Note: The supported parts for color customization are based on the more prominent or commonly used parts extracted from the internal structure of the model. Custom parts are currently not supported.
* It supports color clearing and resetting.

<figure><img src="/files/Ji3QssmySOCLeveW23gm" alt=""><figcaption></figcaption></figure>

* **Material parameters：**&#x59;ou can modify parameters such as "Primary color," "Ambient Occlusion Intensity," "Roughness," "Metallic gloss," "Specular Intensity," and "Emissive color" for the model.(You can experience the specific modification effects yourself.)
* It supports parameter resetting.

<div align="left"><figure><img src="/files/HtbrkN2R8oEk3HgcXNy9" alt=""><figcaption></figcaption></figure></div>

#### **3）Animation**

<mark style="color:red;">Note：If</mark> <mark style="color:red;"></mark><mark style="color:red;">**some models**</mark> <mark style="color:red;"></mark><mark style="color:red;">have corresponding animations, there will be an 'Animation' Tab page in the model editing pop-up window, showing all the animation resources associated with the model.</mark>

For animation resources, you can replace animations, adjust playback speed, set rotation angles, and adjust keyframes.&#x20;

* **Replace:** Supports replacing animation resources.&#x20;
* **Speed：**&#x44;rag the slider or input a value to adjust the playback speed, and preview the animation in the right-side preview area.&#x20;
* **Rotation:** Drag the slider or input a value to adjust the model's rotation angle, and preview the animation in the right-side preview area.&#x20;

<div align="left"><figure><img src="/files/qOGYOJ2ZqiQMZBahlDAy" alt=""><figcaption></figcaption></figure></div>

* **Keyframe Adjustment:** For some animations, specific events are triggered at a certain frame, which is called a keyframe. *For example, when the 'attack' animation reaches the 5th frame, it triggers the 'bleeding' event.*&#x20;
* The position of this keyframe can be adjusted in the preview area on the right side by moving the diamond slider <mark style="color:red;">(Note that after replacing the animation, the position of the keyframe may need to be adjusted.)</mark>

<div align="left"><figure><img src="/files/hHtCKjIvOufC1d08Dzml" alt=""><figcaption></figcaption></figure></div>

After completing adjustments in "Preset and Camera" and "3D Resource," you can continue replacing and adjusting other regular 2D resources.&#x20;

For specific operations, please refer to [Editing Page Module Intro](/playable-tools-feature-changer/feature-changer-user-guide/editing-page-module-intro)


# 3D Model Order

When using 3D templates for Feature Creation, if you’d like to use your own 3D model resources, you can initiate a **3D Model Order**.  Our internal team will handle it according to the platform's production specifications and requirements to ensure compatibility and optimal performance.

## <mark style="color:blue;">📒3D Model Order - Service Description</mark>

Dear Customer, we offer a professional 3D model resource conversion service designed to help adapt your existing 3D models to our platform projects and ensure optimal performance on the platform.

### **1. Service Content**

* **Model Evaluation:** We begin by thoroughly evaluating your 3D model resources, including model complexity, materials, and textures, to determine the best conversion strategy.
* **Format Conversion:** Based on your needs and platform compatibility requirements, we will convert the 3D model resources to the most suitable format.
* **Model Optimization:** To ensure smooth performance on the platform, we will optimize the model, including reducing polygon count, skinning and rigging, and resizing textures.
* **Compatibility Testing:** The converted model will undergo rigorous compatibility testing to ensure it runs smoothly across different devices and operating systems.

### **2. Service Rules**

* **Submission Requirements:** Clients must provide the complete 3D model and texture files or 3D source files.
* **Copyright Declaration:** Clients must guarantee that the submitted 3D model resources have legal usage rights and copyright. We are not responsible for any legal issues related to copyright.
* **Service Fee:** <mark style="color:red;">The adaptation fee for a single 3D model is 2,000 points or $40.00</mark>. Points will be deducted upon work order submission (if the order is withdrawn or rejected, the points will be refunded). The balance will be deducted upon order delivery.
* **Delivery Time:** Delivery time for model conversion services will depend on model complexity and workload. We will provide an estimated completion time after evaluation.
* **Service Termination:** Before a work order is accepted by us, clients may withdraw the order on the "3D Model Order" page to terminate the service.  Orders may also be rejected due to model resource issues. Once a work order is accepted, the service cannot be terminated.

####

## <mark style="color:blue;">📒3D Model Order - Usage Steps</mark>

### **1.Create a 3D Model Order**

* In the 3D template project for "Feature Creation," select the 3D model you want to replace and click "Replace."
* Choose "My Assets" - "Model Service."

<figure><img src="/files/jpoiwEnJ813F0nico9fL" alt=""><figcaption></figcaption></figure>

* In the popup, upload the 3D model file you wish to replace (with format requirements as shown below).
* After uploading, click “Submit” to successfully create the 3D Model Order.
* <mark style="color:red;">Please Note: Each Model Service requires 2,000 points or $40.00 (if points are insufficient, please contact your AM to recharge).</mark>

<div align="left"><figure><img src="/files/TSe2vA7xnV9aH6PNSvbs" alt=""><figcaption></figcaption></figure></div>

### **2.View 3D Model Orders**

Go to the homepage, click on "Creative Service" - "3D Model Order," where you can view all submitted orders.

* **Pending:** Newly submitted orders will be in "Pending" status, awaiting confirmation from our internal production team.  At this stage, you can also choose to "Withdraw" the order.
* **Reject:** The internal production team may reject the order (for reasons such as uploaded files not meeting requirements), so the order status will change to "Reject," displaying the reason for rejection. You can click the "Upload" button to re-upload the model and initiate the order again.

<div align="left"><figure><img src="/files/aScAKQBAWUwMSMuNrSyx" alt=""><figcaption></figcaption></figure></div>

* **In progress:** Once confirmed by the internal team, the order status will update to "In progress," showing the estimated delivery time.
* **Completed:** After delivery, the status will change to "Completed." <mark style="color:red;">The delivered model files will automatically upload to "My Assets" and replace the corresponding models in the project.</mark>  You can click to download the 3D model.

<div align="left"><figure><img src="/files/NUzmqZDMn65Fkv4cmgzs" alt=""><figcaption></figcaption></figure></div>

* You can also go to the homepage, click on "My Assets" - "Creative Assets," filter for 3D Model, and view or download resources.

<div align="left"><figure><img src="/files/iwZQtGikhf8aan6fiLph" alt=""><figcaption></figcaption></figure></div>


# Feature Changer - Download\&Apply

\#Feature Changer

💡After completing your project editing, proceed with the **download process**:

* **Step 1**: Link project information.
* **Step 2**: Click the "Apply/Download" button to open the window.
* **Step 3**: Check the channels, then apply or download (if the file size exceeds requirements, compress before exporting).

## <mark style="color:blue;">1.Project Info(Associate with promoted product)</mark>

* If no promotional product is associated, clicking Download will trigger a pop-up message.
* Click **"go to supplementary information."**  Here, you can view Project Details, Export History, and Associated Promotional Products.

<div align="left"><figure><img src="/files/8ejlFll307tOsGf1d3Ud" alt=""><figcaption></figcaption></figure></div>

* Click on the "+Associate with promoted product" button, you can select “Choose from Assets” or “Add Promoted Product”.
  * **Choose from Assets**：You can select previously added promotional products. When needed, simply click "Select" for reuse.
  * **Add Promoted Product**：You will need to fill in the relevant product information. Once added, it will be saved in the assets library.

<div align="left"><figure><img src="/files/M2SI8UvbqCDkWOTACj42" alt=""><figcaption></figcaption></figure></div>

**🌟Add Promoted Product**

* Choose the product type, platform type, and enter the corresponding URL. >>><mark style="color:blue;">For WeChat MiniGame channel, please refer to:</mark>  [Playable Upload Specifications for Networks](/export-and-deployment/playable-upload-specifications-for-networks#currently-supported-a-d-networks--test-apps-2)
* After successfully entering the app store link, the product name, package name, and logo icon are usually auto-populated. If they do not auto-populate, please upload them manually.
* Once the information is complete, click "Confirm" to finish adding the promotional product.

👉Related content： [1. Associate with promoted product](https://playturbo-doc-en.mindworks-creative.com/playable-tools-content-editor/content-editor-faq/export-and-deployment-issues#id-1.-associate-with-promoted-product)

<div align="left"><figure><img src="/files/yBNJcymSSlgJgLGQi2Kr" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">2.Download & Apply</mark>

After confirming that the current project **version** is correct on the download page, proceed with "Download" or "Apply".

<mark style="color:red;">Both</mark> <mark style="color:red;"></mark><mark style="color:red;">**Apply**</mark> <mark style="color:red;"></mark><mark style="color:red;">and</mark> <mark style="color:red;"></mark><mark style="color:red;">**Download**</mark> <mark style="color:red;"></mark><mark style="color:red;">are ways to export playable creatives, you can choose either one:</mark>&#x20;

"Apply" means directly pushing the current playable creative to the selected ad platform, without needing to manually upload it after downloading. It’s more convenient and also enables you to analyze the creative’s performance data later through the platform's “Creative Insights” feature.

<div align="left"><figure><img src="/files/vIrHr3gfT1uYKZvq578P" alt=""><figcaption></figcaption></figure></div>

### a. If you choose **Download**

* Click the Download button to open the window.
* Check the channels that need to be downloaded.
* Once the package size calculation is complete, click the "Download" button to complete the download of the project for that version.

  * **Download**: Downloads a compressed package containing the individual channel packages.
  * **Get link**: Downloads an Excel spreadsheet containing the links for each channel package.

  *Please note: “Get Link” means download. Each click will deduct one download quota.Subsequent clicks on “Download” will not deduct additional quota.*

<div align="left"><figure><img src="/files/bvpOIYde23rFp5RKtzxx" alt=""><figcaption></figcaption></figure></div>

### b. If you choose Apply

If you choose Apply,  make sure the corresponding ad platform account is authorized first.&#x20;

👉 [Ad Account Authorization and Playable Push](/export-and-deployment/ad-account-authorization-and-playable-push)

Currently, the platform supports account authorization and apply functions for Mintegral, Unity, AppLovin, ironSource, and XMP.

**Taking Mintegral as an example:**

-Entrance 1：On the preview page, click on the "Apply" button on the right side.

<div align="left"><figure><img src="/files/6R02l6IdHJDP2AuiMnEU" alt=""><figcaption></figcaption></figure></div>

-Entrance 2：In the "Download Work" popup window, select the Mintegral channel and click on "Apply".

<div align="left"><figure><img src="/files/PvnA63rqOkDVoEjrYLQJ" alt="" width="473"><figcaption></figcaption></figure></div>

* You can choose to apply to the current delivery account or another Mintegral delivery account (selecting another delivery account requires entering the account and password).
* <mark style="color:red;">**Note:**</mark> Mintegral accounts have "main account" and "sub-account". When the playable is applied to the sub-account, the creative list of the sub-account & the main account will display this playable; when the playable is applied to the main account, the creative list of the main account & the sub-account authorized by the main account will display this playable.
* Click "Apply" to apply the assets to Mintegral's self-service advertising platform for internal review and delivery.

<div align="left"><figure><img src="/files/oGsfhlWR8m85FQCwsEYX" alt="" width="563"><figcaption></figcaption></figure></div>

* After applying, the assets will undergo a review process that typically takes 1-2 business days (please allocate sufficient time for the review based on your campaign schedule).&#x20;
* Once approved, they will be displayed on the "Mintegral Ad Delivery Platform" page：To associate the approved assets with the corresponding ad units, navigate to \<Ad Delivery> -- \<Asset Management> -- \<Playable Ads>, select the corresponding assets, and click "Apply in Offer." This will complete the process of putting the assets online.

<div align="left"><figure><img src="/files/jOfRlOr0PE5b8XVKMmUV" alt=""><figcaption></figcaption></figure></div>

⚠️<mark style="color:red;">Please Note:</mark>&#x20;

* <mark style="color:red;">Downloading playables from the Mintegral channel to local storage is not supported at the moment. Only Push is supported.</mark>
* <mark style="color:red;">For Custom projects:</mark> a Mintegral Archive Download option is available here. Please note that the downloaded files are for internal archiving only and do not comply with delivery specifications for playable ads, therefore they cannot be used for ad delivery.

<div align="left"><figure><img src="/files/MVG6QFl3ZKNFgGxhudz7" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">3.Compress the work</mark>

If a package exceeds the size limit of a specific channel, it cannot be Get Link / Download / Push. You must first reduce the package size before proceeding: *Further compress the assets and return to the editing page to replace them*, or *Compress the entire package directly in the Download Work pop-up window.*

<div align="left"><figure><img src="/files/YcCZuVFT2s0BJMRlUDRT" alt="" width="373"><figcaption><p>The size limit of each channel's package can be viewed during "download"</p></figcaption></figure></div>

### a. Smart compression

* Check the channels for which you want to compress the package.
* Click to select: smart compression，and adjust the quality of the work.
* Click "Apply and calculate" to finish smart compression.
* Support package compression <mark style="color:red;">**preview**</mark> mode.

<div align="left"><figure><img src="/files/bC7nBd1voMRUsjJigX5c" alt="" width="536"><figcaption></figcaption></figure></div>

### b. Custom compression

* Check the channels for which you want to compress the package.
* Select 'Custom compression' to adjust image quality, video quality, and audio quality separately.
* After adjusting, click 'Apply and calculate' to complete the custom compression.
* Support package compression <mark style="color:red;">**preview**</mark> mode.

<div align="left"><figure><img src="/files/kD1AZ6y2iw52yd5MS6eb" alt="" width="529"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">4.PL Tracking Management</mark>

* In the  "Download Work" popup window, click on "PL Tracking Management" to navigate to the corresponding page.&#x20;

<div align="left"><figure><img src="/files/iYqgIDv2dQxItKlfe7PA" alt=""><figcaption></figcaption></figure></div>

* On this page, you can select whether to enable tracking for the respective channels.&#x20;
* When selected, the embedded code will be added to all playable creatives downloaded/applyed through the corresponding channels. If not selected, the code will not be added. It is recommended to enable the addition of tracking points as it will enable advanced analysis functions such as interactive data analysis, scene analysis, and user journey analysis for the creatives.
* Currently, only the channels shown in the image below are supported. Please contact your AM for support on other channels.

For related information you can refer to  [Creative Insights](/creative-insights)

<div align="left"><figure><img src="/files/78AOepvRVmthagkhnmEi" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">5.Playable Upload Specifications for Networks</mark>

[Playable Upload Specifications for Networks](/export-and-deployment/playable-upload-specifications-for-networks)

## <mark style="color:blue;">6.Version Definition (Regarding Download Count Deduction)</mark>

After jumping to the download page, you'll see project version info displayed on the right.

<mark style="background-color:red;">**⚠️Please Note: Playables with identical content are considered the same version.**</mark> &#x20;

* <mark style="color:red;">If you make any edits to the project content after exporting, such as editing text or replacing product information, a new version will be generated. Exporting this new version will result in an additional deduction from your download quota. Please make sure to review and confirm that all materials are correct before exporting.</mark>
* Each version corresponds to a creative name, and if material analysis is conducted later, the corresponding creative name will be displayed.&#x20;

<div align="left"><figure><img src="/files/xFGdzkALqB8K8S1TUdC3" alt=""><figcaption></figcaption></figure></div>

**1）Latest Version**&#x20;

* You can perform download and apply operations on the "Latest Version" (the current version).
* If further adjustments to the material are needed, click the "Back to Edit" button to go back to the editing page and continue editing.
* You can also rename the creative here.

<div align="left"><figure><img src="/files/Lms2Mh3Y2UmiNcYH5fyd" alt=""><figcaption></figcaption></figure></div>

**2）Historical Version**

* Click on the corresponding historical version to view the historical materials.&#x20;
* After viewing, if necessary, you can download the historical version again (only supports downloading previously downloaded channels, does not support secondary applying).

<div align="left"><figure><img src="/files/iiTQXQgC3zN3GrUt3dzA" alt=""><figcaption></figcaption></figure></div>

**Version**


# Feature Changer-FAQ

This module documents some common issues and solutions encountered while using the Feature Changer, aiming to address your questions during the creation process.

You can navigate to the relevant subdirectory to find the issues and solutions you're looking for, or use the search bar in the upper-right corner to quickly search **by keywords**!

<div align="left"><figure><img src="/files/8hePBQ3bfdYDDZFVHgjQ" alt=""><figcaption></figcaption></figure></div>


# Asset Replacement Issues

## <mark style="color:blue;">1.</mark><mark style="color:blue;">**Product Information Related Issues**</mark>

#### **Q1: In the template project, do I need to replace the product information with my target product, or will it automatically correspond to the offer?**&#x20;

**A:** The product information needs to be replaced by uploading your own assets. It will not automatically correspond to the offer. (Applies to both Feature Creation and Content Creation.)

<div align="left"><figure><img src="/files/ZJLKq96MyvHLOo2GNTWp" alt="" width="563"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">**2.Asset**</mark> <mark style="color:blue;"></mark><mark style="color:blue;">Format</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**Related Issues**</mark>

#### **Q1: When using "Feature Creation," I noticed that the slots require images with a maximum size of 1MB. Is this specific to the template I'm using or applicable to all templates?**&#x20;

**A:** The image size requirement applies to all templates, including both Feature Changer and Content Editor, where images should be below 1MB.  Considering the package size limitations, it is advisable not to use excessively large images, as they would still need to be compressed if they exceed the package size limit.&#x20;

<div align="left"><figure><img src="/files/Wk1MlEoCh2wKkCCSC9il" alt=""><figcaption></figcaption></figure></div>

#### **Q2:** After replacing assets, the preview image looks a bit blurry — what should I do?

**A:** Since all channels impose restrictions on package size, we recommend avoiding oversized assets during production to prevent forced compression or unnecessary rework.

**Suggested solutions:**

* **If the original image is clear and detailed →**\
  If replacing the asset in Feature Creation results in a blurry appearance, you can <mark style="color:red;">Copy to Content Editor</mark> and replace the image there. (For background images, try adding them under "Scene" instead of uploading them to "Global Settings" → Background Image.)
* **If the original image is not clear enough → re-export:**\
  a. When exporting PNGs, avoid using quick export. Choose the highest quality settings.\
  After exporting high-quality, large-size images, use a compression tool like <https://tinypng.com/> to bring the file size back within limits.

  b. Alternatively, keep all images you suspect are blurry under 1MB. If the exported file exceeds the package limit, use the \[Smart Compression] feature to compress the entire package.

  c. Or convert the image to JPG format, then Copy to Content Editor and replace it there.\
  (PNG files are generally larger than JPGs at the same resolution.)

#### **Q3: How can I replace a sequence frame slot in the template with a static image?**

**A:** The format of the template slots cannot be changed. To replace it with a static image, you can package multiple identical images into a sequence frame format and upload them as replacements. For example, if the slot requires 10 frames, you need to locally package at least 10 identical images.

👉Related content： [/pages/BQU6VBfvyPB5ks7aqpBD#id-2.sequence](https://doc.playturbo.com/playable-tools-feature-changer/feature-changer-faq/pages/BQU6VBfvyPB5ks7aqpBD#id-2.sequence "mention")

<div align="left"><figure><img src="/files/SJs9lIHy49iLXRmqYFcq" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">**3.Background Image Related Issues**</mark>

#### **Q1: After replacing the background image, is the image not displayed completely?**

**A:** When replacing image assets, such as those related to the **background**, with the label "Background map"&#x20;

* It is recommended to use suitable images for backgrounds, such as solid color images, blurred images, or images that are unaffected by stretching.&#x20;
* It is not recommended to use images closely related to core gameplay or images that feature prominent characters as background images.

This is because the background image primarily serves as a fallback for layout adaptation in both portrait and landscape orientations, ensuring full-screen coverage without white or black borders. Therefore, the requirements for background image dimensions are often larger than regular layers. If your background image has smaller dimensions or the main subject occupies a significant portion, it may be stretched and distorted, resulting in imperfect adaptation or incomplete display.

<div align="left"><figure><img src="/files/OvM3oFqeOsF7SxFZxczX" alt=""><figcaption><p>Examples related to background images</p></figcaption></figure></div>

If you still wish to use such images as backgrounds, it is suggested to:

* Pre-process the image externally: Adjust the image size and decrease the prominence of the main subject. Then, proceed with the replacement within the project.
* If "General Creation" does not meet your requirements, it is recommended to **Copy the project to Content Editor** and perform precise editing within Content Editor, adjusting the size and position of the image accordingly.

<div align="left"><figure><img src="/files/q9b92UNpQdF3LQhUAUkg" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">**4.**</mark><mark style="color:blue;">Package Size or Platform Error Issues</mark>

#### **Q1:** When using Feature Creation, I get the error "Configuration content under the current category validate fail," what does this mean?&#x20;

**A:** This error most likely occurs when you transfer a project saved as a template in the Content Editor to the "Feature Changer." The issue is typically caused by certain layer names being too long, as the asset slot names in Feature Changer need to be kept within 100 characters.  Simply shorten the name at the asset slot to resolve this.

<div align="left"><figure><img src="/files/lhyog4kAFCZaCZC4nATq" alt=""><figcaption></figcaption></figure></div>

#### **Q2:** All the assets I plan to replace are only 3 MB locally. Why does the package size increase significantly after replacing them via the Feature Changer?

**A:** In most cases, this happens because the **Crop** function was used during the replacement process, meaning the display ratio of the image was adjusted within the editor. In addition, if the dimensions of your image do not match the required size of the template, the editor will automatically trigger the cropping behavior even if you did not manually adjust the ratio.

> ⚠️ The cropping function in the Feature Changer is currently pending optimization and should be avoided for now.\
> To prevent package size issues, please prepare your images locally according to the required dimensions of the template before importing them into the editor.

Image preparation recommendation:  [Feature Changer-User Guide](/playable-tools-feature-changer/feature-changer-user-guide)

<figure><img src="/files/U6Mr9UrZj7h5TdUXtVye" alt=""><figcaption></figcaption></figure>


# Material Effect Issues

#### **Q1:** For the template "[Piano tiles](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001202%252F12795%252Fpv%252F24%252F05%252F07%252F663a169d21ef4%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%BB%8F%E5%85%B8%E9%92%A2%E7%90%B4%E9%94%AE\&language=undefined)," I want to replace the three cover images in the "Failure page sound prop icon" slot, but they all seem to be the same. Why can't I make different replacements?

**A:** You can **copy the project to "Content Editor"** and enter Scene 3 to replace the different cover images individually.  *(Tip: When using Template Feature Creation, if you encounter limitations in adjustments, try switching to Content Creation to make changes, as this can solve most issues!)*

<div align="left"><figure><img src="/files/JymYLvf1Jp2fkBRQwPbd" alt=""><figcaption></figcaption></figure></div>

#### Q2: In the template "Triple Match Puzzle", I want to hide 2 elements so that only 3 types are displayed on the canvas, but during the preview, clicking on the blank area still triggers the elimination effect.

**A:**  It's important to understand that adjusting a layer's "Show" or "Hide" in the template project only affects visual presentation and is not linked to the gameplay logic of the template. This issue arises because clicks on hidden layers are still registered during the preview.

It is recommended that you adjust the gameplay of the playable by modifying a series of gameplay parameters within the template. If you want to hide certain layers, try to hide those that are unrelated to interactive operations.

<div align="left"><figure><img src="/files/JwlMKgB12lJhHvP0TQoA" alt=""><figcaption></figcaption></figure></div>

#### Q3: After replacing the main character (Protection object) sequence in the \[Draw to Help] template, the character appears tilted in the preview — why?

**A:** This is likely related to the replaced **Scene Terrain** asset. The actual visible pixels of the terrain image define the terrain’s rigidbody. When the image is changed, the rigidbody adapts accordingly. If the center of the new terrain is too narrow, it may cause the rigidbody to be pushed out of place, leading to the character tilting.

**Suggestion:** Use a flat and even terrain image, or ensure the center area of the terrain has sufficient width.

#### Q4: In Feature Creation, I’ve hidden some image layers (turned off the eye icon), but after copying the template to the Content Editor, they still appear — why?

**A:**  This is due to the platform’s logic. We recommend locating and hiding the corresponding layers again directly in the Content Editor.\
*Please Note: If you can’t find certain layers, they may be inside the “Gameplay Template.” Please refer to the* [*FAQ*](/playable-tools-content-editor/content-editor-faq/asset-issues#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo-7) *for more details.*


# Playable Tools-Content Editor

Content Editor allows you to achieve all the possibilities.

### There are two ways to create playable ads using the **Content Editor**:

* **Playable Templates**: Select a template and choose **Content Creation** to make further adjustments on top of reskinning.Like adjusting layouts, adding assets, or editing events—to create many versions.   [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation)
* **Content Creation**: Also known as **Blank Canvas**, this allows you to build playable content from the ground up and fully unleash your creative ideas.

<figure><img src="/files/8CLrgnnwMl5AlNHYIGlV" alt=""><figcaption></figcaption></figure>


# Playable Creation Flow

\#Content Editor

### <mark style="color:blue;">1.Path 1: Template Content Creation - Content Iteration</mark>

Tips: It is recommended to first perform the "replace assets" through the Feature Changer, and then enter the Content Editor for "Advanced Editing".

<div align="left"><figure><img src="/files/WDPI3et1b9vigHjgQ4ik" alt=""><figcaption></figcaption></figure></div>

<figure><img src="/files/7NGkqCbXcsYq96eWpfmd" alt=""><figcaption></figcaption></figure>

### <mark style="color:blue;">2.Path 2: Blank Canvas - Building from scratch</mark>

<figure><img src="/files/I3LB4ZIQPHzVSypUxDey" alt=""><figcaption></figcaption></figure>


# Blank Canvas - Interactive Endcard

\#Content Editor #Blank Canvas #Basic difficulty

This instructional video is an introductory tutorial on <mark style="color:red;">**Blank Canvas in Content editor**</mark>. Taking creating an interactive Endcard as an example, it demonstrates the entire process of Blank Canvas.

Below the tutorial video, we have provided all the resources used in this case. Click on the compressed file to download it. You can use these resources to follow along with the tutorial and get started quickly with using the Content editor.

{% embed url="<https://mmp-cdn.rayjump.com/res_store/2132716/65fd1f4e42354.mp4>" %}

{% file src="/files/NLq3gafKMAVW2xcqLzsq" %}


# Blank Canvas - Fixed-step Playable

\#Content Editor #Blank Canvas #Simple difficulty

{% embed url="<https://mmp-cdn.rayjump.com/res_store/2282473/667d0b1213cf2.mp4>" %}


# Template Content Creation - Case Video

\#Content Editor #Template Content Creation

{% embed url="<https://mmp-cdn.rayjump.com/res_store/1867979/6475cd1b62681.mp4>" %}


# Work Creation-Create a New Project

\#Content Editor

There is no particular difference between the way projects are created in "Template Content Creation" and "Blank Canvas".

## 1.Template Content Creation

### STEP1 Choose from a wide selection of templates <a href="#px2ai" id="px2ai"></a>

* Method 1: You can quickly find suitable templates based on Method, Industry, or Template Type.&#x20;
* Method 2: You can also enter keywords in the search bar to quickly search for relevant templates.

<figure><img src="/files/BlY3oCeQFja8WvbobTDI" alt=""><figcaption></figcaption></figure>

### STEP2 Select a template

* After selecting a template, the following interface will appear. You can preview the template's effects to see if it meets your expectations. You can also use your phone to scan the QR code for a preview.&#x20;
* The template will also come with two preset skins, allowing advertisers to create playable ads that align with their product style more efficiently.

<div align="left"><figure><img src="/files/CFqxwurN4D4VH1JetyMA" alt=""><figcaption></figcaption></figure></div>

### STEP3 Select the creation method&#x20;

Click on "Content Creation" to confirm the selection of the production method.

<div align="left"><figure><img src="/files/nkFcp9PuSNePEaM4tki2" alt=""><figcaption></figcaption></figure></div>

### STEP4 Enter the project name

After selecting the production method, enter the project name and click "Confirm" to proceed to the project editing page.&#x20;

**Please note:** The project name should only contain numbers, letters, underscores, and be within 50 characters.

<figure><img src="/files/t3qQPUIt0dMpgBdVJ9s2" alt=""><figcaption></figcaption></figure>

## 2.Blank Canvas

### STEP1 Create Blank Canvas project

* Enter the playable project page - Content editor area&#x20;
* Create Project - Blank Canvas

<figure><img src="/files/ANOehXuPh28FQwg6uggA" alt=""><figcaption></figcaption></figure>

### STEP2 Enter the project name&#x20;

**Please note:**&#x54;he project name should only contain numbers, letters, underscores, and be within 50 characters.

<div align="left"><figure><img src="/files/JHcGApQxcjFt8UUGm4zN" alt=""><figcaption></figcaption></figure></div>

### STEP3 Select the adaptation direction

* Supports three types of screen adaptation: **Horizontal & Vertical screen**, **Landscape**, and **Portrait**.&#x20;
* Once the project is created, the adaptation orientation cannot be modified.
* &#x20;If you made an incorrect selection initially, it is recommended to duplicate the project and then choose and edit again.

<div align="left"><figure><img src="/files/odakzNVu8MzOJtHn0dyE" alt=""><figcaption></figcaption></figure></div>

#### **1)** Horizontal & Vertical screen

* It is necessary to complete both horizontal and vertical screen scene production in one work.
* During display, the appropriate direction will be automatically selected for the creative according to the current display direction of the app (e.g. when the app is vertically displayed, the vertical screen design of the work will be displayed; when the app is horizontally displayed, the horizontal screen design of the work will be displayed)
* The actual adaptation is as follows:

| ![](/files/1Kk9KbflQkCbIOIRMwq6) | ![](/files/GdeG04mO1kIWaE0JWr6L) |
| -------------------------------- | -------------------------------- |
| Vertical screen                  | Horizontal screen                |

#### **2) Portrait**

* In one work, only the vertical screen production is needed to be completed.
* When displaying, no matter what the display direction of the current App is, only the vertical screen design is displayed,and the spare area will be filled with black by default.
* The actual adaptation is as follows:

| ![](/files/HpkopMiKVicCtPtYGy3p)                    | ![](/files/Ui7J2Zt1CguNm6APQFYm)                                              |
| --------------------------------------------------- | ----------------------------------------------------------------------------- |
| <p>Vertical screen</p><p>(vertical design only)</p> | <p>Horizontal screen</p><p>(spare areas are filled with black by default)</p> |

#### **(3) Landscape**

* In one work, only the horizontal scene production is needed to be completed.
* When displaying, no matter what the display direction of the current App is,  only the horizontal screen design is displayed,and the spare area will be filled with black by default.
* The actual adaptation is as follows:

<table data-header-hidden><thead><tr><th width="375"></th><th></th></tr></thead><tbody><tr><td><img src="/files/osXiFAHkUtcxGR42yIQo" alt=""></td><td><img src="/files/GFtumTMQUDJhA8XjhRig" alt=""></td></tr><tr><td><p>Horizontal screen</p><p>(horizontal design only)</p></td><td><p>Vertical screen</p><p>(spare areas are filled with black by default)</p></td></tr></tbody></table>

Once the creation is complete, you can enter the project and start editing 👉 [Content Editor-User Guide](/playable-tools-content-editor/content-editor-user-guide)


# WORK CREATION-IMPORTANT NOTICE⚠️

After completing the project, please ensure that you have set up both the Redirect to app store and Report the end of the playable ads before exporting the work!!!

⚠️<mark style="color:red;">If the "Redirect to app store" and "Report the end of the playable ads" are not set before exporting the project, the following prompt will appear, and the project cannot be exported. You need to complete these settings before exporting.</mark>

<mark style="color:red;">⚠️If not set, it will result in the material being unable to be properly launched, or it may directly impact the performance of the material's campaign!</mark>

⚠️ Generally, playable templates come with pre-set "Redirect to app store" and "Report the end of the playable ads" configurations, so no adjustments are needed. However, if any event modifications are made to the template, it's recommended to perform an additional check.

<div align="left"><figure><img src="/files/jfTyUvzTB2dYqZ41WOE0" alt=""><figcaption></figcaption></figure></div>

## 📒<mark style="color:blue;">Redirect to app store</mark>

Add the \[Redirect to app store] response event at an appropriate location, to ensure that users can move to the download page.

👉Related content： [/pages/2LEF3PJ8v0Vr7K9WNDAR#id-1.redirection-and-postback](https://doc.playturbo.com/playable-tools-content-editor/pages/2LEF3PJ8v0Vr7K9WNDAR#id-1.redirection-and-postback "mention")

**How to set the redirection(3 methods):**

### **1. Set the download button redirection**

When the player interacts with the button, will be redirected.

* Select the button or the button group in the **layer**.
* Click \[Add Event] and select the interaction.
* Select the response event as \[Redirect to app store] and save.

<div align="left"><figure><img src="/files/mZeJYTMo8XM6Y9aza2jH" alt=""><figcaption></figcaption></figure></div>

### **2.  Full-screen redirection**

The player interacts with anywhere within the full-screen, will be redirected.

* Select the end **scene**.
* Click \[Add Event] and select the interaction.
* Select the response event as \[Redirect to app store] and save.

<div align="left"><figure><img src="/files/GXHPzDPrrP4x86Vltcso" alt=""><figcaption></figcaption></figure></div>

### **3.  Timing redirection**&#x20;

Automatically redirect to the store without any interactions.

> <mark style="color:red;">**Please Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">Some channels, such as</mark> <mark style="color:red;"></mark><mark style="color:red;">**Mintegral**</mark><mark style="color:red;">, do</mark> <mark style="color:red;"></mark><mark style="color:red;">**not**</mark> <mark style="color:red;"></mark><mark style="color:red;">allow automatic redirection. If you are delivering creatives to these channels, any timed redirection should occur</mark> <mark style="color:red;"></mark><mark style="color:red;">**within 1 second**</mark><mark style="color:red;">. Longer delays may cause the redirection event to be intercepted, preventing users from being redirected to the app store successfully.</mark>

* Select the scene, click Add Event, choose Timing Trigger, and set the Execution Delay.
  * Or Select the layer, add any trigger event, then add the Execution Delay response event and set the desired delay duration.
* Select the response event as \[Redirect to app store]  and save.

<div align="left"><figure><img src="/files/aL58XZTIXtBmY205Eyku" alt=""><figcaption></figcaption></figure> <figure><img src="/files/E7yUF9T7iyifvhjpyaqU" alt=""><figcaption></figcaption></figure></div>

## 📒<mark style="color:blue;">Report the end of the playable ads</mark>

For the Vungle and Mintegral channels, it's required to set the "Report the end of the playable ads" event to ensure that the playable's content flow is complete and meets the campaign requirements (this is not a mandatory requirement for other channels). Therefore, <mark style="color:red;">if your playable is intended for the Vungle or Mintegral channels, you need to configure the "Report the end of the playable ads" event at the end of the gameplay.</mark>

👉Related content： [/pages/2LEF3PJ8v0Vr7K9WNDAR#id-1.redirection-and-postback](https://doc.playturbo.com/playable-tools-content-editor/pages/2LEF3PJ8v0Vr7K9WNDAR#id-1.redirection-and-postback "mention")

**How to set the report (2 methods):**

### **1. Set the scene attributes**

* Select the end scene, enter the scene setting.
* Select the check box \[Ending Scene].
* **Note:** Checking "Ending Scene" here means that the "Report the end of the playable ads" event will be triggered as soon as the scene is entered, rather than waiting until the end of the gameplay. <mark style="color:red;">Therefore, when your playable project only has one scene, it is not recommended to check this option directly for the scene! Please use Method 2 instead!</mark>

👉Related content： [/pages/CsrdnZSSQwB4jKGg3eEu#id-2.related-issues-with-playable-material-on-mintegral-platform](https://doc.playturbo.com/playable-tools-content-editor/pages/CsrdnZSSQwB4jKGg3eEu#id-2.related-issues-with-playable-material-on-mintegral-platform "mention")

<div align="left"><figure><img src="/files/doqwTXVfM6lStkg5xvf4" alt=""><figcaption></figcaption></figure></div>

### **2.  Set up a response event to report**

* Select a layer or a scene.
* Click \[Add Event] and select the trigger event.
* Select the response event as \[Report the end of the playable ads] and save.

Typically, the playable ends at the same time the user is redirected to the app store.

<div align="left"><figure><img src="/files/hHCj8koc87wohhbSw3oX" alt=""><figcaption></figcaption></figure></div>


# Content Editor-User Guide

\#Content Editor

For first-time users of the Content Editor, we recommend referring to: [Work Creation-Create a New Project](/playable-tools-content-editor/work-creation-create-a-new-project)  [WORK CREATION-IMPORTANT NOTICE⚠️](/playable-tools-content-editor/work-creation-important-notice)


# Editing Page Module Intro

\#Content Editor

The editing page of the Content Editor is mainly divided into the following seven areas: (Enumerated in numerical order)

[Top Asset Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library)

[Scene Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/scene-area)

[Layer Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area)

[Quick Access Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/quick-access-area)

[Parameter Setting Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area)

[Work Preview Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area)

[Project Operation Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/project-operation-area)

<div align="left"><figure><img src="/files/j6V1wMaisl9mUyZ0FgO7" alt=""><figcaption></figcaption></figure></div>


# Top Asset Library

\#Content editor

<figure><img src="/files/7YNjPXChWvyzyQlzdBxU" alt=""><figcaption><p>Top Asset Library</p></figcaption></figure>

This area is typically used to import or create new content for the work.&#x20;

It can be divided into the following six parts：

[Project Assets](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/project-assets)

[Asset Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/asset-library)

[Interactive Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/interactive-area)

[Presets Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/presets-library)

[Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables)

[Gameplay Template](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/gameplay-template)


# Project Assets

\#Content editor

Entrance：Top Asset Library>>>Project Assets

<figure><img src="/files/EaBDGbfmry8EigKV51Yw" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">1.Project Assets Intro</mark>

* The Project Assets contains all the assets of the project, including those added to the canvas and those uploaded but not yet added.&#x20;
* Added assets in the canvas are marked with a "Added" badge.
* Your uploaded personal assets, used public assets, and assets included in template projects created with PS will appear in the Project Assets list.

<figure><img src="/files/jpriSvYNfg5G7EqvdDGa" alt=""><figcaption></figcaption></figure>

* You can filter the status of project assets (added and not added) using the icon on the right side. It helps you manage the usage of assets within the project.&#x20;

<div align="left"><figure><img src="/files/WnfoLuRrZwDc7DIjIHpT" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">2.Two Paths for Uploading Assets</mark>

### 1）Upload from local device

Click the "Upload" button in the Project Assets to open the file selection dialog. You can select multiple files to add to the Project Assets.

<div align="left"><figure><img src="/files/ipJ5zgyu4gZUYZNPMLeL" alt=""><figcaption></figcaption></figure></div>

### 2）Upload by dragging and dropping

You can add multiple files to the Project Assets or Canvas by dragging and dropping them into the dialog.

<div align="left"><figure><img src="/files/IhOdSIWhb3ZqjMnGo9jv" alt="" width="234"><figcaption></figcaption></figure></div>

After the asset is uploaded successfully, a pop-up window will appear in the bottom right corner to indicate the successful upload.

<div align="left"><figure><img src="/files/dt5I1arZHhK0MrYVv5D7" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">3.Operations in Project Assets</mark>

### 1）Adding Assets to the Canvas

Click the "+" button in the bottom right corner of the corresponding asset in the Project Assets to add it to the canvas of the current scene.

<div align="left"><figure><img src="/files/L3zxWJBaptenCNKayz5C" alt=""><figcaption></figcaption></figure></div>

### 2）Replacing Assets

* Click the "..." button in the top right corner of the corresponding asset in the Project Assets to select a replacement asset.&#x20;
* Only "Added" assets can be replaced, and <mark style="color:red;">**all nodes associated with the original asset will be replaced with the target asset.**</mark>
* If you only want to replace a specific asset, you can select that asset layer and use the right-side parameter adjustment area for replacement.

<div align="left"><figure><img src="/files/Vbix87PGLvavc5vMQsvo" alt=""><figcaption></figcaption></figure></div>

#### There are two ways to replace:

**① "Local Upload":** Opens the local upload dialog, requiring you to select a locally available asset of the same type and format for upload and replacement.

<div align="left"><figure><img src="/files/A63GPskvYXuM7zi1MgvJ" alt=""><figcaption></figcaption></figure></div>

**② "Choose from Library":** Opens a dialog where you can choose a corresponding type of asset from "Public Assets," "My Assets," or "Project Assets" for replacement.

<div align="left"><figure><img src="/files/fnjrxF52DqacIRtkh7Ta" alt=""><figcaption></figcaption></figure></div>

### 3）Downloading Assets

Click the "..." button in the top right corner of the corresponding asset in the Project Assets and select "Download" to download the asset to your local device.

<div align="left"><figure><img src="/files/SVNYnrTCRtEI8x4qQwSA" alt=""><figcaption></figcaption></figure></div>

### 4）Cropping/Editing Assets

* Click the "..." button in the top right corner of the corresponding asset in the Project Assets, then click "Crop" to choose the cropping/cliping option.
* For image assets: It allows cropping. After clicking, a cropping dialog will appear. Crop the image to the desired size and click "OK". A new copy of the asset will be generated and replace the original one.
* For video/audio assets: It allows cliping. After clicking, an cliping dialog will appear. Clip the duration of the audio/video to the desired length and click "OK". A new copy of the asset will be generated and replace the original one.

<div align="left"><figure><img src="/files/i1fjVhZ2udjkLKL9Wt8d" alt=""><figcaption></figcaption></figure></div>

### 5）Deleting Assets

* Deleting a asset will remove it from the Project Assets. If the asset has been added to a scene, <mark style="color:red;">**all nodes using that asset will also be deleted.**</mark>

<div align="left"><figure><img src="/files/zQX91fLQl9DHLwrMobKk" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">4.Asset Upload Format Requirements</mark>

Under "Project Assets," there are video, audio, images, and motion graphic categories.

<mark style="color:red;">Please note: If you need to add a large number of assets to your project,</mark> <mark style="color:red;"></mark><mark style="color:red;">**it is recommended to compress the files externally based on the file size requirements below.**</mark> <mark style="color:red;"></mark><mark style="color:red;">This will help control the package size within the range required by the corresponding distribution channels.</mark> [Package Size Estimation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area/package-size-estimation)  [Content Editor - Download\&Apply](/playable-tools-content-editor/content-editor-user-guide/content-editor-download-and-apply)

### 1）Video

* Format: MP4
* Use **H.264 encoding**
* Size Requirement: Less than 3MB
* Recommended Dimensions: Not exceeding 750\*1334
* Resolution: It is recommended to be below 1080P.
* Frame Rate: Should not be lower than 20; recommended range is 20-30.

### 2）Audio

* Format: MP3
* Size Requirement: Less than 1MB
* Bitrate: Within 128kbps.

### 3）Images

* Format: PNG，JPG
* Size Requirement: Less than 1MB

### 4）Motion Graphic: Divided into Sequence and DragonBones

#### <mark style="color:red;background-color:red;">**4.1 Sequence**</mark>

* **ZIP** format containing multiple **PNG** files <mark style="color:red;">(Note: The ZIP archive can only contain either one folder or multiple PNG files directly.）</mark>
* Maximum File Size: Less than 8MB&#x20;
* Naming Restriction: PNG file names should not contain spaces. Additionally, they should end with a number and be numbered sequentially.
* After uploading, you can drag and adjust the order of the sequences in the parameter setting area on the right side.

#### 4.2 DragonBones

* ZIP format containing 2 JSON files and 1 PNG file
* Maximum File Size: Less than 1MB
* The resource grid inside the DragonBone needs to be disabled.

<div align="left"><figure><img src="/files/taHyvWflaMvgnC7OrDDT" alt=""><figcaption></figcaption></figure></div>

*Please Note: Playturbo does not support Spine animation files. Spine animations are structured differently and are not compatible with our current logic. We also do not recommend converting Spine files into DragonBones format, as this can cause animation issues.*\
*If you want to upload animation assets, please use DragonBones or image sequences.*

👉Recommended Reading： [Asset Issues](/playable-tools-content-editor/content-editor-faq/asset-issues)  [Creation Tips - Assets](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-assets)


# Asset Library

\#Content editor

Entrance:Top Asset Library>>>Asset Library

<figure><img src="/files/CUXGIIqZwRAj2OwyYzMV" alt=""><figcaption></figcaption></figure>

The asset library consists of the following two modules：

[Public Asset Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/asset-library/public-asset-library)

[My Asset Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/asset-library/my-asset-library)&#x20;

<br>


# Public Asset Library

If you want to find more assets to use in your creatives, you can go and select from the public asset library

## 1.What is Public Asset Library

* Different from your personal assets
* The Public Asset Library provides users with a variety of free and reusable common assets

## 2.Types of Public Assets

The types of public assets include: image assets, motion graphic assets, background music assets, audio assets, and particle assets.

### 1)Image

* Image assets include six categories: Progress bar、Arrow、UI、Finger、Background image、Button.

<div align="left"><figure><img src="/files/iGFsq0hg66o4Pd7hbFcg" alt=""><figcaption></figcaption></figure></div>

### 2)Motion Graphic

* Motion graphic assets include four categories: Sticker、Special effect、Finger、Button.

<div align="left"><figure><img src="/files/yuB1dRnWUNQjXXmp8uU7" alt=""><figcaption></figcaption></figure></div>

### 3)BGM

* BGM assets include nine categories: Tender、Nervous、Exciting、Funny、Happy、Sad、Scary、Weird、Healing.

<div align="left"><figure><img src="/files/3OHOTaEJZGQKVREZ1oPt" alt=""><figcaption></figcaption></figure></div>

### 4)Audio

* Audio assets include four categories: Functional sound effect、Ambient sound effect、Battle  sound effect、Character sound effect.

<div align="left"><figure><img src="/files/tW5S4MP2gEDANrRBe6Qp" alt=""><figcaption></figcaption></figure></div>

### 5)Particle

* Particle assets include four categories: Character special effect、Interface effect、Skill effect、Scene effect.

<div align="left"><figure><img src="/files/mTr0bHON1KYb2Mq0mkSv" alt=""><figcaption></figcaption></figure></div>

## 3.Operations in the Public Asset Library

The following operations can be performed in the public asset library: search assets, filter assets, and add assets.

Taking image assets as an example：

### 1)Search assets

* You can enter the asset name in the search box to search for public assets.

<div align="left"><figure><img src="/files/6fmaTV9HmkLWh1Ie7CN7" alt=""><figcaption></figcaption></figure></div>

### 2)Filter assets

* Click on the filter button in the search box
* Filter other tags for the asset

<div align="left"><figure><img src="/files/258cAzYrsLbaVcBPavR4" alt=""><figcaption></figcaption></figure></div>

### 3)Add assets

* By clicking the "+" button in the bottom right corner of the target asset, you can successfully add the asset and display it in the current scene.

<div align="left"><figure><img src="/files/XjWAy8rxEhY60rGW6Cko" alt=""><figcaption></figcaption></figure></div>


# My Asset Library

The asset uploaded in the build will be stored in your own asset library for future use. This is ideal for commonly used items.

## 1.Types of My Assets

The types of My Assets include: image assets, motion graphic assets, vidio assets and audio assets.

<div align="left"><figure><img src="/files/kJnzYwAopLDifF5lz4ed" alt=""><figcaption></figcaption></figure></div>

## 2.Operations in My Asset Library

The following operations can be performed in My Asset Library: browse all assets, add assets.

### 1)Browse all assets

* Click the icon on the right to browse all assets, and a "My Asset Library" popup will appear.

<div align="left"><figure><img src="/files/Sxcuqzb57dfVDwtCU5at" alt=""><figcaption></figcaption></figure></div>

* You can filter and search for the desired assets based on different criteria.&#x20;
* Select the target assets, click confirm, and the assets will be successfully added and displayed in the current scene.

<figure><img src="/files/qFcAI9bZPO43GgnJDdLM" alt=""><figcaption></figcaption></figure>

### 2)Add assets

* Taking image assets as an example：

By clicking the "+" button in the bottom right corner of the target asset, you can successfully add the asset and display it in the current scene.

<div align="left"><figure><img src="/files/NPtDJVfmdc8XiYYsaQvc" alt=""><figcaption></figcaption></figure></div>

<br>


# Interactive Area

\#Content editor

Entrance：Top Asset Library>>>Interactive Area

<figure><img src="/files/rnr3xicahZPr05uXU3MC" alt=""><figcaption></figcaption></figure>

## 1.What is Interactive Area?

* It is a specific rectangular area that is not displayed during preview.
* It is specifically used for adding interactive events. In simple terms, by adding events on the interactive area layer, the area covered by the interactive area determines where the event takes effect.
* It separates events from elements, making it easier to maintain and modify events later on.

<figure><img src="/files/dXEQp8jseylEsgbpqW0Y" alt=""><figcaption></figcaption></figure>

## 2.Operations related to Interactive Area

### 1)Add an Interactive Area

* Clicking on the Interactive Area icon in the "Top Asset Library" will successfully add an Interactive Area.
* You can click multiple times to add multiple Interactive Areas.

### 2)Edit the Interactive Area

* You can adjust the position and size of the Interactive Area by modifying the values in the "Parameter Setting Area" .&#x20;
* You can also directly drag and resize the Interactive Area in the "Work Preview Area".

### 3)Copy/Paste Interactive Are

* You can click on the copy/paste buttons in the "Quick Access Area" to copy and paste.&#x20;
* You can also right-click in the "Layer Area" to perform copy/paste operations.

### 4)Delete Interactive Area

* Right-click on the layer in the "Layer Area" and select "Delete Layer" to remove the Interactive Area.

<figure><img src="/files/eu419Gy5n5fFnFILmYVo" alt=""><figcaption></figcaption></figure>

For the parameter settings related to the Interactive Area, you can refer to the [Broken mention](broken://pages/PT8qW2vSFPW0C3DejKV3) section for more details.


# Presets Library

\#Content editor

Entrance：Top Asset Library>>>Presets Library

<div align="left"><figure><img src="/files/5hfZADhuYa6NFZUsDJwD" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">1. About Presets Library</mark>

* Playturbo provides customers with various types of scene presets, allowing them to quickly integrate these presets into their own projects, significantly improving production efficiency.
* **Presets typically include asset layouts, exterior parameters, and animation parameters**, but event parameters are not currently supported.
* Various presets are periodically updated and can be viewed and used at any time. The production method and specific parameter settings for each preset can be viewed after adding them. This can also serve as tutorial for your reference and learning.
* <mark style="color:red;">When you add a preset, it is not added to the current scene; instead, a new scene with that preset will be created.</mark> **Therefore, we have two suggestions for using presets:**
  * **a. If you decide to use a preset at the beginning of your project:** add the required preset - continue building other assets in the scene where the preset is located - complete the production of that scene.
  * **b. If you decide to use a preset during creation:** add the required preset - copy the parameters of the layers from the preset - paste them into the corresponding scene or layer - delete the preset and the scene containing it.

## <mark style="color:blue;">2.Add Preset</mark>

* Click on "Presets Library" to open and display all scene presets, categorized by preset types.
* Each preset type initially shows 6 presets by default. You can click the "All" button to display all presets under that type.
* You can also use the search box to enter keywords, click the button to search for additional information about presets.
* Click the "+" icon, and the preset will be added to the project as a scene, allowing you to further edit the scene.

<div align="left"><figure><img src="/files/Wl0IYkUpSLJ1IZZhMrPB" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">3.Preset Categories</mark>

There are currently four types of presets available: "Gameplay Function," "Layout," "Guidance," and "Feedback."

### Gameplay Function

Includes: Loop Playback, Progress Bar, Count Down

<div align="left"><figure><img src="/files/YXxxEmB2xOeEaZXJ6Kl6" alt=""><figcaption></figcaption></figure></div>

### Layout

Includes: Product Info, Award Settlement, Win Settlement, Fail Settlement

<div align="left"><figure><img src="/files/Ovu2MgrEQMrBrPcYaeq4" alt=""><figcaption></figcaption></figure></div>

### Guidance

Includes: Joystick, Choose, Slide, Tap\&Hold, Click

<div align="left"><figure><img src="/files/rMkkAwHlBeeOX1jHfIRl" alt=""><figcaption></figcaption></figure></div>

### Feedback

Includes: Wrong, Correct

<div align="left"><figure><img src="/files/d6Dz50ie6VpRzoxseXzn" alt=""><figcaption></figcaption></figure></div>


# Global Variables

\#Content Editor

Entrance：Top Asset Library>>>Global variables

<figure><img src="/files/aycDaCcDaIA3NqjQCJgJ" alt=""><figcaption></figcaption></figure>

## 📒<mark style="color:blue;">What is Global variables？</mark>

* Global Variables are a special type of event parameter that can be accessed across **all scenes**, allowing for cross-scene usage (unlike regular events, which are limited to the current scene).
* By adding global variables, you can trigger the desired response events in different scenes by evaluating the current value of the global variables.
* The value of global variables can be number, string, or boolean (true or false).&#x20;
* Global variables are particularly useful when working with **complex gameplay** elements where a large number of events need to be set up or when regular events alone cannot achieve the desired functionality. They help <mark style="color:red;">simplify the production process</mark> by enabling us to handle complexity more effectively.

####

## 📒<mark style="color:blue;">Global variables usage instructions</mark>

In essence, we usually need **three** steps to achieve the output of a global variable:

* **Adding variables**

Place the global variable in the appropriate location and set the variable type according to the actual requirements (number, string, or boolean).

* **Adding condition**

Add condition to implement "triggering the corresponding response event only when the condition is met."

* **Adding response events**

Next, we will proceed with a detailed explanation step by step.

### 1. Adding “Variables”

1）Add variables：click“Global variables” - “+Add variables”

2）Configure the newly added variables

* Name: Enter the variable name (customizable).&#x20;
* Variable Type: Select the data type, including number, string, or boolean.
* Initial value: Enter the initial value based on the selected variable data type (the initial value can be any value).&#x20;
* Description: Enter a description for the variable (optional).

<figure><img src="/files/VwObdtAerO5olvGfGXac" alt=""><figcaption></figcaption></figure>

**Attachment：Variable Type Table**

<table data-full-width="false"><thead><tr><th width="167">illustration</th><th width="123">Variable Type</th><th width="136">supplement</th><th>Operating instructions</th></tr></thead><tbody><tr><td><img src="/files/yN9Ed3BxPVGxeb2XC5Vg" alt=""></td><td><strong>Number</strong></td><td>Can input any number as initial value</td><td><p></p><ul><li>Commonly used for calculations, including size comparisons and addition, subtraction, and multiplication.</li><li>When the variable equals different values, different behaviors can be triggered.</li><li><mark style="color:red;">For example, clicking an element, the parameter variable accumulates according to the click times, and accumulating different values can trigger different behaviors.</mark></li></ul></td></tr><tr><td><img src="/files/XTNbyTLm2KrfSYUrXdk5" alt=""></td><td><strong>String</strong></td><td>Can input any text as initial value</td><td><p></p><ul><li>Used to pass the value of text attributes. User-entered text can be assigned to parameters and executed with conditions.</li></ul></td></tr><tr><td><img src="/files/bBemuqOdbGMmH2zw9xtZ" alt=""></td><td><strong>Boolean</strong></td><td>Can choose between "True" or "False" as initial value</td><td><p></p><ul><li>Used to pass boolean values. User-selected boolean values can be assigned to parameters and executed with conditions.</li></ul></td></tr></tbody></table>

### 2.**Add "Conditon"**

1）Conditon adds a constraint to the event. The event is triggered when this condition is met; otherwise, the event is not triggered.

2）Conditon can be directly added **as a trigger event**, or it can be added **above any other trigger event.**

* Directly add "Conditon" event: Response events are triggered in real-time in the scene. When the Conditon is true, the response event will be triggered immediately.
* Add "Conditon" event above other trigger events: Response events are triggered only when a triggering event (such as clicking) occurs in the scene.&#x20;

<table data-full-width="false"><thead><tr><th width="198.33333333333331">Type</th><th width="407">Operating instructions</th><th>illustration</th></tr></thead><tbody><tr><td>Directly add "Condition" event</td><td><ul><li>Click to add an event</li><li>Select criteria judgment</li><li>Add conditions: select global variables, judgment method, comparison variable type, comparison value</li><li>After selecting, check √ to successfully add the 'Condition Judgment' event</li></ul></td><td><img src="/files/n5adCKqnDkWnngKjWiSQ" alt=""></td></tr><tr><td>Add "Conditon" Event Above Other Trigger Events</td><td><p></p><ul><li>Click on the 'Condition Judgment' next to the triggering event</li><li>Add conditions: select global variables, judgment method, comparison variable type, comparison value</li><li>After selecting, check √ to add a 'Condition Judgment' event above other triggering events</li></ul></td><td><p><img src="/files/WXYAlBwHCGniKiyFSMgk" alt=""></p><p></p><p> <img src="/files/Q3cKAcKYl6pT5U3CFmoS" alt=""></p></td></tr></tbody></table>

**Attachment: Parameter Table for Condition**

<table data-full-width="false"><thead><tr><th width="211.66666666666669">illustration</th><th width="214">Parameter</th><th>Operating instructions</th></tr></thead><tbody><tr><td><img src="/files/Qlztg7JbXCir431PMUN6" alt=""></td><td>Global variables</td><td>Select an existing global variable for Condition</td></tr><tr><td><img src="/files/IIxKGQ8Rm6qpxXaHS4Ej" alt="">   <img src="/files/xhTC23vXsp4xribhMC9O" alt=""></td><td>Judgment Method</td><td><p>When the global variable is number, it can be compared by size or equality(left)；</p><p></p><p>When the global variable is string or boolean, it can only be compared for equality,equal to or not equal to(right).</p></td></tr><tr><td><img src="/files/dnJgAynEuu61WpxtKBCk" alt=""></td><td>Comparison Variable Type</td><td>Select the "current global variable parameter type" or other "global variables" to compare.</td></tr><tr><td><img src="/files/9bVkGYkeTTjN71u7rKnN" alt=""></td><td>Comparison Value</td><td><p>Enter the same type of value to be compared based on the current global variable parameter type.</p><p>For example, if the current Condition is a Boolean variable, the comparison value can only be a Boolean value.</p></td></tr></tbody></table>

### **3.Add "Response Events"**

**Response events can perform "Assign the value" of added variables or trigger "response event."**

* "Assign the value": Assign values to variables, change variable values, and trigger different Condition.
* "Response event": Trigger other response events such as "click" and "jump to the next scene."

<table data-full-width="false"><thead><tr><th width="232.66666666666669">Type</th><th width="389">Operating instructions</th><th>illustration</th></tr></thead><tbody><tr><td>Assign the value</td><td><ul><li>Add Response Event</li><li>Select [Assign the value]</li><li>Select global variables, operation methods, and operands, and click Save to save them.</li></ul></td><td><p><img src="/files/GA6rwlPU8PqXbCW5uSbM" alt=""></p><p></p><p><img src="/files/WgAf6XdzIKfZKgY0gAgD" alt=""></p></td></tr><tr><td>Other Response event</td><td><p></p><ul><li>Directly add a response event under Condition Judgment</li><li>Simply select the response event</li></ul></td><td><img src="/files/jJLXeyBKAp12B6VlJoOD" alt=""></td></tr></tbody></table>

**Attachment: Response Event - Assignment Parameter Table**

<table data-full-width="false"><thead><tr><th width="220">illustration</th><th width="180.33333333333331">Parameter</th><th>Operating instructions</th></tr></thead><tbody><tr><td><img src="/files/Ail9DCOEa3pbVhutcUzD" alt=""></td><td>Global variables</td><td><ul><li>Select existing global variables for assignment.</li></ul></td></tr><tr><td><p><img src="/files/d9tUrrKnSWU6Z4papuQl" alt=""></p><p></p><p><img src="/files/2ZZGSgxsIEjS7pjwdbmu" alt=""></p></td><td>Operation method</td><td><ul><li>When the global variable is a number value, free addition, subtraction, multiplication, and division operations can be performed on the variable (as shown in the figure above);</li><li>When the global variable is a String or Boolean value, only equality judgment can be performed on the variable (as shown in the figure below);</li></ul></td></tr><tr><td><img src="/files/4A4PmkZitMyvxM3DJwQC" alt=""></td><td>Operand</td><td><ul><li>You can select the parameter type of the current global variable or other global variables for operation;</li></ul></td></tr><tr><td><img src="/files/TkI6qggcT6o1r3BQVv3h" alt=""></td><td>Operand value</td><td><ul><li>Enter the same type of numerical value that needs to be calculated based on the current global variable parameter type. </li><li>For example, if the current condition is judged as a Boolean variable, the comparison value can only be a Boolean value;</li></ul></td></tr></tbody></table>

### 4.Supplement：Add Multiple "Condition"

When multiple Conditions need to be added in a scene simultaneously, there are "and" and "or" relationships:

* "And": Trigger response events when all conditions are met.
* "Or": Trigger response events when any one condition is met.

<table data-full-width="false"><thead><tr><th width="135.33333333333331">Type</th><th width="487">Operating instructions</th><th>illustration</th></tr></thead><tbody><tr><td>And</td><td><ul><li>Add other conditions to the existing condition</li><li>+Add conditions, select global variables, judgment methods, comparison variable types, and comparison values</li><li>Check Save to save</li></ul></td><td><img src="/files/lX44FnF5k27bKhCA6kPc" alt=""><img src="/files/15BzGyXIDly3Iz20i0jP" alt=""><img src="/files/GWLwJRaSJJH0uBPejMsj" alt=""></td></tr><tr><td>Or</td><td><ul><li>Add a “condition”</li><li>+Add conditions, select global variables, judgment methods, comparison variable types, and comparison values</li><li>Check Save to save</li></ul></td><td><img src="/files/03cOrrBAuqm8fKos9G2E" alt=""><img src="/files/bpIdtM0ZzcN1Cy2qVm11" alt=""><img src="/files/6YA8XPJ4ZJmtufFU4EeP" alt=""></td></tr></tbody></table>

####

## 📒<mark style="color:blue;">Examples of Application Scenarios</mark>

Having understood global variables and their operational steps, let's delve deeper into the topic by exploring two more examples.

### 1.Restricting Trial Interactions

When we want to limit the number of interactions during a trial period, such as requiring users to click on a video 3 times before redirecting them to the store:

* Regular Event: Setting this up can be complex.&#x20;
* Global Variable: A simple and quick implementation in three steps.

<figure><img src="/files/Lfod0nHSQSo3wxGXTp0C" alt=""><figcaption></figcaption></figure>

### 2.Different Results Based on Multiple Choices

When creating content for gameplay scenarios such as a "Choose One out of Three" situation, where each button option leads to different outcomes:

* Regular Events: This approach would require the use of four scenes and significantly increase the number of events.
* Global Variables: By utilizing global variables, you can reduce the number of scenes to two and greatly decrease the total number of events required.

<figure><img src="/files/ceEagk6MxJC6PL59touI" alt=""><figcaption></figcaption></figure>

Through the above two examples, it becomes evident that <mark style="color:red;">using global variables can significantly reduce the number of scenes and the amount of response events required. This approach helps avoid repetitive production steps and enhances overall efficiency in content creation.</mark>

Related content： [Creation Tips - Event Setting](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-event-setting)

####

## 📒<mark style="color:blue;">Global Variables-Teaching Video</mark>

👉Click to view detailed case explanations: [Dress-up - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/decoration-gameplay-cases/dress-up-blank-canvas-tutorial)

{% embed url="<https://mmp-cdn.rayjump.com/res_store/1863769/646dda30dfd72.mp4>" %}


# Gameplay Template

\#Content Editor #Content Creation #Blank Canvas

Entrance：Top Asset Library>>>Gameplay Template

<figure><img src="/files/mKSTPpi2A8DNi0pxcZRo" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">What is Gameplay Template?</mark>

### 1.Colloquial Description

* The "Gameplay Template" is an area where the core layout and assets are placed.
* This area is usually created by developers, and the core gameplay logic is controlled by code. Therefore, it is recommended to make adjustments to the Gameplay Template within a reasonable range to avoid errors in the project (for specific adjustment flexibility, please refer to  [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation#guidelines-for-adjusting-flexibility)).
* You can replace the core assets or adjust the Quick layout within the "Gameplay Template".

### 2.Including Modules

The Gameplay Template consists of two modules: Component and Gameplay Template.

<div align="left"><figure><img src="/files/E9a8w4w9lgF16RDAjHnc" alt=""><figcaption></figcaption></figure></div>

* **Component:** This is the area where various components are placed.  It can be used in both <mark style="color:orange;">"Template Content Creation" and "Blank Canvas"</mark> modes  (for specific components included, please refer to [Component & Quick Layout](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout)).
* **Gameplay Template:** This is the area where core assets and layouts for special functionalities are placed.  It appears only in <mark style="color:orange;">"Template Content Creation"</mark> mode.
  * **Edit gameplay:** generic / various gameplay templates may have it. (please refer to [Latest News on Playable Templates](/latest-news-on-playable-templates)).
  * **Quick layout:** special/ suitable for elimination and puzzle templates.

<div align="left"><figure><img src="/files/s6ZvqomKZA2f40BVEwxw" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">Supported Operations of Gameplay Template</mark>

### 1.Component

Due to the different gameplay requirements for various components, the supported adjustment options also vary. For specific details, please refer to  [Component & Quick Layout](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout)

### 2.**Edit gameplay**

#### 2.1 Asset Replacement

* Enter Edit gameplay：Top Asset Library>>>Gameplay Template>>>Edit gameplay.
* Select the asset you want to replace in the layer area and click on the parameter setting area on the right \[Replace].
* Asset replacement can be selected from four channels: image lib, my assets, project assets, and local upload.
* After the replacement is complete, if needed, you can make simple adjustments to the position and size of the layer.&#x20;
* Once adjustments are done, click "Save," and then "Back to Project."

<figure><img src="/files/NpbHGGNVv7Xwa1OdpcXu" alt=""><figcaption></figcaption></figure>

#### 2.2 <mark style="color:red;">Other operations are not recommended as they may result in errors</mark>

&#x20;(for specific adjustment flexibility, please refer to  [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation#guidelines-for-adjusting-flexibility)).

### **3.Quick layout**

Due to the different gameplay of the templates, the current "Quick layout" includes both **Grid Board Layout** and **Parking Layout.**

#### 3.1 **Grid Board Layout**

* Exists in some templates for Match, Jigsaw puzzle, and Coloring games.&#x20;
* It supports adjusting the grid layout, element layout, replacing the grid background, and element images.&#x20;
* Feature Introduction： [Quick Layout-Grid Board Layout](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/quick-layout-grid-board-layout)
* Case Tutorial： [Grid Board Layout - Template Content Creation](/playturbo-case-study/playable-content-editor/elimination-and-match-gameplay-cases/grid-board-layout-template-content-creation)

#### 3.2 Parking Layout&#x20;

* Exists in templates for Environmental puzzle games.&#x20;
* It supports adjusting the Background and Roads,Layout Elements, and Exits.&#x20;
* Feature Introduction： [Quick Layout-Parking Layout](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout/quick-layout-parking-layout)
* Case Tutorial： [\<Car parking puzzle v1> Template Content Creation](/playturbo-case-study/playable-content-editor/parking-layout-gameplay-cases/less-than-car-parking-puzzle-v1-greater-than-template-content-creation)

<mark style="color:red;">Tips: In the "Playable Templates" interface, click "Quick layout" to quickly filter templates that support</mark> <mark style="color:red;"></mark><mark style="color:red;">**Quick layout**</mark> <mark style="color:red;"></mark><mark style="color:red;">functionality!</mark>

<figure><img src="/files/p92o5mRRAizNC8STVgIz" alt=""><figcaption></figcaption></figure>


# Scene Area

\#Content Editor

<div align="left"><figure><img src="/files/3GsCBBQkrPqNZVLzED0e" alt=""><figcaption><p>Scene Area</p></figcaption></figure></div>

The Scene Area is used to display and organize the flow of an advertising project, as well as store the layer content for different scenes. Playable ads are made up of scenes.

In this context, a scene can be understood as a slide in a PowerPoint presentation. Each scene represents a page in the presentation and contains different types of assets. By using simple drag-and-drop operations (event settings), playable ads can be created.

**The Scene Area consists of two parts:**

* Global settings: Contains global scene and global settings
* Scene: We can also refer to this area as "general scene", with multiple scene thumbnails after expansion


# Global Settings

\#Content Editor

Entrance：Scene Area>>>Global Settings

<figure><img src="/files/RDA0ghS2norAAHKhpmlC" alt=""><figcaption></figcaption></figure>

## Global Settings Intro

The Global Settings are used for assets that are shared across all scenes.&#x20;

<mark style="color:red;">When making changes in the Global Settings, modifying a single item will update the design in all scenes. This means that any assets added in the Global Settings will be displayed in every scene.</mark>

## Global Settings include two modules: global scene and global setting

**1）Global scene:** Various assets such as images, text, sound effects, and special effects can be added. Usually, product information and resident download buttons are added here.

Note: Global scene can also be left without adding any content.

**2）Global setting:** Including background music, background image, background color, and language version.

Related operations can be viewed in [Global Settings](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/global-settings)

## Tips

It is recommended to add and set global assets in advance before start the build to set the tone for the overall design of the work.

<figure><img src="/files/9ueUMkjILuUHzEn3wa0u" alt=""><figcaption></figcaption></figure>


# Scene

\#Content editor

Entrance：Scene Area>>>Scene (It can also be called general scene)

<figure><img src="/files/m8IfZhiQgoiO0h3Wtlf3" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Scene Intro</mark>

After expanding the general scene, multiple scene thumbnails will be displayed.<mark style="color:red;">Any content added or modified within a general scene only affects the current scene.</mark>

####

## <mark style="color:blue;">Scene Operation</mark>

### 1.Add a scene <a href="#ed9kn" id="ed9kn"></a>

#### **1)Method 1**

* Click on the "+" button on the right side of the scene panel
* A new scene will be added after the current scene
* The default scene name is "New\_scene", which is editable

#### **2)Method 2**

* Click to select any scene thumbnail
* Right-click
* Click "Create new Scene" in the popup, and a new scene will be added after the current scene

<div align="left"><figure><img src="/files/Eimkct79rhIMUPM088Xl" alt=""><figcaption></figcaption></figure></div>

### 2.Copy a scene

* Click to select any scene thumbnail
* Right-click
* Click the "Duplicate the Scene" button in the popup, and a new scene will be copied after the current scene
* The new scene name defaults to "ORIGINAL NAME\_copy", which is editable

<div align="left"><figure><img src="/files/yeOx1Uuo2Os4ToWpbHIa" alt=""><figcaption></figcaption></figure></div>

### 3.Edit the scene name

#### **1)Method 1**

* Move the mouse to the scene name area, and the "small pencil" icon will appear
* Click the "small pencil" icon to change the name

#### **2)Method 2**

* Click to select the thumbnail of the scene whose name needs to be changed
* Double-click the scene name to change the name

#### **3)Method 3**

* Click to select the thumbnail of the scene whose name needs to be changed
* Right-click
* Click the "Rename" button in the popup to change the name

![](/files/wyOIi1alUPZ2K9sEEZCq)  ![](/files/wH9lJ6TPWBZ0IWRCfNGU)  ![](/files/NfAJtLwI3lSQwQ6z1zNZ)

### 4.Delete a scene

* Click to select the thumbnail of the scene you want to delete
* Right-click
* Click the "Delete scene" button, and a popup to confirm the deletion will appear
* Click the "Confirm" button, the selected scene will be deleted
* When deleted by mistake, you can undo the operation by pressing "Ctrl+Z" or "Undo button"

![](/files/kK48lAuPhmK2viAFTuIz)      ![](/files/mpEI62N9Un23aFf7bdEh)

####

## <mark style="color:blue;">Recommendations for scene division</mark>

At the beginning of production, it is recommended to plan in advance how many scenes need to be produced and what is the task of each scene.

Generally, we recommend the following:

* Fixed Steps: Use one scene for each step in a sequential process.
* Allow Flexibility: Dedicate one scene to the core gameplay experience while having a separate scene for the end page.

👉Recommended Reading： [Creation Tips - Scene Creation](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-scene-creation)


# Layer Area

\#Content Editor

A scene is composed of stacked assets, and each asset is a layer.

The layer area displays the content and types of all assets in **the current scene**. Generally speaking, we divide these assets into the following three types：

* General assets: including images, text, sequence, spine, particles,interactive area, and group
* Video assets: Video
* Audio assets: including background music and sound effects

<figure><img src="/files/owqBhDEFsilelHneds0y" alt=""><figcaption><p>Layer Area</p></figcaption></figure>

## 📒<mark style="color:blue;">Layer Display Logic</mark>

* The sorting logic of the layer area is consistent with the display logic of the canvas, with the top layer elements displayed at the top level of the canvas.
* Layer module sorting (from top to bottom): General assets>>Video assets>>Audio assets.
* <mark style="color:red;">Video layers are positioned below all other layers by default</mark> (except for background images and background colors) and cannot be moved.

👉<mark style="color:blue;">Related content：</mark> [/pages/o1KAnWpV1cChic9HaAej#id-4.video-adaptation-special-requirements](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/pages/o1KAnWpV1cChic9HaAej#id-4.video-adaptation-special-requirements "mention")  [Work Preview Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area#basic-operation-of-canvas)

<div align="left"><figure><img src="/files/uqSIzILMwaiqrHKYe4Nh" alt=""><figcaption></figcaption></figure></div>

## 📒<mark style="color:blue;">**Operations Supported by Layers**</mark>

### 1.Adjust the order of layers

#### **1)Method 1**

* Drag and drop layers in the layer panel to adjust the order
* You can use the drag and drop method to move the layers of the "General assets" section
* Video assets and audio assets cannot be dragged and adjusted

#### **2)Method 2**

* In the layers panel, click to select the layer whose order needs to be adjusted
* Click the layer order icon in the Quick Access Area to adjust its order
* You can change the layer order by using shortcuts in four ways: Put on top/Put on the bottom/move up one layer/move down one layer

### 2.Group/Ungroup layers

After grouping multiple elements, you can uniformly change the position and size of elements within the group, or add animation events to the group.

👉<mark style="color:blue;">Related content：</mark> [Creation Tips - Assets](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-assets#asset-grouping)

#### 1)Group layers

* To group a single layer, you can directly select the layer and click the group button
* To group multiple layers, hold down the Ctrl key, select multiple layers, and then click the group button

![](/files/pTjVTHTD9yzMu9XXiqBF)   ![](/files/IzYi5Ctbka3AaFjR3Ghh)

* When no layers are selected, clicking the group button will create a default square-centered group layer. At this point, you can customize and edit the group's position and size. After editing, simply drag the desired assets into the group.

<div align="left"><figure><img src="/files/7oUIRpq11yiW6SanFUiZ" alt=""><figcaption></figcaption></figure></div>

#### 2)Ungroup layers

* Select the group of layers
* a.Right-click,select the "Ungroup" button to complete the ungrouping

<div align="left"><figure><img src="/files/k03Ylxux2zYjLVsXN32q" alt=""><figcaption></figcaption></figure></div>

* b.Find the "Ungroup" button in the Quick Access Area,click to complete the ungrouping

<div align="left"><figure><img src="/files/5ds2ndIgJLqwhvT0PFrX" alt=""><figcaption></figcaption></figure></div>

### 3.Duplicate/Paste layers

#### **1)Method 1**

* Select the layer to be duplicated
* Right-click and select the "Duplicated layer" button
* Right-click and select the "Paste Layer" button to complete the duplicate and paste of the layer
* *The name defaults to "ORIGINAL NAME\_copy"*
* *Only support duplicate and paste of the layer itself*

<div align="left"><figure><img src="/files/pwHgBrRaCUg0uXndZMIz" alt=""><figcaption></figcaption></figure></div>

#### **2)Method 2**

* Select the layer to be duplicated
* Click the copy button in the Quick Access Area
* Click the paste button in the Quick Access Area
* Select the paste option to complete the quick copy and paste of the layer
* There are four paste options: You can quick paste layer format only/Only paste the alignment and size of the layer/Paste the layer animation only/Paste layer events only/Paste layer itself.

<div align="left"><figure><img src="/files/aAxfgVuU0fq9bzBANaZF" alt=""><figcaption></figcaption></figure></div>

### 4.Delete layers

* Select the layer to be deleted
* Right-click and click the "Delete Layer" button to delete the layer

<div align="left"><figure><img src="/files/wb5kl3Z6h3pJTqRWShdD" alt=""><figcaption></figcaption></figure></div>

### 5.Lock/Unlock layers

* Hover your mouse over the layer that needs to be locked, and an unlock icon![](/files/8YVI0jUIM3YU49xDEOf6) will appear
* Press the icon to lock, the icon![](/files/cyGa7YBMK8SbPeivCULS) switches to![](/files/kTmOVsyaT9NFyZAc7LMb)
* Hover your mouse over the locked layer and press the locked icon to unlock the layer
* *Assets are not locked by default.When the asset is locked, the layer cannot be selected in the canvas*
* *Applicable situation of locking: assets that exist in multiple scenes at the same time and whose position and size do not need to be adjusted again*

<div align="left"><figure><img src="/files/iaobahcxbPPCKOz5h4yF" alt=""><figcaption></figcaption></figure></div>

### 6.Hide/Display layers

* Hover your mouse over the layer that needs to be hidden, and the icon <img src="/files/xRoBqTpIC812aEarxrQB" alt="" data-size="line"> for display status will appear
* Press the icon to hide it, and the icon <img src="/files/uun6HS0Sk23vQo9d458H" alt="" data-size="line"> switches to <img src="/files/1DQk7mNGHZHKjN9oR4LP" alt="" data-size="line">
* Hover your mouse over the hidden layer and click the icon for hidden status to set the layer to display state
* *Assets are displayed by default*
* *When the asset is hidden, the layer will not be displayed in the canvas, and the hidden layer can be made to display through the event setting (e.g. a ribbon salute appears after double-clicking)*

<div align="left"><figure><img src="/files/AKK9UBd6hwPG4XgREcYO" alt=""><figcaption></figcaption></figure></div>

### 7.Layer Color

* Select a layer and right-click to set a color for the layer.
* This feature is mainly used for categorizing layers when there are many layers and events, making it easier to find and edit them.

<div align="left"><figure><img src="/files/9h4y3zj64Fs1L4URrOdY" alt=""><figcaption></figcaption></figure></div>

### 8.Animation Icon

* By default, layers have no animation, and the icon displays as ![](/files/oaLVBcuLCCrgphsscMLt)
* Once an animation is added to the layer, the icon will automatically highlight as ![](/files/afSfWwhV4UnOqkgAinNF).  Clicking the icon will quickly switch you to the layer’s “Animation” settings panel for easy viewing and adjustments.

<figure><img src="/files/RzNkZzpCRdoBwiKPYvVF" alt=""><figcaption></figcaption></figure>

### 9.Events Icon

* By default, layers have no event, and the icon displays as ![](/files/HcPB8kOgJKJ2fg5YCuvK)
* Once events is added to the layer, the icon will automatically highlight as ![](/files/915iMxW30Syt7Tq98U1F).  Clicking the icon will quickly switch you to the layer’s “Event” settings panel for easy viewing and adjustments.

<div align="left"><figure><img src="/files/tobHsPGx8F3CUXjfiz7m" alt=""><figcaption></figcaption></figure></div>


# Quick Access Area

\#Content Editor

<figure><img src="/files/B8lTOvWnCmH3Ipb5Zwv9" alt=""><figcaption><p>Quick Access Area</p></figcaption></figure>

Quick Access Area supports: adjust layer order, group, ungroup, copy, paste, undo, redo.

## <mark style="color:blue;">1.Adjust layer order</mark>

* Select the layers in the layer area that need to be adjusted in order
* Click on the Quick Access Area - Layer order icon to adjust
* Only supports four movement methods: Put on Top/Put on the bottom/Move up one layer/Move down one layer

<div align="left"><figure><img src="/files/YJg1B8bUa2wco4ysHuPr" alt=""><figcaption></figcaption></figure></div>

For more information on Layer order, please move to  [Layer Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area)  to view it.

####

## <mark style="color:blue;">2.Group</mark>

* Select the layer to be grouped in the layer area
* Click on the Quick Access Area - Group icon to group

####

## <mark style="color:blue;">3.Ungroup</mark>

* Select the layer group that needs to be ungrouped in the layer area
* Click on the Quick Access Area - Ungroup icon to ungroup

For more information on Group/Ungroup, please move to [Layer Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area)  to view it.

####

## <mark style="color:blue;">4.Copy/Paste</mark>

* Select the layer to be copied/pasted in the layer area
* Click on the Quick Access Area - Copy/Paste icon to copy/paste
* Supports pasting five attributes of layers separately: format, alignment and size,  animation, events, and layer

<div align="left"><figure><img src="/files/OHxzGzb4vMIYreMgmvps" alt=""><figcaption></figcaption></figure></div>

For more information on Copy/Paste, please move to [Layer Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area)  to view it.

####

## <mark style="color:blue;">5.Undo/Redo</mark>

During the production process, if there are unexpected actions or unsatisfactory editing results, you can perform undo/redo operations.

* Click the Undo/Redo button on the Quick Access Area to successfully undo/redo the operation
* Pressing Ctrl+Z can also undo the operation
* Note: Undo and redo support backtracking frequency: 50 times


# Parameter Setting Area

\#Content Editor

The Parameter Setting Area is the area for adjusting scene and layer parameters.

<figure><img src="/files/UhQ78BuvPnmpNkFKomlX" alt=""><figcaption><p>Parameter Setting Area</p></figcaption></figure>

<mark style="color:red;">**Explanation:**</mark>

* When you click on **different scene** areas on the left side (Global Settings/Scene), the displayed parameters on the right side will also be different (for example, there are Global Settings, Scene Setting, Event, Gameplay Parameters).
* When you click on **different layers** on the left side (i.e., different types of assets), the displayed parameters on the right side will also be different (for example, there are Exterior, Animation, Event, and exterior parameters differ for different types of assets).
* Additionally, common horizontal and vertical screen adaptation issues (adaptation rules/methods) can be adjusted in the parameter settings area.

Therefore, we will introduce different parameters in this area one by one and note their corresponding scenes or layers (where "Common" means the parameter applies to both click scenes and layers).

<figure><img src="/files/6ipxMyeqBB5LjjLwaVV3" alt=""><figcaption><p>The parameters vary by scene and layer</p></figcaption></figure>


# Global Settings

Global Settings parameters & Global scene layer parameters (some templates may include gameplay parameters here)

Global Settings & Global scene add assets that will be used across all scenes, including **bgm**, **background image**, **background color**, **default language** and **permanent product information**, etc.

💡It is recommended to add and set global assets in advance before start the build to set the tone for the overall design of the work.

**Global Settings：** [Adjustment of permanent content](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/global-settings/adjustment-of-permanent-content)  [Multi-language Configuration and Translation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/global-settings/multi-language-configuration-and-translation)

<figure><img src="/files/3HVFUUroxV8viOJfI3z2" alt=""><figcaption></figcaption></figure>

**Global scene：**&#x50;arameters are used similarly to  [Exterior - Layer Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters)  [Animation - Layer Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/animation-layer-parameters)  [Event - Common Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters)

<figure><img src="/files/2ueBCeZ2xknGY9aDbMaB" alt=""><figcaption></figcaption></figure>


# Adjustment of permanent content

Global Settings parameters

Background permanent content includes BGM, background image, and background color.

<figure><img src="/files/czrSYwS6fA4dc6bKhUJO" alt=""><figcaption></figcaption></figure>

## 💡<mark style="color:blue;">BGM</mark> <a href="#uuawb" id="uuawb"></a>

### 1.Add background music

* In the global setting attribute panel, click the "+" button on the right side of the background music
* Pop-up panel supports adding background music from four channels: \[BGM Lib], \[My Assets], \[Project Assets], and \[Local Upload]
* Click the "+" button to successfully set the background music

<div align="left"><figure><img src="/files/GbIpoZVQfpAJiTcIrwnQ" alt="" width="548"><figcaption></figcaption></figure></div>

### 2.Supplement

* \[BGM Lib] Supports searching, filtering, listening, and adding background music from Public Asset Library.
* \[My Assets] Supports searching, filtering, listening, and adding background music from My Asset Library.
* \[Project Assets] Supports selecting and adding background music from the audio files of the current project.
* &#x20;\[Local Upload]Supports adding audio files as background music after uploading them locally.
* \[Delete background music] Click the delete button on the right to delete the current background music material

<div align="left"><figure><img src="/files/cm6ZxAGlE70AKlTg7Io4" alt=""><figcaption></figcaption></figure></div>

## 💡<mark style="color:blue;">Background Image</mark>

### 1.Add background image

* In the global setting attribute panel, click the "+" button on the right side of the background image
* Pop-up panel, supporting adding background music from four channels: \[Images Lib], \[My Assets], \[Project Assets], and \[Local Upload]
* Click the "+" button to successfully set the background image

<div align="left"><figure><img src="/files/zcJUb3wgFa8iEhu3k61N" alt="" width="489"><figcaption></figcaption></figure></div>

### 2.Supplement

* \[Images Lib]  Supports for searching and adding background images from Public Asset Library.
* \[My Assets] Supports searching, filtering, and adding background images from My Asset Library.
* \[Project Assets] Supports selecting and adding background images from the image file of the current project.
* \[Local Upload]Supports adding image files as background images after uploading them locally.
* <mark style="color:red;">When both the background image and background color exist, priority is given to displaying the background color.</mark>
* \[Delete background image] Click the delete button on the right to delete the current background image material.

<div align="left"><figure><img src="/files/wnQwLzQlQ3NQ5NtGr4e5" alt=""><figcaption></figcaption></figure></div>

## 💡<mark style="color:blue;">Background Color</mark>

### 1.Add background color

* In the global setting attribute panel, click the "+" button to the right of the background color
* Click to select a color in the color palette pop-up window to successfully set the background color

<div align="left"><figure><img src="/files/sYuxehTfiFh1XR09caEL" alt=""><figcaption></figcaption></figure></div>

### 2.Supplement

* Background color support for single and gradient colors.
* <mark style="color:red;">When a background color has been added, no background image can be added; If you want to add, you need to first remove the background color.</mark>

<div align="left"><figure><img src="/files/qJeGVfVu05CkrkWiPlyW" alt=""><figcaption></figcaption></figure></div>

* \[Delete background color] Click the delete button on the right to delete the current background color.


# Multi-language Configuration and Translation

Global Settings parameters

## 📒<mark style="color:blue;">Multi-language configuration</mark>

One playable can contain multiple languages, which you can apply in different regions.

<figure><img src="/files/cw63ui9agobRNfsu9GUA" alt=""><figcaption></figcaption></figure>

### 1. PLEASE NOTE

* <mark style="color:red;">**Multiple language versions are packaged together in one playable**</mark>**.** You only need to download one package and apply it in multiple countries.
* When previewing playables on the Playturbo platform or other channels, the language displayed will prioritize the default language of your device/browser.
* **Multilanguage auto-adaptation** **only applies to text assets.** Image and video assets cannot be auto-translated. If you need localized versions, please duplicate the project for each language and manually replace the image/video content accordingly.

### 2.DEFAULT LANGUAGE

Playturbo supports adding, editing, and deleting languages for your project.

* Change default language: After adding multiple languages, select the added language to successfully set it as the default language.
* Click the small pencil button on the right side of the default language to configure all text content languages in the material package one by one. The text input box supports vertical stretching.
* The currently selected default language does not support deletion. Unselected languages support text content editing and direct deletion.

**🌟 About Playturbo’s&#x20;**<mark style="color:red;">**Default Language**</mark>**&#x20;Rules**

* **The system will prioritize matching the user’s device/browser language with the languages added in the playable package.**
* **If there is no match, the language set as Default Language will be displayed.**

<div align="left"><figure><img src="/files/1TyZTftGlnxZ28aEvOGu" alt=""><figcaption></figcaption></figure></div>

<table><thead><tr><th width="186">Added Languages</th><th width="132">Default Language</th><th>The Language Users Will See</th></tr></thead><tbody><tr><td>Example A: Chinese, English, Korean</td><td>English</td><td><ul><li>If the device/browser language is Chinese → Chinese</li><li>If the device/browser language is Korean → Korean</li><li>If the device/browser language is neither of the above → English</li></ul></td></tr><tr><td>Example B: English</td><td>English</td><td>Regardless of the device/browser language → English</td></tr></tbody></table>

## 📒<mark style="color:blue;">Multilingual intelligent translation</mark>

When adding a language version, you can use the existing language to make the translation by the AI translation function.

### STEP1 Add Language

\[Global Settings]- \[Add Language]

<div align="left"><figure><img src="/files/a43yIu0MS1sxpuzjWKEv" alt=""><figcaption></figcaption></figure></div>

### STEP2 Confirm source and target languages

* Select "Source Language", which must be an existing language version.
* Use the text in that language version for translation. Select "Target Language", which is the new language to be added.
* Select the text to be translated and click the "Translate" button.&#x20;

<div align="left"><figure><img src="/files/WdLSBCfVI5ktSdsRJumg" alt=""><figcaption></figcaption></figure></div>

### STEP3 Fine-tune

After waiting for the translation result, you can further modify the text in the text box.

After the modification is completed, click "Confirm" to add a new language version.

<div align="left"><figure><img src="/files/bAyLZwmoJQNwT41Ms4wl" alt="" width="469"><figcaption></figcaption></figure></div>

<mark style="color:red;">Note: When dealing with different currency symbols in text, manual adjustment is required.</mark>


# Gameplay Parameters - Scene Parameters

Gameplay parameters vary for each template

Entrance：Parameter Setting Area>>>Gameplay Parameters

* Gameplay parameters only appear in "**Template Content Creation**", while "Blank Canvas" has no gameplay parameters.
* Not every scene has gameplay parameters; typically, they are located in the parameter settings area of Scene 1 (core gameplay), with a few found in Global Settings.

<figure><img src="/files/WTWmNhn1gAj865BuVjjj" alt=""><figcaption><p>Located in [Scene 1]</p></figcaption></figure>

## <mark style="color:$primary;">📒</mark><mark style="color:$primary;">Common Parameter Types Intro</mark>

🌟<mark style="color:red;">**\[Extra Redirection] Explanation**</mark>

For most templates (especially those involving code), the gameplay parameters usually include an option called “Extra Redirection”, which allows you to quickly adjust the number of trial steps. This means after the player performs a valid operation *x* times, it will trigger a redirection to the app store (and users can return to continue the trial). *Set to 0 to disable — no redirection will occur during the trial.* You can freely set this value based on your creative needs.

<table><thead><tr><th width="227">Parameter types</th><th>Screenshot reference</th></tr></thead><tbody><tr><td>slider</td><td><img src="/files/RV7UXNLwVpqtVh581SnH" alt=""></td></tr><tr><td>input</td><td><img src="/files/h8iZiczCGv31POavFVgH" alt=""></td></tr><tr><td>switch</td><td><img src="/files/kAnqMLSIMejS0YTpGJqd" alt=""></td></tr><tr><td>radio</td><td><img src="/files/7payUdxznpWp8HZfsIiz" alt=""></td></tr><tr><td>checkbox</td><td><img src="/files/A7a1lwhMg4OcqwWfiAkK" alt=""></td></tr><tr><td>select</td><td><img src="/files/4a3fP6joRIktRU5VinNX" alt=""></td></tr></tbody></table>

## <mark style="color:$primary;">📒Other Gameplay Parameters Adjustment</mark>

Whether or not **the parameters related to the core gameplay** of a specific template can be adjusted primarily depends on the "Gameplay Parameters" section in the parameter area.

Taking the template ["Catch your coupon" ](https://tinyurl.com/y2ztadf8)as an example:  Its "Gameplay Parameters" allow adjustments to "Extra Redirections," "Number of element and object shown," and "Element cycle movement speed."  However, if users want to adjust the spacing between elements during the carousel, it is not supported for customization.

For other operations, please refer to: [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation)

<figure><img src="/files/ISyEbiczrLdX9YFNDcuC" alt=""><figcaption></figcaption></figure>


# Scene setting - Scene Parameters

Scene parameters are not distinguished by scene

The Scene Setting includes two parts: "Scene Attributes" and "Global Scene."

<figure><img src="/files/sxmSsimwwaOCZzoGA5vS" alt=""><figcaption></figcaption></figure>

## 📒<mark style="color:blue;">Scene Attributes</mark>

Used to check whether to set the current scene as the' Ending Scene '

After checking, the "End Scene" label will be added at the bottom of the current scene thumbnail.

👉Related content:  [WORK CREATION-IMPORTANT NOTICE⚠️](/playable-tools-content-editor/work-creation-important-notice) [WORK CREATION-IMPORTANT NOTICE⚠️](/playable-tools-content-editor/work-creation-important-notice#report-the-end-of-the-playable-a-ds)

<div align="left"><figure><img src="/files/TvCh1IqAXam2ROUmxKT1" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/T8NlFOElWEcJ1SRQXGdn" alt=""><figcaption></figcaption></figure></div>

## 📒<mark style="color:blue;">Global Scene</mark>

Used to check whether to enable Global Scene

If enabled, you can choose to place the global scene at the top of the current scene or at the bottom of the current scene.

Note: Global scene refer to the permanent assets added in the scene area after entering \[Global Settings].

<figure><img src="/files/y9txu8jyL033AbSQWmev" alt=""><figcaption><p>put on the top</p></figcaption></figure>

<figure><img src="/files/utZuG2HhrZtUbtzSE19q" alt=""><figcaption><p>put on the bottom</p></figcaption></figure>

<figure><img src="/files/c7lKPXQUN3xqh9SyyRzU" alt=""><figcaption><p>Global scene is not enabled</p></figcaption></figure>


# Exterior - Layer Parameters

Exterior parameters will vary based on asset types

Exterior includes "**General parameters**" and "**Special parameters**"

<figure><img src="/files/n7K9UALCSKFaQa4A24ye" alt=""><figcaption></figcaption></figure>

## 📒<mark style="color:blue;">General parameters</mark>

General parameters of general assets, including alignment option, show and hide parameters, position\&size, reuse horizontal/vertical screen position configuration, opacity, rotation angle, screen adaptation, pivot, and scale.

<table><thead><tr><th width="137">Image</th><th width="144">Parameter types</th><th width="183">Description</th><th width="353">Steps</th></tr></thead><tbody><tr><td><img src="/files/g2P9R6mftjiDpqiQv9v0" alt=""></td><td><strong>Alignment option</strong></td><td>Support two alignment options:<br>- Global alignment<br>- Local alignment<br></td><td><strong>【Global alignment】</strong><br>Select an asset, click the alignment shortcut to perform global alignment.<br><br><strong>【Local alignment】</strong><br>Hold down the Ctrl key to select multiple images and click the alignment shortcut for local alignment of multiple image layers.</td></tr><tr><td><img src="/files/glPzdW8PKZlAdBt1EtOH" alt=""></td><td><strong>Show&#x26;Hide</strong></td><td>Support the setting of horizontal and vertical screen splitting for displaying or hiding layers</td><td><p><strong>【Separate Setting】</strong></p><p>Default not to split; If you need to split the settings, just check it directly.</p></td></tr><tr><td><img src="/files/quDc2ieB3EMDr8Pbu0rS" alt=""></td><td><strong>Position</strong></td><td>Support two adjustment options:<br>- Drag and drop<br>- Edit parameters</td><td><strong>【Drag and drop】</strong><br>Select the asset that needs to be adjusted, drag and drop to adjust the position.<br><br><strong>【Edit parameters】</strong><br>1. Support the adjustment of specific parameters of the X-axis and Y-axis.<br>2. Modify the corresponding parameters to adjust the position.</td></tr><tr><td><img src="/files/SlvkI2HFHyBIC3g8303W" alt=""></td><td><strong>Size</strong></td><td>Support two adjustment options:<br>- Drag and drop<br>- Edit parameters<br></td><td><strong>【Drag and drop】</strong><br>1. Select the asset to be resized, drag and drop to resize<br>2. Hold down the Shift key for proportional resizing<br><br><strong>【Edit parameters】</strong><br>1. Support width and height parameter adjustment<br>2. Modify the corresponding parameters to adjust the size</td></tr><tr><td><img src="/files/7YMIVPYY0NUDKJXIpRDI" alt=""></td><td><mark style="color:red;"><strong>Reuse</strong></mark> <mark style="color:red;"><strong>horizontal/vertical screen position configuration</strong></mark></td><td>Support application in horizontal&#x26;vertical production mode</td><td>Click the "Reuse horizontal/vertical screen position configuration" button to successfully reuse<mark style="color:orange;">(Suggest creating a single screen first, such as in vertical orientation, then switch to horizontal orientation. Select all top-level layers and use this feature.)</mark></td></tr><tr><td><img src="/files/dkTaZda9zvnFGWFAzlY9" alt=""></td><td><strong>Opacity</strong></td><td>Support two adjustment options:<br>- Slider adjustment<br>- Manual modification</td><td><strong>【Slider Adjustment】</strong><br>Drag the opacity anchor point in the slider to adjust transparency<br><br><strong>【Manual modification】</strong><br>Manually modify the specific parameters of opacity</td></tr><tr><td><img src="/files/ISMYEwGJBD6xHFTiBsLB" alt=""></td><td><strong>Rotation</strong></td><td>Support two adjustment options:<br>- Manual modification<br>- Edit parameters<br></td><td><strong>【Manual adjustment】</strong><br>Select the asset that needs to be rotated, and click the rotate button above the asset to rotate the layer at will<br><br><strong>【Edit parameters】</strong><br>The rotation angle can be modified by manually modifying the corresponding parameters.</td></tr><tr><td><img src="/files/quj8N6ElYgUKPEDxc6Ic" alt=""></td><td><mark style="color:red;"><strong>Screen adaptation</strong></mark></td><td>1.The default is global centering<br>2.Support two constraint settings:<br>- Click Constraint<br>- Select Constraint</td><td><p><strong>【Click Constraints】</strong><br>1. Select the asset that needs to be constrained<br>2. Click the positioning constraint box to complete click constraints</p><p></p><p><strong>【Select Constraints】</strong><br>1. Select the asset that needs to be constrained<br>2. Click the landscape/portrait constraint list to bring up the tab list<br>3. Select the constraint method and complete constraint configuration</p></td></tr><tr><td><img src="/files/sZCyeJSQxR882O8JcYd8" alt="" data-size="original"></td><td><mark style="color:red;"><strong>Pivot</strong></mark></td><td>The pivot is the reference point of the layer, which determines the center point for operations like rotation, scaling, and movement.</td><td><p><strong>【Pivot】</strong></p><p>By default, it is set to (50, 50). You can directly enter numbers or move the green dot to adjust the pivot position.</p></td></tr><tr><td><img src="/files/qq7kqFiYzUhdHsBv6JCn" alt=""></td><td><strong>Scale</strong></td><td>Scale and adjust based on the original size</td><td><ol><li>Support specific parameter adjustments for width and height</li><li>Modify the corresponding parameters to perform material scaling</li><li>Support horizontal and vertical screen splitting settings</li></ol></td></tr></tbody></table>

👉Special note on exterior parameters:  [Screen adaptation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/screen-adaptation)

## 📒<mark style="color:blue;">Special parameters</mark>

Apart from general parameters, we generally categorize them as special parameters. Special parameters vary based on the different types of assets (layers).

**Comparison of special parameters for different asset types** (detailed explanation in the subdirectory).

<table><thead><tr><th width="171">Assets type</th><th>Comparison of differences in exterior parameters</th></tr></thead><tbody><tr><td><strong>Scene</strong></td><td><del>No exterior parameters</del></td></tr><tr><td><strong>Group node</strong></td><td><del>No special parameters</del></td></tr><tr><td><strong>Interactive area</strong></td><td><del>No special parameters</del></td></tr><tr><td><strong>Image</strong></td><td>Replace/Clip/Reset Size/Filter/Nine Patch Drawable Grahpic</td></tr><tr><td><strong>Sequence</strong></td><td>Reset Size/Sequence editing/Play/Pause/Delay per Frame/Play views/Filter</td></tr><tr><td><strong>Spine</strong></td><td>Replace Spine/Play settings/Play/Pause</td></tr><tr><td><strong>Text</strong></td><td>Alignment/Copywriting Configuration/Font/Basic Style/Stroke/Shadow/Apply to other languages/Other language settings</td></tr><tr><td><strong>Particle</strong></td><td>Replace/Play Settings/Particle Parameters/Physics Parameters</td></tr><tr><td><strong>Video</strong></td><td>Play video/Stop video/Replay/Replace/Clip/Reset size/Play settings/Sound settings</td></tr><tr><td><strong>Audio</strong></td><td>Sound play/Replace/Clip/Volume settings/Play settings</td></tr></tbody></table>


# Image parameters

\#Content editor

Other exterior parameters of the image layer include: Replace/Clip/Reset Size/Filter/Nine Patch Drawable Grahpic

## Other exterior parameters description

<table><thead><tr><th width="134">Image</th><th width="119">Parameter types</th><th width="176">Description</th><th width="251">Steps</th><th>Reference</th></tr></thead><tbody><tr><td><img src="/files/Da74trt19tModsNLwusV" alt=""></td><td><strong>Replace</strong></td><td>Support replacing the current image asset</td><td>1. Press the button to open the image panel<br>2. Select/upload image for replacement<br>3. Click “Add” to complete the replacement</td><td><img src="/files/zIEtXOGsjpHnqiFmMzkt" alt=""></td></tr><tr><td><img src="/files/AqJtXyhuTrHfJl33EeA7" alt=""></td><td><strong>Clip</strong></td><td>Support image cliping</td><td>1. Press the “Clip” button<br>2. The image-cliping popup appears<br>3. Support zooming image to adjust it to the appropriate size<br>4. Click "OK" to finish cliping</td><td><img src="/files/7iXSiz2gts3IbOsYLynb" alt=""></td></tr><tr><td><img src="/files/lHvWKGFoHmgDmp5lFPJm" alt=""></td><td><strong>Reset size</strong></td><td>Support image size resetting</td><td>Press the “Reset size” button to restore<br>original image size</td><td>/</td></tr><tr><td><img src="/files/1KKja2o1twGu1NLdp8xm" alt=""></td><td><strong>Filter</strong></td><td>Support filter parameter adjustment/reset filter parameters</td><td>1. Click on the filter parameter slider / edit the specific parameters of the filter to complete the filter adjustment<br>2. Press the <img src="/files/vM4ykaa8JuPWwh7I4oUi" alt=""> button to reset the filter parameters</td><td>/</td></tr><tr><td><img src="/files/U11V1O92wnxykkpSpT7G" alt=""></td><td><strong>Nine Patch Drawable Grahpic</strong></td><td>9-slicing involves splitting the image into nine portions, so that when you re-size the Sprite, the different portions scale or tile in different ways to keep the Sprite in proportion</td><td>1. Click to open the 9-slicing Sprites<br>2. Set the parameters for the top, bottom, left and right of the image<br>3. At this time, the area within the parameters can be stretched without deformation<br><br>Note: The red frame selection area is the set parameter area</td><td><img src="/files/dU8egPsKguBPe2yc92qC" alt="image.png"><br><img src="/files/zzDlvGvpRm8ji7cF9UBF" alt="image.png"></td></tr></tbody></table>


# Sequence parameters

\#Content editor

Other exterior parameters of the sequence layer include: Reset size/Sequence editing/Play sequence/Pause sequence/Delay per Frame/Play settings/Filter

## Other exterior parameters description

<table><thead><tr><th width="169">Image</th><th width="148">Parameter types</th><th width="208">Description</th><th width="178">Steps</th><th>Reference</th></tr></thead><tbody><tr><td><img src="/files/wD1MDmR7hQPmtVmqydDh" alt=""></td><td><strong>Reset size</strong></td><td>Reset sequence frame to the original size</td><td>Press the “Reset size” button to reset</td><td>/</td></tr><tr><td><img src="/files/U1aMShkwCGKCT6oxzAwY" alt=""></td><td><strong>Sequence editing</strong></td><td>1. Support sequence frame position adjustment<br>2. Support deleting/adding sequence frame</td><td>/</td><td><img src="/files/VUSGSQMSq1xcyNhDJrSI" alt="image.png"></td></tr><tr><td><img src="/files/T6Yau3hVlONS2aCLGDMH" alt=""></td><td><strong>Play sequence</strong></td><td>Support playback of sequence frames</td><td>Click to start playing sequence frames</td><td>/</td></tr><tr><td><img src="/files/1E5bx4Ep0KSqw0NO07qO" alt=""></td><td><strong>Pause sequence</strong></td><td>Support playback of sequence frames</td><td>Click to pause sequence frames</td><td>/</td></tr><tr><td><img src="/files/QHRseOWDpixza8o9qv4j" alt=""></td><td><strong>Delay per Frame</strong></td><td>1. Support setting time gap per frame<br>2. The default time gap of each frame is 100ms<br>3. Support adjusting parameters by dragging slider</td><td>Drag the slider/edit the specific parameters of the time gap to adjust the time gap of each frame</td><td>/</td></tr><tr><td><img src="/files/EZcXH2DnxCQEESC00SMy" alt=""></td><td><strong>Play settings</strong></td><td>1. Default“autoplay upon open”“Loop”<br>2. Edit playback times</td><td>Turn off the 'Loop' button and set the playback times in the 'Views' bar</td><td><img src="/files/rXVHTIaT2sXL1Ht8NQOm" alt=""></td></tr><tr><td><img src="/files/w9wlIsFkvpYDH9p86YnV" alt=""></td><td><strong>Filter</strong></td><td>Support filter parameter adjustment/reset filter parameter</td><td>1. Click the filter parameter slider / edit the specific parameters of the filter to complete<br>2. Press the button to reset the filter parameters</td><td>/</td></tr></tbody></table>


# Spine Parameters

\#Content editor

Other exterior parameters of the spine layer include:Replace/Play settings/Play/Pause

## Other exterior parameters description

<table><thead><tr><th width="134">Image</th><th width="107">Parameter types</th><th width="224">Description</th><th width="230">Steps</th><th>Reference</th></tr></thead><tbody><tr><td><img src="/files/2mdFdDpwT7iX53ztTpLQ" alt=""></td><td><strong>Replace</strong></td><td>Support replacement of the current asset</td><td>1. Press the button to open the special effect asset panel<br>2. Select/upload asset for replacement<br>3. Click “Add” to complete the replacement</td><td><img src="/files/sGZ4qLXDtnosOEvCK1PE" alt="image.png"></td></tr><tr><td><img src="/files/giE07TYOSdPPzlEBqO6w" alt=""></td><td><strong>Play settings</strong></td><td>1. Entry: automatically play the Spine animation by default<br>2. Support Spine animation mode<br>3. Support setting to play on loop<br>4. Support editing playback speed</td><td>/</td><td><img src="/files/sxrSniVBjUDCPekrWVUn" alt="1652700987(1).png"></td></tr><tr><td><img src="/files/rYkJjavQ0PntWTjfd7Ub" alt=""></td><td><strong>Play</strong></td><td>Start playing</td><td>Press the button to start playing Spine effect</td><td>/</td></tr><tr><td><img src="/files/Mj5mNmdwwLxaYuOorFb6" alt=""></td><td><strong>Pause</strong></td><td>Pause playing</td><td>Press the button to pause playing Spine effect</td><td>/</td></tr></tbody></table>


# Text parameters

\#Content editor

Other exterior parameters of the text layer include: Alignment/Copywriting Configuration/Font/Basic Style/Stroke/Shadow/Apply to other languages/Other language settings

## Other exterior parameters description

<table><thead><tr><th width="171">Image</th><th width="162">Parameter types</th><th width="245">Description</th><th width="173">Steps</th></tr></thead><tbody><tr><td><img src="/files/0k9ZAwxCxw7hf7F0v28e" alt="" data-size="original"></td><td><strong>Text alignment</strong></td><td>Support 7 text alignment options</td><td>Click the matching method to align the text</td></tr><tr><td><img src="/files/iPjLe3PnIsTDRc08TgyT" alt=""></td><td><strong>Copywriting Configuration</strong></td><td>Copy-writing editing</td><td>/</td></tr><tr><td><img src="/files/5AfaWchjolwnE8PreQfL" alt=""></td><td><strong>Font</strong></td><td><p>1）Support selecting public fonts from the “Font Folder” for use;</p><p><strong>2）Support adding custom fonts through [+Upload];</strong></p><p>3）Support "Apply to texts in the same language"</p></td><td><img src="/files/PzyPfdnhQTmSyd8f64dO" alt="" data-size="original"></td></tr><tr><td><img src="/files/swTNkUDqdmqeUk8jzpwd" alt=""></td><td><strong>Basic style</strong></td><td>Support settings for:<br>text color/font size/kerning/line height/bold/italic/underline/strikeout</td><td>/</td></tr><tr><td><img src="/files/Ns4alH8ZK6xcv6cKXwG1" alt=""></td><td><strong>Stroke</strong></td><td>Support settings for:<br>adding/removing stroke, stroke color and stroke size</td><td>/</td></tr><tr><td><img src="/files/j0fKLEpuFVejZYyfYvrn" alt=""></td><td><strong>Shadow</strong></td><td>Support settings for: adding/removing shadows, shadow color and shadow size</td><td>/</td></tr><tr><td><img src="/files/pq4K37YV5IePui1q894I" alt=""></td><td><strong>Apply to other languages</strong></td><td>Support current text style to be applied to other languages</td><td>/</td></tr><tr><td><img src="/files/ebzC3MoMd6BAQx1Y9wVC" alt=""></td><td><strong>Other language settings</strong></td><td>Other default language text format editing, different language text configuration</td><td>/</td></tr></tbody></table>

**Supplement：Custom font**

1. Format requirements：ttf;otf，max10M.
2. Operation：

a. Click the \[+Upload] button to bring up the local assets pop-up window and select the assets that meets the requirements.

b. After successful upload, add 'Uploaded' under 'Current Font' to display the font that was successfully uploaded.

c. If the font is deleted, a missing font pop-up window will appear when the project is reopened, and a new font selection is required at this time.

<div align="left"><figure><img src="/files/OWjtN9I0DmkqNLD8GRhV" alt=""><figcaption></figcaption></figure></div>


# Particle Parameters

\#Content editor

The exterior parameters of the particle layer include the following modules：

[Particle Thumbnail](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters/particle-parameters/particle-thumbnail)

[Play Settings](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters/particle-parameters/play-settings)

[Particle Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters/particle-parameters/particle-parameters)

[Physics Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters/particle-parameters/physics-parameters)

<figure><img src="/files/dKw6HS1V3mselviSx7OZ" alt=""><figcaption></figcaption></figure>


# Particle Thumbnail

\#Content editor

The particle thumbnail module supports preview and replacement.

<table><thead><tr><th width="179">Image</th><th width="176">Parameter types</th><th width="156">Description</th><th>Steps</th></tr></thead><tbody><tr><td><img src="/files/jFQvq7GCjpH1dvwWwvEh" alt=""></td><td><strong>Particle thumbnail</strong></td><td>Support particle thumbnail preview/replacement</td><td><br>1. Press the “Replace” button to open image panel<br>2. Select/upload particle texture file for replacement<br>3. Click “+” to complete the replacement<br></td></tr></tbody></table>


# Play Settings

\#Content editor

The Play Settings module supports adjusting playing times, starting play, and stop play.

<table><thead><tr><th>Image</th><th width="161">Parameter types</th><th width="215">Description</th><th width="187">Steps</th><th> Illustration</th></tr></thead><tbody><tr><td><img src="/files/5ir3bCrteOuzZJk3q8fX" alt=""></td><td><strong>Playing times</strong></td><td>1. Particles play on loop by default<br>2. Particle playback times edit available</td><td>Type a number in the box or click the button on the right to automatically uncheck loop playback</td><td><img src="/files/NN8OeIw27NxPaZ9QKK5M" alt=""></td></tr><tr><td><img src="/files/qZEspPUX1VmL2eH7nn6y" alt=""></td><td><strong>Play</strong></td><td>Support playing particle effects</td><td>Click to play particle effects</td><td>/</td></tr><tr><td><img src="/files/a9PfoDBvnaetEDHTV1dB" alt=""></td><td><strong>Stop</strong></td><td>Support stopping particle effects</td><td>Click to stop playing particle effects</td><td>/</td></tr></tbody></table>


# Particle Parameters

\#Content editor

Particle parameters include: Launch area, Emission space, Number of particles, frequency, particle size, transparency, rotation angle, speed, lifecycle, etc

<table><thead><tr><th width="161">Image</th><th width="168">Features</th><th width="192">Description</th><th>Preview</th></tr></thead><tbody><tr><td><img src="/files/BiyJBkixINRYlQjODfiY" alt=""></td><td><strong>Launch Area</strong></td><td><p></p><ol><li>Control the starting point of the particle</li><li>Support 4 types of emission area:Point/Line/Circle/Rectangle</li></ol></td><td><p><strong>Top to bottom</strong></p><p>Figure 1: Point</p><p>Figure 2: Line</p><p>Figure 3: Circle</p><p>Figure 4: Rectangle<img src="/files/DIVJd5hCmrcW1wrC2IHM" alt=""></p></td></tr><tr><td><img src="/files/Eh748noLZa0t1wjOxqHn" alt=""></td><td><strong>Emission Space</strong></td><td>Support World/Local modes</td><td><strong>Left to right</strong><br>Figure 1: World mode, the emitted particles will not be affected by the particle system node<br>Figure 2: Local mode, the emitted particles will move with the particle system node<br><img src="/files/THDWarIKhd86C7AoXpC1" alt=""></td></tr><tr><td><img src="/files/iFvFnv600U24RzXd2Xnh" alt=""></td><td><strong>Number of particles</strong></td><td>1. Recommended value range: 1~20<br>2. Particle Number: The number of particles emitted per batch</td><td>/</td></tr><tr><td><img src="/files/JPucA2A1su50mcvGwQD1" alt=""></td><td><strong>Frequency</strong></td><td>The time interval between each batch of particle emission, in seconds</td><td>/</td></tr><tr><td><img src="/files/qhwPpr0mSJsnXIgi5Lhp" alt=""></td><td><strong>Particle size</strong></td><td>1. Recommended value range: 0~100<br>2. When the number of particles reaches the peak, the emission will be suspended</td><td><img src="/files/Jri03vK9ypnli8GbbahH" alt=""></td></tr><tr><td><img src="/files/HETjU6Pgntuog9nHoVWQ" alt=""></td><td><strong>Transparency</strong></td><td><p></p><p>1.Value range: 0~1 (0 means fully transparent, 1 means opaque)</p><p></p><p>2.It is used to control the transparency of particles when they are generated. The transparency is randomly set within the specified range (0~1).</p></td><td><p><strong>Left to right</strong></p><p>Figure 1: Initial transparency = 0.5</p><p>Figure 2: Initial transparency = 1</p><p>Figure 3: Initial transparency = 0.5~1<img src="/files/i5xx3MQEwVJbTR8C0d7F" alt=""></p></td></tr><tr><td><img src="/files/afDZTuVoSFA2oNDUtVVa" alt=""></td><td><strong>Rotation angle</strong></td><td>1. Value range:<br>0～360° positive value: rotate clockwise<br>0～-360° negative value: rotate counterclockwise<br>2. It is used to control the rotation angle of particles per second after birth, and randomly selects a value within a specified range.</td><td><strong>Top to bottom</strong><br>Figure 1: Angle Speed=0<br>Figure 2: Angle speed=360, the particle rotates 360° in 1s<br>Figure 3: Angle speed 0～360<br><img src="/files/6t7RIPwWexKhPRPfoyeh" alt=""></td></tr><tr><td><img src="/files/vUDnyXSA2xeyYbyAqTQR" alt=""></td><td><strong>Speed</strong></td><td><p>1.Suggested value range: -2000～2000, it is better to adjust according to the multiple of 50</p><p>2.It is used to control the speed of particles when they are generated, and the speed value is randomly set within the specified range (-2000~2000).</p><p>3.Correspondence between the speed value and the direction:</p><p>positive value: the particle is emitted to the right</p><p>negative value: the particle is emitted to the left<img src="/files/hReKrvAQbuK6iSZW9jlE" alt=""></p></td><td><p><strong>Top to bottom</strong></p><p>Figure 1: Initial velocity = 200</p><p>Figure 2: Initial velocity = 400</p><p>Figure 3: Initial speed 200~400<img src="/files/FeZO0hBBW185tNpBB1St" alt=""></p></td></tr><tr><td><img src="/files/TrSWIwSLHeY7S27kjQXF" alt=""></td><td><strong>Life cycle</strong></td><td>The survival time (in seconds) of each particle, randomly set within the specified range (1~2)</td><td><strong>Left to right</strong><br>Figure 1: Lifetime = 1s<br>Figure 2: Lifetime = 2s<br>Figure 3: Lifetime 1~2s<br><img src="/files/OEcxuT5ZqCMU86h1Ryf6" alt=""></td></tr></tbody></table>


# Physics Parameters

\#Content editor

Physics parameters support adjusting the velocity in the X and Y directions.

<table><thead><tr><th width="175">Image</th><th width="111">Features</th><th width="310">Description</th><th>Preview</th></tr></thead><tbody><tr><td><img src="/files/47HW35jdI0tUfw1CpYZb" alt=""></td><td><strong>Gravity</strong></td><td><br>1. Suggested value range: -2000～-2000, it is better to adjust according to the multiple of 50<br>2. Adding gravitational acceleration to a particle adds a parabolic effect to the original trajectory of the particle, simulating the real world<br>3. The corresponding relationship between the gravity value and the XY axis direction is shown in the figure:<br><strong>- Take the center of the transmitter as the origin</strong><br><strong>- On the X-axis, the left side of the origin is negative, and the right side of the origin is positive</strong><br><strong>- On the Y-axis, positive values are below the origin, negative values are above the origin</strong><img src="/files/Qb9hC3BBfqxo4UwchSJZ" alt=""><br></td><td><img src="/files/XRRq6vN0rkqD1rebfwj0" alt=""></td></tr></tbody></table>


# Video parameters

\#Content editor

Other exterior parameters of the video layer include: Play video/Stop video/Replay/Replace/Clip/Reset size/Play settings/Sound settings

## Other exterior parameters description

<table><thead><tr><th width="155">Image</th><th width="123">Parameter types</th><th width="197">Description</th><th width="227">Steps</th><th>Reference</th></tr></thead><tbody><tr><td><img src="/files/Rm71ERn1KWwgStRwfFZa" alt=""></td><td><strong>Play video</strong></td><td>Start playing video</td><td>Click to play the current scene’s video</td><td>/</td></tr><tr><td><img src="/files/1VJYac13qngmjbHCG7Qk" alt=""></td><td><strong>Stop video</strong></td><td>Pause video</td><td>Click to pause the current scene’s video</td><td>/</td></tr><tr><td><img src="/files/dL1Cg3feoGtfnBhRcnKj" alt=""></td><td><strong>Replay</strong></td><td>Video replay</td><td>Click to replay the current scene’s video</td><td>/</td></tr><tr><td><img src="/files/eE3InPuRaazv0Vow4l5q" alt=""></td><td><strong>Replace</strong></td><td>Replace the current video asset</td><td>1. Press the button to open the video asset panel<br>2. Select/upload video for replacement<br>3. Click “Add” to complete the replacement</td><td><img src="/files/bd3XzmJVaOvMcOX1jiKG" alt=""></td></tr><tr><td><img src="/files/RmQ5ndgUOPFIybDXnAKN" alt=""></td><td><strong>Clip</strong></td><td>Video cropping</td><td>1. Press the “Clip” button<br>2. The video-cropping popup appears<br>3. Drag the video-cropping slider<br>4. Edit the interception time<br>5. Click "OK" to complete the cliping</td><td><img src="/files/lW9tj2HVGhf6BZ341tuN" alt=""></td></tr><tr><td><img src="/files/tdQAHbVHyhP3iV0iAElt" alt=""></td><td><strong>Reset size</strong></td><td>Reset video to original size</td><td>Press the “Reset size” button to restore<br>original video size</td><td>/</td></tr><tr><td><img src="/files/G6J24OwJSXlJJfaZoOsr" alt=""></td><td><strong>Play</strong></td><td><br>- Auto-play video by default<br>- Edit cycle times<br>- Set to play on loop<br>- Support to keep showing the last frame after the video is played<br></td><td>/</td><td>/</td></tr><tr><td><img src="/files/XCgNqHduEiiNLEh1BYC5" alt=""></td><td><strong>Sound</strong></td><td><br>- Video in mute mode by default<br>- Support to turn on video sound, or stay in mute mode<br></td><td>/</td><td>/</td></tr></tbody></table>


# Audio parameters

\#Content editor

Other exterior parameters of the audio layer include: Sound play/Replace/Clip/Volume settings/Play settings

## Other exterior parameters description

<table><thead><tr><th width="155"></th><th>Parameter types</th><th>Description</th><th>Steps</th><th>Reference</th></tr></thead><tbody><tr><td><img src="/files/mMn30c9DQOjK4QUOvl5l" alt=""></td><td><strong>Sound play</strong></td><td>Click to play audio; drag slider to locate audio node</td><td>【Play audio】<br>Press the play button to play the sound effect<br>【Locate audio node】<br>Drag the position dot of the slider to locate the audio node</td><td>/</td></tr><tr><td><img src="/files/ZSOqAgSZjg5RFqeeijPp" alt=""></td><td><strong>Replace</strong></td><td>Audio replacement</td><td>1. Press the button to open the audio asset panel<br>2. Select/upload replaced audio<br>3. Click “Add” to complete the replacement</td><td><img src="/files/uNEKFOnaJceyND6zaDMy" alt=""></td></tr><tr><td><img src="/files/32dERf4FR0okGYCXrxOv" alt=""></td><td><strong>Clip</strong></td><td>Audio cropping</td><td>1. Press the “Clip” button<br>2. The audio-cropping popup appears<br>3. Drag the audio-cropping slider<br>4. Edit the interception time<br>5. Click "Confirm" to complete the cliping</td><td><img src="/files/VGNscYNg2J5LgO2Z1JwB" alt=""></td></tr><tr><td><img src="/files/CJdtgeJVd5JQtD9oyfJp" alt=""></td><td><strong>Volume</strong></td><td>Support volume adjustment</td><td>Drag the volume slider to adjust the audio volume</td><td>/</td></tr><tr><td><img src="/files/auB7TTwwal2FOjVm5r5j" alt=""></td><td><strong>Play</strong></td><td><br>- Entry: automatically play the audio by default<br>- Edit loop times<br>- Set play on loop<br></td><td>/</td><td>/</td></tr></tbody></table>


# Animation - Layer Parameters

Animation parameters do not distinguish between asset types

**What is Animation? Why Add Animation?**

Animation refers to adding transitions or emphasis effects to static images, making them appear as if they are in motion.

When creating playable materials, we almost always use static images. By adding animations for these static images, the visuals can become more vivid and instructive, thereby enhancing the content's appeal and the user's trial experience. For example, animation can simulate dynamic effects such as the movement, scaling, and rotation of objects to achieve more expressive visual effects.

## 📒<mark style="color:blue;">Use of Animation</mark>

### 1. Adding Animation

1）Select the single layer or group layer where you want to add animation.

2）Click on "+Add Animation" and choose the appropriate animation from the four types available.

3）Further adjust the animation parameters to complete the animation settings.

<figure><img src="/files/0pgNXzamhRYU3fwIteu6" alt=""><figcaption></figcaption></figure>

### 2. Previewing Animation

1）Click the icon button or "Play" to preview the current single animation within the canvas.

2）If there are multiple animations on the same layer, click "Play all animation" to preview all animations on that layer within the canvas.

3）Click "Stop" or "Stop all animation" to pause the animation preview, and the animation will return to its initial state.

<div align="left"><figure><img src="/files/4P7WHp0ZszcHFIi4fgA4" alt=""><figcaption></figcaption></figure></div>

### 3.Replacing/Deleting Animation

Clicking the icon button allows you to replace the current animation type or delete the animation.

<div align="left"><figure><img src="/files/kXn2I8sdC00vZZu2ijHG" alt=""><figcaption></figcaption></figure></div>

### 4.Copying Animation

1-1) Copying a single animation: Click the icon button to copy the current individual animation.&#x20;

<div align="left"><figure><img src="/files/Pfbh7n55h8fC5UmziOer" alt=""><figcaption></figcaption></figure></div>

1-2) Copying multiple animations: Select the layers with animations and click the copy button.

<div align="left"><figure><img src="/files/F43dGRvBoZ6VNdaF4zM5" alt=""><figcaption></figcaption></figure></div>

2）Then, select the layer where you want to apply the animation >>> Paste >>> Paste the layer animation only.

<div align="left"><figure><img src="/files/QxDlJJ9phQGXMaqGMj1j" alt=""><figcaption></figcaption></figure></div>

### 5.Applying to All Layers within the Group

By clicking the icon button "Apply to all layers within the group," you can conveniently copy and paste all animations from the currently selected layer <mark style="color:red;">to all layers at the same hierarchical level.</mark>&#x20;

(When you need to create the same animation for multiple layers at the same hierarchical level, this feature allows for quick reuse.)

<figure><img src="/files/cJ0djfQrOX0cHEbUUz7Q" alt=""><figcaption></figcaption></figure>

## 📒<mark style="color:blue;">Categories and Parameters of Animation</mark>

The animation includes four types:  "**Approach animation", "Exit animation", "Emphasize animation", and "Universal animation"**. Different animations have different parameters.

<div align="left"><figure><img src="/files/PrrntCXdXQzsh1LoB5VN" alt=""><figcaption></figcaption></figure></div>

### 1. **LoopTimes/Delay/Duration/Autoplay/Name/Opacity/Scale/Displacement/Rotation/Color Change**

<table><thead><tr><th width="152">Image</th><th width="142">Parameter Type</th><th width="204">Parameter Description</th><th>Supplementary Explanation</th></tr></thead><tbody><tr><td><img src="/files/ND6GBXajI4eUA7XUGnaj" alt="" data-size="original"></td><td><strong>Loop Times</strong></td><td><p>Support 3 cycle modes: </p><p>Play 1 time</p><p>One-way cycle</p><p>Two-way loop</p></td><td><p><strong>①Play 1 time:</strong> The animation plays only once and stops when finished.</p><p><strong>②One-way cycle:</strong> Repeat the animation of K1~K3<br><img src="/files/9fQxVi1xnIGafa9PH99e" alt=""><br><strong>③Two-way loop:</strong> After K1 to K3, then from K3 to K1, and continue.<br><img src="/files/LMJfvAtNp4c3XNIyTt3A" alt=""></p></td></tr><tr><td><img src="/files/3Rzqp8d4LeU2vpXoTQBi" alt=""></td><td><strong>Delay</strong></td><td>The duration of delay before the animation appears/plays.</td><td>Once <mark style="color:red;">enter the scene</mark> where the animation is located, the timer will start automatically.</td></tr><tr><td><img src="/files/St3ZTKUwBdOQAc8sRYPi" alt=""></td><td><strong>Duration</strong></td><td>The total time required for a complete playthrough of the animation.</td><td>For the same animation, a longer duration results in slower playback speed, and vice versa.</td></tr><tr><td><p><img src="/files/0cJWcbsqFnGiK7tlheTV" alt=""></p><p></p><p><img src="/files/nkM87xEudLZ6E4L4DwHq" alt=""></p></td><td><strong>Autoplay</strong></td><td><p>Default: Autoplay enabled.</p><p>Supports disabling autoplay.</p></td><td><p><strong>①Autoplay:</strong> The animation starts playing automatically <mark style="color:red;">upon entering the scene</mark> where it is located.</p><p><mark style="color:orange;">(please note: If the initial state of the layer where the animation is located is set to "hidden," the animation will automatically play when the layer is <strong>first displayed</strong>.)</mark></p><p><strong>②Disable Autoplay:</strong> After disabling autoplay, the animation won't play by default and needs to be controlled through event settings.</p></td></tr><tr><td><img src="/files/fVCXANcNAtKTRiWYmzcs" alt="" data-size="original"></td><td><strong>Name</strong></td><td>Supports customizing the animation name.</td><td>Tip: When there are multiple animations in a project, renaming them can help with easy reference when setting up events.</td></tr><tr><td><img src="/files/eteTCSivNiMjKvMGLzzq" alt="" data-size="original"></td><td><strong>Opacity</strong></td><td>Requires setting "Start" and "End" values.</td><td><p>Value range: 0% to 100%.</p><p>0%: Fully transparent.</p><p>100%: Fully visible.</p></td></tr><tr><td><img src="/files/XqpVpYI3wXecAykdtq7z" alt="" data-size="original"></td><td><strong>Scale</strong></td><td><p>Requires setting "Start Scale" and "End Scale" values.</p><p>Supports setting start/end scale to current value.</p></td><td><p>Scale X: Horizontal scale of the layer.</p><p>Scale Y: Vertical scale of the layer.</p></td></tr><tr><td><p><img src="/files/pOH7GFetZJp5PM0at0Vr" alt="" data-size="original"></p><p></p><p><img src="/files/28RAo8frcoynMCDFRmxe" alt=""></p><p></p><p><img src="/files/3fQc5j64Tsu7EcBpEwwB" alt=""></p></td><td><strong>Displacement</strong></td><td><p><strong>①Requires setting the</strong> </p><p><strong>displacement offset on the X and Y axes:</strong> Positive values represent downward/rightward displacements, while negative values represent upward/leftward displacements. </p><p>Use the red arrow icon to fine-tune the </p><p>displacement offset.</p><p></p><p><strong>②Supports quick setting of the end position:</strong> Click "Show End Position" and drag the semi-transparent layer in the canvas to the target position, then click "Hide End Position."</p></td><td><p><mark style="color:red;"><strong>③Displacement offset supports separate settings for portrait and landscape orientations:</strong></mark> By default, it is selected. When selected, the displacement offset need to be adjusted separately for portrait and landscape orientations (displacement offset set in portrait mode will not be applied in landscape mode). </p><p></p><p>Deselecting it means that the same displacement offset is used for both portrait and landscape orientations without the need for switching adjustments.</p><p><img src="/files/QSENk6tPRm6jzX3yhMDz" alt="" data-size="original"></p><p><img src="/files/yXzhTVGgIGoKInOAQRDj" alt=""></p></td></tr><tr><td><img src="/files/s8az5EkRNmIrbLJYRaga" alt="" data-size="original"></td><td><strong>Rotation</strong></td><td>Requires setting "Start" and "End" values.</td><td>No specific requirements for values; any angle can be set.</td></tr><tr><td><img src="/files/hMnOf52jhYyd5lkkvJOW" alt="" data-size="original"></td><td><strong>Color Change</strong></td><td>Requires setting "Start Color" and "End Color".</td><td><p>Select colors from the color palette or use the color picker for quick selection.</p><p><img src="/files/21c58jC6fsoOc8O85d0x" alt=""></p></td></tr></tbody></table>

### <mark style="color:red;">2. Special Parameter: Curve</mark>

"Universal" category animations additionally support editing the animation's curve.&#x20;

<div align="left"><figure><img src="/files/NBfCbxUtHIb7KZtSqG46" alt="" width="563"><figcaption></figcaption></figure></div>

#### 2.1 What is Curve?

"Curve" allows for custom and fine-tuned editing of animations. If the preset animations cannot meet your production needs, you can create more advanced and complex animations by customizing the curve.&#x20;

#### 2.2 Editing the Curve

**1）Click on the curve thumbnail to open the Curve editor:**&#x20;

* The horizontal axis represents time, and the vertical axis represents various variables corresponding to animation (displacement, alpha, spin, scale, color, etc.);
* The starting point (0, 0) is the default initial state of the animation movement, and the end point (1, 1) is the default end state of the animation movement;
* Moving the anchor point laterally will directly change the movement time of the object, and adjusting the slope of the curve will directly change the distribution of the movement speed of the object (the steeper the curve, the faster the speed, the smoother the curve, the slower the speed);

<figure><img src="/files/kX5jQTznTWrM8qqOaZzy" alt=""><figcaption></figcaption></figure>

**2）Edit curve style:**&#x20;

* **Choose curve templates:** The Curve editor provides six preset curve styles that you can select and use.&#x20;
* **Customize curve style:**
  * <mark style="color:red;">**Double-click**</mark> <mark style="color:red;"></mark><mark style="color:red;">anywhere on the curve to add keyframes.</mark>
  * Select a keyframe and drag the handle or use the options on the right to adjust the curve's curvature.
  * Adjust the position by selecting and dragging the keyframe.
  * Delete the current keyframe by selecting it.&#x20;
  * For customized curve styles, you can click "Save current curve," edit the name, and save it as a template for future use.&#x20;
* After setting up the curve, click "Save" for the changes to take effect.

<div align="left"><figure><img src="/files/ntOGX0J8qGWgs895Usqt" alt="" width="563"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/fvGW5yqdKfkwQRPFPfch" alt="" width="563"><figcaption></figcaption></figure></div>

#### 2.3 Example

Take *Displacement Easing* as an example, the horizontal axis represents time, and the vertical axis represents displacement distance.Below are two common adjustment methods for animations:

| **a. After the object stays at the starting point for a period of time, it starts to move**                                                                     | **b. The object stays at the beginning and end for a period of time and moves back and forth**                                                                                                                                                                                         |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Move the starting point of the curve to the right (delay the animation start time), and the object will complete the movement within the red frame time period; | <p>① \[cycles] select: two-way loop;</p><p>② Move the start point of the curve to the right, and move the end point of the curve to the left (delay the animation start time and end the animation early), the object will complete the movement within the red frame time period;</p> |
| ![](/files/gXAQWGhOzSEafnDEx9ti)                                                                                                                                | ![](/files/t2wxcJn1ek18EgFim3gg)                                                                                                                                                                                                                                                       |
| ![](/files/M17DcRdCM9xd04jziahS)                                                                                                                                | ![](/files/lXDI4gNb26w9xeT2O0il)                                                                                                                                                                                                                                                       |

For more commonly used animation setup methods, please refer to  [Creation Tips - Animation Setting](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-animation-setting)

## 📒<mark style="color:blue;">Supported Asset Types for Adding Animation</mark>&#x20;

The asset type determines whether it supports adding and using animations. Here are the details:

<table><thead><tr><th width="235">Asset Type</th><th>Support applying animation or not</th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><strong>Image</strong></td><td>✅</td><td></td><td></td></tr><tr><td><strong>Text</strong></td><td>✅</td><td></td><td></td></tr><tr><td><strong>Sequence</strong></td><td>✅</td><td></td><td></td></tr><tr><td><strong>Particle</strong></td><td>✅</td><td></td><td></td></tr><tr><td><strong>DragonBone</strong></td><td>✅</td><td></td><td></td></tr><tr><td><strong>Group layer</strong></td><td>✅</td><td></td><td></td></tr><tr><td><strong>Interactive area</strong></td><td>×</td><td></td><td></td></tr><tr><td><strong>Video</strong></td><td>×</td><td></td><td></td></tr><tr><td><strong>Sound effects</strong></td><td>×</td><td></td><td></td></tr><tr><td><strong>Background music</strong></td><td>×</td><td></td><td></td></tr><tr><td><strong>Scene</strong></td><td>×</td><td></td><td></td></tr></tbody></table>

👉Recommended Reading： [Animation Issues](/playable-tools-content-editor/content-editor-faq/animation-issues)  [Creation Tips - Animation Setting](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-animation-setting)


# Event - Common Parameters

Event parameters will vary depending on the scene/layer

A complete event consists of a [Trigger Event](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters/trigger-event)  and a [Response Event](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters/response-event). By correctly linking the trigger event and the response event, you can achieve interaction and logic functionality.

* The trigger event is the condition or action that causes the event to execute (e.g., "click").  These events vary depending on the selected area, so trigger events can be divided into "**scene events**" and "**layer events**".
* The response event is the operation or feedback that occurs when the trigger event happens (e.g., "redirect to app store").  These events are displayed after adding the trigger event and do not differentiate between scenes and layers.

For creating playable projects with simple logic, regular events are usually sufficient.&#x20;

However, when dealing with more complex logic and higher difficulty in project creation, you may need to utilize [Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables), which are an advanced version of events. Global variables may have a certain level of complexity in understanding, so we recommend understanding and mastering regular events before diving into global variables.

<figure><img src="/files/xE5cERJJRPRb2zQCiezw" alt=""><figcaption></figcaption></figure>

👉Recommended Reading： [Event Issues](/playable-tools-content-editor/content-editor-faq/event-issues)  [Creation Tips - Event Setting](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-event-setting)


# Trigger Event

\#Content Editor

## 📒<mark style="color:blue;">Use of Trigger Events</mark>

### 1.Adding Trigger Event

1）Select a single layer or a single scene.

2）Click the "Add Event" button on the right side to open the trigger event type options tab.

3）Based on the product gameplay and asset requirements, select the appropriate trigger event.

4）After adding the trigger event, you can add the desired response events below it.

<mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">Typically, the object for adding a trigger event depends on where we want players to interact.</mark>&#x20;

For example, if we want a specific effect to occur when players click on an item, we can **select the layer** of that item and add the "click" trigger event with the corresponding response event.  If we want players to be able to click anywhere on the screen, we can directly **select the scene** and add the "click" trigger event with the corresponding response event.

<div align="left"><figure><img src="/files/n7TevD6HtJsVdiRAryks" alt=""><figcaption></figcaption></figure></div>

### 2.Replacing Trigger Event&#x20;

Clicking the icon button allows you to replace an already added trigger event (without changing the response events).

<div align="left"><figure><img src="/files/18LujLmqwKsnB2ly4ALg" alt=""><figcaption></figcaption></figure></div>

### 3.Copying Event

1）Clicking the icon button enables you to copy the corresponding trigger event along with its response events.

<div align="left"><figure><img src="/files/1HpCGComor44zEZ3svDi" alt=""><figcaption></figcaption></figure></div>

2）After copying the event, you can select the layer or scene where you want to paste the event and quickly implement the same event.

<div align="left"><figure><img src="/files/Hkxn1SXJIHUvif0WAIvL" alt=""><figcaption></figcaption></figure></div>

### 4.Deleting Trigger Event&#x20;

Clicking the icon button allows you to delete the corresponding trigger event along with its response events.

<div align="left"><figure><img src="/files/92xWyuUTQkiT3dnPYYyj" alt=""><figcaption></figcaption></figure></div>

### <mark style="color:red;">5.Valid only once</mark>

Under each trigger event, there is an option for **"**&#x56;alid only onc&#x65;**."** By default, this option is unchecked, meaning the event can be triggered multiple times. If checked, the event will only be effective once and cannot be triggered again afterward!\
Please set this according to your creative needs.

**⚠️Note: "Valid only once" and redirect to store events**

* In most cases, <mark style="color:orange;">it's</mark> <mark style="color:orange;"></mark><mark style="color:orange;">**not**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">recommended to select "Valid only once" for any events that trigger a redirect to app store (e.g., persistent download button, end scene redirect events, etc.).</mark> >>> If selected, the player will not be able to redirect to app store again after returning from the store to the playable ad.
* <mark style="color:orange;">The exception is the "Condition" trigger event on the scene.</mark> >>> When "Condition" is used as the trigger event and has a redirect to app store as the response event, the event might be repeatedly triggered, causing multiple redirects to the store. In this case, "Valid only once" should be selected. >>> Additionally, to ensure that players can redirect to the store again after returning from the store to the playable ad, it's recommended to set an extra download button or other form of redirect on the end scene.

<div align="left"><figure><img src="/files/3LHosObeMliLfA3HqvZv" alt=""><figcaption></figcaption></figure></div>

## 📒<mark style="color:blue;">Classification of Trigger Events</mark>

Trigger events include six types: \[Click], \[Swipe], \[Drag], \[Delay], \[Logic], and \[Media playback].

<table data-full-width="false"><thead><tr><th width="213">Image</th><th width="183">Event Properties</th><th width="118">Trigger Event</th><th>Triggering Methods Included</th></tr></thead><tbody><tr><td><img src="/files/xn8SDoeXT1YIPok6MjZN" alt=""></td><td>General events</td><td><strong>Click</strong></td><td><p>Click</p><p>Long press 3s</p><p>Press</p><p>Lift up</p><p>Double click</p></td></tr><tr><td><img src="/files/TtHdG6nOHd8tvP24GJ31" alt=""></td><td>General events</td><td><strong>Swipe</strong></td><td><p>Swipe up</p><p>Swipe down</p><p>Swipe left</p><p>Sipe right</p><p>Swipe arbitrarily</p></td></tr><tr><td><img src="/files/VDJ5L8tnIolJdpXo1Vz8" alt="" data-size="original"></td><td><p>Layer events</p><p>(General layers)</p></td><td><strong>Drag</strong></td><td><p>Drag</p><p>Drag to target position</p><p>Not dragged to target position</p></td></tr><tr><td><img src="/files/QuCtvEcEDXfLOzxHIGEQ" alt=""></td><td><p>Layer events</p><p>(Video/Audio layers)</p></td><td><strong>Media playback</strong></td><td><p>Starting time</p><p>Ending time</p></td></tr><tr><td><img src="/files/zp23USTsrvF6UCDSl0nR" alt=""></td><td>Scene events</td><td><strong>Delay</strong></td><td>Timing trigger</td></tr><tr><td><img src="/files/UNO0mkW8p7LoBhqnXx0N" alt=""></td><td>Scene events(Global Variables)</td><td><strong>Logic</strong></td><td>Condition</td></tr></tbody></table>

### 1.General Event: **Click**

1）"Click" includes: Click, Long press 3s, Press, Lift up, Double click.&#x20;

2）Corresponding triggering moments are:

* **Click:** Triggered when the user presses and then releases the screen.
* **Press:** Triggered as soon as the user presses down on the screen, regardless of whether they lift their finger. <mark style="color:orange;">(It is recommended to use "Press" instead of "Click," as it makes interactions easier to trigger!)</mark>
* **Long press 3s:** Triggered when the user holds down the screen for 3 seconds and then releases.
* **Lift up:** Triggered when the user lifts their finger from the screen, regardless of how long it was pressed.
* **Double click:** Triggered when the user quickly taps the screen twice.

<div align="left"><figure><img src="/files/tSUN9QHLOOg5GRQtH3D7" alt=""><figcaption></figcaption></figure></div>

### 2.General Event: Swipe

1）"Swipe" includes: Swipe up, Swipe down, Swipe left, Sipe right, Swipe arbitrarily.

2）Corresponding triggering moments are:

* **Swipe up:** Triggered when the user swipes upwards on the screen and then releases.
* **Swipe down:** Triggered when the user swipes downwards on the screen and then releases.
* **Swipe left:** Triggered when the user swipes leftwards on the screen and then releases.
* **Swipe right:** Triggered when the user swipes rightwards on the screen and then releases.
* **Swipe arbitrarily:** Triggered when the user swipes in any direction on the screen and then releases.&#x20;

<mark style="color:red;">Note: With the "Swipe" event category, the layers do not follow the movement of the player's finger.</mark>

<div align="left"><figure><img src="/files/BpxkFW8uBYhVCzQ5oFsI" alt=""><figcaption></figcaption></figure></div>

### 3.Layer Event: Drag

1）"Drag" includes: Drag, Drag to target position, Not dragged to target position.

2）Corresponding triggering moments are:

* **Drag:** Triggered when dragging a layer without releasing the touch.
* **Drag to target position:** Drag a layer, and <mark style="color:red;">if you</mark> <mark style="color:red;"></mark><mark style="color:red;">**release it in the target area**</mark><mark style="color:red;">, the event will be triggered</mark>; if you release it outside the target area, the layer will default to return to its original position without triggering the event.
* **Not dragged to target position:** Drag a layer, and <mark style="color:red;">if you</mark> <mark style="color:red;"></mark><mark style="color:red;">**release it outside the target area**</mark><mark style="color:red;">, the event will be triggered</mark>; if you release it in the target area, the layer will default to return to its original position without triggering the event.

3）After using Drag-type events:

* You need to "edit the drag area"**:**  Add designated area - adjust the position and size of the area - select the draggable range (Full Screen/Custom).
* You need to select the "Drag Direction"**:** Options include Any Direction, Horizontal Direction, and Vertical Direction. <mark style="color:red;">(Please Note: Only one drag direction can be set per layer.)</mark>
* You need to select **"Release Reset":**  By default, this is set to "reset," meaning the layer goes back to its original position when released. If you choose "No," the layer will stay in the position where it was released.

Note: The drag-type events is only applicable to regular layers, excluding video and audio layers.

&#x20;👉Related content:   [/pages/9WLWf87yQemaLEMZgGwb#id-3.issues-related-to-drag-type-events](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters/pages/9WLWf87yQemaLEMZgGwb#id-3.issues-related-to-drag-type-events "mention")  [Creation Tips - Event Setting](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-event-setting#real-time-error-feedback-following-dragged-position)

<div align="left"><figure><img src="/files/hzKJfMrjGT6mhwqsTw0e" alt=""><figcaption></figcaption></figure></div>

### 4.Layer Event: Media Playback

1）"Media Playback" includes: Starting time, Ending time.

2）Corresponding triggering moments are:

* **Starting time:** Triggered when the selected video/audio starts playing.
* **Ending time:** Triggered when the selected video/audio finishes playing.&#x20;

Note: The "Media Playback" event is only applicable to video and audio layers.

<div align="left"><figure><img src="/files/Sxvsrk8zQS4Eck1d7tqG" alt=""><figcaption></figcaption></figure></div>

### 5.Scene Event: Timing trigger

1）"Delay"  includes: **Timing trigger**. <mark style="color:orange;">("Timing trigger" can only be added to scenes.)</mark>

2）The corresponding triggering moment is based on the set "Delay time" for timer-triggered events (if the delay time is set to 0s, it means the event will be triggered automatically when entering the scene).&#x20;

<div align="left"><figure><img src="/files/lYCRpVPSYTUf40MKWn7o" alt=""><figcaption></figcaption></figure></div>

<mark style="color:red;">**NOTE：**</mark>

* <mark style="color:red;">**To add multiple timers to a scene:**</mark>**&#x20;Simply add a "Execution Delay" response event** under an existing Timing trigger event. Note that **the execution delay duration is cumulative**; the delay duration of subsequent events will inherit the total duration of the preceding delays (e.g., if a special effect plays 0.5s after entering, and then it waits 1s to redirect to app store, it means the app store will be redirected 1.5s after entering).
* **To add a timer to a layer:** Add the "Execute Delay" response event under the layer event (the logic for adding multiple timers is the same as above).

<div align="left"><figure><img src="/files/HMUHDzsVrK9Hqeq1gQnL" alt=""><figcaption></figcaption></figure></div>

### 6.Scene Event: Condition

1）"Logic" includes: **Condition**.

2）The corresponding triggering moment is when a variable satisfies the specified condition.

3）After adding "Condition," click "Add conditions" in the popup window, then select global variables, mathematical operations, and values in order.

4）It supports checking the option "Valid only once."&#x20;

<mark style="color:red;">Note: You can use this trigger event only if</mark> [Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables) <mark style="color:red;">have been added to the current project</mark> (refer to the feature introduction document for quicker understanding of this trigger event).

<div align="left"><figure><img src="/files/xMqtBDFR5refnBgvDu4j" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">📒Additional Explanation</mark>

### 1.Layer Event Highlighting

Layers with events will be highlighted. Clicking on the highlighted icon allows you to quickly switch to the event parameter area for that layer.

<div align="left"><figure><img src="/files/qpDHl6bb9NZr1f5fqQ91" alt=""><figcaption></figcaption></figure></div>

### 2.Event Logic with Layer Hierarchy & Size

🌟 **Layer Events > Scene Events**

* If both layer and scene events are present, the area covered by the layer will trigger the layer's event, while areas not covered by the layer will trigger the scene's event.

🌟 **Higher Layer Hierarchy Events > Lower Layer Hierarchy Events**

* For layers with the same size and position: The event of the higher layer will take effect, while the event of the lower layer will not because it's covered by the higher layer.
* For layers with different sizes/positions: Based on the hierarchy logic, the event of the lower layer can still take effect if it’s not covered by the higher layer.


# Response Event

\#Content Editor

## 📒<mark style="color:blue;">Use of Response Events</mark>

### 1.Adding Response Event

1）After adding a trigger event, click the "Add response event" button.

2）Click "Select response event" to open the response event type options.

3）Based on the gameplay and asset requirements, select the appropriate response event for configuration.&#x20;

<mark style="color:red;">Note: The response event type options only display assets/animations added in the current scene.</mark>For example, if no animations are set in Scene 1, the response events related to animations will not be displayed when selecting response event types.

<div align="left"><figure><img src="/files/PKAhIM1RABZ10wQJZZqT" alt=""><figcaption></figcaption></figure></div>

### 2.Editing/Replacing Response Event

Clicking the icon button allows you to edit or replace the already added response events.

<div align="left"><figure><img src="/files/a4noDKnKWpNZpg7i6YVV" alt=""><figcaption></figcaption></figure></div>

### 3.Deleting Response Event

Clicking the icon button allows you to delete the current response event.

<div align="left"><figure><img src="/files/QkMExVtfRYq1Dzziw5pF" alt=""><figcaption></figcaption></figure></div>

### 4.Filtering Response Event

When you have a large number of response events in your project, you can use the filtering function to quickly find and modify the target response events.

1）Click the icon button to open the response event filtering window.

2）Check the desired response event categories and click "Apply."

3）To revert back to displaying all response events, click "Clear all."

<div align="left"><figure><img src="/files/e85Xe64pWA9ghE7tWNEp" alt=""><figcaption></figcaption></figure></div>

## 📒<mark style="color:blue;">Classification of Response Events</mark> <a href="#classification-of-trigger-events" id="classification-of-trigger-events"></a>

Response events include 13 types:\[Redirection and postback], \[Layer], \[Timer], \[Event], \[Others], \[Sound Effects], \[Video], \[BGM],\[Single Animation], \[All Animations], \[Sequence], \[DragonBone]and \[Particles].

<table data-full-width="false"><thead><tr><th width="240">Image</th><th width="159">Response Event</th><th>Response Events Included</th></tr></thead><tbody><tr><td><img src="/files/X17CnmuNVcVASBZMmr2x" alt=""></td><td><strong>Redirection and postback</strong></td><td><p>Redirect to the specified scene</p><p>Redirect to the next scene</p><p>Redirect to app store</p><p>Report the end of the playable ads</p><p>Set Tracking Event</p></td></tr><tr><td><img src="/files/PQfBR0Qs5e6hi9ixqRg9" alt=""></td><td><strong>Layer</strong></td><td><p>Set location</p><p>Set scale</p><p>Set rotation</p><p>Set width</p><p>Set height</p><p>Show/hide layer</p><p>Set transparency</p><p>Set color</p></td></tr><tr><td><img src="/files/oTQEzE70rjCxegyLyaXT" alt=""></td><td><strong>Timer</strong></td><td><p>Execution delay</p><p>Cancel execution delay</p></td></tr><tr><td><img src="/files/2P1hG8BrRsfC8HX4GJR1" alt=""></td><td><strong>Event</strong></td><td><p>Enable events</p><p>Disable events</p></td></tr><tr><td><img src="/files/OFiV8HVncIR5fbXDtCRp" alt=""></td><td><strong>Others</strong></td><td><p>Screen jitter</p><p>Assign the value</p><p>Retry Playable</p></td></tr><tr><td><img src="/files/JHL05vSxtkpnUeQZWUnR" alt="" data-size="original"></td><td><strong>Single Animation</strong></td><td><p>Play a single animation</p><p>Pause a single animation</p><p>Continue playing a single animation</p><p>Reset single animation</p></td></tr><tr><td><img src="/files/ix6USvwZCfVPdtp5zA1F" alt="" data-size="original"></td><td><strong>All Animations</strong></td><td><p>Play all group animations</p><p>Pause all group animations</p><p>Resume group animations</p><p>Play all animations from the beginning</p><p>Resume all animations </p><p>Pause all animations</p><p>Reset all animations</p></td></tr><tr><td><img src="/files/sLQRb5JjRWkrH5NnMboU" alt=""></td><td><strong>Particles</strong></td><td><p>Display particle effect</p><p>Pause particle effect</p><p>Turn off particle effect</p><p>Particle color</p></td></tr><tr><td><img src="/files/glf9Dh2xNwF8f5V5RfYe" alt="" data-size="original"></td><td><strong>Sequence</strong></td><td><p>Play sequence frame</p><p>Pause Sequenc</p></td></tr><tr><td><img src="/files/yYbmzclIIxsEj1AZGDB6" alt="" data-size="original"></td><td><strong>DragonBone</strong></td><td><p>Play DragonBone</p><p>Pause DragonBone</p></td></tr><tr><td><img src="/files/yppRi1bzi02PsLz8tmVi" alt=""></td><td><strong>Video</strong></td><td><p>Play video from the beginning</p><p>Continue playing video</p><p>Pause the video</p></td></tr><tr><td><img src="/files/TT299mESlybeDbDtIXb8" alt="" data-size="original"></td><td><strong>Sound Effects</strong></td><td><p>Play sound</p><p>Continue playing sound</p><p>Pause sound</p></td></tr><tr><td><img src="/files/Oy0ywkLUlc5YgIxuyO1a" alt="" data-size="original"></td><td><strong>BGM</strong></td><td><p>Play background music from the beginning</p><p>Continue playing background music</p><p>Pause the background music</p></td></tr></tbody></table>

### 1.**Redirection and postback**

1）**Redirect to the specified scene：**&#x53;elect the target scene for redirection.

2）**Redirect to the next scene：**&#x52;edirect to the scene based on the order in the left scene area.

3）<mark style="color:red;">**Redirect to app store**</mark>**：**&#x54;his is a necessary event that must be set for each project.  Depending on the creative needs, this response event should be added at the appropriate moment to ensure that the playable material can successfully redirect to the product store page after being deployed.

4）<mark style="color:red;">**Report the end of the playable ads**</mark>**：**&#x4F;nce set, this event will report playable ads completion when the trigger event it is associated with occurs. It is typically set on the last interaction step (this setting is mandatory for Mintegral and Vungle channels).

👉Related content:  [WORK CREATION-IMPORTANT NOTICE⚠️](/playable-tools-content-editor/work-creation-important-notice)

<div align="left"><figure><img src="/files/J0U9kghvtHnG5iBPkVbE" alt=""><figcaption></figcaption></figure></div>

5）**Set Tracking Event：**&#x53;elect a Tracking ID and edit the tracking name.&#x20;

<mark style="color:red;">Note: The maximum limit for tracking IDs is 15, but multiple tracking events can be set under the same ID with the same tracking name. Modifying one will automatically modify others with the same ID.</mark>

#### <mark style="background-color:red;">**\*How to add custom tracking?**</mark>&#x20;

<mark style="background-color:red;">When adding a response event "Set Tracking Event" for a trigger event, this response event serves as a "custom tracking." Users can add multiple "custom trackings" based on their creative needs and materials.</mark>

*For example, to add an event "Press" on the download button group - add response event "Set Tracking Event" - select the tracking ID as 1 - edit the tracking name as "Player Pressed Download Button." This way, a custom tracking is successfully added.*

👉Related content:    [Tracking Explanation](/creative-insights/creative-insights-essential-knowledge/tracking-explanation)  [Quick Positioning](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area/quick-positioning)

<div align="left"><figure><img src="/files/E7kuMc0YhH0aZNY1ZKE8" alt=""><figcaption></figcaption></figure></div>

### 2.Layer

1）**Set location/Set scale/Set rotation/Set width/Set height/Set transparency/Set color:**  After selecting the corresponding event, continue by selecting the response object and adjusting the corresponding parameters.&#x20;

Note: We generally recommend not using the "Set location" response event because it represents the layer's "absolute position," which is a fixed value and does not automatically adapt to changes in screen orientation or different device models. This may lead to misalignment of layers on some devices. We suggest using "Show/hide layer" to achieve similar effects.

👉Related content:   [/pages/9WLWf87yQemaLEMZgGwb#id-3.issues-related-to-drag-type-events](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters/pages/9WLWf87yQemaLEMZgGwb#id-3.issues-related-to-drag-type-events "mention")

<div align="left"><figure><img src="/files/LsxUwTjnRAWgSGgRgDLO" alt=""><figcaption></figcaption></figure></div>

2）**Show/hide layer:** After selecting the event, continue by selecting the response object and its "show/hide" status.&#x20;

For example, if you want to hide the guide finger when the player presses the screen, you can use this response event to hide the guide.

<div align="left"><figure><img src="/files/ct6mBhkJrpW4GIQNyXEx" alt=""><figcaption></figcaption></figure></div>

### 3.Timer

1）**Execution delay:** Set the "delay time," which defaults to 0s.

2）**Cancel execution delay:** Select the timer ID to cancel, which corresponds to the timer name edited when setting the "execution delay."

<div align="left"><figure><img src="/files/eNtqSZKLI7m1bVi8KsVf" alt=""><figcaption></figcaption></figure></div>

### 4.Event

After setting an event, it is enabled by default.

1）**Disable events:** Select the event from the added events, and the selected event will be disabled and no longer take effect.

2）**Enable events:** Re-enable a previously disabled event.

<div align="left"><figure><img src="/files/dfA28h8J6BL1laUbv4uJ" alt=""><figcaption></figcaption></figure></div>

### 5.Others

1）**Screen jitter:** It creates a screen vibration effect, typically used as feedback for player errors or game failures.&#x20;

After selecting this option, edit the duration of the screen shake,  jitter frequency, and maximum jitter distance.

<div align="left"><figure><img src="/files/HYFfMPWR9TVeUYRvdrok" alt=""><figcaption></figcaption></figure></div>

2）**Assign the value:**  Select the corresponding global variable, mathematical operation, or operand.

<mark style="color:red;">Note: This response event needs to be based on already added Global Variables and used in conjunction with "Condition"</mark> (refer to the specific usage in the [Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables) feature introduction document).

<div align="left"><figure><img src="/files/ovYVzmT24ZrQegeyhA11" alt=""><figcaption></figcaption></figure></div>

3）**Retry Playable:** When triggered, it restarts the trial playthrough from the beginning.

<div align="left"><figure><img src="/files/PDIemHsM5gDGMdfdu6S4" alt=""><figcaption></figcaption></figure></div>

### 6.**Single Animation**

When a layer has multiple animations added, this response event can be used to control the playback of individual animations.

1）**Play a single animation:** Select the response object and the specific animation to play.

2）**Pause a single animation:** Select the response object and the specific animation to pause.

3）**Continue playing a single animation:** Select the response object and the specific animation to resume.

4）**Reset single animation:** Select the response object and the specific animation to resume.

<div align="left"><figure><img src="/files/tJKESaQa077cSKH0Zjr2" alt=""><figcaption></figcaption></figure></div>

### 7.All Animations

When a layer has one or more animations added, and these animations are intended to achieve the same effect that can be controlled collectively, this response event can be used to control the playback of all animations on that layer.

1）**Play all group animations:** Select the response object (layer) to play all animations of <mark style="color:orange;">that layer</mark> and <mark style="color:orange;">all layers within its group</mark>.

2）**Pause all group animations:** Select the response object (layer) to pause all animations of that layer and all layers within its group.

3）**Resume group animations:** Select the response object (layer) to continue playing all animations of that layer and all layers within its group.

4）**Play all animations from the beginning:** Select the response object (layer) to play all animations of <mark style="color:orange;">that layer</mark>.

5）**Resume all animations :** Select the response object (layer) to continue playing all animations of that layer.

6）**Pause all animations:** Select the response object (layer) to pause all animations of that layer.

7）**Reset all animations:** Select the response object (layer) to return all animations of <mark style="color:orange;">that layer</mark> to their initial state.

<div align="left"><figure><img src="/files/kBBriUYVgwe8W5pJ3pvn" alt=""><figcaption></figcaption></figure></div>

### 8.Particles

1）**Display particle effect:** Simply select the response object.

2）**Pause particle effect:** Simply select the response object.

3）**Turn off particle effect:** Simply select the response object.

4）**Particle color:** After selecting the response object, click on the color block icon to choose the particle birth color.&#x20;

<div align="left"><figure><img src="/files/abtdnBK49nv67LUOLp3y" alt=""><figcaption></figcaption></figure></div>

**Note:** After adding a particle effect, the default parameter is set to "Auto Play Once." To modify it, select the particle effect layer and adjust the parameters in the right-side parameter area.

<div align="left"><figure><img src="/files/NnZMkhStyxUcfXzRiOFq" alt=""><figcaption></figcaption></figure></div>

### 9.**Sequence**

1）**Play sequence frame:** Select the response object, choose whether to loop the sequence, set the number of times to play, enable play back and forth, and decide whether to hide the sequence after it finishes playing.&#x20;

<mark style="color:red;">Note: " Play back and forth" means playing the sequence forward once and then playing it in reverse once, which counts as one cycle. Play back and forth is only available when the "Cycles" is greater than 1.</mark>

<div align="left"><figure><img src="/files/Yqe2mTQKZNCAdNCiKt8a" alt=""><figcaption></figcaption></figure></div>

2）**Pause Sequenc:** Simply select the response object to pause.

<div align="left"><figure><img src="/files/VZThTsstDa8LmGAcS9rF" alt=""><figcaption></figcaption></figure></div>

Note: After adding a sequence, the default parameter is set to "Auto and Loop Play." To modify it, select the sequence layer and adjust the parameters in the right-side parameter area.

<div align="left"><figure><img src="/files/SzHrbaRbm3fgGjbFl1AK" alt=""><figcaption></figcaption></figure></div>

### 10.DragonBone

1）**Play DragonBone:** Select the response object, specify the animation name, choose whether to loop the animation, and set the playback speed.

<div align="left"><figure><img src="/files/tWN2L37GSeJKKmWX6Lx2" alt=""><figcaption></figcaption></figure></div>

2）**Pause DragonBone:** Simply select the response object to pause.

<div align="left"><figure><img src="/files/blToUm8HinhyE8DQJcdy" alt=""><figcaption></figcaption></figure></div>

Note: After adding a DragonBone asset, the default parameters are "Auto Play" and "Playback Speed: 1s." To modify them, select the DragonBone layer and adjust the parameters in the right-side parameter area.

<div align="left"><figure><img src="/files/rZvpSBmV3EzHuZyD9UYV" alt=""><figcaption></figcaption></figure></div>

### 11.Video

1）**Play video from the beginning:** Select the response object, set the number of times to play, choose whether to loop the video, and decide whether to keep the last frame of the video after it finishes playing.

<div align="left"><figure><img src="/files/g567VGWNwrniYQaJDte0" alt=""><figcaption></figcaption></figure></div>

2）**Continue playing video:** Simply select the response object.

3）**Pause the video:** Simply select the response object.

<div align="left"><figure><img src="/files/3K8JXMXq20Fw5wl3Iir6" alt=""><figcaption></figcaption></figure></div>

Note: After adding a video asset, the default parameters are "Auto Play 1 Time" and "Keep Last Frame." To modify them, select the video layer and adjust the parameters in the right-side parameter area.

<div align="left"><figure><img src="/files/sMvXU46NrZupw7dbTwmw" alt=""><figcaption></figcaption></figure></div>

### 12.Audio

1）**Play sound:** Select the response object, choose whether to loop the audio, and set the number of times to play.

<div align="left"><figure><img src="/files/PrK43NwodaNDKdO16AbS" alt=""><figcaption></figcaption></figure></div>

2）**Continue playing sound:** Simply select the response object.

3）**Pause sound:** Select the response object and decide whether to pause all sound effects in the current scene after pausing the audio.

<div align="left"><figure><img src="/files/fgRwxVvNCpR14P4OLqZ9" alt=""><figcaption></figcaption></figure></div>

Note: After adding an audio asset, the default parameter is "Do Not Auto Play." To modify it, select the audio layer and adjust the parameters in the right-side parameter area.

<div align="left"><figure><img src="/files/ax4Fybz7kmRbtI7sL9AT" alt=""><figcaption></figcaption></figure></div>

### 13.BGM

1）**Play background music from the beginning**

2）**Continue playing background music**

3）**Pause the background music**

<div align="left"><figure><img src="/files/0fuzTkCiPj4CoDzmB76Q" alt=""><figcaption></figcaption></figure></div>


# Screen adaptation

Special note on exterior parameters: Screen adaptation

Entrance：Parameter Setting Area>>>Exterior>>>Screen adaptation

<div align="left"><figure><img src="/files/7xTTYqyC6k0F5xRTanCB" alt=""><figcaption></figcaption></figure></div>

👉Recommended Reading: [Creation Tips - Adaptation](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation)  [Adaptation Issues](/playable-tools-content-editor/content-editor-faq/adaptation-issues)

## 📒<mark style="color:blue;">Adaptation Rules: Calculating Layer XY Coordinates</mark>

As shown in the diagram, the origin point (0,0) is located at the top-left corner of the canvas.&#x20;

The coordinates of each layer in the canvas are calculated based on the top-left corner of the layer. For example, a finger layer with coordinates (100,100) indicates that the left upper corner of the finger layer is located 100 pixels from the origin.

<figure><img src="/files/4MhnekyNWAuwoVWnrdYi" alt=""><figcaption></figcaption></figure>

## 📒<mark style="color:blue;">Default Adaptation Scheme</mark>

**Layers are based on the center point of the canvas, maintaining their relative coordinates to this center.**&#x20;

When assets/layers are added to a project, their screen adaptation method is set to “center horizontally & center vertically” by default. This means the asset will always appear in the center of the screen regardless of size

💡<mark style="color:red;">By default, there is no need to adjust the Screen adaptation. The layout and positions you edit in the canvas will automatically adapt proportionally across different devices.</mark> Occasionally, you may want to adjust certain layer adaptations for optimal visual effects, such as setting product information to "bottom centered."

Recommended Reading: [Creation Tips - Adaptation](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation#adaptation-tips)

## 📒<mark style="color:blue;">Demonstrating Different Adaptation Methods</mark>

**If you adjust the edge adaptation, layers will anchor to the four edges of the canvas, keeping the distance from the respective edges consistent across screen sizes.**

For example, if a layer is set to anchor to the top-left corner, with its coordinates (100,100) on a 750x1334 canvas, it will maintain those coordinates when viewed on screens of other sizes.

<table><thead><tr><th width="87" align="center">Number</th><th width="179" align="center">Adaptation method</th><th align="center">Screen adaptation button</th><th align="center">iPhone6【750*1334（default）】</th><th align="center">iPhone X【828*1972】</th><th align="center">ipad【768*1024】</th></tr></thead><tbody><tr><td align="center">1</td><td align="center"><p>Center Fit</p><p>(Default adaptation method)</p></td><td align="center"><img src="/files/Dr90T1CbeOMR2CfeIZWU" alt=""></td><td align="center"><img src="/files/GstlMPUrh9lhPKBI7dlV" alt=""></td><td align="center"><img src="/files/pRjp1NVpLQysZJ0ZFbVF" alt=""></td><td align="center"><img src="/files/Zrtt7QiszfjKbtf679fh" alt=""></td></tr><tr><td align="center">2</td><td align="center">Top adaptation</td><td align="center"><img src="/files/NUag0xhwtAFWLWtiB2BF" alt=""></td><td align="center"><img src="/files/zwFaHvS5glgOjoQuLWUp" alt=""></td><td align="center"><img src="/files/WX1zQnaGhlDurlMUFbCn" alt=""></td><td align="center"><img src="/files/Tp3DMu5OU49YSbQw2Gb7" alt=""></td></tr><tr><td align="center">3</td><td align="center">Bottom adaptation</td><td align="center"><img src="/files/e43MAG9HF48YQLe7y6Yx" alt=""></td><td align="center"><img src="/files/OIwjfmOwgJTKB9ls3ZCF" alt=""></td><td align="center"><img src="/files/Bqnk1yROazZsPerXBII2" alt=""></td><td align="center"><img src="/files/CikmTg4bjibluYda4jwL" alt=""></td></tr><tr><td align="center">4</td><td align="center">Left adaptation</td><td align="center"><img src="/files/cziGc8qIkZDJp5nzYnxK" alt=""></td><td align="center"><img src="/files/bMRTRAXqMVqA0fcQsZZg" alt=""></td><td align="center"><img src="/files/CZAeaTGr4xf11ulvhqLF" alt=""></td><td align="center"><img src="/files/NwijfxejLBvlA418Rf9m" alt=""></td></tr><tr><td align="center">5</td><td align="center">Right adaptation</td><td align="center"><img src="/files/5EJ4u1rpiveri2Zrwhsz" alt=""></td><td align="center"><img src="/files/sphvaO0vpKtNluHJohMO" alt=""></td><td align="center"><img src="/files/ApUWbwbmeWNf1Y4MTdNG" alt=""></td><td align="center"><img src="/files/MnMDvSodxED2VqaFi5Sr" alt=""></td></tr><tr><td align="center">6</td><td align="center">Upper left corner adaptation</td><td align="center"><img src="/files/5IFMnON1Cykvash3LZxM" alt=""></td><td align="center"><img src="/files/I5Yyqx5STQ5OFrblIXBK" alt=""></td><td align="center"><img src="/files/AGsyu91sOyzVeTzikFi4" alt=""></td><td align="center"><img src="/files/M2Dqt1v8fgGoivLmzzsr" alt=""></td></tr><tr><td align="center">7</td><td align="center">Upper right corner adaptation</td><td align="center"><img src="/files/sdFfUmvxndmhlr5vh3op" alt=""></td><td align="center"><img src="/files/1ANfz3fyZaH9lnVoGRai" alt=""></td><td align="center"><img src="/files/vRCdXtrHTp2CR627ye0g" alt=""></td><td align="center"><img src="/files/8OFwrTtkfAP9lKkXR5G7" alt=""></td></tr><tr><td align="center">8</td><td align="center">Lower left corner adaptation</td><td align="center"><img src="/files/VC4vCKF6l4vHfiaeGfqY" alt=""></td><td align="center"><img src="/files/Tbl2K2LAGKXI1GYWe5MK" alt=""></td><td align="center"><img src="/files/XrSS6f1ZSxQTabaP467A" alt=""></td><td align="center"><img src="/files/tOA5fsS4ezxtmLg8xDAp" alt=""></td></tr><tr><td align="center">9</td><td align="center">Lower right corner adaptation</td><td align="center"><img src="/files/q6TmLipMn6XtcOpbCyPF" alt=""></td><td align="center"><img src="/files/Vl9Lzk2N8fEjMPbTaIH7" alt=""></td><td align="center"><img src="/files/cytQULOHN6DEiZPpOSeE" alt=""></td><td align="center"><img src="/files/1eDOVWIrNJdKd75D1zSX" alt=""></td></tr></tbody></table>

## 📒<mark style="color:blue;">Suggestions for adaptation adjustments</mark>

💡Due to the variety of materials, you can adjust the screen adaptation methods of layers as needed. <mark style="color:red;">Note that the Screen adaptation is set to separate configurations for landscape and portrait modes by default, so you will need to adjust them individually. If the adaptation methods are the same for both orientations, you can uncheck the option.</mark>

<div align="left"><figure><img src="/files/bxVJCINVL1vW4jlLNoK8" alt=""><figcaption></figcaption></figure></div>

💡After setting the Screen adaptation, it is recommended to preview promptly and switch between **different devices and orientations** to confirm the final effect.


# Work Preview Area

\#Content Editor

The Work Preview Area consists of 12 small modules: Canvas, Scene View, Horizontal/Vertical Screen Editing Mode, Multi-language Preview, Play the Scene, Quick Layout,Preview Size, Quick Positioning,Help Center, Package Size Estimate, Canvas Ruler, and Reference Lines.

This area is the most essential operational area in the Content editor.

(Note: “Quick Layout” only appears in Content Creation of some templates.)

<figure><img src="/files/lVGIHW9mEQIDKZjkH3qy" alt=""><figcaption><p>Work Preview Area</p></figcaption></figure>

## <mark style="color:blue;">Basic operation of canvas</mark>

💡The resolution of the canvas is **750x1334**, and when designing, ensure all elements are fully displayed within the canvas. (Assets like background images can extend beyond the canvas. Related reading:  [Screen adaptation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/screen-adaptation)  [Creation Tips - Adaptation](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation)).

* Click to select a layer.
* After selecting a layer, you can directly drag it to adjust its position.
* After selecting a layer, you can resize it by dragging the small squares at the corners (holding the Shift key while dragging maintains the aspect ratio).
* You can drag-select multiple layers by dragging on the canvas. Hidden or locked layers cannot be included in the drag-selection.
* Grouped layers have a higher priority of selection than the individual elements within the group.
* <mark style="color:red;">To select elements within a group,</mark> <mark style="color:red;"></mark><mark style="color:red;">**double-click**</mark> <mark style="color:red;"></mark><mark style="color:red;">to activate the group before selecting the elements. Once a group is activated, the current group cannot be selected again.</mark>

#### Q: Why can't I select certain layers/assets directly on the canvas?

**A:** If multiple layers share the same position and size, or if a larger layer on top overlaps the layers beneath it, only the topmost layer can be selected directly on the canvas.

To edit an overlapped layer, select the corresponding layer from the Layers panel on the left.

[Layer Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area)

<figure><img src="/files/BG641uo2UVXCmm9PJgt8" alt=""><figcaption></figcaption></figure>


# Preview Switch

\#Content editor

You can switch between different preview modes in the "Work Preview Area" to preview your work from different perspectives.

* Global Scene View/Single Scene View
* Vertical/horizontal screen switching
* Multi language switching
* Play the scene/Return to initial state
* Quick layout
* Preview Size Switch
* Direct to Help Center

<figure><img src="/files/PdLrHstICKC5QvhjqRxr" alt=""><figcaption></figcaption></figure>

## 1.Scene View Switching

* Click on 'Global Settings' to display the' Global Scene View '![](/files/lSofPCLOtVOu785DiP82)
* Click on 'Scene' to display 'Single Scene View'![](/files/DDeXlNPPdSWxt52p14MO)

## 2.Vertical/Horizontal screen switching

The platform support 3 adaptation methods of Horizontal\&Vertical screen,Vertical screen and Horizontal screen mode. [Work Creation-Create a New Project](/playable-tools-content-editor/work-creation-create-a-new-project)

To deliver through Mintegral, you must choose Horizontal\&Vertical screen mode.

* In 【Horizontal\&Vertical screen】, you need to complete the scene production of horizontal\&vertical at the same time, click the corresponding icon to switch the modes.
* In 【Horizontal screen】, the Vertical screen mode icon cannot be clicked.
* In 【Vertical screen】, the Horizontal screen mode icon cannot be clicked.

## 3.Multi language preview switching

* Click the drop-down button in "Default language"，bring up the preview language tab.
* Select the language you want to preview in the default language that has been set (the default language can be set in "Global settings")

<div align="left"><figure><img src="/files/GDe9432zriQlHH7whJKU" alt=""><figcaption></figcaption></figure></div>

## 4.Play the scene/Return to initial state

* Click the 'Play the Scene' button to play the current scene on the canvas and preview the effect.![](/files/4E35WLU7E6VxpN9nWLOa)
* Click the 'Return to Initial State' button to return to the preview in a static state.![](/files/fZqQEYZ9yaOQTWrybEbu)

<mark style="color:red;">Note: The \[Play the Scene] feature supports previewing currently</mark> <mark style="color:red;"></mark><mark style="color:red;">**displayed layers on the canvas**</mark><mark style="color:red;">, as well as</mark> <mark style="color:red;"></mark><mark style="color:red;">**animations, particles, sequence frames, and sound effects set to auto-play**</mark><mark style="color:red;">. It cannot preview event settings</mark> (to preview event settings, click on the [Preview](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/project-operation-area/preview) button in the top right corner to jump to the preview interface for trial preview).

## 5.Quick layout

&#x20;“Quick Layout” button only appears in Template content creation.The specific operation can be viewed through [Gameplay Template](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/gameplay-template)

## 6.Preview Size Switch

### **1）Recommended preview size adjustment**

* Click the "Canvas preview size" percentage value of the Canvas to bring up the preview size tab.
* Support 4 preview modes: Fit the screen / 200% / 100% / 50%.
* Click on the appropriate percentage to resize.

### **2）Fine adjustment of the current preview size**

* At the bottom right of the Canvas, there are the " - /+" buttons. Click to fine-tune the size of the current preview
* 1% fine-tuning for each click

<div align="left"><figure><img src="/files/TR2ljECpwoSYuWdcVAYN" alt=""><figcaption></figcaption></figure></div>

## 7.Help Center

* Press the <img src="/files/vNa0gZP0s0lNvVNIRfKL" alt="" data-size="line"> button to jump to the official help center.
* The“Playable Tools-Content editor”in the Help center can help you solve problems encountered during use.


# Package Size Estimation

\#Content Editor

Entrance：Work Preview Area>>>Package Size Estimation

<figure><img src="/files/kv5xXC0xQtg26X1NmXXX" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">1.Package Size Estimation Intro</mark>

* When launching playable ads, different channels have varying requirements for the package size (👉For details, please refer to:  [Playable Upload Specifications for Networks](/export-and-deployment/playable-upload-specifications-for-networks#currently-supported-a-d-networks--test-apps)).

  Therefore, during the creation process, **it is important to manage asset sizes to control the overall package size.**
* The "Package Size Estimation" feature allows you to check the <mark style="color:red;">current package size</mark> at any time during production.
* It is recommended to use the  "Package Size Estimation" feature multiple times throughout the production process to prevent exceeding the size limit.

## <mark style="color:blue;">2.Package Size Estimation Operations</mark>

* Click the "Package Size Estimation" button below the project preview area to obtain the current package size of the project (please wait for a moment).
* Once the estimation is complete, the package size under **high**, **medium**, and **low** quality dimensions will be displayed, providing a reference before applying or downloading the project.*(**Please Note: The estimated package size serves as an approximate reference. Due to different platform packaging mechanisms, the actual exported package size may vary.**)*
* Additional Notes: For the high/medium/low quality indicators, the platform applies different compression parameters to images, audio, video, and other assets in the project. Since compression rates vary across assets, there is no fixed compression ratio.
* <mark style="color:red;">Please Note: The actual package size is calculated based on the assets that</mark> <mark style="color:red;"></mark><mark style="color:red;">**have been added**</mark> <mark style="color:red;"></mark><mark style="color:red;">to the project.</mark>

<div align="left"><figure><img src="/files/7LbAGsDmKYUb63jk6PWd" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">3.Asset Size Recommendations</mark>

1）Currently, the platform has the following requirements for the size of different types of assets (👉 [/pages/EnEhJaTwnFEHEzjklU6D#id-4.asset-upload-format-requirements](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area/pages/EnEhJaTwnFEHEzjklU6D#id-4.asset-upload-format-requirements "mention")) :

* Video: < 3MB
* Audio: < 1MB
* Static Image: < 1MB
* Sequence: < 8MB
* DragonBone: < 1MB

2）<mark style="color:red;">Please Note:  If you need to add a large number of sequences or video assets to your project, it’s recommended to</mark> <mark style="color:red;"></mark><mark style="color:red;">**compress the files externally**</mark>  <mark style="color:red;"></mark><mark style="color:red;">or</mark>  <mark style="color:red;"></mark><mark style="color:red;">**adjust the implementation method**</mark> <mark style="color:red;"></mark><mark style="color:red;">first, based on the current size requirements. This helps control the overall asset size!  Otherwise, if the package significantly exceeds the size limit, compression during the download stage may fail, leading to rework.</mark>

Related Reading: [/pages/aAlutQCEmwcOr55S0RjJ#id-4.compress-the-work](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area/pages/aAlutQCEmwcOr55S0RjJ#id-4.compress-the-work "mention")

**💡 File Compression Tools**

* Common software for compressing videos: Handbrake
* Popular website for compressing images: [Tinyjpg.com](http://tinyjpg.com/)

**💡 Image Optimization Tips**

* Pay attention to the actual export resolution. Always export images at their final display size (for example, 600 × 600 instead of 2000 × 2000).
* Use JPG instead of PNG where possible. JPG can significantly reduce file size while maintaining sufficient visual quality.
* Avoid exporting images at the “highest quality” setting. For example, in JPG format, Quality 100 vs. Quality 80 shows little to no visible difference to the human eye.
* Combine multiple small images into a single larger image before exporting.

**💡 Video Optimization Tips**

* Video settings:\
  Set the resolution to 720p or 1080p (do not use 2K or 4K).\
  Use a frame rate of 24fps or 30fps.\
  Encode the video in H.264 format.
* Split the video into multiple clips based on interaction nodes. This helps maintain higher visual clarity for each individual segment.

**💡 Project Optimization Suggestions**

* Review commonly used elements such as product logos, CTA buttons, instructional text, and guiding hand indicators. Avoid adding them repeatedly in every scene. Instead, add them once in the **Global Settings** layer so they can be reused across all scenes.
* For standard content and simple animations (such as guiding hand effects), it is recommended to use a **single image with animation** rather than image sequences or video, to further reduce file size.

<div align="left"><figure><img src="/files/YcCZuVFT2s0BJMRlUDRT" alt="" width="560"><figcaption></figcaption></figure></div>


# Quick Positioning

\#Content editor

Entrance：Work Preview Area>>>Quick Positioning

<figure><img src="/files/XxCOSoMXvNwTUYCW5jU2" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">1.Quick Positioning Overview</mark>

* This feature is based on "Custom Tracking" settings.
* Custom tracking refers to manually <mark style="color:red;">adding a "Set Tracking Event" response event, which represents the addition of custom tracking.</mark> You can add multiple custom tracking points based on your creative needs   (Related information:   [/pages/2LEF3PJ8v0Vr7K9WNDAR#id-1.redirection-and-postback](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area/pages/2LEF3PJ8v0Vr7K9WNDAR#id-1.redirection-and-postback "mention") [Tracking Explanation](/creative-insights/creative-insights-essential-knowledge/tracking-explanation))
* <mark style="color:red;">"Quick Positioning" is a feature that displays and locates all the custom tracking points within the current project.</mark>

<div align="left"><figure><img src="/files/Buh1CQZBAiIMRTs9l3jP" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">2.Quick Positioning Operations</mark>

* Click the "Quick Positioning" button to open the window.
* The window displays all the custom tracking points that have been added, including the tracking ID and name.
* <mark style="color:red;">Clicking the positioning icon next to a specific tracking point will quickly navigate to the location of that response event,</mark> making it convenient for you to find and modify the custom tracking point.

<figure><img src="/files/arVWej3ydZL3cocloAax" alt=""><figcaption></figcaption></figure>

* <mark style="color:red;">Note: Quick positioning is only available for tracking points within the current scene.</mark>
* A black icon indicates that the tracking point is located within the current scene, while a gray icon indicates that the tracking point is located in another scene.

<div align="left"><figure><img src="/files/EnPhnH81PQk1NAkrwFNk" alt=""><figcaption></figcaption></figure></div>

* If your project does not have any custom tracking points added, the content will be empty when opened.

<div align="left"><figure><img src="/files/EboNKOPwCPItiR9ZSfJq" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">3.Additional Intro: Tracking Log</mark>

Entrance：Material Preview Interface >>>Tracking Log

<figure><img src="/files/Uyc7HLEtbeht9o21CyYg" alt=""><figcaption></figcaption></figure>

When you finish creating and previewing your materials, you can click on "Tracking Log" to open a window where you can see the distribution of both "Basic Tracking" and "Custom Tracking" in real-time.

<div align="left"><figure><img src="/files/Nd3Giw5XH9V0fb4j5ije" alt="" width="539"><figcaption></figcaption></figure></div>


# Canvas ruler and reference line

\#Content editor

During the editing process, the canvas ruler and reference line are convenient for asset and position alignment.

<figure><img src="/files/qMhK3WfmyWgwL0HB1k7T" alt=""><figcaption></figcaption></figure>

## 1.Add reference line

* Move your mouse near the canvas ruler area to bring up the reference line
* Left-click to successfully locate the reference line
* Drag the reference line to change its position

## 2.delete reference line

* Click the "×" button to delete the reference line

## 3.Auto-reference line

* Select the layer and drag it to the edge of the canvas to automatically activate the smart reference line
* Auto-reference line facilitates the edge alignment and position alignment of the asset


# Project Operation Area

\#Content Editor

<figure><img src="/files/k5UoB0f2YgJ3jl2SzSjy" alt=""><figcaption><p>Project Operation Area</p></figcaption></figure>

This function module supports setting the project info, previewing the effect of the work under various devices, saving project, saving project as template, batch downloading packages from various channels, apply the materials to Mintegral, and completing design output.

[Preview](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/project-operation-area/preview)

[Save](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/project-operation-area/save)

[Content Editor - Download\&Apply](/playable-tools-content-editor/content-editor-user-guide/content-editor-download-and-apply)

\[Save as Template] Related content can be viewed by moving to [/pages/3BYW04XcGx0mF91QykDN#id-2.template-assets](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/pages/3BYW04XcGx0mF91QykDN#id-2.template-assets "mention")


# Preview

\#Content Editor

Entrance：Project Operation Area>>>Preview

Click **"Preview from the beginning"** or **"Preview from the current scene"** to navigate to the preview page.

The preview page allows you to see how the finished creative will look like in different devices, landscape & portrait mode and different language environment.

<div align="left"><figure><img src="/files/HYBRkk7s9r8e5JrZJUdI" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">1.Change the preview device/Preview</mark>

* Click the drop-down button to bring up the device options pop-up window
* Click to select the device you want to preview to change the preview device
* Support preview on 5 devices: iPhoneX/iPad/iPhone6/redmi/vivo (<mark style="color:red;">The canvas content will automatically scale up/down proportionally to fit the different device sizes, so the current five device models can cover the preview effects of most devices on the market.</mark>)

<figure><img src="/files/PXzqaYnYpW9hcho5sSPX" alt=""><figcaption></figcaption></figure>

**If you want to preview the effects on other device models:**

a. You can click the "Preview" button and use your phone to scan the QR code for preview.

b. Alternatively, you can "Copy Link" and open it in a browser. Then press *F12* to enter developer mode, where you can switch to different device models for preview

<div><figure><img src="/files/SasXyuDVFumCsLXS4CgU" alt=""><figcaption></figcaption></figure> <figure><img src="/files/8KP7ORmKT6Akk5bgEHH3" alt=""><figcaption></figcaption></figure></div>

💡<mark style="color:red;">**Tool Sharing**</mark> <mark style="color:red;"></mark><mark style="color:red;">(Convert this into an external link to preview mobile screen effects directly in a browser)</mark>: <https://playable-portal.mintegral.com/#/tools/mw-viewer>

* On the preview page, click **Copy Link**.
* Open the tool and paste the link.
* Click **Generate** to create the external preview link.

<div align="left"><figure><img src="/files/0FZjQxarD84QR1oe1aHu" alt="" width="552"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/DsHU4uyXDBpo1YCwM3mr" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">2.Switch to preview between horizontal and vertical screen</mark>

* Supports two preview methods:horizontal and vertical
* Click the horizontal/vertical icon to switch the screen preview mode

<div align="left"><figure><img src="/files/drGhDGwAVHTl0pNIujeY" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">3.Switch to preview in different languages</mark>

* Click the drop-down button to open the added default language pop-up window
* Click the language you want to preview to switch the preview in specified language environment

<div align="left"><figure><img src="/files/pJhWqVWWdVUyzcE36Cg3" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">4.Turn on/off audio preview</mark>

* Audio preview mode is enabled by default, and the icon of the mode is automatically highlighted as <img src="/files/PHnnH3Vy4EqdGaSFBOOH" alt="" data-size="line">
* When the audio preview mode is off, the icon of the mode is <img src="/files/l0QZAdNdn79WsWYaoVps" alt="" data-size="line">
* Click the corresponding audio mode icon to switch the audio preview mode

<div align="left"><figure><img src="/files/vsatlmaYpy4wIf8L9saL" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">5.Tracking Log</mark>

Please refer to [Quick Positioning](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/work-preview-area/quick-positioning) [/pages/bs1WlmCVWYlR0vqQMMUb#id-3.additional-intro-tracking-log](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/project-operation-area/pages/bs1WlmCVWYlR0vqQMMUb#id-3.additional-intro-tracking-log "mention")

####

## <mark style="color:blue;">6.Replay</mark>

• Click the "Replay" button to reload and replay in the current preview mode

<div align="left"><figure><img src="/files/2SZ4TPQhbpr6ZHT1w9yP" alt=""><figcaption></figcaption></figure></div>

####

## <mark style="color:blue;">7.</mark><mark style="color:blue;">**Tips Share**</mark>

When you are creating a long playable project through Blank Canvas, you may need to make repeated adjustments and previews, which requires repeatedly clicking the "Replay" button and waiting for it to load from the beginning, which can be cumbersome and time-consuming. Here are some tips that may help you:

💡 Use **"Preview from the current scene"** flexibly depending on the scene you are working on.

<div align="left"><figure><img src="/files/ZJtdr4QjIQ91mLKdBXce" alt=""><figcaption></figcaption></figure></div>

💡 Add any button and set an event for **"Press - Retry Playable"** to save time on reloading from the beginning.  Once the materials are completed, you can delete that button.

<div align="left"><figure><img src="/files/HtOKFJTm29eq6NWaARSo" alt=""><figcaption></figcaption></figure></div>


# Save

\#Content editor

Entrance：Project Operation Area>>>Save

<div align="left"><figure><img src="/files/kEMDKTN1baOLYRZJA44B" alt=""><figcaption></figcaption></figure></div>

In order to avoid the loss of editing due to unexpected situations during the editing process (e.g. disconnection, refresh loading, etc.), we recommend that you save the current version after each operation is completed.

<mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">When you open the preview page, if there are any modifications to the editing page, you need to click 'Save' and then refresh the preview page or click 'Replay' to preview the latest modified content.</mark>


# Component & Quick Layout

\#Content Editor #Content Creation #Blank Canvas


# Match Lines Component

\#Content Editor #Template Content Creation #Blank Canvas

✨Entrance of **Template Content Creation**：Work Preview Area>>>Match Lines Component button / Layer Area>>>Match Line Component

<figure><img src="/files/pjQJtMKYRhNrpbDWEqNS" alt=""><figcaption></figcaption></figure>

✨Entrance of **Blank Canvas**：Gameplay Template>>>Component>>>Match Lines Component

<div align="left"><figure><img src="/files/Z0DQhGo2CYBG3SBrB7Uv" alt=""><figcaption></figcaption></figure></div>

Related case tutorial can refer to [Match Lines Component - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/painting-gameplay-cases/match-lines-component-blank-canvas-tutorial)

####

## <mark style="color:blue;">📒Match Lines Component Intro</mark>

* Currently, both "**Template Content Creation**" and "**Blank Canvas**" support the use of the "Match Lines Component."  With "Template Content Creation," you can make adjustments to the components based on the original template's gameplay. With "Blank Canvas," you can create assets for connection gameplay from scratch.
* Based on the existing 「Match Lines Component」 , you can adjust the template's connectable area, start and end regions, line style, pairing relationships, line types,etc
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Match Lines Component Sample Cases</mark>

It is suitable for gameplay with fixed connected areas or fixed pairing combinations, such as 'Line And Solve'.

* Sample1 - [Line And Solve](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001189%252F12768%252Fpv%252F24%252F04%252F24%252F66286b4e9e1d2%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E8%BF%9E%E7%BA%BF%E8%A7%A3%E9%A2%98\&language=undefined)
* Sample2 - [Draw to grab](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001381%252F13098%252Fpv%252F24%252F07%252F03%252F6684c9341dc65%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E6%8A%93%E5%8F%96\&language=undefined)
* Sample3 - [Draw to home to get things](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001294%252F12989%252Fpv%252F24%252F06%252F26%252F667bd7ebbbc42%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E5%9B%9E%E5%AE%B6%E5%8F%96%E4%B8%9C%E8%A5%BF\&language=undefined)
* Sample4 - [Draw to home](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001222%252F12848%252Fpv%252F24%252F04%252F25%252F662a2368babcb%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E5%9B%9E%E5%AE%B6\&language=undefined)

####

## <mark style="color:blue;">📒Match Line Component Instruction</mark>

The adjustable parameters of  「Match Line Component」  are divided into three parts: "exterior", "start and end regions", and "event".

We will combine the template ["Draw to home" ](http://tinyurl.com/5vsrhwjn)to provide instructions for using the 「Match Line Component」&#x20;

### 1.Exterior

* **\[Show\&Hide] Separate Setting：**&#x53;ame as appearance parameters for each layer. You can adjust whether the 「Match Line Component」 is displayed separately in landscape/portrait mode.
* **Position\&Size：**&#x59;ou can modify the width, height, and position of the 「Match Line Component」. They determine the range where lines can be drawn (as shown in the example below, the green overlay indicates the playable area for drawing lines).
* **Screen adaptation：**&#x53;ame as appearance parameters for each layer, you can adjust the screen adaptation method for the  「Match Line Component」.
* **Scale：**&#x53;ame as appearance parameters for each layer, you can adjust the scale ratio of the  「Match Line Component」.

<figure><img src="/files/LEyRq1HHFyZYYiJrfkWU" alt=""><figcaption></figcaption></figure>

### 2.Start and End Regions

The "Start and End Regions" is a unique parameter of the Match Line Component. A 「Match Line Component」  consists of multiple start-end Regions and their pairing relationships.

<figure><img src="/files/jUxtDwmxG5soQ0hDgPZV" alt=""><figcaption></figcaption></figure>

#### **1）Start and End Regions**

In this component, set several regions of arbitrary size and position, which will be used in conjunction with "Pairing Relationships" to generate specific drawing effects.

In the \[Draw to home] template, there are a total of 4 start and end regions:

* Support modifying the line style (color and thickness) of existing "start and end regions."
* &#x20;Support applying the line style of a specific start and end region to all.
* Support adding new start and end regions.&#x20;
* For each start and end region, you can adjust its size and position on the canvas.
* Support deleting a specific start and end region (but it is not recommended as it may cause issues with gameplay functionality).
* <mark style="color:red;">Note: The Line Style represents the style of lines drawn from that region.</mark>

<div align="left"><figure><img src="/files/uOSqhyA4JV87evfdWDv0" alt=""><figcaption></figcaption></figure></div>

#### 2）**Pairing Relationship**

Pair relationship determine whether a line can be drawn from a specific region. Only start and end regions with a pairing relationship can draw lines. Start and end regions without a pairing relationship cannot draw lines, even if they have the required areas.

In the \[Draw to home] template, there are a total of 4 Pairing Relationships:

* Each pairing relationship requires the configuration of a "Start region" and "End region," along with the setting of the "Matching Category" parameter.
  * Only one start region can be selected, while the end region supports single or multiple selections.
  * The "Matching Category" is divided into two categories: true or false. (Blank Canvas supports custom creation, detailed explanation below)
* Support modifying the name of each pairing relationship.&#x20;
* Support deleting a pairing relationship (but it is not recommended as it may cause issues with gameplay functionality).
* Support "Previewing All Lines"&#x20;
* <mark style="color:red;">Note: Completed connections can't be redrawn</mark>

<div align="left"><figure><img src="/files/tHqkt5NPyzrO1drY2B20" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">Taking the template "Draw to home" as an example.</mark>&#x20;

<mark style="background-color:yellow;">There are 4 Pairing Relationships in total：1->3, 2->4, 1->4, 2->3.</mark>&#x20;

<mark style="background-color:yellow;">Among them, 1->3 and 2->4 are set as "True" pairs, while 1->4 and 2->3 are set as "False" pairs.</mark>

<mark style="background-color:yellow;">Using these pair relationships, in the material, dragging to draw a line can start from regions 1 and 2. If the final finger release position is within regions 3 and 4, the drawn line is retained, triggering corresponding events; otherwise, the drawn line is not retained.</mark>

<figure><img src="/files/pmOgdk4aAdVuwzs04j1C" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">When using \[Blank Canvas] with the Match Lines Component, you need to add the \[Matching Category] manually.</mark>  You can add multiple Matching Categories based on the actual creation needs.&#x20;

Click the settings button in the illustration to open the \[Matching Category] popup. Click \[Add Pairing Category], enter the name, and the setup is complete. Once added successfully, you can select the Pairing Category.

<div align="left"><figure><img src="/files/WO334yb4lZ8i1MicwM1Y" alt=""><figcaption></figcaption></figure></div>

#### 3）**Line Pairing**

Affects the pairing relationships.

* If configured as "One-way", lines can only be drawn from the region before each pairing, and it is not possible to draw lines from the subsequent region. <mark style="background-color:yellow;">Taking the first pairing relationship in the "Draw to home" template as an example, you can only draw lines starting from region 1 and ending at region 3; it is not possible to draw lines starting from region 3.</mark>
* If configured as "Two-way",lines can be drawn from either region of each pairing relationship. <mark style="background-color:yellow;">Taking the first pairing relationship in the "Draw to home"  template as an example, you can draw lines from region 1 to region 3 or from region 3 to region 1, both options will successfully complete the line.</mark>

<div align="left"><figure><img src="/files/oN2H10ry9vKcfi454Ll1" alt=""><figcaption></figcaption></figure></div>

#### 4）**Line Types**

It determines the specific type of lines drawn in the material.

* Free-hand Drawing: Simply put, Free-hand Drawing is the curve that follows the trajectory of the finger's drawing line.
* Straight Line: Not affected by the trajectory of fingers during the drawing process, only forming a straight line in the end.

<div align="left"><figure><img src="/files/a6rGWO4J05CDz2BiZjS3" alt=""><figcaption></figcaption></figure></div>

### 3.Event

Two types of trigger events can be configured on the Match Line Component："Begin Drawing" and "Finish Drawing".

Response events related to the Match Line Component include "Erase Lines," "Edit Line Style" "Enable/Disable Pairing", "Edit the Style of Paired Lines","Enable/Disable Start and End Regions."

<div align="left"><figure><img src="/files/6gDZuzDfMnMSCqi9Cf9w" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/zxz1LaLyqLXe5OpyfZpJ" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">1-1）</mark><mark style="background-color:orange;">**Trigger Event: Begin Drawing**</mark>

It is necessary to select the regions  where you want to start drawing lines (supports single or multiple selection) and set response events.

**The triggering condition is:&#x20;**<mark style="color:red;">**when drawing a line from the selected "start and end regions**</mark>

<mark style="background-color:yellow;">For example, when setting the trigger event as "Begin Drawing," and configuring the Start and End Regions as 1 and 2, with the response event being playing music. Pressing down in region "1" or region "2" to start drawing a line will initiate the playback of music.</mark>

<div align="left"><figure><img src="/files/O4U6DEVVkNehC2G0uZLt" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">1-2）</mark><mark style="background-color:orange;">**Trigger Event: Finish Drawing**</mark>

It is necessary to select "Match or Not Match" and "Pairing Relationship" or "Matching Category" under "Pairing Method"

* If you choose "Match" - "Pairing Relationship" (supports single or multiple selection), also need to choose which specific group or groups of pairing relationships it is
* If you choose "Match" - "Matching Category", also need to select whether the matching category is true or false

<mark style="color:red;">**Note:**</mark> <mark style="color:red;">The true/false here corresponds to the pairing relationship attribute we set in the "Pairing Relationship" section earlier.</mark>  In the \[Draw to home] template, the categories for "Pairs 1->3" and "Pairs 2->4" are true,  "Pairs 1->4" and "Pairs 2->3" are false.

<figure><img src="/files/OBp85x992X4DikMFSf7J" alt=""><figcaption></figcaption></figure>

**The triggering condition is:&#x20;**<mark style="color:red;">**when the selected pairing relationship(s) or matching category completes the drawing of lines.**</mark>&#x20;

**Note:** When multiple pairing relationships are selected or a specific matching category is chosen, the response event will be triggered as soon as <mark style="color:red;">any one of those pairing relationships finishes the drawing of lines.</mark>

<div align="left"><figure><img src="/files/k5STiT7QwsBkK2eMs1JK" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">Taking the template "Draw to home" as an example.</mark>&#x20;

<mark style="background-color:yellow;">When setting "Match" -> "Pairing Relationship" -> "Pair 1 -> 3" and the response event is set as "Redirect to the next scene" ：it means that when a line is successfully drawn from region 1 to region 3, it will trigger the event to redirec to the next scene.</mark>

<mark style="background-color:yellow;">When setting "Match" -> "Matching Category" -> "true" and the response event is set as"Redirect to the next scene" ：it means that when</mark> <mark style="background-color:yellow;"></mark><mark style="background-color:yellow;">**either the pairing relationship "1->3" or "2->4"**</mark> <mark style="background-color:yellow;"></mark><mark style="background-color:yellow;">with the category set as true is successfully completed, it will trigger the event to redirec to the next scene.</mark>

<div align="left"><figure><img src="/files/UI6kW6PAO31e9ksZUPKo" alt=""><figcaption></figcaption></figure></div>

* If you choose "Not Match",you can directly add the corresponding response event.&#x20;

**The triggering condition is: &#x20;**<mark style="color:red;">**when drawing starts and the finger is released outside of any pairing relationship region, indicating a non-match.**</mark>

## ![](/files/TkJmHkpID6MGMsP4UbwE)

<mark style="background-color:yellow;">Taking the template "Draw to home" as an example.</mark>&#x20;

<mark style="background-color:yellow;">When setting the trigger event as "Finish Drawing," with "Not Match" selected, and the response event as "Redirect to the next scene."  In the provided material, as regions 1, 3, and 4 have pairings, starting to draw in region 1 and releasing the line outside regions 3 and 4 is considered "Not Match," triggering a redirect to the next scene.</mark>

<figure><img src="/files/YShVTIlOe8kMVT3KHKJQ" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Note:**</mark>**&#x20;The difference between "Matching Category - False" and "Not Match"**

"Matching Category **-**&#x46;alse": It is a type of "Pairing Relationship" (e.g., Pair 1 -> 4 in the template). "

Not Match": It does not include any specific "Pairing Relationship" (e.g., Pair 1 -> 2 in the template).

#### <mark style="background-color:orange;">2-1）Response Event</mark><mark style="background-color:orange;">**:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Erase Lines</mark>

Select the "Pairing Relationship" to be erased.&#x20;

The response of this event is that **the completed lines** within the selected pairing relationship will be erased.&#x20;

<mark style="color:red;">**Note: This response event only applies to "straight lines" ,not to "free-hand drawings."**</mark>

<div align="left"><figure><img src="/files/2F1PJmSCYqElp3TjPNZo" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-2）Response Event</mark><mark style="background-color:orange;">**:**</mark>  <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Edit Line Style</mark>

Select the "Region" that you want to modify. Then set the line style.

The response of this event is that the lines starting from that region, including those already drawn, will have their styles modified to the specified style.

<mark style="color:red;">**Note:**</mark> <mark style="color:red;"></mark><mark style="color:red;">This response event applies differently to "straight line" and "free-hand drawing"</mark>

* <mark style="color:red;">For "straight line": Both drawn and undrawn lines work.</mark>&#x20;
* <mark style="color:red;">For "free-hand drawing": Only undrawn lines work.</mark>

<div align="left"><figure><img src="/files/fyXfVutrmmHwpMwWpHwh" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-3）Response Event</mark><mark style="background-color:orange;">**:**</mark>   <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Edit the Style of Paired Lines</mark>

Select the "Pairing Relationship" to be modified. Then set the line style.

The response of this event is that **the completed lines** within the selected pairing relationship will be modified.&#x20;

<mark style="color:red;">**Note: This response event only applies to "straight lines" ,not to "free-hand drawings."**</mark>

<div align="left"><figure><img src="/files/ReNCzP9p5flotxZRQijZ" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-4）Response Event</mark><mark style="background-color:orange;">**:**</mark>   <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Enable/Disable Pairing</mark>

Select the pairing to be enabled/disabled.

* If "Disable" is selected, the response of this event is that the selected pairing relationship can no longer start or finish lines.
* If "Enable" is selected, the response of this event is to cancel the "disabled" status of the pairing.

<div align="left"><figure><img src="/files/u6RcGFKOIVX1cI6OnvmL" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-5）Response Event</mark><mark style="background-color:orange;">**:**</mark>   <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Enable/Disable Start and End Regions</mark>

Select the Start and End Regions to be enabled/disabled.

* If "Disable" is selected, the response of this event is that the selected Start and End Regions can no longer initiate drawing lines.
* If "Enable" is selected, the response of this event is to cancel the "disabled" status of the region.

<div align="left"><figure><img src="/files/WrHC2pS1FrJptibGhZ1F" alt=""><figcaption></figcaption></figure></div>


# Draw Lines Component

\#Content Editor #Template Content Creation #Blank Canvas

✨Entrance of **Template Content Creation**：Work Preview Area>>>Draw Lines Component button / Layer Area>>>Draw Lines Component

<figure><img src="/files/U9iBFLqdfCDJa8bCVZzA" alt=""><figcaption></figcaption></figure>

✨Entrance of **Blank Canvas**：Gameplay Template>>>Component>>>Draw Lines Component

<div align="left"><figure><img src="/files/1Hkw0B6DANPgXr04hcpW" alt=""><figcaption></figcaption></figure></div>

Related case tutorial can refer to [Draw Lines Component - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/painting-gameplay-cases/draw-lines-component-blank-canvas-tutorial)

####

## <mark style="color:blue;">📒Draw Lines Component Intro</mark>

* Currently, both "**Template Content Creation**" and "**Blank Canvas**" support the use of the "Draw Lines Component."  With "Template Content Creation," you can make adjustments to the components based on the original template's gameplay. With "Blank Canvas," you can create assets for draw lines gameplay from scratch.
* Based on the existing 「Draw Lines Component」 ,you can adjust the template's drawable area, line style, and other related settings.
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Draw Lines Component Sample Cases</mark>

The "Draw Lines Component" is suitable for gameplay where lines can be freely drawn within a designated area. Using the "Draw Lines Component" you can draw lines within a specified area and trigger various effects based on the lines.

* Sample1 - [Draw to kill](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001138%252F12638%252Fpv%252F24%252F08%252F12%252F66b9a925b825c%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E7%A0%B8%E5%AE%83\&language=undefined)
* Sample2 - [Draw to help](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001137%252F12633%252Fpv%252F24%252F04%252F08%252F6613b8d975a19%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E6%95%91%E5%AE%83\&language=undefined)
* Sample3 - [Draw Bridge](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001166%252F12705%252Fpv%252F24%252F04%252F03%252F660ccbecb1ce3%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%94%BB%E7%BA%BF%E9%80%9A%E8%BD%A6\&language=undefined)
* Sample4 - [Copy drawing](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001312%252F13021%252Fpv%252F24%252F06%252F03%252F665d8362e6f54%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E4%B8%B4%E6%91%B9%E7%94%BB%E5%9B%BE\&language=undefined)

####

## <mark style="color:blue;">📒Draw Lines Component Instruction</mark>

The adjustable parameters of  「Draw Lines Component」  are divided into three parts: "Exterior", "Line", and "Event".

We will combine the template ["Draw to help"](http://tinyurl.com/bdcm78r2) to provide instructions for using the 「Draw Lines Component」&#x20;

### 1.Exterior

* **\[Show\&Hide] Separate Setting：**&#x53;ame as appearance parameters for each layer. You can adjust whether the 「Draw Lines Component」 is displayed separately in landscape/portrait mode.
* **Position\&Size：**&#x59;ou can modify the width, height, and position of the 「Draw Lines Component」. They determine the range where lines can be drawn (as shown in the example below, the green overlay indicates the playable area for drawing lines).
* **Screen adaptation：**&#x53;ame as appearance parameters for each layer, you can adjust the screen adaptation method for the  「Draw Lines Component」.
* **Scale：**&#x53;ame as appearance parameters for each layer, you can adjust the scale ratio of the  「Draw Lines Component」.

<figure><img src="/files/i5zwAGn7jmjymzfJfYvw" alt=""><figcaption></figcaption></figure>

### 2.Line

The "Line" parameter includes two parts: "Line Style" and "Rigidbody Type"

#### 1）Line Style

* You can set the color and thickness of the drawn lines.&#x20;
* Clicking on "Preview Line" allows you to preview the set line styles directly on the canvas.

<div align="left"><figure><img src="/files/Jcep8dp7CTmZUqjx3uQx" alt=""><figcaption></figcaption></figure></div>

#### 2）Rigidbody Type

The Rigidbody Type can define whether the drawn lines have physical properties.There are four types to choose from:

<div align="left"><figure><img src="/files/1mNTKLx8AnuZ1bdZRy2K" alt=""><figcaption></figcaption></figure></div>

* Non-rigid Body: Non-rigid Body objects do not have physical properties and are only displayed as images.
* Static Rigidbody: Static bodies have physical properties and can collide with other bodies but remain stationary themselves, such as walls, floors, etc., which are considered "Static Bodies."
* Dynamic Rigidbody: Objects with mass that move under external forces, following Newton's laws of motion, can collide with other types of bodies and change their velocity, such as freely falling balls.
* Kinematic Rigidbody: Objects that move at a constant velocity without considering force or mass, colliding with "Dynamic Bodies," such as balls moving at a constant speed.

<mark style="background-color:yellow;">Note: In the "Draw to help" template, adjusting the Rigidbody Type is not currently supported.</mark>

<div align="left"><figure><img src="/files/YJks8AAQztbu7k75yWJm" alt=""><figcaption></figcaption></figure></div>

### 3.Event

Two types of **trigger events** can be configured on the Draw Lines Component："Begin Drawing" and "Finish Drawing".

**Response events** related to the Draw Lines Component include "Erase Lines," "Edit Line Style" "Enable/Disable Draw Lines Component", "Create a rigid body after drawing the lines."

<div align="left"><figure><img src="/files/yVvpo9EiCJXdttTMJvue" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">1-1）</mark><mark style="background-color:orange;">**Trigger Event: Begin Drawing**</mark>

Set "Begin Drawing" and add the desired response events.&#x20;

**Trigger condition:** <mark style="color:red;">**When the player starts drawing a line.**</mark>

<div align="left"><figure><img src="/files/4QPVZgSR3WsGx2TcKuoL" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">1-2）</mark><mark style="background-color:orange;">**Trigger Event:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Finish Drawing</mark>

Set "Drawing Complete" and add the desired response events.&#x20;

**Trigger condition:&#x20;**<mark style="color:red;">**When the player completes drawing a line.**</mark>

<div align="left"><figure><img src="/files/je2ENZWRzylFvgoWQ4ip" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-1）Response Event</mark><mark style="background-color:orange;">**:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Erase Lines</mark>

The response result of this event is that drawn lines are erased.

<div align="left"><figure><img src="/files/zrfKlERK58lmeWKRQXCb" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-2）Response Event</mark><mark style="background-color:orange;">**:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Edit Line Style</mark>

The response result of this event is that the lines drawn by the component are modified to the specified style.

<mark style="color:red;">**Note: This response event is effective for undrawn lines only.**</mark>

<div align="left"><figure><img src="/files/dQFwk7oV25zIPKS8aF73" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:orange;">2-3）Response Event</mark><mark style="background-color:orange;">**:**</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">Enable/Disable Draw Lines Component</mark>

Choose to enable/disable the component.

* If "Disable" is selected, the response result of this event is that the component can no longer start or end drawing lines.
* If "Enable" is selected, the response result of this event is to cancel the "Disable" state.

<div align="left"><figure><img src="/files/1Tyr5iLcw6YsdtizzRdj" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:orange;">**2-4）Response Event: Create a rigid body after drawing the lines**</mark>

The response result of this event is that lines are converted into bodies based on the selected "Rigidbody Type."

<div align="left"><figure><img src="/files/JfihSkayBETeR8mUg4rM" alt=""><figcaption></figcaption></figure></div>


# Erase Component

\#Content Editor #Template Content Creation #Blank Canvas

✨Entrance of **Template Content Creation**：Work Preview Area>>>Erase Component button  / Layer Area>>>Erase Component

<figure><img src="/files/sVKF7SEXZZxRbBM3BeJt" alt=""><figcaption></figcaption></figure>

✨Entrance of **Blank Canvas**：Gameplay Template>>>Component>>>Erase Component

<figure><img src="/files/ORovkw6wltKXI98sPE2n" alt=""><figcaption></figcaption></figure>

Related case tutorial can refer to [Erase Component - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/painting-gameplay-cases/erase-component-blank-canvas-tutorial)

####

## <mark style="color:blue;">📒Erase Component Intro</mark>

* Underlying logic: Set the "mask" and "bottom image" layers so that players can achieve an erasing effect by erasing the mask layer to reveal the bottom image.
* The Erase Component can be used in both "**Blank Canvas**" and "**Template Content Creation**."  With Content Creation, you can adjust the components based on the gameplay of the original template.  With Blank Canvas or adding a new component, you need to complete the settings for parameters such as "Exterior," "Eraser Stroke Settings," "Component Layer," "Event Judgment," and "Event."
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Erase Component Sample Cases</mark>

It is suitable for gameplays such as **erasing the mask layer to reveal the bottom image** or **coloring** by dragging within a specific area for erasing or coloring.

* Sample1 - [Beauty cleansing](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001239%252F12884%252Fpv%252F24%252F07%252F02%252F6683a348e7041%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%BE%8E%E5%A6%86%E6%93%A6%E9%99%A4\&language=undefined)&#x20;
* Sample2 - [Funny erasing](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001252%252F12909%252Fpv%252F24%252F06%252F27%252F667d33c167d25%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E8%B6%A3%E5%91%B3%E6%93%A6%E9%99%A4\&language=undefined)
* Sample3 - [Select to Scratch and Clean](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001306%252F13011%252Fpv%252F24%252F06%252F20%252F6673f2dc8554b%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E9%80%89%E6%8B%A9%E9%81%93%E5%85%B7%E6%93%A6%E9%99%A4\&language=undefined)
* Sample4 - [Deep cleaning](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001288%252F12980%252Fpv%252F24%252F06%252F03%252F665d6af571d53%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%B8%85%E6%B4%81%E6%93%A6%E9%99%A4\&language=undefined)

####

## <mark style="color:blue;">📒Erase Component Instruction</mark>

### 1.Adding Erase Component&#x20;

* Clicking the "+" button on the bottom right corner of the Erase Component will successfully add an Erase Component.&#x20;
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

<div align="left"><figure><img src="/files/DWOcmDm7vzzYelwh58T4" alt=""><figcaption></figcaption></figure></div>

The parameters that can be adjusted for the Erase Component are divided into four sections: "Exterior," "Animation," "Erase Settings," and "Event." Next, we will introduce them one by one.

### 2.Parameter: Exterior

* Enable Component: You can enable or disable the Erase Component by adjusting the toggle switch under the "Exterior" parameters (enabled by default).
* The usage of other parameters is the same as regular layers and will not be further explained here.

<figure><img src="/files/IBQ1SwJt2n9MDfc9ctm2" alt=""><figcaption></figcaption></figure>

### 3.Parameter: Animation&#x20;

The animation set here applies to the entire Erase Component.&#x20;

The specific usage is the same as regular layers and will not be further explained here.

### 4.Parameter: Erase Settings

Erase Settings consist of three parts: 'Eraser Stroke Settings', 'Component Layer (Mask and Bottom image)', and 'Event Judgment'.&#x20;

* Eraser Stroke Settings determines the shape, size, and style of the Eraser Stroke Settings during erasing.
* Mask and Bottom image determines the layer style that can be erased and what is displayed after erasing.
* Event Judgment determines whether erasing has reached a specified stage and whether subsequent events need to be triggered.

<mark style="color:red;">NOTE：Erase Settings are the most important parameters of this component; please ensure all parts are set up completely.</mark>

<div align="left"><figure><img src="/files/eAylLHHpNunixp7zuG8j" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Part1：Eraser Stroke Settings**</mark>

The Eraser Stroke Settings consist of two parts: Stroke Style、Image following fingers.

It determines the actual shape, size, and style of the erasing during the process and when the finger moves.

**1）Stroke Style**

* Circular: The Eraser Stroke Settings is circular during erasing, and the size can be set.
* Rectangle: The Eraser Stroke Settings is rectangle during erasing, and the size can be set.
* Image Recognition: You can upload PNG or sequence frame images, and the contour of the image is recognized as the Eraser Stroke Settings. The image size and scale can be set.

<div align="left"><figure><img src="/files/aO3m3rU5vVSORUESbtDn" alt="" width="536"><figcaption></figcaption></figure></div>

**2）Image following fingers**

* Determines the style of the image that follows the finger movement during the erasing process (unrelated to the Eraser Stroke Settings), not necessarily uploaded, multiple Image following fingerss can be uploaded (only one Image following fingers will take effect at a time).&#x20;
* For the Image following fingers, you can click to modify its size, scale, rotation angle, and other Exterior parameters.&#x20;
* The follow-hand anchor point parameter determines the position of the Eraser Stroke Settings during erasing and can be adjusted by moving the green dot.

<div align="left"><figure><img src="/files/FtnzoXH8GxKCrK6QIfGu" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Part2：Component Layer(Mask & Bottom image)**</mark>

Component Layer consists of Mask and Bottom image.

**1）Mask**

* Mask represents the "erasable object."
* You can upload a single or multiple static frame images as the mask.
* You can control whether erasing is enabled or disabled by using the switch.If it's disabled here, you can enable it again at specific times using events.

<div align="left"><figure><img src="/files/sSOui6543ITw2sBxRrO3" alt=""><figcaption></figcaption></figure></div>

* The mask layer supports clicking to set exterior, animation, and other parameters, and supports dragging and adjusting in the canvas area.
* During the erasing process, when the Eraser Stroke Settings moves over the mask layer, parts of the mask layer are erased according to the Eraser Stroke Settings size and trajectory (if multiple images of the mask layer overlap, the overlapping parts will be erased together).
* <mark style="color:red;">The area that players can erase = the size of the Mask image.</mark>

<figure><img src="/files/X8d4QxWue9Yk91kZHuYJ" alt=""><figcaption></figcaption></figure>

**2）Bottom image**

* The Bottom image represents the "non-erasable/non-obscured object" and will always be positioned below the mask.
* The Bottom image supports uploading single or multiple static frame images, GIFs, or sequence frames.

<div align="left"><figure><img src="/files/Ut0BCm9P7kmHFvUw94Gp" alt=""><figcaption></figcaption></figure></div>

* You can click on a single layer to set exterior, animation, and other parameters.And it also supported dragging and adjusting in the canvas area.
* During the erasing process, when the mask layer above is erased, parts of the bottom image are revealed.

<figure><img src="/files/XGljyiLsnoPQNP9dArNf" alt=""><figcaption></figcaption></figure>

**3）Custom Layer**

You can add custom layer groups and need to set their names and whether they can be erased.

* If erasable, similar to the mask layer, during the erasing process, all layers under this group can be erased.
* If not erasable, similar to the bottom image, it cannot be erased.&#x20;

Custom Layer Application Scenario: Used to set some special layers.&#x20;

For example, obstacles: These layers are neither masks nor bottom images but cannot be erased. You can use events to control the effects triggered when the erase brush encounters these layers during the erasing process.

<div align="left"><figure><img src="/files/xkSbuXGMYc46k48s2m64" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Part3：Event Judgment**</mark>

Event Judgment parameters:  Determine whether the erasure of a certain area has reached a certain percentage (e.g., whether the mask layer has been erased by 80%), and use this as the trigger condition for subsequent events.&#x20;

For example, when lifting the hand, if the mask layer area is erased by more than 80%, it triggers the subsequent scene transition event. The judgment of 'more than 80%' needs to be set through the 'Event Judgment'.

<div align="left"><figure><img src="/files/7v41BAFnou8O7lV6pcrI" alt=""><figcaption></figcaption></figure></div>

**1）Timing of Judgment**

Timing of Judgment is divided into two categories: Judgment upon lifting finger & Real-time judgment during erasure process.

* Judgment upon lifting finger: Determine the erasure situation of the area when lifting the hand after erasing.
* Real-time judgment during erasure process: Calculate in real-time during the erasing process, if the erasure area reaches the set stage. (This option may cause performance issues; it is recommended not to set it to real-time judgment unless necessary)

**2）Event Judgment**

2-1）Region Selection for Detection

You can choose several mask layer images or several custom areas.

<div align="left"><figure><img src="/files/VnY0o91FfDiIZXUmVEnU" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:yellow;">Custom Detection Regions</mark>

* Adding Custom Detection Regions: Click on "Add/Manage Custom Detection Regions" to bring up a popup window. Then click on "Add Custom Judgment Area" and edit the name and add rectangle to complete the addition.
* Adding Rectangles: Click on "Add Rectangle" to add multiple rectangles on the canvas and edit their positions and sizes. If multiple rectangles are added, the range will be the union of all the rectangles.
* Each custom region can be previewed, edited, copied, or deleted.

<div align="left"><figure><img src="/files/hs5g4sx4L2qzNubS8acv" alt=""><figcaption></figcaption></figure></div>

2-2）Stage Settings

* Add a new stage by clicking the 'New Stage' button.
* Set the specific values of the stage by setting the percentage of each node. (For example, reaching 60% is Stage 1; reaching 80% is Stage 2)  And use this as a trigger for subsequent events.

<div align="left"><figure><img src="/files/zC67Lj4AKcyWokQHC4Zu" alt=""><figcaption></figcaption></figure></div>

### 5.Parameter: Event

The 'Erase Component' has unique trigger events and response events.

<mark style="background-color:red;">**5-1）Trigger event**</mark>

The Erase Component includes four unique trigger events: 'Start Erasing', 'Lift Finger', 'Reach a certain stage', and 'Not reached a certain stage', <mark style="color:red;">which can only be configured under the 'Erase Component'.</mark>

<div align="left"><figure><img src="/files/JFWeWHF09c9FLJXGFUAK" alt=""><figcaption></figcaption></figure></div>

1）Start Erasing: Pressing a finger and moving it to an erasable area is considered triggering the start of erasing.

2）Lift Finger: After triggering the start of erasing, lifting the finger is considered triggering the 'Lift Hand' event.

3）Reach a certain stage: Based on the conditions set in 'Event Judgment', reaching a certain stage is considered triggering 'Reach a certain stage'.

4）Not reached a certain stage: Based on the conditions set in 'Event Judgment', whether not reaching a certain stage upon lifting the hand/real-time judgment, if so, it is considered triggering 'Not reached a certain stage'.

<mark style="color:red;">NOTE: For the above trigger events, you can set them to 'Valid only once'. If not checked, the event can be triggered repeatedly; if checked, it triggers only once.</mark>&#x20;

<div align="left"><figure><img src="/files/8XnFHUavMfdlyvqvGDJl" alt="" width="533"><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**5-2）Response event**</mark>

The unique 'Response events' of the 'Erase Component' include: ①Enable/Disable Erase Component、②Clear Erase Marks、③Show/Hide Groups、④Enable/Disable Erasable Groups、⑤Show and Play/Pause All Frames of Group、⑥Play/Pause/Resume Single Animation of Group  Single Animation/All Animations of Group、⑦Replace the image following the finger.

These response events can be set at any position under the condition of adding an 'Erase Component'.

<div align="left"><figure><img src="/files/QcEF4dq4iNOorsrSUzB1" alt=""><figcaption></figcaption></figure></div>

**1）Enable/Disable Erase Component**

Upon triggering, the Erase Component can be disabled or enabled again.

*For example, if set to "Lift Finger - Disable Erase Component," it means that when the erasing is completed and the user lifts their finger, the Erase Component will be disabled and no longer function.*

<div align="left"><figure><img src="/files/SESclUCpQFJNJfgskZtw" alt=""><figcaption></figcaption></figure></div>

**2）Clear Erase Marks**

Upon triggering, it clears the completed erasing traces within the component.&#x20;

*For example, if set to "Lift Finger - Clear Erase Marks", the effect comparison is as shown in the figure.*

<div align="left"><figure><img src="/files/sKMUQM8hCcYUqT64g3ms" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/ZefeymwpAtMDYtN064C4" alt=""><figcaption></figcaption></figure></div>

**3）Show/Hide Groups**

You need to select a group (mask layer, bottom image, or custom layer) to show/hide all layers under that group.

*For example, if set to "Reach a certain stage - Hide the mask layer"*

<div align="left"><figure><img src="/files/2bwdEs4xn8NJCrP5XxfX" alt=""><figcaption></figcaption></figure></div>

**4）Enable/Disable Erasable Groups**

You need to select an erasable group (mask layer or erasable custom group) to allow/prevent erasing.

*For example, if set to "Reach a certain stage - Disable the mask layer", then after erasing reaches the specified stage, the mask layer can no longer be erased.*

<div align="left"><figure><img src="/files/wVAU8IGpO5j3fSjcwVsH" alt=""><figcaption></figcaption></figure></div>

**5）Show and Play/Pause All Frames of Group**

You need to select a group and play/pause all sequence frame layers under that group.

<div align="left"><figure><img src="/files/BP25lHFu2vMjWtikFvhl" alt=""><figcaption></figcaption></figure></div>

**6）Play/Pause/Resume Single Animation of Group  Single Animation/All Animations of Group**

You need to select a group and play/pause/continue playing animations of a single/ all layers under that group.

<div align="left"><figure><img src="/files/e6IyRMlulhYYUd1yL0Hg" alt=""><figcaption></figcaption></figure></div>

**7）Replace the image following the finger**

You need to select a specific Image following fingers. After triggering, the current Image following fingers will be replaced by the picture set here.

*For example: after triggering, the Image following fingers changes from picture1 to picture2.*

<div align="left"><figure><img src="/files/1tTNhB0m8TgsbuFh8LqR" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/MHzNAC8yNn8UZQ9hQxWH" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">📒Erase Component</mark> <mark style="color:blue;"></mark><mark style="color:blue;">**FAQs**</mark>

#### Q1: I set up "Lift up" events (e.g., Lift up - pause erase sound; Lift up - trigger vibration feedback) using the Erase Component, but during preview, I found that “the player didn’t raise their hand but still triggered the Lift up event.” What is the reason for this?

**A:** This may be due to the size of the Mask image being too small. <mark style="color:red;">The area that players can erase is = the size of the Mask image.</mark> When a player's finger goes beyond the Mask's range, the system will determine it as a "Lift up," inadvertently triggering the Lift up event.

**Solution:** a. Upload any image in the Mask group, adjusting its size to your desired erasing range, and then set the transparency of that image to 0;  b. Alternatively, enlarge the Mask image size externally first, and then replace the current image.

#### Q2: What is the core logic for creating a simulation dress-up gameplay using Erase Component?

**A:** ①Set \[Stroke Style];  ②Add \[Image following fingers], such as a makeup brush or particle effects, to move with the player's finger;  ③Add the Mask image and the background image, using the mask to reveal the background;  ④Choose the timing for judgment and set event conditions;  ⑤Set events for the component.


# Mask Component

\#Content Editor #Template Content Creation #Blank Canvas

✨Entrance of Template Content Creation：Work Preview Area>>>Mask Component button  / Layer Area>>>Mask Component

<figure><img src="/files/EDGlNkQyzU3lmRooj1OU" alt=""><figcaption></figcaption></figure>

✨Entrance of Blank Canvas：Gameplay Template>>>Component>>>Mask Component

<div align="left"><figure><img src="/files/9OfJBr0DTJqC0fDkLWpX" alt=""><figcaption></figcaption></figure></div>

Related case tutorial can refer to [Mask Component - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/painting-gameplay-cases/mask-component-blank-canvas-tutorial)

####

## <mark style="color:blue;">📒Mask Component Intro</mark>

* Underlying logic: The "Mask Shape" controls the visible portion of the "Masking Group," which means that the image inside the "Masking Group" will be visible within the covered area of the "Mask Shape" and hidden outside the covered area.
* The Mask Component can be used in both "**Blank Canvas**" and "**Template Content Creation**."  With Content Creation, you can adjust the components based on the gameplay of the original template. With Blank Canvas or adding a new component, you need to complete the settings for parameters such as "Exterior," "Mask Shape," and "Masking Group."
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Mask Component Sample Cases</mark>

It is suitable for gameplay where the mask layer can be adjusted by clicking, dragging, or other interactive methods to reveal the target image.

* Sample1 - [Select and slide to color](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001531%252F13444%252Fpv%252F24%252F08%252F12%252F66b9cfbc1d266%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E9%80%89%E5%9B%BE%E6%BB%91%E5%8A%A8%E4%B8%8A%E8%89%B2\&language=undefined)
* Sample2 - [Magnifier Puzzle](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001595%252F13516%252Fpv%252F24%252F11%252F13%252F673416fe361eb%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%94%BE%E5%A4%A7%E9%95%9C%E8%B0%9C%E9%A2%98\&language=undefined)
* Sample3 - [Click to Color](https://tinyurl.com/ykrebstj)
* Sample4 - [Click to Color](https://tinyurl.com/2eemxpa9)

####

## <mark style="color:blue;">📒Mask Component Instruction</mark>

The parameters that can be adjusted for the "Mask Component" are divided into four parts: Exterior, Animation, Mask Settings, and Event.

### 1. Exterior

* Enable Component: You can enable or disable the Mask Component by adjusting the toggle switch under the "Exterior" parameters (enabled by default).
* The usage of other parameters is the same as regular layers and will not be further explained here. <mark style="color:red;">Please note that when adjusting the exterior parameters of the Mask Component (such as position and size), all layers within the component will change accordingly.</mark>

<div align="left"><figure><img src="/files/HNi2fp0sSRxgis0eRO7P" alt=""><figcaption></figcaption></figure></div>

### 2. Animation&#x20;

The animation set here applies to the entire Mask Component.&#x20;

The specific usage is the same as regular layers and will not be further explained here.

<figure><img src="/files/4BzXtmxQSj6bKFLC7kxw" alt=""><figcaption></figcaption></figure>

### 3. Mask Settings

A "Mask Component" should include at least one "Masking Group."&#x20;

The "Mask Group" (Mask Settings) consists of three parts: Mask Shape, Masking Group, and Custom Group (optional).

<mark style="color:red;">Please Note: "Mask Settings" are the core parameters of the Mask Component, so please make sure to complete the settings for each part.</mark>

<figure><img src="/files/5U9Df0x2yrJshPZWyo7G" alt=""><figcaption></figcaption></figure>

#### 3.1 Mask Group

Add New: Support adding a new Mask Group by entering a new Mask Group name.&#x20;

Add Animation: You can add animations to the Mask Group, and the animation will affect all elements within the group once added.

Show/Hide:  You can adjust the visibility of the Mask Group, which applies to all elements within the group (default is visible).

<div align="left"><figure><img src="/files/8JDDGSQ8almOAspN0XrQ" alt=""><figcaption></figcaption></figure></div>

#### 3.2 Mask Shape

<mark style="background-color:red;">**Shape**</mark>：The range covered by the Mask Shape, the images within the Masking Group are displayed, and the parts not covered by the mask are not shown.&#x20;

* The Mask Shape can choose 'Rectangle' or 'Circle', and can adjust its 'Exterior', 'Animation', and 'Event' parameters.
  * Exterior：Adjust the position\&size, scale, and rotation of the shape.&#x20;
  * Animation：You can set animations for the shape.&#x20;
  * Event：You can set events for the shape. (You can set a 'Drag' event, making the material movable in the actual trial play.)
* You can click "Preview Mask Effect" to preview the position and size of the current Mask Shape within the canvas.

<div align="left"><figure><img src="/files/jZUWBYFDoSRHTih8RsC9" alt=""><figcaption></figcaption></figure></div>

<mark style="background-color:red;">**Follow Element**</mark> (optional): After setting a Follow Element, you need to add a "Drag" event to the shape. Once set up, the Follow Element will move synchronously with the dragging of the shape.

* You can add multiple images as the 'Follow Element' of the shape. By clicking the "+" button on the right side and selecting from the asset library.
* You can click to adjust its "Exterior," "Animation," and "Event" parameters, just like with regular layers.

<div align="left"><figure><img src="/files/jmPV5WsZ9piEwn4NNAfU" alt=""><figcaption></figcaption></figure></div>

#### 3.3 Masking Group

The images within the "Masking Group" will be displayed only within the coverage area defined by the "Mask Shape," while the portions outside the coverage area will be hidden.

* You can add multiple masking elements by clicking the "+" button on the right side and selecting from the asset library.
* You can click to adjust its "Exterior," "Animation," and "Event" parameters, just like with regular layers.

<figure><img src="/files/wx0C5y0oFfBrMpPMfJJY" alt=""><figcaption></figcaption></figure>

#### 3.4 Custom Group

<mark style="color:red;">The "Custom Group"</mark> as part of the Mask Component, can scale and adjust position along with the Mask Component, but <mark style="color:red;">is not affected by the mask and will not be masked.</mark> (For example, you can add a black-and-white base image corresponding to the "Masking Group" into the custom group. When the "Mask Shape" covers the "Masking Group," it displays the colored image of the "Masking Group," while other parts display the black-and-white base image.)

Users can decide whether to add the "Custom Group" based on their creativity and needs.

<figure><img src="/files/R6ZBHwYcuTRrgrGLPkng" alt=""><figcaption></figcaption></figure>

### 4.Event

The unique **response events** for the Mask Component include：Enable/Disable Mask Component, Enable/Disable Mask Groups, Show/Hide Mask Groups, Show/Hide Groups, Show/Hide Mask Effect.

<div align="left"><figure><img src="/files/sDNTiKbZ3Bo0r76J1BQL" alt=""><figcaption></figcaption></figure></div>

#### 4.1 Enable/Disable Mask Component

You need to choose to enable/disable.&#x20;

If disabled, it is equivalent to disabling all Mask Groups, and the events of all mask layers and masked layers under the mask group will not take effect.

<div align="left"><figure><img src="/files/hUdDVvWh0HTus0hPA3LW" alt=""><figcaption></figcaption></figure></div>

#### 4.2 Enable/Disable Mask Groups

You need to choose to enable/disable.&#x20;

If disabled, the events of all mask layers and masked layers under the Mask Group will not take effect.

<div align="left"><figure><img src="/files/gV76OzJBLtYKQPyj4Vux" alt=""><figcaption></figcaption></figure></div>

#### 4.3 Show/Hide Mask Groups

You need to choose to show/hide a specific Mask Group.&#x20;

Upon selection, all elements within the chosen Mask Group will be shown or hidden.

<div align="left"><figure><img src="/files/ZJAvxbbvTbKBwZH8cWpO" alt=""><figcaption></figcaption></figure></div>

#### 4.4 Show/Hide Groups

You need to choose to show/hide a specific Group.&#x20;

Upon selection, all elements within the chosen group will be shown or hidden.

<div align="left"><figure><img src="/files/8cg770ThtubjYn93dzhi" alt=""><figcaption></figcaption></figure></div>

#### 4.5 Show/Hide Mask Effect

You need to choose to show/hide a specific Mask Group.&#x20;

If the mask effect is enabled, the Masking Group will be affected by the Mask Shape and displayed. If disabled, the Masking Group is not affected by the Mask Shape and is displayed directly.

<div align="left"><figure><img src="/files/WutPZwA8YnRTCZPYeHLy" alt=""><figcaption></figcaption></figure></div>


# Carousel Component

\#Content Editor #Template Content Creation #Blank Canvas

✨Entrance of Template **Content Creation**：Work Preview Area>>>Carousel Component button  / Layer Area>>>Carousel Component

<div align="left"><figure><img src="/files/4G4nwgXHI4BLaxf7EeEG" alt=""><figcaption></figcaption></figure></div>

✨Entrance of **Blank Canvas**：Gameplay Template>>>Component>>>Carousel Component

<div align="left"><figure><img src="/files/Yvlx2ZWVXNkT52n9H23k" alt=""><figcaption></figcaption></figure></div>

Related case tutorial can refer to  [Carousel Component - Blank Canvas Tutorial](/playturbo-case-study/playable-content-editor/carousel-and-display-gameplay-cases/carousel-component-blank-canvas-tutorial)

####

## <mark style="color:blue;">📒Carousel Component Intro</mark>

* The Carousel Component can be used in both "Blank Canvas" and Template "Content Creation."&#x20;
* With Content Creation, you can adjust the components based on the gameplay of the original template.
* For Blank Canvas or adding a new component, at least the following parameters need to be set: "Carousel style selection," "Resource group," "Slot configuration," "Interaction methods," and "Advanced settings."  Only then will the Carousel Component take effect.
* <mark style="color:red;">Note: Only one component can be added per scene, but component can be added across scenes or copied.</mark>

####

## <mark style="color:blue;">📒Carousel Component Sample Cases</mark>

It is suitable for automatic/manual image carousel-style gameplay.

* Sample1 - [Catch your coupon](https://tinyurl.com/nzt7kftj)
* Sample2 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Switch multiple items](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001711%252F13679%252Fpv%252F24%252F10%252F28%252F671f43c686352%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%A4%9A%E8%A6%81%E7%B4%A0%E5%B1%95%E7%A4%BA%E5%88%87%E6%8D%A2\&language=undefined)
* Sample3 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Slick Loop Display](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001666%252F13599%252Fpv%252F24%252F10%252F11%252F6708efe81ab47%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E4%B8%9D%E6%BB%91%E5%BE%AA%E7%8E%AF%E5%B1%95%E7%A4%BA\&language=undefined)
* Sample4 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Image Carousel](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001723%252F13713%252Fpv%252F24%252F11%252F07%252F672c555595291%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%BE%AA%E7%8E%AF%E5%B1%95%E7%A4%BAv4\&language=undefined)

####

## <mark style="color:blue;">📒Carousel Component Instruction</mark>

The adjustable parameters of the "Carousel Component" can be divided into four parts: Exterior, Animation, Carousel Settings, and Event.

### 1. Exterior

* **Enable Component:** You can enable or disable the Carousel Component by adjusting the toggle switch under the "Exterior" parameters (enabled by default).
* **Clip on overflow:** If the "Clip on overflow" option is enabled, images that exceed the component's boundaries will not be displayed (No crop by default).
* The usage of other parameters is the same as regular layers and will not be further explained here. **Please note that when adjusting the exterior parameters of the Carousel Component (such as position and size), all layers within the component will change accordingly.**

<figure><img src="/files/ZTt716KO54F2rMWETwim" alt=""><figcaption></figcaption></figure>

### 2. Animation&#x20;

The animation set here applies to the entire Carousel Component.&#x20;

The specific usage is the same as regular layers and will not be further explained here.

### 3. Carousel Settings

The Carousel Settings include five parameter sections. You need to first configure the "Style selection" and then proceed with the settings for "Resource group," "Slot configuration," "Interaction methods," and "Advanced settings," and other parameters.

<mark style="color:red;">Please Note: "Carousel Settings" are the core parameters of the Carousel Component, so please make sure to complete the settings for each part.</mark>

<div align="left"><figure><img src="/files/89F3C4taofEhVT98JESI" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.1 Carousel style selection</mark>

Currently, there are five supported carousel styles (you can refer to the animation in the thumbnails for specific effects):

* **Regular carousel:** Cards are arranged with default spacing and display multiple cards simultaneously. A carousel where there is **movement** during switching.
* **Zoom in/out carousel:** Cards are positioned at the same location by default, displaying one card at a time. A carousel with **in-place scaling** during switching.
* **Scroll zoom carousel:** Cards are densely arranged by default. A carousel with **scaling and movement** during switching.
* **Fade in/out carousel:** Cards are arranged with default spacing, displaying one card at a time. A carousel with **movement and opacity changes** during switching
* **Fade zoom carousel:** Cards are arranged with default spacing, displaying one card at a time. A carousel where there is **scaling, movement, and opacity changes** during switching.

<div align="left"><figure><img src="/files/yyBqOGtndEr1NadS6KG7" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.2 Resource group</mark>&#x20;

The "Resource group" is used to add elements to be displayed and set element parameters.&#x20;

<mark style="color:red;">A resource group can contain one or multiple carousel groups, and each carousel group supports adding one or multiple images.</mark>

**3.2.1 Single Carousel Group**

* Upload Carousel Images: Click the "+" button to select images from the asset library or project assets and add them to the carousel group.&#x20;
* Replace Carousel Images: Click the icon button (blue) to replace the current carousel image.&#x20;

<div align="left"><figure><img src="/files/w0tJUk2dTgq2f4zQWXHh" alt=""><figcaption></figcaption></figure></div>

* Supports setting the carousel group or carousel images as "Visible" or "Hidden."&#x20;
* Supports deleting the carousel group or carousel images.&#x20;
* Supports dragging and moving the position of the carousel group or carousel images.&#x20;

<div align="left"><figure><img src="/files/usw3ZdOCemDV0iQ5dy4L" alt=""><figcaption></figcaption></figure></div>

* Clicking on the carousel group brings up the "Exterior" parameter popup, where you can adjust the overall size of the carousel group, "Slot size," and "Slot spacing."&#x20;
  * **Slot size:** refers to the size of each image slot. The images placed in the slots are adapted based on the longest side.&#x20;
  * **Slot spacing:** determines the distance between the center points of each slot.
  * Slot Scale Ratio: Corresponds to the size ratio of the carousel group and is for reference purposes only. It does not support adjustment.

<div align="left"><figure><img src="/files/mqe0L6hq13qJsDJK3JAw" alt="" width="502"><figcaption></figcaption></figure></div>

Effect Example:&#x20;

<div align="left"><figure><img src="/files/02s4W7UlqlQ6qLy8g4sI" alt="" width="563"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/khuycmXaph4ybRsUdLpD" alt="" width="563"><figcaption></figcaption></figure></div>

* Clicking on a single carousel image brings up a popup where you can set the "Resource category" and "Event" for that image.&#x20;
* You need to first "Add Categories" and customize the category before selecting the corresponding category.&#x20;
* The "Resource category" is used to determine the timing of event success or failure.

<div align="left"><figure><img src="/files/4OFcCuRqGF6Yu6QHsbdC" alt=""><figcaption></figcaption></figure></div>

For example, in [this demo material](https://tinyurl.com/e4wzf5aj), three resource categories were added: "Pink," "Gray," and "Green" with three different styles.&#x20;

You can set events such as triggering subsequent events when the character's head, body, and feet change to the same style (i.e., the same resource category).

<div align="left"><figure><img src="/files/sDZ4biPxTIk0ZYsgNDV0" alt=""><figcaption></figcaption></figure></div>

**3.2.2 Add Carousel Group**

* Add Carousel Group: Clicking the icon button allows you to create a new carousel group.&#x20;
* Carousel groups can be dragged to adjust their positions.&#x20;
* The use case of adding multiple carousel groups: In [this demo material](https://tinyurl.com/e4wzf5aj), multiple carousel groups are used to control the carousel transitions of different body parts with different styles.

<div align="left"><figure><img src="/files/jZux3qsjJdvhPeE4TIDt" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.3 Slot configuration</mark>&#x20;

Slot configuration include "Arrangement method" and "Number of slots."&#x20;

* **Arrangement method:** Single selection. Choose between horizontal or vertical.&#x20;
  * If horizontal is selected, the carousel will scroll from left to right.&#x20;
  * If vertical is selected, the carousel will scroll from top to bottom.&#x20;
* <mark style="color:red;">**Number of slots:**</mark> <mark style="color:red;"></mark><mark style="color:red;">Determines the number of slots in the carousel.</mark>&#x20;
  * Note: The slot in the middle is slot 1.  For example, if there are 5 slots, the slot numbers from left to right correspond to 4-5-1-2-3.

<div align="left"><figure><img src="/files/MHpt5ERJ4AcoK3L7hxNl" alt=""><figcaption></figcaption></figure></div>

**💡 Relationship between "Number of slots" and "Uploaded Image Count"**&#x20;

* When the image count is greater than the number of slots: Some images will be hidden. As the carousel progresses, some images will be hidden while others are displayed for the carousel transition.&#x20;
* When the image count is equal to the number of slots: All images are displayed in their corresponding slots for the carousel transition.&#x20;
* When the image count is less than the number of slots: All images will be displayed, placed in each slot according to the existing resources in order.

<div align="left"><figure><img src="/files/dihITkiuDTO0BGIHONrK" alt=""><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.4 Interaction methods</mark>

The "Interaction methods" includes "Playback settings" and "Interaction methods."&#x20;

* **Playback settings:** Automatic or Manual. At least one option must be selected, and multiple selections are supported.&#x20;
  * Selecting "Automatic" only: No need to set the "Interaction methods." The carousel will play automatically.&#x20;
  * Selecting "Manual" only: You need to continue selecting "Interaction methods."  The carousel requires manual interaction by the player to switch.&#x20;
  * Selecting both: You need to continue selecting "Interaction methods." The carousel will autoplay and also support manual switching.

<div align="left"><figure><img src="/files/QA4RKahOgda8aZGf3Iig" alt=""><figcaption></figcaption></figure></div>

* **Interaction methods** (selected when "Manual" is chosen in Playback settings): Tap or Drag. At least one option must be selected, and multiple selections are supported.&#x20;
  * Selecting "Drag" only: Supports switching through dragging.&#x20;
  * Selecting "Tap" only: Switching is done by clicking on the carousel buttons.&#x20;
  * Selecting both: Supports switching through clicking the buttons and dragging.

<div align="left"><figure><img src="/files/5pxASr006Gg5lDaOPUzt" alt=""><figcaption></figcaption></figure></div>

* **Carousel arrows** (settings available when "Tap" is selected):&#x20;
  * Supports showing/hiding the buttons.&#x20;
  * Clicking the replace button allows selecting an image from the asset library or project assets to replace the button style.&#x20;
  * Clicking on a single button image brings up a popup where you can adjust the exterior of the button.

<div align="left"><figure><img src="/files/eWa40p5Og5qavYVXETep" alt="" width="501"><figcaption></figcaption></figure></div>

#### <mark style="background-color:red;">3.5 Advanced settings</mark>&#x20;

You can adjust the parameters of the carousel animation.&#x20;

* **Animation dewell time:** <mark style="color:red;">A specific parameter for automatic carousel.</mark> This parameter determines how long to wait before switching to the next image (e.g., if set to 1s, it will wait for 1 second after completing a switch before moving to the next image).&#x20;
* **Animation playback duration:** When set to <mark style="color:red;">automatic carousel or tap carousel</mark>, this parameter determines the duration of the animation (e.g., if set to 0.5s, the animation for switching images will take 0.5 seconds).&#x20;
* **Opacity:** The maximum and minimum values determine the maximum and minimum opacity during the animation. Numeric range is from 0 to 1.
* **Scale:** The maximum and minimum values determine the maximum and minimum scale during the animation.Numeric range is from 0 to 1.

💡Note: When adjusting Opacity and Scale parameters, the effects will be displayed in real-time on the canvas.

<div align="left"><figure><img src="/files/fhr5Bo11zI1C3BgqVUJP" alt=""><figcaption></figcaption></figure></div>

### 4.Event

The "Carousel Component" has unique trigger events and corresponding response events.&#x20;

**Trigger events** include: "On carousel switch," "To a specific resource," "To a specific category."&#x20;

Related **response events** include: "Enable/Disable Carousel Component," "Enable/Disable Carousel Groups," "Pause/Play carousel group," "Restart carousel," "Delete carousel resources," "Dwell time."

<div align="left"><figure><img src="/files/p7wBJMzu8x7svFzp62ah" alt=""><figcaption><p><strong>Trigger Event</strong></p></figcaption></figure></div>

<div align="left"><figure><img src="/files/Jg1sstKGHBOglp5tN6gs" alt=""><figcaption><p><strong>Response Event</strong></p></figcaption></figure></div>

#### <mark style="background-color:red;">**4.1 Trigger Event**</mark>

| Trigger Event              | Trigger Settings                                                                                                                                                                                                        | Screenshot                                                          |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| **On carousel switch**     | <p>-Select the corresponding carousel group.</p><p>-Trigger occurs when the selected carousel group completes a carousel transition and stops, triggering the response event.</p>                                       | <img src="/files/G8yOxjj4jFTRxAT13Htb" alt="" data-size="original"> |
| **To a specific resource** | <p>-Select the corresponding carousel group and the resource within the group.</p><p>-Trigger occurs when a specific resource completes the carousel transition and stops, triggering the response event.</p>           | <img src="/files/Tk7G3zFcc6bB0F062kCQ" alt="" data-size="original"> |
| **To a specific category** | <p>-Select the corresponding carousel group and the resource category.</p><p>-Trigger occurs when a resource from the corresponding category completes the carousel transition and appears in the display position.</p> | <img src="/files/aZKgAHhYyxwCs4LxSGn9" alt="" data-size="original"> |

#### <mark style="background-color:red;">**4.2 Response Event**</mark>

| Response Event                        | Response Settings                                                                                                                                                                                                                                                                | Screenshot                                                          |
| ------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
| **Enable/Disable Carousel Component** | <p>-If disabled, <strong>all carousel groups</strong> stop the carousel and disable related carousel functionalities and events for the carousel group's image resources. </p><p>-If enabled, the opposite occurs.</p>                                                           | <img src="/files/FUtpM6Zotky3eskQRaIn" alt="" data-size="original"> |
| **Enable/Disable Carousel Groups**    | <p>-Select the corresponding carousel group.</p><p>-If disabled, <strong>the selected carousel group</strong> stops the carousel and disables related carousel functionalities and events for the carousel group's image resources. </p><p>-If enabled, the opposite occurs.</p> | <img src="/files/5wJ7xoMkIHfOGvrSGL4A" alt="" data-size="original"> |
| **Pause/Play carousel group**         | <p>-Select the corresponding carousel group.</p><p>-If paused, and <strong>the selected carousel group is set to "Automatic" carousel</strong>, the automatic carousel is paused. </p><p>-If played, the opposite occurs.</p>                                                    | <img src="/files/qicDxHMVJZwROOABa3OO" alt="" data-size="original"> |
| **Restart carousel**                  | <p>-Select the corresponding carousel group.</p><p>-<strong>The selected carousel group</strong> returns to its initial state and restarts the carousel.</p>                                                                                                                     | <img src="/files/QE98axK5ccbtwm5hxqe9" alt="" data-size="original"> |
| **Delete carousel resources**         | <p>-Select the corresponding carousel resource.</p><p>-<strong>The selected carousel resource</strong> is deleted.</p>                                                                                                                                                           | <img src="/files/D6GKUf1SGoCDMtpP12tm" alt="" data-size="original"> |
| **Dwell time**                        | If set to **"Automatic Carousel,"** the time delay determines the duration for which each image stays before switching to the next one.                                                                                                                                          | <img src="/files/tXwPE8AyTC14V6qRGoaE" alt="" data-size="original"> |


# Quick Layout-Grid Board Layout

\#Content Editor #Template Content Creation

✨Entrance 1 of Template Content Creation：Gameplay Template>>>Quick layout

✨Entrance 2 of Template Content Creation：Simply click on the "Quick layout" icon next to the canvas.

<figure><img src="/files/g31yggv6bJdUipPlqSBk" alt=""><figcaption></figcaption></figure>

Related case tutorial can refer to [Grid Board Layout - Template Content Creation](/playturbo-case-study/playable-content-editor/elimination-and-match-gameplay-cases/grid-board-layout-template-content-creation)

####

## 📒<mark style="color:blue;">Grid Board Layout Intro</mark>

* Grid Board Layout is currently only supported in the **"Content Creation"** mode and is not available for "Blank Canvas."
* By adjusting parameters such as grid layout, grid background, element style, and element layout in the Grid Board Layout, you can create Grid Board Layouts of different difficulties and styles to fulfill your creative material output.
* <mark style="color:red;">Tips: In the "Playable Templates" interface, click "Quick layout" to quickly filter templates that support</mark> <mark style="color:red;"></mark><mark style="color:red;">**Quick layout**</mark> <mark style="color:red;"></mark><mark style="color:red;">functionality!</mark>

<figure><img src="/files/xn1PgAwZcKpp7RDSTkcY" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/FPcemcnMSO3vUI03pXVh" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">📒Grid Board Layout Sample Cases</mark>

"Grid Board Layout" is suitable for gameplay that involves adjusting element layouts within a fixed area. Currently, it is used only in some elimination, puzzle, and coloring templates.

* Sample1 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Pixel color](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001714%252F13683%252Fpv%252F24%252F11%252F13%252F673418092a4d1%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%83%8F%E7%B4%A0%E6%A0%BC%E4%B8%8A%E8%89%B2\&language=undefined)
* Sample2 -[ ](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)[Shoot to Break Bricks](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001087%252F12515%252Fpv%252F24%252F02%252F20%252F65d41ddf53414%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%B0%84%E7%90%83%E6%B6%88%E9%99%A4%E7%A0%96%E5%9D%97\&language=undefined)
* Sample3 - [Match & Rescue](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20000872%252F11985%252Fpv%252F24%252F02%252F20%252F65d41d1aeed5b%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E7%82%B9%E6%B6%88%E8%A7%A3%E5%9B%B4\&language=undefined)
* Sample4 - [Square puzzle](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20000495%252F10920%252Fpv%252F24%252F02%252F20%252F65d41b66b7185%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E6%96%B9%E5%BD%A2%E6%8B%BC%E5%9B%BE\&language=undefined)

####

## 📒<mark style="color:blue;">Grid Board Layout Instruction</mark>

The parameters that can be adjusted in the "Grid Board Layout" feature are divided into two sections: "Grid," and "Element."  These settings need to be configured sequentially.&#x20;

Next, we will use the example of the template ["Match & Rescue" ](https://tinyurl.com/25ycjwpm)to provide a detailed explanation of how to use the "Grid Board Layout" feature.

### 1.Grid

#### **1）Enter the "Grid Board Layout"**

<figure><img src="/files/kzLIPAj7NvyGAz69lYsJ" alt=""><figcaption></figcaption></figure>

#### 2）**Edit Grid**

* **Number of rows and columns:**  Enter a number or click the small arrow icon to adjust the number of rows and columns on the Grid Board
* **Arrangement:** You can choose between Alignment or Column Misalignment

<div align="left"><figure><img src="/files/dOLGLtX8N3egmZVNxPwW" alt=""><figcaption></figcaption></figure></div>

* **Square BG:** You can choose to turn on/off the Square BG
* Replace the Square BG and apply it to all activated grids (default background is square, excess parts are automatically cropped)

<div align="left"><figure><img src="/files/WhqzcoW4oNHa8JMNUEMT" alt=""><figcaption></figcaption></figure></div>

* **Select/Eraser:** You can select/erase the desired grid by clicking or dragging.
* **Select All/Clear/Reset:** Click the corresponding button for quick operation.
* Note: After redesigning the Grid, please be sure to enter the Element interface for layout design.

<div align="left"><figure><img src="/files/hm0lQGL5ZhHdhYqgcvXe" alt=""><figcaption></figcaption></figure></div>

### 2.**Element**

After setting the "Grid," click on "Element" to configure the style and layout of the elements.

* **Element selection:** Open the element button to add elements to the grid; If the button is closed, it cannot be added.&#x20;
* Support for replacing element images.
* The default maximum number of element slots is 5.&#x20;

<div align="left"><figure><img src="/files/le9H56FlaydAD5Ua7pMn" alt=""><figcaption></figcaption></figure></div>

* **Arrange by weight：**&#x59;ou can choose to enable or disable it.&#x20;
* When enabled, you need to input the corresponding weight value for each element. <mark style="color:red;">Note: The total weight must equal 100% for it to apply.</mark>&#x20;
* After settings are made, click **"Apply to Grid Board."** The elements will be randomly placed within the enabled grids according to the specified weights.&#x20;
* Multiple clicks on"Apply to Grid Board" can generate different random layouts.&#x20;

<div align="left"><figure><img src="/files/5t3nT8JOvdttYORfyNGu" alt=""><figcaption></figcaption></figure></div>

If you wish to manually arrange the elements, you can use the shortcut buttons above for the respective operations.&#x20;

* **Select/Eraser:** You can fill/erase corresponding elements by clicking or dragging
* **Clear:** Click the clear button to clear all elements in the current grid

<div align="left"><figure><img src="/files/JYZvbq7E66zoSlN5xTyb" alt=""><figcaption></figcaption></figure></div>

After configuring the "Grid"and"Element,"  **please make sure to click "Confirm" for the Grid Board Layout to take effect.**

⚠️<mark style="color:red;">Please note: To adjust the Grid Board Layout, at least one \[element] must be added for the grid and template to function properly. Otherwise, the playable may not work correctly!</mark>

<figure><img src="/files/QwdMOECcR2PqAESMqEtk" alt=""><figcaption></figcaption></figure>


# Quick Layout-Parking Layout

\#Content Editor #Template Content Creation

✨Entrance 1 of Template Content Creation：Gameplay Template>>>Quick layout

✨Entrance 2 of Template Content Creation：Simply click on the "Quick layout" icon next to the canvas.

<figure><img src="/files/5VMIeV0jYd5i1V6lDWT4" alt=""><figcaption></figcaption></figure>

Related case tutorial can refer to  [\<Car parking puzzle v1> Template Content Creation](/playturbo-case-study/playable-content-editor/parking-layout-gameplay-cases/less-than-car-parking-puzzle-v1-greater-than-template-content-creation)

####

## <mark style="color:blue;">📒Parking Layout Intro</mark>

* The current "Parking Layout" only supports gameplay with a pure **top-down perspective.**
* Note: "Quick layout" is currently only available in the **"Content Creation"** of the car parking puzzle gameplay template.
* By adjusting parameters such as "Background and Roads," "Layout Elements," and "Exit" in the Quick layout, you can create parking layouts of different difficulties and styles, completing your creative content output.
* <mark style="color:red;">Tips: In the "Playable Templates" interface, click "Quick layout" to quickly filter templates that support</mark> <mark style="color:red;"></mark><mark style="color:red;">**Quick layout**</mark> <mark style="color:red;"></mark><mark style="color:red;">functionality!</mark>

<figure><img src="/files/NPJabUxmBHwnVUyI9p9y" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/Kqn2YeuCrhlb8yim7lyD" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">📒Parking Layout Sample Cases</mark>

The "Parking Layout" is suitable for gameplay types such as 'Parking Puzzle' and 'Farm Puzzle', where multiple elements are moved to release target elements or plan the best route to clear the path. Currently, it is only used in the car parking puzzle template.

* Sample1 -[ Car parking puzzle v1](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001334%252F13061%252Fpv%252F24%252F06%252F25%252F667a8605dff15%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv1\&language=undefined)
* Sample2 - [Car parking puzzle v2](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001408%252F13141%252Fpv%252F24%252F06%252F21%252F66754c9b557d9%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv2\&language=undefined)
* Sample3 - [Car parking puzzle v3](https://playable-portal.mintegral.com/common-viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fgm%252Ft%252F20001590%252F13509%252Fpv%252F24%252F09%252F03%252F66d6d93513975%252Fproject.html%253Fpreview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526ptloading%253D1%2526loading%253D1%26mw_test%3D0\&orientation=undefined\&name=%E5%81%9C%E8%BD%A6%E8%A7%A3%E8%B0%9Cv3\&language=undefined)

####

## <mark style="color:blue;">📒Parking Layout Instruction</mark>

The parameters that can be adjusted in the "Quick layout" feature are divided into three sections: "Background and Roads," "Layout Elements," and "Set Exit." These settings need to be configured sequentially.&#x20;

Next, we will use the example of the template[ "Car parking puzzle v1" ](https://tinyurl.com/z7vu93kz)to provide a detailed explanation of how to use the "Quick layout" feature.

### 1.Background and Roads

This step involves setting up the background image and road layout for the parking layout.

<div align="left"><figure><img src="/files/8CwsjyaTSCy0SUec4gIy" alt="" width="563"><figcaption></figcaption></figure></div>

#### <mark style="color:red;">1.1 Set Background</mark>

There are three adjustments available for the background: Replace Background, Set Background Appearance, and Delete Background.

<div align="left"><figure><img src="/files/G35NnyCLyuOPArzw3CoN" alt=""><figcaption></figcaption></figure></div>

**1）Replace Background：**&#x43;lick on the replace button to select an image from your personal asset library or the public asset library as the background.

<div align="left"><figure><img src="/files/dlh31qphN3kdijXFIVv2" alt="" width="498"><figcaption></figcaption></figure></div>

**2）Set Background Appearance**

* Click on the settings button to perform actions like clipping, resetting, adjusting dimensions, and scaling the background.&#x20;
* Note that currently, the feature does not support separate settings for dimensions and scaling in portrait and landscape mode. This means that the background appearance set in one screen orientation will be applied synchronously to the other screen mode.

<div align="left"><figure><img src="/files/WA0JEWKSRFtZpEMy2Tyj" alt="" width="491"><figcaption></figcaption></figure></div>

**3）Delete Background:** Click on the delete button to remove the background.

<div align="left"><figure><img src="/files/ccVUQQVJvbzf3dM8K0ny" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">1.2 Set Grid</mark>

Enter the number of rows and columns for the grid, and the width and height of each cell, to generate an m\*n grid at the center of the Background, which will serve as the game map.

<div align="left"><figure><img src="/files/HGXwXZFqOAO7agACyio8" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">1.3 Set Roads</mark>

Set some or all of the grids as "roads."

**1）Setting method**

* Click the "Select" button, choose the "Area" option, and then click or swipe on the grid to mark the desired grids as "roads."&#x20;

<div align="left"><figure><img src="/files/eyMqI1n3auqDlGRnXnUS" alt="" width="563"><figcaption></figcaption></figure></div>

* Supports "erasing" selected grids.&#x20;
* Supports one-click "Select All" or "Clear All" grids.&#x20;
* Supports undo and redo actions.

<div align="left"><figure><img src="/files/wLmQCYM9yH4XtoFvmmrR" alt=""><figcaption></figcaption></figure></div>

**2）Element placement rules** (this functionality cannot be modified in the "Car parking puzzle v1" template)

* If "Elements can only be placed on roads" is selected, the subsequent "Layout Elements" can only be placed on enabled grids.&#x20;
* If "Elements cannot be placed on roads" is selected, the subsequent "Layout Elements" can only be placed on disabled grids.&#x20;

<div align="left"><figure><img src="/files/P05SEhdo38HrspyljhNY" alt=""><figcaption></figcaption></figure></div>

After completing the setup for "Background and Roads," click on "Next" to proceed with the "Layout Elements" configuration.

### 2.Layout Elements

This step involves placing the main elements and obstacles that need to be solved in the parking layout.&#x20;

#### <mark style="color:red;">2.1 Editing Main Elements</mark>

The template already includes multiple categories of main elements, with each category displaying the corresponding "Number of Grids Occupations."

\*The "Number of Grids Occupations" determines the number of grids occupied by each element. For example, if the occupancy count is 2, the elements in that category will occupy a rectangular space of size 1x2 within the grid.

<div align="left"><figure><img src="/files/Wro8FyNzZaoXs9NkBOz0" alt="" width="563"><figcaption></figcaption></figure></div>

**1）Adding Main Elements：**&#x55;nder each category, you can upload multiple images.&#x20;

Click the "+" button to select and upload images from your personal asset library or the public asset library.&#x20;

⚠️⚠️⚠️<mark style="color:red;">**NOTE：Please add an image with the head of the element facing upward as the main element**</mark>  (<mark style="color:red;">If the orientation of element tops is inconsistent, it is recommended to first adjust them externally to have all "Tops Facing Up" before importing them into the project! Then, use the "Rotate" function for each element to adjust their orientations within the layout.</mark>).

<div align="left"><figure><img src="/files/ut7Pms8vq9Vfv9OSkiFH" alt=""><figcaption></figcaption></figure></div>

**2）Replacing Main Elements:** Click the replace button to select an image from your personal asset library or the public asset library to replace the current main element.

**3）Copying Main Elements:** Click the copy button to duplicate an identical main element.

**4）Deleting Main Elements:** Click the delete button to remove the selected main element.

<div align="left"><figure><img src="/files/llCUgC8CbFHEzS0zWMSo" alt=""><figcaption></figcaption></figure></div>

**5）Setting Main Element Appearance:** Click the settings button to clip, reset, adjust filters, and scale the main element image.&#x20;

* Note that scaling does not support separate settings for portrait and landscape modes.&#x20;
* Arrow Anchor (this functionality cannot be modified in the "Car parking puzzle v1" template): The green dot represents the arrow, and you can adjust its position by moving the green dot.

<div align="left"><figure><img src="/files/sHI627F0aEkSmHYDyent" alt="" width="498"><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.2 Editing the main elements in the grid</mark>

**1）Adding Main Elements to the Grid**

* Select the main element and click the "Select" button. Then, click on the desired grid to place the element in the grid.&#x20;

<div align="left"><figure><img src="/files/RnOMVJIGQDMpUjCgAz63" alt=""><figcaption></figcaption></figure></div>

* Supports "erasing" added main elements.&#x20;
* Supports one-click "Delete" to remove all added main elements.&#x20;
* Supports undo and redo actions.

<div align="left"><figure><img src="/files/XCx7812aZzgbrPVZi73F" alt=""><figcaption></figcaption></figure></div>

**2）Adjusting Main Element Parameters**

* After adding a main element to the grid, select the element. You can then "rotate" it and move it "up, down, left, or right."  <mark style="color:red;">(Note: When rotating elements, the system assumes the initial top orientation of the elements is facing up.)</mark>
* Click the edit button to enable the "Reverse Settings" option. Enabling this option allows the main element to move in the opposite direction, while disabling it restricts movement to the default direction.&#x20;
  * U-turn: The element turns 180 degrees before continuing forward.&#x20;

    <div align="left"><figure><img src="/files/X0O2ZTVHSnUrLPkivT2K" alt=""><figcaption></figcaption></figure></div>
  * Backward: The element moves in the opposite direction indicated by the arrow without turning.&#x20;
* Clicking "Apply to All" applies the "Reverse Settings" to all main elements.

<div align="left"><figure><img src="/files/CZOQYHrnh6Z3RQ4X9kJ0" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.3 Editing Movement Direction</mark> (This functionality is not currently available or modifiable in the Car parking puzzle v1 template)

**1）Enabling Movement Direction**

You can choose whether to enable "Movement Direction." If enabled, the elements' movement direction supports five selectable directions. If disabled, only straight movement in one direction is supported.

<div align="left"><figure><img src="/files/JP0rqta3kVZ3b96TRjgb" alt=""><figcaption></figcaption></figure></div>

**2）Setting Arrows**

* Click the "+" icon to open the asset library window and select images from your personal asset library or the public asset library to upload.&#x20;
* Upload the arrow images for each required direction sequentially <mark style="color:red;">(with the default direction for straight movement being "up").</mark>&#x20;

<div align="left"><figure><img src="/files/xt2jEhIKeZwhT2p9pMSI" alt=""><figcaption></figcaption></figure></div>

* Click the replace button to select images from your personal asset library or the public asset library to replace the current arrow image.&#x20;
* Click the settings button to clip, reset, and adjust the scale of the arrow image (scaling does not support separate settings for portrait and landscape modes).&#x20;
* Supports applying the current appearance parameters of the arrow to all arrows.&#x20;

<div align="left"><figure><img src="/files/QfV62xtaRPQDwBavDgcc" alt=""><figcaption></figcaption></figure></div>

* Supports one-click "Show/Hide" for all arrows.

<div align="left"><figure><img src="/files/VuAiqLaxrURlkaIkLjPd" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">2.4 Set Obstacle Type</mark>

**1）Enabling "Set Obstacle Type"**

You can choose whether to enable this feature. If enabled, you can set some grids as obstacles that will block the movement of main elements.

<div align="left"><figure><img src="/files/ZimVLnXU4AySHwsPwuRM" alt="" width="563"><figcaption></figcaption></figure></div>

**2）Setting Obstacles**

* Add Obstacle Type: When enabled, click the grouping button to create a new obstacle group.&#x20;
* Enter the category name and the number of grids occupied by obstacles in that category.&#x20;
* Click "Add Custom Element Type" to create multiple obstacle groups with the same or different numbers of grids.&#x20;

<div align="left"><figure><img src="/files/lrEoq5wcvOXoPk0RQBgq" alt=""><figcaption></figcaption></figure></div>

* Replacing/Copying/Setting Appearance/Deleting Obstacles: The operations are the same as for main elements.&#x20;

<div align="left"><figure><img src="/files/1Zz88DN92DTeA8agTu91" alt=""><figcaption></figcaption></figure></div>

* Adding/Editing/Deleting Obstacles on the grids: The operations are the same as for main elements.&#x20;

<div align="left"><figure><img src="/files/AyU4iFJM49XTrwz03op0" alt="" width="563"><figcaption></figcaption></figure></div>

After completing the setup for "Layout Elements," click on "Next" to proceed with setting up the "Exit."

### 3.Set Exit

This step is to set some grids in the parking layout as "exits" where main elements will continue moving out of the canvas upon reaching the exits.&#x20;

#### <mark style="color:red;">3.1 Setting Exit Types</mark>

Currently, there are two types of exits available, and you can choose either one for the setup:&#x20;

* Image: Add the selected image to the grid, and the exit will display the chosen image.&#x20;
* Area: Add the selected area to the grid, and the area itself will serve as the exit  (For ease of adjustment, the area is displayed in a semi-transparent state during editing but won't be visible or change the grid style during actual gameplay).

<div align="left"><figure><img src="/files/8M2vzUNuoo0p8Q2xEQPm" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">3.2 Editing Exits</mark>

* Replacing/Deleting "Image Type Exits": The operations are the same as for main elements.&#x20;
* Adjusting the preview color of "Area Type Exits": Click the color palette button to select a color (solely for preview style during creation).

<div align="left"><figure><img src="/files/VgEOwwc5DmehCCCImrrH" alt="" width="335"><figcaption></figcaption></figure></div>

* Adding/Editing/Deleting Exits on the canvas: The operations are the same as for main elements.&#x20;

<div align="left"><figure><img src="/files/bNOR60lLnCukDRpdWSaQ" alt="" width="563"><figcaption></figcaption></figure></div>

#### <mark style="color:red;">3.3 Setting Exit Direction</mark>

"Exit Direction" represents the movement direction after the main element reaches the exit. Two direction options are supported:&#x20;

* Any Direction: The element continues moving in the original direction upon reaching the exit.&#x20;
* Fixed Direction: The element changes direction upon reaching the exit and moves according to the specified exit direction.&#x20;

<div align="left"><figure><img src="/files/pJ9kEaqCOr6Q8qJtFtEo" alt=""><figcaption></figcaption></figure></div>

#### <mark style="color:red;">3.4 Setting Corresponding Element</mark>

**1）Each group of exits corresponds to one or more main elements, and this correspondence is set in the "Corresponding Element."**&#x20;

Taking the "Car parking puzzle v1" template as an example, the corresponding element \[target\_car2] can exit through the red area.

<div align="left"><figure><img src="/files/or2pEkfSB1RYnMNw50oe" alt="" width="563"><figcaption></figcaption></figure></div>

**2）Multiple selections are supported for Corresponding Element.**&#x20;

<div align="left"><figure><img src="/files/h0tsuP3Sz8KZVkeywUZJ" alt=""><figcaption></figcaption></figure></div>

Once adjustments have been made in all three sections, click "Finish," and the "Quick layout" will take effect.


# Content Editor - Download\&Apply

\#Content Editor

It is recommended to conduct [a project self-check](/playable-tools-content-editor/content-editor-creation-tips-center/project-self-check-guide) once your project editing is complete.

Then proceed to the download stage:

* **Step 1**: Link project information
* **Step 2**: Click the "Download" button and select the playable ad steps
* **Step 3**: Check the channels, then apply or download (if the file size exceeds requirements, compress before exporting)

## <mark style="color:blue;">1.Project Info(Associate with promoted product)</mark>

* Click on "Project Info" to bring up a pop-up window.
* Here, you can view Project Details, Export History, and Associated Promotional Products.

<figure><img src="/files/W80SkHzGTLodxsmWL6eT" alt=""><figcaption></figcaption></figure>

* Click on the "+Associate with promoted product" button, you can select “Choose from Assets” or “Add Promoted Product”.
  * **Choose from Assets：**&#x59;ou can select previously added promotional products. When needed, simply click "Select" for reuse.
  * **Add Promoted Product：**&#x59;ou will need to fill in the relevant product information. Once added, it will be saved in the assets library.

<div align="left"><figure><img src="/files/nwz43z3UpB61Izm3XFbF" alt=""><figcaption></figcaption></figure></div>

**🌟Add Promoted Product**

* Choose the product type, platform type, and enter the corresponding URL.  >>><mark style="color:blue;">For WeChat MiniGame channel, please refer to:</mark>  [Playable Upload Specifications for Networks](/export-and-deployment/playable-upload-specifications-for-networks#currently-supported-a-d-networks--test-apps-2)
* After successfully entering the app store link, the product name, package name, and logo icon are usually auto-populated.  If they do not auto-populate, please upload them manually.
* Once the information is complete, click "Confirm" to finish adding the promotional product.

<mark style="color:orange;">👉</mark>**Related content：** [/pages/CsrdnZSSQwB4jKGg3eEu#id-1.-associate-with-promoted-product](https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/pages/CsrdnZSSQwB4jKGg3eEu#id-1.-associate-with-promoted-product "mention")

<div align="left"><figure><img src="/files/yBNJcymSSlgJgLGQi2Kr" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">2.Playable ad steps</mark>

* Click the download button to open the Playable ad steps pop-up.
* Choose either **One Step** or **Two or More Steps**, depending on Number of interactions from the game start to redirecting to the app store.
* After selecting, click Download to open the download window.

<mark style="color:orange;">**💡 Why choose playable ad steps?**</mark> &#x20;

This setting mainly applies to the Mintegral channel. In the Mintegral channel, the number of trial steps in a playable determines the type of playable it is. Different types of playables may impact campaign performance, so it’s important to select the correct number of steps.

*If the playable redirects to the app store after just 1 interaction, it will be classified as an EC-type playable. If the number of interactive steps is ≥ 2, it will be classified as a PL-type playable.*

<figure><img src="/files/aoGX7gxQmNUU1YD5JqRI" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">3.Download & Apply</mark>

After confirming that the current project **version** is correct on the download page, proceed with "Download" or "Apply".

<mark style="color:red;">Both</mark> <mark style="color:red;"></mark><mark style="color:red;">**Apply**</mark> <mark style="color:red;"></mark><mark style="color:red;">and</mark> <mark style="color:red;"></mark><mark style="color:red;">**Download**</mark> <mark style="color:red;"></mark><mark style="color:red;">are ways to export playable creatives, you can choose either one:</mark>&#x20;

"Apply" means directly pushing the current playable creative to the selected ad platform, without needing to manually upload it after downloading. It’s more convenient and also enables you to analyze the creative’s performance data later through the platform's “Creative Insights” feature.

<div align="left"><figure><img src="/files/RFZG5ndGSOajFSHIIdVN" alt=""><figcaption></figcaption></figure></div>

### a. If you choose **Download**

* Click the Download button to open the window.
* Check the channels that need to be downloaded.
* Once the package size calculation is complete, click the "Download" button to complete the download of the project for that version.

  * **Download**: Downloads a compressed package containing the individual channel packages.
  * **Get link**: Downloads an Excel spreadsheet containing the links for each channel package.

  *Please note: “Get Link” means download. Each click will deduct one download quota.Subsequent clicks on “Download” will not deduct additional quota.*

<div align="left"><figure><img src="/files/bvpOIYde23rFp5RKtzxx" alt=""><figcaption></figcaption></figure></div>

### b. If you choose Apply

<mark style="color:orange;">If you choose Apply,  make sure the corresponding ad platform account is authorized first.</mark>&#x20;

👉 [Ad Account Authorization and Playable Push](/export-and-deployment/ad-account-authorization-and-playable-push)

Currently, the platform supports account authorization and apply functions for Mintegral, Unity, AppLovin, ironSource, and XMP.

**Taking Mintegral as an example:**

-Entrance 1：On the preview page, click on the "Apply" button on the right side.

<div align="left"><figure><img src="/files/6R02l6IdHJDP2AuiMnEU" alt=""><figcaption></figcaption></figure></div>

-Entrance 2：In the "Download Work" popup window, select the Mintegral channel and click on "Apply".

<div align="left"><figure><img src="/files/PvnA63rqOkDVoEjrYLQJ" alt="" width="473"><figcaption></figcaption></figure></div>

* You can choose to apply to the current delivery account or another Mintegral delivery account (selecting another delivery account requires entering the account and password).
* <mark style="color:red;">**Note:**</mark> Mintegral accounts have "main account" and "sub-account". When the playable is applied to the sub-account, the creative list of the sub-account & the main account will display this playable; when the playable is applied to the main account, the creative list of the main account & the sub-account authorized by the main account will display this playable.
* Click "Apply" to apply the assets to Mintegral's self-service advertising platform for internal review and delivery.

<div align="left"><figure><img src="/files/oGsfhlWR8m85FQCwsEYX" alt="" width="563"><figcaption></figcaption></figure></div>

* After applying, the assets will undergo a review process that typically takes 1-2 business days (please allocate sufficient time for the review based on your campaign schedule).&#x20;
* Once approved, they will be displayed on the "Mintegral Ad Delivery Platform" page：To associate the approved assets with the corresponding ad units, navigate to \<Ad Delivery> -- \<Asset Management> -- \<Playable Ads>, select the corresponding assets, and click "Apply in Offer." This will complete the process of putting the assets online.

<div align="left"><figure><img src="/files/jOfRlOr0PE5b8XVKMmUV" alt=""><figcaption></figcaption></figure></div>

⚠️<mark style="color:red;">Please Note:  Downloading playables from the Mintegral channel to local storage is not supported at the moment. Only Push is supported.</mark>

## <mark style="color:blue;">4.Compress the work</mark>

If a package exceeds the size limit of a specific channel, it cannot be Get Link / Download / Push. You must first reduce the package size before proceeding: *Further compress the assets and return to the editing page to replace them*, or *Compress the entire package directly in the Download Work pop-up window.*

<div align="left"><figure><img src="/files/YcCZuVFT2s0BJMRlUDRT" alt="" width="373"><figcaption><p>The size limit of each channel's package can be viewed during "download"</p></figcaption></figure></div>

### a. Smart compression

* Check the channels for which you want to compress the package.
* Click to select: smart compression，and adjust the quality of the work.
* Click "Apply and calculate" to finish smart compression.
* Support package compression <mark style="color:red;">**preview**</mark> mode.

<div align="left"><figure><img src="/files/bC7nBd1voMRUsjJigX5c" alt="" width="536"><figcaption></figcaption></figure></div>

### b. Custom compression

* Check the channels for which you want to compress the package.
* Select 'Custom compression' to adjust image quality, video quality, and audio quality separately.
* After adjusting, click 'Apply and calculate' to complete the custom compression.
* Support package compression <mark style="color:red;">**preview**</mark> mode.

<div align="left"><figure><img src="/files/kD1AZ6y2iw52yd5MS6eb" alt="" width="529"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">5.PL Tracking Management</mark>

* In the  "Download Work" popup window, click on "PL Tracking Management" to navigate to the corresponding page.&#x20;

<div align="left"><figure><img src="/files/iYqgIDv2dQxItKlfe7PA" alt=""><figcaption></figcaption></figure></div>

* On this page, you can select whether to enable tracking for the respective channels.&#x20;
* When selected, the embedded code will be added to all playable creatives downloaded/applyed through the corresponding channels. If not selected, the code will not be added. It is recommended to enable the addition of tracking points as it will enable advanced analysis functions such as interactive data analysis, scene analysis, and user journey analysis for the creatives.
* Currently, only the channels shown in the image below are supported. Please contact your AM for support on other channels.

For related information you can refer to  [Creative Insights](/creative-insights)

<div align="left"><figure><img src="/files/78AOepvRVmthagkhnmEi" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">6.Playable Upload Specifications for Networks</mark>

[Playable Upload Specifications for Networks](/export-and-deployment/playable-upload-specifications-for-networks)

## <mark style="color:blue;">7.Version Definition (Regarding Download Count Deduction)</mark>

After jumping to the download page, you'll see project version info displayed on the right.

<mark style="background-color:red;">**⚠️Please Note: Playables with identical content are considered the same version.**</mark> &#x20;

* <mark style="color:red;">If you make any edits to the project content after exporting, such as editing text or replacing product information, a new version will be generated. Exporting this new version will result in an additional deduction from your download quota. Please make sure to review and confirm that all materials are correct before exporting.</mark>
* Each version corresponds to a creative name, and if material analysis is conducted later, the corresponding creative name will be displayed.&#x20;

<div align="left"><figure><img src="/files/xFGdzkALqB8K8S1TUdC3" alt=""><figcaption></figcaption></figure></div>

**1）Latest Version**&#x20;

* You can perform download and apply operations on the "Latest Version" (the current version).
* If further adjustments to the material are needed, click the "Back to Edit" button to go back to the editing page and continue editing.
* You can also rename the creative here.

<div align="left"><figure><img src="/files/Lms2Mh3Y2UmiNcYH5fyd" alt=""><figcaption></figcaption></figure></div>

**2）Historical Version**

* Click on the corresponding historical version to view the historical materials.&#x20;
* After viewing, if necessary, you can download the historical version again (only supports downloading previously downloaded channels, does not support secondary applying).

<div align="left"><figure><img src="/files/iiTQXQgC3zN3GrUt3dzA" alt=""><figcaption></figcaption></figure></div>


# Content Editor-FAQ

Content Editor

This module documents some common issues and solutions encountered while using the Content Editor, aiming to address your questions during the creation process.

You can navigate to the relevant subdirectory to find the issues and solutions you're looking for, or use the search bar in the upper-right corner to quickly search **by keywords**!

<div align="left"><figure><img src="/files/WKoBwN4Blv1vaEkQEh4p" alt=""><figcaption></figcaption></figure></div>


# Asset Issues

\#Content Editor

## <mark style="color:blue;">1.Asset upload failure / File type not supported error</mark>

#### Q1：I tried to upload a sequence file in the Content Editor, but got an error saying the file type is unsupported—what’s wrong? <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x50;lease refer to the sequence format requirements:  [/pages/EnEhJaTwnFEHEzjklU6D#id-4.1-sequence](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/EnEhJaTwnFEHEzjklU6D#id-4.1-sequence "mention")

#### Q2：I tried to upload a DragonBones file in the Content Editor, but got an error saying the file type is unsupported—what’s wrong? <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x50;lease refer to the DragonBones format requirements:  [/pages/EnEhJaTwnFEHEzjklU6D#id-4.2-dragonbones](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/EnEhJaTwnFEHEzjklU6D#id-4.2-dragonbones "mention")

**Please Note:** <mark style="color:red;">Playturbo does not support Spine animation files</mark>. Spine animations are structured differently and are not compatible with our current logic. We also do not recommend converting Spine files into DragonBones format, as this can cause animation issues.\
If you want to upload animation assets, **please use DragonBones or image sequences**.

## <mark style="color:blue;">2.Asset position offset / misalignment</mark>

#### Q1：Wh**en editing or previewing the gameplay by switching scenes, you notice that a particular asset (video/image, etc.) experiences a position offset or misalignment?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x59;ou can troubleshoot the issue using the following steps:

* Check the original dimensions of the asset locally: Ensure that different assets have the same size (not just proportional). If they are different, resize them to have consistent dimensions locally.
* Check the layer position and size settings: If they are different, align them. Select Layer A, click the "Copy" button on top area, then select Layer B, and click "Paste" followed by "Only paste the alignment and size of the layer."
* Check if the "Screen adaptation" is consistent: If it's not consistent, adjust it to be the same for all assets.

## <mark style="color:blue;">3.Asset size and group size mismatch</mark>

#### Q1：**For example, when grouping a text layer and a button image, both of which are rectangles, the resulting group's bounding box is a small square?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x47;rouping principles:

* Grouping without selecting layers: Simply click the "Group" button, and it will generate a group with a centered square bounding box (you need to manually adjust the position and size before dragging assets into the group).
* Selecting layers for grouping: To group a single asset, directly select the asset and click the "Group" button. To group multiple assets, hold down the Ctrl key and select multiple layers, then click the "Group" button. The group's size will be based on the maximum bounding box of the selected layers.

<div align="left"><figure><img src="/files/utQr6v2VM1f1HVsScZfA" alt="" width="149"><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/1P6D7pG5QCcau3GZtwFC" alt="" width="194"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">4.Asset layering issue</mark>

#### Q1：**When adding product information or other assets in Global scene, they are automatically placed above the regular scenes. How can this be adjusted?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x31;）Click to enter the regular scene and adjust it in the "Scene setting" section on the right side of the parameter settings. 2）You can choose to place the "Global scene" at the top layer of the scene or at the bottom layer. 3）Note: The selection only applies to the current scene.

<div align="left"><figure><img src="/files/jjAANUNRKvRdwac6PWu2" alt="" width="248"><figcaption></figcaption></figure></div>

#### Q2：**I’ve uploaded and added a video asset, but I can’t see it on the canvas?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A:** This is most likely because you’ve added a large background image on the left side of the “Global Settings” panel — i.e., under the global scene, which may be covering the video asset placed in the normal scene.

Since video assets are by default at the lowest layer, only the background image/color on the right side of Global Settings can appear behind the video.

You can fix this by: Deleting the image on the left side, and instead uploading it to: ① the right-side “Background Image” under Global Settings.  ② or the normal scene.

#### Q3：**How to achieve the "video overlay effect" or the "video above an image" effect?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x31;）You can achieve the "video above an image" effect by uploading a background image in the "Global Settings." By default, video assets are placed below all layers except for the background image and background color set in the "Global Settings."  2）If the image is not intended as a background image, you can locally crop and create transparency in the image, leaving space for the video. Then, import the modified image into the tool and continue with your production process.

👉Related content： [/pages/o1KAnWpV1cChic9HaAej#id-4.video-adaptation-special-requirements](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/o1KAnWpV1cChic9HaAej#id-4.video-adaptation-special-requirements "mention")

#### Q4：In Content Creation, I added some assets to the global scene, but when entering the scene, the global scene setting doesn’t apply — why? <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x54;his is likely because the template you’re using involves custom code, with key elements managed inside "Gameplay Template > Edit gameplay".\
Assets added to the "Global Scene" won’t affect elements within the Gameplay Template, as the global hierarchy does not override gameplay-specific logic.

**Suggestion:** Add the asset manually to each scene and adjust its layer settings individually based on your needs.

<div><figure><img src="/files/2Y6nDvEaohsNtXkzV7lQ" alt="" width="244"><figcaption></figcaption></figure> <figure><img src="/files/DsmTwWuwhj30YLKbTr36" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">5.Asset/Layer not found; Hidden layers</mark>

#### Q1：**When using a specific template for Template content creation, you are unable to locate a particular image or other asset.** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x59;ou can troubleshoot in the following ways:

* **Product Information or Other Permanent Elements:** Click on **Global Settings** and check in the left layer panel.
* **General Elements:** Click on the corresponding **Scene**, then look in the left layer panel or directly click on the corresponding layer in the canvas.
* <mark style="color:red;">If the layer panel does not contain the layer, it may be located in the</mark> <mark style="color:red;"></mark><mark style="color:red;">**Gameplay Template**</mark><mark style="color:red;">: Click on the top asset library >>> Gameplay Template >>>Edit gameplay /Quick layout to search.</mark>
* If the **Gameplay Template** is also missing, it means that there is no asset slot available (as some core gameplay elements of templates are hardcoded by developers and cannot or should not be modified in Content Editor; otherwise, it may result in errors, so we do not display that asset slot).

👉Related content： [Gameplay Template](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/gameplay-template)&#x20;

#### Q2：**When previewing a template or other playable material, the download button appears after the video finishes playing, but it is not visible on the canvas during editing, and clicking \[Play Scene] does not show it. Why is that?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x54;his situation usually occurs because the button has an entrance animation and automatic playback of animations is disabled, or the button is set to hidden and controlled by events for display. If you want to adjust the button's parameters, select the button layer, adjust its animation settings, or temporarily set it to visible, make adjustments, and then hide it again.

#### Q3：When using certain templates in Feature Creation, the asset layout displayed on the canvas is inconsistent with what appears during previewing. What’s going on? <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A:**  First, while the template elements may appear differently on the canvas, the actual preview functions correctly without any manual adjustments needed. This situation often happens because the core gameplay and the layout of key elements are controlled by code. Thus, it is not advisable to hide, reposition or adjust layer hierarchy and have other major changes, as it may lead to template errors.

👉Related content： [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation)

<div align="left"><figure><img src="/files/aZx4ap8GupUeXGrztuMV" alt=""><figcaption><p>Taking the "Goods sort" template as an example</p></figcaption></figure></div>

#### Q4：During editing, I accidentally made an asset very small or it disappeared, and adjusting its position and size doesn't seem to work? <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A:**  We suggest trying the following methods: Select the layer and a. Reset size;  b. Reuse vertical/horizontal screen position configuration; c. Adjust the scale (ensure it's not set to "0,0").

<div align="left"><figure><img src="/files/kCtoHF87EDNZgAcjWgLd" alt=""><figcaption></figcaption></figure> <figure><img src="/files/4twXvKfRraPDgyy6qwKA" alt=""><figcaption></figcaption></figure></div>

#### Q5：**When editing a template in Content Editor, I can see certain layers during preview, but they’re missing on the canvas and can’t be adjusted?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A:**  This usually happens when those elements are inside a group layer that has entrance animations applied — making them appear “invisible” on the canvas.

**How to fix**: Find the group layer that contains those elements, and temporarily change the entrance animation’s Scale/Opacity start values to (1,1).  Once you finish editing the template, you can switch them back to (0,0) as needed.

#### Q6：I’ve hidden some layers in a template project, but they still appear in preview—why? <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A:** This is likely because the template’s core gameplay is controlled by code (especially for layers in “Gameplay Templates”), which may override the layer’s visibility settings.

To hide the layer effectively, try selecting it and setting its **opacity to 0** in the parameter panel on the right.

<div><figure><img src="/files/GUiJVrGJReAA6z3xMpJc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lJP8sdUTIHUUOF7etO51" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">6.Adjusting/Adding assets in the template</mark>

#### Q1：**When using a specific template for Template content creation, how to move/delete images or other assets?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x31;）Usually, when using Template content creation, making adjustments (moving/removing/adding) within the "Regular Scenes" is generally not a problem.&#x20;

2）However, if the asset you want to adjust is located within the "Gameplay Template," it is not recommended to make significant changes. You can replace assets, but moving/removing operations may result in material errors (as the content within the gameplay template is controlled by code). Forcibly moving or removing assets could cause template bugs and damage your materials.

#### Q2：**Can I add a disclaimer or other assets when use Template content creation?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x31;）Yes, you can. Template content creation supports adding additional assets according to your requirements. 2）Note: After adding new assets, both the vertical and horizontal parameters need to be adjusted accordingly.

## <mark style="color:blue;">7.Does different video frame rates affect the execution delay time</mark>

#### Q1：**Will using videos with different frame rates lead to inaccurate execution delay times during material preview?** <a href="#q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo" id="q1-after-making-the-playable-material-and-inputting-the-product-information-for-the-associated-promo"></a>

**A：**&#x31;）The execution delay is related to device performance differences and the complexity of the executed logic. There may be millisecond-level errors, but there won't be significant timing discrepancies.  2）If there are inaccuracies, it is recommended to divide a video into multiple segments and implement the effects in separate scenes to avoid errors.

## <mark style="color:blue;">8.Asset Deletion</mark>

#### Q1: Can assets in "**My Assets -** [Creative Assets](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/3BYW04XcGx0mF91QykDN#id-1.creative-assets)" be deleted freely?&#x20;

**A:** Projects that have already been applied or downloaded won’t be affected, but assets in projects still being edited might be lost!  If account storage capacity (Online Storage Space) is sufficient, it’s recommended not to delete assets.


# Animation Issues

\#Content editor

## <mark style="color:blue;">1.Can animations within a template be adjusted?</mark>

#### **Q1：When using Content Creation, how can you adjust the animation of a specific layer?**

**A：**&#x59;ou need to refer to the specific template for guidance. Select the individual layer or the group layer you want to adjust, and check the "Animation" parameters on the right side.&#x20;

* If there are adjustable animation parameters available, you can modify or add animations accordingly.&#x20;
* If there are no adjustable parameters, it means that adjustments are not supported.

<div align="left"><figure><img src="/files/UOvxVpwtgk86qIgFMJE7" alt=""><figcaption></figcaption></figure></div>

👉Related content： [Guidelines for Template Content Creation](/playable-tools-content-editor/content-editor-creation-tips-center/guidelines-for-template-content-creation#guidelines-for-adjusting-flexibility)

## <mark style="color:blue;">2.How to adjust the curve of universal animation？</mark>

#### Q1: How can I customize the shape of a curve and add keyframes when using universal animation?

**A:** Click on the curve thumbnail to open the "Curve editor."  Double-click anywhere on the curve to add keyframes. You can select and drag the keyframes to adjust their positions. Additionally, you can drag the handles to adjust the curvature of the curve.

<div align="left"><figure><img src="/files/ntOGX0J8qGWgs895Usqt" alt="" width="563"><figcaption></figcaption></figure></div>

👉Related content： [/pages/bLf5EaYqbNAgA6qmBX45#id-2.-special-parameter-curve](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/bLf5EaYqbNAgA6qmBX45#id-2.-special-parameter-curve "mention")

## <mark style="color:blue;">**3.**</mark><mark style="color:blue;">When previewing the animation, I found that it doesn't appear as set in the parameters？</mark>

#### Q1: I set a Displacement Easing animation for a finger and then either (①) hide the finger layer and want to show and play the translation animation through the event, or (②) set a delay for the animation. However, I noticed that each time I preview, the starting position of the finger movement is different with an offset.&#x20;

**A:** This may be because the "Autoplay" option for the animation is not disabled.  Even though you have set a delay or hidden the finger, the animation starts playing automatically when entering the scene, even if it's not visible on the screen.  Since the trigger for showing the animation occurs at different times, the position where the finger appears will also differ.&#x20;

<mark style="color:red;">**It is recommended to disable AutoPlay for animations and instead control animation playback precisely through events.**</mark> The same approach applies to other animation types.

For animations that need to play immediately upon entering a scene, we still recommend turning off AutoPlay and configuring an event on the scene, such as “Timing Trigger 0s – Play All Animations from Start”, to ensure more accurate control.

<div align="left"><figure><img src="/files/EH2lehLqKALx1XZSxegA" alt=""><figcaption></figcaption></figure></div>

#### Q2: Why do the positions of the Displacement Easing animation appear incorrect when switching from portrait mode to landscape mode during preview?&#x20;

**A:** The "Displacement Offset" for the animation is set separately for portrait and landscape modes by default.&#x20;

* If you want the animation to have the same Displacement Offset in both portrait and landscape modes, you can adjust the parameters in portrait mode first and then uncheck the option for separate settings in portrait and landscape modes while in portrait mode (marked as \[a]). This way, when switching to landscape mode for preview, the Displacement Offset will be the same as in portrait mode.&#x20;
* If the Displacement Offset are intentionally different between portrait and landscape modes, you should keep the separate settings checked and adjust the corresponding offset-X and offset-Y individually for portrait and landscape modes (marked as \[b]).

<div align="left"><figure><img src="/files/D69HnMQWuKFL8Uqf7dIk" alt=""><figcaption></figcaption></figure></div>

#### Q3: The Displacement Easing animation is not working after setting multiple animations on the image. What could be the reason?

**A:** Currently, when such animations are combined on the same layer, they may not fully function due to platform logic limitations:  a looping animation or other animation + a displacement animation triggered by an event.

**Solution:** Wrap the layer in a group → apply entry and looping animations to the layer → apply the displacement animation to the group.

<div><figure><img src="/files/vLStsKKmohR8h8JzeNRy" alt=""><figcaption><p>Example of the problem</p></figcaption></figure> <figure><img src="/files/wDKVDhwaXdFkPYFlbzam" alt=""><figcaption><p>Solution Step 1</p></figcaption></figure> <figure><img src="/files/Onbis0jY0YhUYaFa8a5j" alt=""><figcaption><p>Solution Step 2</p></figcaption></figure></div>

## <mark style="color:blue;">4.Creating Different Finger Animations for Portrait and Landscape Modes</mark>

#### Q1: How can I set different finger animations for portrait and landscape modes? Can the curve in Universal Animation be separated for portrait and landscape settings?

**A:** Curve cannot be separated for portrait and landscape settings.  The solution is to add two sets of fingers, one for portrait mode and one for landscape mode. >>> Then, use the "Show/Hide" option to control the visibility of the corresponding finger set based on the screen orientation. >>> Finally, adjust the animations for the different finger layers separately in portrait and landscape modes.

<div align="left"><figure><img src="/files/AthKQFcZyTcTJcwh0JR7" alt=""><figcaption></figcaption></figure></div>


# Event Issues

\#Content Editor

## 📒Related Issues with General Events

### <mark style="color:blue;">1.Redirect to app store & Report the end of the playable ads</mark>

#### **Q1:** **When a project has only one scene or the last scene is not solely an end page, how can you report the end of the playable ads?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** You can achieve this by setting up a response event along with the event for redirecting to the app store (excluding the persistent download button). Select the option "Report the end of the playable ads."  When a project has only one scene, it is not recommended to directly check  "Ending Scene"  on the right-hand side.

👉Related content： [/pages/CsrdnZSSQwB4jKGg3eEu#id-2.related-issues-with-playable-material-on-mintegral-platform](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/CsrdnZSSQwB4jKGg3eEu#id-2.related-issues-with-playable-material-on-mintegral-platform "mention")  [WORK CREATION-IMPORTANT NOTICE⚠️](/playable-tools-content-editor/work-creation-important-notice)

#### **Q2:** When previewing playable materials, the ending redirect to the app store was successful only once; clicking again has no response. What’s going on? <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** This is likely because you checked the option for "Valid only once" under the redirect event, which prevents players from being able to redirect to the store again after returning to the playable material. <mark style="color:red;">It’s recommended not to check "Valid only once" for events related to redirecting to the app store.</mark>

### <mark style="color:blue;">2.Related issues with c</mark><mark style="color:blue;">**opying event**</mark>

#### **Q1:** **I want to set the same event for multiple layers. How can I do it more efficiently?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** Follow these steps to quickly set the same or similar events for multiple layers:

* Set up the event for one of the layers.
* Click the "Copy" button for the event.
* Hold down the Ctrl key (Cmd key on Apple computers) and select all the layers that you want to assign the same event to.
* Click the "Paste" button in the shortcut toolbar and choose "Paste layer events only."

<div align="left"><figure><img src="/files/R3qiEYrMVC794AUzQBAR" alt=""><figcaption></figcaption></figure></div>

#### **Q2:** Does the event support copying partial response events to other layers? <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** Currently, it does not support copying partial response events. If needed, you can first copy the entire event to one layer, delete the unwanted response events, and then copy that event to other layers.

### <mark style="color:blue;">3.Issues related to drag-type events</mark>&#x20;

#### **Q1: To achieve the effect of "dragging layer A to a specific position and having it stay in that position," you have already set up a response event using "Set Location." However, during preview, you notice that the position is offset.** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** Please note that the "Set Location" in the response event represents the layer's "absolute position" and is a fixed value. It does not automatically adapt to different screen orientations or device models. Therefore, using  "Set Location"  as a response event is not recommended if you want to achieve the desired effect on different devices and screens.

**The correct approach** is to split the dragging layer and the layer in its correct placement into two layers. Hide the layer in its correct placement initially. Then, for the dragging layer, set the event as "Drag to target position" with response actions to "Hide dragging layer" and "Show layer in correct placement." This method ensures that the dragged layer is hidden and the correct placement layer is displayed when the dragging action is completed.

<div align="left"><figure><img src="/files/dZ3RazkpzuzSnHQ0Tl5E" alt=""><figcaption></figcaption></figure></div>

#### **Q2:**&#x48;ow can I achieve playing a series of correct feedback when dragging an object to a specified location? <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** 1. Select the layer of the target object; 2. Add the event "Drag to target position," edit the drag position, choose the drag direction, and save; 3. Then, add the corresponding response events (correct feedback), such as hiding the original layer, displaying the new layer, and playing related animations and sound effects.

#### **Q3: If an object is not correctly dragged to the specified area, how can I make it immediately snap back to its original position and play the corresponding error feedback?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** The tool automatically snaps the object back to its original position if it is not dragged to the specified area. There is no limit on the number of drag attempts.

To set up error feedback, you can select the target object layer and add an event called "Lift up." Then, under the "Lift up" event, add the corresponding response events for the error feedback, such as playing error animations and sound effects.

👉Related content：[Trigger Event](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters/trigger-event)&#x20;

#### **Q4:** What does the error message "Disabled other functions in edit mode" mean? <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** This occurs because you used the drag event, but after clicking the \[Edit the drag area] button, you didn’t click \[Save] for the specified area. Simply select the layer where the event is located, and click \[Save] to restore normal operation.

<div align="left"><figure><img src="/files/wTnnZDl1jOLsUeLVK3Qg" alt="" width="251"><figcaption></figcaption></figure></div>

### <mark style="color:blue;">4.Issues related to setting up response events</mark>

#### **Q1: During preview, it was noticed that a certain animation is being played twice. How can one of the animations be turned off?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** This situation likely occurs when two response events are set to play the animation, such as one triggered by a click and another triggered by a delayed execution.

To resolve this issue, select the "Click" event and add a response event called "Cancel execution delay" under the event. Then, select the corresponding timer ID to cancel the execution of that specific animation.

#### **Q2: If an animation is set for a layer but not playing during preview, what could be the reason?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** First, check if the layer's status is set to "Hidden." If the layer needs to be hidden for design purposes, you need to add a response action in the event to "Show the asset."  Additionally, under the response event, add an action to "Play all animations from the beginning" or "Play a single animation," and select the corresponding animation.

#### **Q3: If animation A is set for a layer, and animation B is set for the layer's group, but during preview, only animation B is playing despite adding the response action to "Play all animations in the group from the beginning," there might be an issue.** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** Note: While animations set on a group can affect assets within the group simultaneously, when adding response actions, they need to be added separately.

Therefore, you need to set up two separate response events: one to play the animation of the specific layer and another to play the animation of the layer group.

#### **Q4: How to achieve the effect of displaying an error feedback symbol "✕" when clicking anywhere on the screen except the correct region?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** You can follow these steps:

* Add an image or text or particle of the "✕" symbol. Adjust its position and size, and initially hide this layer.
* Draw multiple interactive areas to encompass the incorrect regions.
* Select one of the gesture areas and add an event for "Press." Then, add a response event to show the "✕" symbol, play the animation of the "✕" symbol from the beginning, and hide it after a delay of 0.5 seconds.
* Copy this event to the other interactive areas.

NOTE: The platform currently cannot implement the "✕" appearing in different positions based on the **click** location, but it can be made to appear in different positions based on the **drag** position.

👉Related content： [Creation Tips - Event Setting](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-event-setting#real-time-error-feedback-following-dragged-position)

#### **Q5: How to achieve the effect of playing a video when clicking on a layer/scene and then automatically redirecting to a specific scene after the video finishes?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** You can follow these steps:

* Set the video parameters to "Disable auto-play on entry" and "Disable infinite loop."
* Select the desired layer/scene and add an event for "Press." Then, add a response event to show the video and play it from the beginning.
* Then, select the video layer and add an event for "Ending time." Afterwards, add a response event to redirect to the specified scene.

👉Related content： [Response Event](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters/response-event) &#x20;

#### **Q6:** During the preview of the playable, after performing an action in portrait mode and then switching to landscape mode to continue the preview, I noticed that some resources are missing or their positions have changed. What happened? <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** This is likely due to the use of the "Set scale" or "Set location" response events. For platform logic reasons, these events may not work correctly when switching between portrait and landscape during the preview (although in actual deployment, users generally won't switch orientations mid-play).

**Suggested adjustments:** ① Remove the "Set scale" event and replace it with a scale animation combined with the "Play animations from the beginning" event.  Or②Wrap the layer with the "Set scale" event in a group and apply the event's scale setting to the layer inside the group.

## 📒Related Issues with Global Variables

### <mark style="color:blue;">1.Global Variables can be used across scenes</mark>

#### **Q1: When transitioning to another scene, the Global Variables's value will either be reset or inherited from the previous scene, depending on how it is configured.** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** By default, Global Variables persist throughout all scenes and do not reset when switching between scenes. However, if there are specific events set up to control the Global Variables and reset it after a scene transition, then it will be reset accordingly.

In summary, in any scene, you can modify the same Global Variables, and its value will persist unless there are specific events that trigger a reset upon transitioning between scenes.

### <mark style="color:blue;">2.Related Issues with Condition</mark>

#### **Q1: Is there a way to copy conditions, or do I have to add them manually?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** The entire event containing the condition can be copied. However, if there are multiple conditions and you only want to copy one of them, it is currently not possible.

You will need to manually add the individual condition. If there are multiple response events associated with the condition, you can first copy the entire condition and then delete the unwanted parts.

👉Related content：[Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables)

<div align="left"><figure><img src="/files/zcbSK2wJ0qyQDps2Tyyr" alt=""><figcaption></figcaption></figure></div>


# Adaptation Issues

\#Content editor

## <mark style="color:blue;">1.How to adjust assets for other device models?</mark>

#### **Q1:** **When creating assets, the canvas size is typically displayed based on the iPhone 6 screen size. How can the visuals be adjusted for other device models?** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** First, <mark style="color:red;">there is no need to separately adjust for different device models,</mark> as materials will be scaled proportionally and automatically adapt to all devices. Most assets also do not require adjustments, as they are centered by default. Materials adjusted for the iPhone 6 screen will display properly on other devices as well. Only a small number of assets may require individual adjustments to their screen adaptation methods (such as product information or disclaimers), which will then perfectly fit all device models.

👉Related content：[Screen adaptation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/screen-adaptation)&#x20;

## <mark style="color:blue;">2.The assets are not displayed in full screen during preview</mark>

#### **Q1:** **During the material preview, you may notice that some device models have issues with assets not being displayed in full screen or having white borders.** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** If you encounter such problems, it is likely because you haven't properly adapted the screen layout. You can troubleshoot from the following aspects:

* Check the original size of the assets: Under the default center adaptation, make sure the original size of the assets is at least 1800x1800 to cover all device models in full screen (Note: Due to fixed aspect ratios of videos, they cannot fill every screen completely. You need to manually adjust the position and size of the video to fit appropriately).
* Check the screen adaptation settings: Verify if the assets are set to a non-centered adaptation. If you want the background image to be aligned to one side, you need to increase the size of the image further.
* Set a background image: Adding a background image under "Global Settings" will automatically stretch and fill the screen, adapting to all device models. Therefore, we recommend adding a background image as a fallback for each project you create.

#### **Q2:** **Black bars appear on the top and bottom during preview on iPhone X and Vivo devices.** <a href="#q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p" id="q1-for-the-template-piano-tiles-i-want-to-replace-the-three-cover-images-in-the-failure-page-sound-p"></a>

**A:** Due to the notch on the top of iPhone X and Vivo devices, there will be black bars displayed to prevent the materials from being obstructed by the notch. Unfortunately, it is unavoidable to have some black bars in such cases.

## <mark style="color:blue;">3.When a layer has animation and needs separate screen adaptation settings</mark>

#### Q1: I have added an entrance position animation to the product information group, aiming for the effect of "the product information enters from off-screen after the player reaches the end page," while setting it to bottom-adaptive. However, during preview on different devices, I found that the final fixed position of the product information group varies, and it's not entirely bottom-adaptive.

**A:** The reason for this discrepancy is that the position animation applied to the product information group uses absolute values for its movement distance, which do not adjust based on the size of the device. Consequently, when previewed on different models, the positioning shifts, failing to achieve complete bottom adaptation.

**Adjustment Method:** Create another group around the product information group, move this larger group to the desired bottom position of the canvas, and set the larger group's "Screen adaptation" to bottom-adaptive (since the hierarchy of the larger group is higher than the layers within it, the position animation of the product information group will still play as intended, but the final stopping position will be based on the larger group's position).

## <mark style="color:blue;">4.Related Issues with Adaptation Orientation</mark>

#### Q1: I have completed a project with both "Landscape & Portrait" orientations. How do I modify it to a single orientation?

**A:** Duplicate the project in the project list and then select the desired orientation in the 【Adaptation Orientation】 setting.

<div align="left"><figure><img src="/files/yGp2LU3TndVUNnZ6eYTQ" alt="" width="406"><figcaption></figcaption></figure></div>


# Preview Issues

#### <mark style="color:orange;">**Q1:**</mark> <mark style="color:orange;"></mark><mark style="color:orange;">When previewing the playable, the bgm or other sound effects don’t play automatically upon entry, or are delayed — what’s going on?</mark>

**A:** This is expected behavior due to **browser restrictions** — audio cannot autoplay until the user performs an action (like tapping the screen). This issue **won’t happen during actual ad delivery**, so there’s no need to worry.

During preview, you can try tapping anywhere on the screen or clicking the persistent download button first to trigger the background music, then proceed with the playable — all audio should play normally.

#### **Q2:** The playable material looks fine in the platform preview, but when scanned with a mobile phone, it loads extremely slowly or doesn't load at all, making it impossible to play normally.

**A:** This issue may arise due to an excessive number of scenes or video resources within the project, which can directly lead to slow loading or stuttering during playback. It is recommended to: reduce the number of scenes to ≤4; avoid overly fragmented video clips or excessive interactions.

#### **Q3:** **After creating a playable ad, the preview link on a mobile phone shows incomplete product information or other visuals. Why?**

**A:** This issue is most likely caused by previewing the playable on a mobile browser. In such cases, the mobile screen is not fully expanded (there’s a browser navigation bar at the top or bottom), which causes part of the content to be covered—so you might not see the full screen. This won't happen in actual campaign delivery.

You can also use this tool to convert the link and preview the mobile experience on your computer [/pages/t5TaFZ1VchwbecfXfhLf#id-1.change-the-preview-device-preview](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/t5TaFZ1VchwbecfXfhLf#id-1.change-the-preview-device-preview "mention") : <https://playable-portal.mintegral.com/#/tools/mw-viewer>

#### **Q4:** After downloading the channel package (e.g., Unity), the playable link can be opened and previewed on the computer. How can I preview it on a mobile device?

**A:** The playable links inside the downloaded zip file are generally not supported for direct opening on mobile devices. To view the actual preview for each channel, simply select the channel in the download window and click \[Preview]. You can scan the QR code or copy the link to view it. This will show the same effect as the actual deployment.

You can also use this tool to convert the link and preview the mobile experience on your computer [/pages/t5TaFZ1VchwbecfXfhLf#id-1.change-the-preview-device-preview](https://doc.playturbo.com/playable-tools-content-editor/content-editor-faq/pages/t5TaFZ1VchwbecfXfhLf#id-1.change-the-preview-device-preview "mention") : <https://playable-portal.mintegral.com/#/tools/mw-viewer>

<figure><img src="/files/baaEaWJ3LccUY2iBY6Rd" alt=""><figcaption></figcaption></figure>

#### **Q5:** Will the loading screen at the start of the playable appear during actual delivery?

**A:** Yes, the loading screen will be shown while the playable is loading.  Loading screen language logic:

* Product Info: It will first try to pull the app store info based on the project’s default language. If that’s not available, it’ll use the language from the app store info linked in Playturbo.
* Description Text: Optional field.
  * If filled: The entered text will be displayed as is and will not adapt to other languages during ad delivery.
  * If left blank: The default text shown in the blue box in the screenshot will be used, and it will adapt to the preview device language.

<div align="left"><figure><img src="/files/YAJHmwYEV1WA8K8L3eaP" alt="" width="356"><figcaption></figcaption></figure> <figure><img src="/files/ULEdK6NGefnFuaPJg5zp" alt="" width="190"><figcaption></figcaption></figure></div>

#### **Q6:** **After downloading the channel package and opening the HTML file locally, I can't trigger the redirect to the app store—is this a bug?**

**A:** This is expected. For some channels, HTML files won’t trigger redirects during local preview. No worries—this won't be an issue in actual delivery.

#### **Q7:** I encountered issues when previewing the playable on mobile via QR code. After fixing the issue, it works on PC but still not on mobile—why?**?**

**A:** Please note: after any updates or changes to the project, you need to save the project first, then <mark style="color:red;">**regenerate the preview link or QR code**</mark> before testing on mobile.

If the issue persists, feel free to contact your AM.

#### **Q8:** When previewing a playable on mobile, I see a pop-up message saying “Power saving mode may affect ads preview.” Will this impact actual delivery?

**A:** This message only appears when previewing a playable with power-saving mode enabled on your device. It will not affect the actual ad delivery. As the pop-up indicates, “**No impact on actual ad display,**” so there is no need to worry.

<div align="left"><figure><img src="/files/KHEIOWmRVsQbEcC4zRg4" alt="" width="375"><figcaption></figcaption></figure></div>

#### **Q9:** The playable works fine in desktop preview, but fails to load when opening it on mobile via QR code or shared link.

**A:** This issue may occur if the QR code is scanned or the link is opened **before the playable has fully finished loading**. Please make sure the playable is completely loaded before scanning the QR code or copying the link for mobile preview.


# Content Editor-Creation Tips Center

\#Content Editor

This module provides some common creation tips for using the Content Editor, aiming to help you improve efficiency and quickly complete asset production.

You can explore the corresponding subdirectories to find the production tips you need, or use the search bar in the upper-right corner to quickly search **by keywords**!

<div align="left"><figure><img src="/files/WKoBwN4Blv1vaEkQEh4p" alt=""><figcaption></figcaption></figure></div>


# Guidelines for Template Content Creation

\#Content Editor #Template Content Creation

## <mark style="color:$primary;">📒</mark><mark style="color:$primary;">**Operations Supported for Template**</mark> <mark style="color:$primary;">Content Creation</mark>

When you use a template for **Content Creation**, replacing assets is just a basic operation; there are actually many aspects that can be adjusted. Therefore, <mark style="color:red;">the same template can generate numerous iterative versions of playable materials.</mark>  We encourage you to experiment more!&#x20;

Below is a summary of the main operations supported for template iteration:

<table><thead><tr><th width="268">Iteration Operation</th><th width="281">Supported Production Methods</th><th>Applicable Templates</th></tr></thead><tbody><tr><td>Modify preset "Gameplay Parameters"</td><td>Feature Creation &#x26; Content Creation</td><td>General</td></tr><tr><td>Replace Assets</td><td>Feature Creation &#x26; Content Creation</td><td>General</td></tr><tr><td>Hide Assets</td><td>Feature Creation &#x26; Content Creation</td><td>General</td></tr><tr><td>Adjust Asset Size</td><td>Feature Creation &#x26; Content Creation</td><td>General</td></tr><tr><td>Adjust Asset Position/Layout</td><td>Content Creation</td><td>General</td></tr><tr><td>Add New Assets</td><td>Content Creation</td><td>General</td></tr><tr><td>Add New Scene(s)</td><td>Content Creation</td><td>General</td></tr><tr><td>Adjust &#x26; Add New Animations</td><td>Content Creation</td><td>General</td></tr><tr><td>Adjust &#x26; Add New Events</td><td>Content Creation</td><td>General</td></tr><tr><td>Adjust Quick layout (Grid Board Layout)</td><td>Content Creation</td><td>Some Elimination/Puzzle Gameplay</td></tr><tr><td>Adjust Quick layout (Parking Layout)</td><td>Content Creation</td><td>Spatial Puzzle Parking Gameplay</td></tr><tr><td>Adjust Components</td><td>Content Creation</td><td>Templates with Various Components</td></tr></tbody></table>

**Case Preview:** [\<Tile Games> Template Content Creation](/playturbo-case-study/playable-content-editor/elimination-and-match-gameplay-cases/less-than-tile-games-greater-than-template-content-creation)

## 📒<mark style="color:blue;">Guidelines for Adjusting Flexibility</mark>

When using a template for "Content Creation"：

* **If there is&#x20;**<mark style="color:red;">**relevant content in the "Gameplay Template"**</mark>**&#x20;section** (as shown in the left image), it means the core gameplay is code-driven, and key elements are located within the "Edit gameplay". In this case, certain editing limitations apply  *(see table below for details).*
* **If there is&#x20;**<mark style="color:red;">**no relevant content in the "Gameplay Template"**</mark>**&#x20;section** (as shown in the right image), it means that the template does not involve any code, and you can freely adjust it.

&#x20;       *\*To check whether a template includes a Gameplay Template, please open the project or refer to:*[Latest News on Playable Templates](/latest-news-on-playable-templates)

<div align="left"><figure><img src="/files/s6ZvqomKZA2f40BVEwxw" alt=""><figcaption></figcaption></figure></div>

**For templates involving code, when using Content Creation, it’s recommended to&#x20;**<mark style="color:red;">**follow the editing freedom guidelines below**</mark>**. Otherwise, errors may occur and lead to rework.**

<table><thead><tr><th width="217">Corresponding Operation</th><th width="239">General Scene</th><th>Gameplay Template - Edit gameplay</th></tr></thead><tbody><tr><td><strong>Replace Assets</strong></td><td>Allowed</td><td>Allowed</td></tr><tr><td><strong>Add New Assets</strong></td><td>Allowed</td><td>Operate appropriately</td></tr><tr><td><strong>Add New Scenes</strong></td><td>Allowed</td><td>Not Supported</td></tr><tr><td><strong>Other Non-Deletion Operations</strong> (e.g., adjusting asset position/size, hiding assets)</td><td>Allowed</td><td>Operate appropriately</td></tr><tr><td><mark style="background-color:red;"><strong>Delete Layer(s)</strong></mark></td><td>NO! Use "hide" instead of deleting.</td><td>NO! High risk of errors! Use "hide" instead of deleting.</td></tr><tr><td><mark style="background-color:red;"><strong>Adjust Layer Structure</strong></mark></td><td>Not recommended;Operate appropriately</td><td>NO! High risk of errors!</td></tr><tr><td><mark style="background-color:red;"><strong>Modify Layer Naming</strong></mark></td><td>Not recommended;Operate appropriately</td><td>NO! High risk of errors!</td></tr><tr><td><strong>Adjust Animation</strong></td><td>Allowed</td><td>Not recommended;Operate appropriately</td></tr><tr><td><strong>Add Animation</strong></td><td>Allowed</td><td>Not recommended;Operate appropriately</td></tr><tr><td><strong>Adjust Event</strong></td><td>Allowed </td><td>Not Supported</td></tr><tr><td><strong>Add Event</strong></td><td>Allowed</td><td>Not Supported</td></tr></tbody></table>

## <mark style="color:$primary;">📒</mark><mark style="color:$primary;">Guidelines for Asset Replacement</mark>

### 1.Asset Replacement Tips

When replacing assets, there are two efficient methods to choose from for your creation:

<figure><img src="/files/8trecLEDlmG0tXlusbgm" alt=""><figcaption></figcaption></figure>

#### a. Feature Creation

* Select a template and choose "Feature Creation".
* Open any image slot, and upload all image assets that need to be replaced into the asset library for easy access during the replacement process. The same applies to other asset types.
* Then click "Copy to Content Editor" to continue with your custom iteration.

<figure><img src="/files/THc18lRVqv3Zmv8OrdCZ" alt=""><figcaption></figcaption></figure>

#### b. Content Creation

* Select a template and then choose "Content Creation."
* Click on "Project Assets" and upload all the assets that need to be replaced into the project assets at once, making future asset replacements more convenient.&#x20;

<figure><img src="/files/OpfIBfbCeBUmixgzZEhW" alt=""><figcaption></figcaption></figure>

*<mark style="color:red;">**Tips:**</mark> If the same asset appears in multiple scenes and you want to replace all of them, you can select the asset within the "Project Assets" window and click "Replace Asset." This way, you can quickly complete the replacement for all scenes at once!*

<figure><img src="/files/zGQk7t6qaquef9N9c2WS" alt=""><figcaption></figcaption></figure>

### 2.Unable to find a specific layer?

💡 When using a template for "Content Creation" and you want to adjust a specific layer but can't find it, follow these steps:

**1）For product information or other persistent elements:** Click on "Global Settings" and search for it in the layer area on the left side.

**2）For regular elements:** Click on the corresponding "Scene" and search for it in the layer area on the left side, or directly click on the corresponding layer on the canvas.

<mark style="color:red;">3）If the layer is not found in the layer area, it may be located within the</mark> <mark style="color:red;"></mark><mark style="color:red;">**"**</mark>[<mark style="color:blue;">**Gameplay Template**</mark>](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/gameplay-template)<mark style="color:red;">**":**</mark> <mark style="color:red;"></mark><mark style="color:red;">Click on the Top Asset Library >>> Gameplay Template >>> Edit gameplay/Quick layout to search for it</mark> *(Refer to Part 2 for editing guidelines.)*

<div align="left"><figure><img src="/files/E98aTHh6CnRjNezzkVaR" alt=""><figcaption></figcaption></figure></div>

⚠️Please Note: Some assets of very few templates may not be available in the "Gameplay Template" either. This is because those assets are controlled by code and cannot or should not be modified in Content Editor. Modifying them may result in errors, so we do not display those asset slots.&#x20;

## <mark style="color:$primary;">📒Guidelines for Iteration Order</mark>

When you use the template for **Content Creation** to iterate on materials, we generally recommend that you follow these steps from the overall structure to the details, ensuring orderly and efficient operations!

### 1.**Gameplay Parameters Adjustment**

The gameplay parameters for Content Creation are typically located in the parameter setting area of the core gameplay scene (Scene 1) and can be adjusted directly  (a small number of templates may have gameplay parameters within "Global Settings").

👉Related content： [Gameplay Parameters - Scene Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/gameplay-parameters-scene-parameters)

<div align="left"><figure><img src="/files/iT0OEyHFCOCrzchSWVzQ" alt=""><figcaption></figcaption></figure></div>

### 2.**Scene Adjustment**

We suggest deciding at the beginning of the template iteration whether to add new scenes. In principle, <mark style="color:red;">additional scenes can be added at the beginning or end without affecting core gameplay, enriching the material's gameplay</mark>. You can increase scene(s) through "Create new Scene" or "Duplicate the Scene" based on actual needs.

* **Create new Scene:** The new scene is less related to existing scenes and does not require assets from them (e.g., adding an introductory scene at the start or an ending scene focused on product information).
* **Duplicate the Scene:** The new scene is closely related to existing ones and requires many assets from them (e.g., using the current scene as a background and adding overlays and settlement information).

<div align="left"><figure><img src="/files/kHNLi0xqLgQzUT0IsZbn" alt=""><figcaption></figcaption></figure></div>

💡 **Steps to Add Different Scenes:**

* <mark style="color:orange;">**Add Introductory Scene:**</mark> Create new Scene - Move it above all scenes - Create scene content - Set the event "Redirect to the next scene" (i.e., the original Scene 1 of the template).

<div align="left"><figure><img src="/files/Z5E0OVCMvmJBx4l0NNxD" alt=""><figcaption></figcaption></figure></div>

* <mark style="color:orange;">**Replace Original Ending Scene:**</mark> Create new Scene - Move it above the original ending scene of the template - Check this scene as the "Ending Scene" - Create scene content - Set the event to redirect to app store - Enter the original core scene of the template, find the redirect event related to the ending scene in the **Event** section, and adjust if necessary.

<div align="left"><figure><img src="/files/eCEvHKBt77yL3U8jEN91" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/tfsKJD0OuUOCaQgesKkl" alt=""><figcaption></figcaption></figure></div>

💡 Tips: The [**Presets Library**](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/presets-library) contains many pre-designed page layouts that can be directly added and used!

### 3.Assets Adjustment

* Replace Assets: Replace each asset that needs to be retained one by one.
* Add New Assets: Add the required assets, adjust their positions and sizes, and group similar assets for easier subsequent production.
* Hide Assets: Hide any unnecessary assets.
* Adjust Asset Size/Position/Layout (recommended in regular scenes).

⚠️ <mark style="color:red;">If there are unnecessary assets, they can be hidden using either "Hide This Layer" or "Set This Layer's Opacity to 0."</mark>  <mark style="color:red;"></mark><mark style="color:red;">**Do not delete layers casually**</mark><mark style="color:red;">, as this is likely to cause template errors and prevent normal previewing!</mark>

<div align="left"><figure><img src="/files/EP05u64z027Z4jDKf4I5" alt=""><figcaption><p>hide the layer</p></figcaption></figure></div>

<div align="left"><figure><img src="/files/mZMPOrf8Syhbap3DXyGH" alt=""><figcaption><p>adjust the opacity</p></figcaption></figure></div>

### 4.**Quick layout/Component Adjustment**

Some templates contain **Quick layout** or **xx Component**, which can be adjusted as needed.

👉Related content： [Component & Quick Layout](/playable-tools-content-editor/content-editor-user-guide/component-and-quick-layout)

### 5.Animation Setting

#### 1）Adjusting Animation

If you want to adjust the animation of a specific asset in the template, select the asset layer and check the "Animation" section in the parameter settings on the right side to see if there are adjustable animation parameters.

* If there are animation parameters available, it means they can be adjusted.

<figure><img src="/files/B0emeGGOFkeUF1lmKt9m" alt=""><figcaption></figcaption></figure>

* If there are no animation parameters available, it may be controlled by code and cannot be adjusted.

<figure><img src="/files/MhodWb5YPCzr8brZZj7A" alt=""><figcaption></figcaption></figure>

#### 2）Adding New Animation

If needed, you can also add animation to layers or scenes.

<figure><img src="/files/7ZtUV9ggN4H6Ka0d8rCK" alt=""><figcaption></figcaption></figure>

#### 3）Adjusting Particle Effects

* You can replace existing particle textures with new ones and adjust particle parameters.
* You can add new particle effects and adjust their position and size to fit appropriately.
* Similarly, for particle effects that are not needed, you can hide their layer or adjust the layer's opacity to 0.

👉Related content： [Particle Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters/particle-parameters)

<figure><img src="/files/drcifyTsWtGTroAlxyoo" alt=""><figcaption></figcaption></figure>

### 6. Event Setting

#### 1）Modifying Events

Typically, in the core gameplay scene of each template, there are some event parameters available for adjustment.

💡 You can determine which effects an event implements by combining the event's name with its corresponding response events. <mark style="color:red;">If necessary, you can modify existing events, add new response events, or drag and adjust the order of response events under the corresponding event.</mark>

<div align="left"><figure><img src="/files/Kvg27MbDVwX5hGENaANM" alt=""><figcaption></figcaption></figure></div>

Some layers may also contain events. Similar to animation, if you want to adjust the events in the template, check the "Event" section in the parameter settings on the right side to see if there are adjustable event parameters.

* If there are event parameters available, they can be adjusted.
* If there are no event parameters available, it may be controlled by code and cannot be adjusted.

<figure><img src="/files/NuUhlJThwZvGmTHnuHUU" alt=""><figcaption></figcaption></figure>

#### 2）Adding New Events

If needed, you can also add events to layers.

* You can directly add response events within existing trigger events.
* You can also add additional trigger events and response events.

<figure><img src="/files/BnhZIfAXSa270NL6U8Ac" alt=""><figcaption></figcaption></figure>

👉Related content： [Event - Common Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters)

### 7. Language Translation

After making the general content adjustments, click on "Global Settings" to modify and add languages.

* Adjusting Language: Click on the brush icon next to "Default Language" to open the text translation window.
* Adding Language: Click on "Add Language"  in the "Default Language" section to open the text translation window.&#x20;

The specific operation steps can be viewed through the [Multi-language Configuration and Translation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/global-settings/multi-language-configuration-and-translation)

<figure><img src="/files/8FRv0Cfsija7cETmsarO" alt=""><figcaption></figcaption></figure>

### 8.Landscape Adaptation

⚠️After completing the vertical adjustments for each scene, remember to make  **layout and adaptation** adjustments for the horizontal orientation (using the "Reuse vertical screen position configuration" button is recommended).&#x20;

👉Related content： [Screen adaptation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/screen-adaptation)  [Creation Tips - Adaptation](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation)

<figure><img src="/files/LpjzN6oshYcHEZXfut9j" alt=""><figcaption></figcaption></figure>

### 9.Overall Preview&#x20;

Once all adjustments are completed, it's recommended to do an overall preview and playtest for different devices, languages, and screen orientations to ensure everything is correct before finalizing and applying the content or downloading it.

<figure><img src="/files/YjDim1tzqJ0gn2PBIm6j" alt=""><figcaption></figcaption></figure>

[Project Self-Check Guide](/playable-tools-content-editor/content-editor-creation-tips-center/project-self-check-guide)

## <mark style="color:$primary;">📒Others</mark>

### Q: Why don't some templates have the **Content Creation** or **Copy to Content Editor** option?

**A:** A small number of templates are currently unavailable in Content Creation because they are either fully code-based or have known issues that are being fixed. These templates currently support **Feature Creation** only, so the **Content Creation** and **Copy to Content Editor** options will not be displayed.

<div align="left"><figure><img src="/files/L11t0iZ4VDQEfurZZJ07" alt=""><figcaption></figcaption></figure></div>


# Common Creation Tips

\#Content editor #Template content creation #Blank Canvas

This module provides general production techniques for Content editor.


# Creation Tips - Suggestions for Creation  Process

\#Content Editor #Blank Canvas

When using the Content editor for "Blank Canvas," we generally recommend following these steps to greatly improve efficiency!

## <mark style="color:blue;">Step 1: Asset Setup</mark>

### 1.Import Assets

After creating a new project, click on "Project Assets" to import all the prepared assets. Some commonly used assets can also be obtained and used from the "Asset Library."&#x20;

🌟 Help Center documentation:  [Project Assets](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/project-assets) [Asset Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/asset-library)

<figure><img src="/files/NrOaca5PIPgCN8Uzf1sI" alt=""><figcaption></figcaption></figure>

### 2.Scene Setup

2-1)  Global Asset Setup: Start by clicking on "Global Settings" to set up global assets.&#x20;

* Add background music and background image on the right side.&#x20;
* Under "Global scene" on the left side, add persistent information such as product details, download buttons, and disclaimer text.&#x20;

🌟 Help Center documentation:  [Global Settings](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/scene-area/global-settings)

<figure><img src="/files/We9K10WdjExyQ1N9dOxY" alt=""><figcaption></figcaption></figure>

* To better adapt to different devices, we usually adjust the size of assets like background image or base image to be larger and extend them beyond the canvas.&#x20;

<figure><img src="/files/l6pihar3J1SQVZvdgSr9" alt=""><figcaption></figcaption></figure>

* Once the asset positions and sizes are adjusted, it's a good practice to group them logically, which will provide convenience for subsequent production steps.&#x20;
* After grouping, adjust the "Screen adaptation" based on the layout and distribution of the assets. For example, set the logo to "Center Top" adaptation and the disclaimer to "Center Bottom" adaptation.

<figure><img src="/files/qZ3ou3c9uooXWmwIae8J" alt=""><figcaption></figcaption></figure>

2-2) After completing the setup of global assets, we move on to the "Scene" for building the core gameplay and ending page. For example:&#x20;

* Scene 1: Core Gameplay - Add relevant assets, adjust their positions and sizes, and group them.
* Scene 2: Ending Page - You can select presets directly from the "Presets Library" to use.&#x20;
* **Note:** If using presets, it is recommended to add them at this step (as adding a preset creates a new scene with that preset). After successfully adding a preset, you can make minor adjustments to some assets and delete the original Scene 2 if necessary.

🌟 Help Center documentation:  [Scene](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/scene-area/scene)  [Layer Area](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area)  [Presets Library](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/presets-library)

<figure><img src="/files/txAxeg1zNI9OYdj7Vo16" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Step 2: Landscape Layout and Adaptation</mark>

After completing the asset setup for the portrait layout, we switch to the landscape mode to adjust the layout and adaptation (you can skip this step if you chose single-screen production when creating the project).

* To perform a one-click layout, hold the Ctrl key and select all the top-level layers (or place all layers within a large group and select the group). Then, click on the "Reuse vertical screen position configuration" button on the right side.
* If the positions and sizes are not suitable, you can make minor adjustments to the position and scale.

<figure><img src="/files/mNQdM37rTplJZLSmLd2h" alt=""><figcaption></figcaption></figure>

* Similarly, set the "Screen adaptation" for individual layers that require adjustment.
* The process of landscape layout and adaptation applies to all scenes.

🌟 Help Center documentation:   [Screen adaptation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/screen-adaptation) [Creation Tips - Adaptation](/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/creation-tips-adaptation)

## <mark style="color:blue;">Step 3: Animation Setting</mark>

After completing all the adjustments for the landscape layout, we can proceed to set up the animations.

### 1.Adding Animations

Select the layer(s) that you want to animate, click on "Add Animation," and choose a suitable animation. Adjust the corresponding parameters as needed.

🌟 Help Center documentation:   [Animation - Layer Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/animation-layer-parameters)

<figure><img src="/files/gWXQjn5KSSA8XPXShOW4" alt=""><figcaption></figcaption></figure>

### 2.Adding Particle Effects

If you want to add particle effects, you can select them from the "Particle" section in the "Asset Library." After adding them to the canvas, adjust their positions accordingly.

**Note:** After adjusting the portrait layout, make sure to also adjust the positions of particles for the landscape mode.

🌟 Help Center documentation: [Particle Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/exterior-layer-parameters/particle-parameters/particle-parameters)

<figure><img src="/files/FZvIQkn9mdIiXmL2qpau" alt=""><figcaption></figcaption></figure>

Once all animation settings are done, we move on to the most important step - event setting.

## <mark style="color:blue;">Step 4: Event Setting</mark>

Typically, we set up events in the order they occur during gameplay.&#x20;

Depending on your specific requirements, events can be set on images, groups, interactive areas, scenes, and more.

It is recommended to preview the event settings promptly after completing each section to ensure they meet your needs. This also allows for timely adjustments if any issues arise.

🌟 Help Center documentation:  [Event - Common Parameters](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/event-common-parameters)  [Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables)

<figure><img src="/files/z8mebyyAiAvgSkCYJ7GK" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**Note:**</mark> Remember to check the "Ending Scene" as the final ending page or manually add the "Report the end of the playable ads."

🌟 Help Center documentation:  [WORK CREATION-IMPORTANT NOTICE⚠️](/playable-tools-content-editor/work-creation-important-notice#report-the-end-of-the-playable-a-ds)

<figure><img src="/files/ijnvBzE7dWccnqOQwWwZ" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Step 5: Language Translation</mark>

After completing the basic setup for all content, click on "Global Settings" and add multiple language versions under "Default Language."&#x20;

* Click on "Add Language" to open the text translation window where you can select the desired target language to generate.&#x20;
* You can also delete unwanted language versions under "Default Language."

🌟 Help Center documentation:  [Multi-language Configuration and Translation](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/parameter-setting-area/global-settings/multi-language-configuration-and-translation)

<figure><img src="/files/CLrkFEZIhsMDWX3FL6aQ" alt=""><figcaption></figcaption></figure>

* Once the multilingual versions are added successfully, make sure to preview all scenes in each language. You can fine-tune the text font size and other content for that particular language version on the right side.

<figure><img src="/files/9VffcHWtQ77IkT38bEQt" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Step 6: Overall Preview</mark>

After completing the production of the above content, our materials are ready.&#x20;

Click on "Preview" to have an overall preview and playtest on different devices, in different languages, and in both landscape and portrait modes to ensure there are no issues.

<figure><img src="/files/TbSHspkltYur2c0cZJr7" alt=""><figcaption></figcaption></figure>

## <mark style="color:blue;">Step 7: Completion of Product Info</mark>

Once everything is confirmed to be correct, before applying or downloading, we need to complete the final step - adding product information.&#x20;

* Click on "Project Info" in the upper right corner.&#x20;
* In the pop-up window, click on "Associate with Promoted product" and select "Add Promoted Product."
* Fill in the relevant product information in the pop-up window and click "Confirm."

<div align="left"><figure><img src="/files/RIIrsJLhSXeUgyfhZmu0" alt="" width="371"><figcaption></figcaption></figure></div>

🌟 Help Center documentation:  [Content Editor - Download\&Apply](/playable-tools-content-editor/content-editor-user-guide/content-editor-download-and-apply)

That's it! The above steps outline the complete process for creating a project in "Blank Canvas."


# Creation Tips - Scene Creation

\#Content Editor

## <mark style="color:blue;">1.Overall Recommendations</mark>

It is recommended to split scenes reasonably: Avoid adding too many scenes, and avoid adding excessive assets or effects within the same scene. This can prevent performance issues such as slow loading and lag during ad playback.

Specific Production Recommendations:

* It is advised to compress asset sizes as much as possible in the first main scene. Avoid using excessively large video assets, as it can affect the completion rate of asset loading and the interaction initiation rate.
* Avoid using large videos and a large number of frame sequences, as this can impact the loading rate of assets.
* Do not exceed four videos within the same scene.

## <mark style="color:blue;">2.Global Scene</mark>

It is recommended to place persistent information in the "Global Scene" to avoid the hassle of duplicating it and facilitate centralized management.&#x20;

Persistent information typically includes product information, download buttons, and disclaimers. Depending on the specific situation, you can also place content that appears in every scene in the global scene.  [Global Settings](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/scene-area/global-settings)

<figure><img src="/files/jE4RdLKV3wAwP7kwbUb5" alt=""><figcaption></figcaption></figure>

In the settings of regular scenes, you can flexibly adjust based on the actual production needs. You can choose whether to enable Global scene in the current scene and specify whether to put it on the top or bottom layer of the current scene.

<figure><img src="/files/azcf3jmQ0Zu3iZxcdtcV" alt=""><figcaption></figcaption></figure>

For example, if you want to create a masking effect on the end page, you can choose to "put the global scene on the bottom" for a more aesthetic appearance.

<div align="left"><figure><img src="/files/f9kjNrIR8jv65BF3mEIW" alt="" width="198"><figcaption></figcaption></figure></div>

## <mark style="color:blue;">3.Scene</mark>

The core idea of scene splitting is to minimize the number of animations and events within a single scene, keep the layer structure simple (making it easier to inspect animation and event settings), and avoid adding too many scenes that can cause lag during gameplay.&#x20;

Therefore, it is generally recommended to separate <mark style="color:orange;">the core gameplay</mark> from <mark style="color:orange;">the result feedback</mark> when creating scenes.

**Now let's explain in detail using a case example:**

#### 1) Scene1: Core Gameplay

This scene showcases the core gameplay elements and provides instructions on how to interact. It clearly defines the interaction goals and guides players through the gameplay.

<figure><img src="/files/MyGFZ6r41C9d5u2h5QJr" alt=""><figcaption></figcaption></figure>

#### 2) Scene2/3/4: Corresponding Results A/B/C&#x20;

In Scene1, there are three options to choose from, each leading to a different result. Therefore, we place each result in a separate scene.

<figure><img src="/files/Uqp6lyvOR9jS6oUUOqux" alt=""><figcaption></figcaption></figure>

#### 3) Scene5: End Page

It is generally recommended to display the following content on the end page: product information, settlement details, reward information, promotional offers, and other relevant information. Additionally, it is advisable to include a button for redirection.

<figure><img src="/files/yIEHRiMYdEgDcBORGY6R" alt=""><figcaption></figcaption></figure>


# Creation Tips - Assets

\#Content Editor

## 📒<mark style="color:blue;">Asset Grouping</mark>

It is recommended to group and organize assets in the layer area based on categories or their functions after adding them to the canvas. This will make it easier for subsequent production tasks.

<figure><img src="/files/14M6IH8EgkYJbTakHYCJ" alt=""><figcaption></figcaption></figure>

<mark style="color:red;">**What is the purpose of grouping?**</mark>

Firstly, it's important to understand that groups have a higher hierarchy than individual assets. Higher-level groups also have a higher hierarchy than lower-level groups. This means that adjustments made to a group will affect all the assets within it, and adjustments made to a higher-level group will affect all the lower-level groups and assets within it.

For example, when you hide the group of left-side props, the text and images within it will be hidden together. Similarly, when you hide the entire options group, the instructional text, finger pointing, and both prop groups underneath it will also be hidden.

<figure><img src="/files/sPxnD99ZLCRq5YV1QAGQ" alt=""><figcaption></figcaption></figure>

Therefore, grouping assets appropriately:

1）Facilitates quick identification and locating of specific assets when dealing with a large number of assets. It helps in determining which part of the assets has issues.

2）Enables more efficient animation and event setup. Instead of individually setting the same animation/event on each asset, you can set it on the group, saving time and effort.

3）Facilitates screen adaptation for the entire group of assets and allows adjustments to the landscape layout. After completing the vertical layout, when transitioning to the landscape mode, select the main group and click the "Reuse vertical screen position configuration" button to apply the layout with a single click.

## 📒<mark style="color:blue;">Effect Implementation</mark>

### 1.How to create "Mirror & Reflection"?

Approach: Mirror effect is achieved by horizontal flipping, while reflection effect is achieved by vertical flipping. Adjust the scale of the corresponding layer in the appearance parameters.

1）Select the layer you want to adjust.

2）In the parameter setting area on the right side, modify the scale:

* Mirror Effect: Adjust the value of "Scale X" in the "Scale" to -1.

<figure><img src="/files/RjWU4Ld39wwl3tp222rL" alt=""><figcaption></figcaption></figure>

* Reflection Effect: Adjust the value of "Scale Y" in the "Scale" to -1.

<figure><img src="/files/vRTZgF2ABPzzZG2DFL7b" alt=""><figcaption></figcaption></figure>


# Creation Tips - Animation Setting

\#Content Editor

## <mark style="color:blue;">1.Common operation guidance (finger animation)</mark>

<table data-full-width="false"><thead><tr><th width="160">Finger Animation</th><th width="156">Illustration</th><th width="296">Steps</th><th>Screenshot</th></tr></thead><tbody><tr><td><strong>On-spot clicking</strong></td><td><img src="/files/AgtGYALB4RZTkteU3P2i" alt="" data-size="original"></td><td><ul><li>Finger Image: Add animation - Universal - Scale Easing. Set the parameters as shown  in Image 1 on the right.</li><li><p>Click Effect Image (optional):</p><ul><li>Add animation - Universal - Scale Easing &#x26; Alpha Easing. Set the parameters as shown  in Image 2&#x26;3 on the right.</li><li>If you want to create a double-layered halo effect, you can duplicate another halo layer and set the "Delay Time" of both animations to 0.2s.</li></ul></li></ul></td><td><p><img src="/files/VRFmtf421xvYeP8rDDJx" alt="" data-size="original"></p><p><img src="/files/DhXdesFUwA4EKICuz0cR" alt=""></p><p><img src="/files/Cke83YX0IgnvZnRIUOfo" alt=""></p></td></tr><tr><td><strong>Moving click</strong></td><td><img src="/files/51KNj0Ai0iTuUUuywkgH" alt="" data-size="original"></td><td><ul><li>Finger Image: Add animation - Universal - Displacement Easing. Set the parameters as shown in the image on the right.</li></ul></td><td><img src="/files/geJ9kFdjVBnap0dlTt3f" alt="" data-size="original"></td></tr><tr><td><strong>Choose one of the two options</strong></td><td><img src="/files/LhiUjAsPicWln716ev3A" alt="" data-size="original"></td><td><ul><li>Finger Image: Add animation - Universal - Displacement Easing &#x26; Scale Easing. Set the parameters as shown  in Image 1&#x26;2 on the right.</li><li><p>Option Buttons:</p><ul><li>option_A: Add animation - Universal - Scale Easing. Set the parameters as shown in Image 3 on the right.</li><li>option_B: Duplicate the animation to option_B image and adjust the animation curve to the opposite direction. Set the parameters as shown in Image 4 on the right.</li></ul></li></ul></td><td><p><img src="/files/ynImNJPusjBxPQ4a87Op" alt="" data-size="original"></p><p><img src="/files/FDwugCj5OOgCrX7Mr8Aw" alt=""></p><p><img src="/files/Q1asTRMog0TNz8Dmu7K8" alt=""></p><p><img src="/files/WolkBYQP347GJMpBYvG6" alt=""></p></td></tr><tr><td><strong>Choose one of the four options</strong></td><td><img src="/files/cqKklIe8T8ZdEDQE5kFj" alt="" data-size="original"></td><td><p></p><ul><li><p>Finger Image(horizontal movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 1 on the right.</p><ul><li>Optional: Add animation - Universal - Scale Easing &#x26; Alpha Easing. Set the parameters as shown  in Image 2&#x26;3 on the right.</li></ul></li><li>Finger Image Group(vertical movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 4 on the right.</li><li>Option Buttons: Add animation - Universal - Scale Easing to the four options in sequence.</li></ul></td><td><p><img src="/files/w8p2sHy8vmB946p8K8eI" alt="" data-size="original"><img src="/files/2tSdVTlWc4MyLI1W65es" alt=""></p><p><img src="/files/aPFSpNGLadXRmerh8kpG" alt=""></p><p><img src="/files/5mJZHYZT65vz9aPZNF9M" alt=""></p></td></tr><tr><td><strong>Left-Right Swipe</strong></td><td><img src="/files/EqIc2YDDct53oVPyvrBa" alt="" data-size="original"></td><td><ul><li>Finger Image: Add animation - Universal - Displacement Easing. Set the parameters as shown in the image on the right.</li></ul></td><td><img src="/files/PAGiTos3fFrhZuypg29H" alt="" data-size="original"></td></tr><tr><td><strong>Swipe Cut</strong></td><td><img src="/files/YaV1nTYOuxDPDNwz1csA" alt="" data-size="original"></td><td><ul><li>Finger Image Group：Add animation - Universal - Displacement Easing &#x26; Alpha Easing. Set the parameters as shown in the image 1&#x26;2 on the right.</li><li>Trail Effect (optional): You can directly place the trail image within the finger group, and it will move along with the group animation.</li></ul></td><td><p><img src="/files/VcNf45TR7uigXk83zHHg" alt=""></p><p><img src="/files/yNCMWtWM5fP9xl4xORRE" alt="" data-size="original"></p></td></tr><tr><td><strong>Figure-Eight Swipe</strong></td><td><img src="/files/IRA0rlalxzlPrzHSUAFC" alt="" data-size="original"></td><td><ul><li>Finger Image(horizontal movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 1 on the right.</li><li>Finger Image Group(vertical movement): Add animation - Universal - Displacement Easing. Set the parameters as shown in image 2 on the right.</li></ul></td><td><p><img src="/files/KGLRcF6Jdy3xHSi8wB21" alt="" data-size="original"></p><p><img src="/files/TLI0XiIVzg4ZgnFOFr76" alt=""></p></td></tr><tr><td><strong>Drag from point A to point B</strong></td><td><img src="/files/xDwEwgpmahwjfBqEkaBj" alt="" data-size="original"></td><td><ul><li>Finger Image: Add animation - Universal - Displacement Easing. Set the parameters as shown in image 1 on the right.</li><li>Opacity Fade-In/Fade-Out Effect (optional): Add two animations -  Universal - Displacement Easing to the finger group. Set the parameters as shown in Images 2&#x26;3 on the right.</li></ul></td><td><p><img src="/files/Gc3dyeYibm56KsLiIEVI" alt="" data-size="original"></p><p><img src="/files/auX6WNLuGMd2Zgq7BZ5c" alt=""></p><p><img src="/files/tJTBL6CxPgDgjSTfKAlR" alt=""></p></td></tr></tbody></table>

####

## <mark style="color:blue;">2.How to set up a breathing animation for a character</mark>

* Select the character layer and modify the pivot to (50, 100).

<figure><img src="/files/WEVhdVPlHUIHxVQU3cMx" alt=""><figcaption></figcaption></figure>

* Add animation - Universal - Scale Easing to the character layer. Set the parameters as follows.
* Note: Adjust the "End Scale" parameter according to your specific needs to control the magnitude of the character's scaling.

<figure><img src="/files/2uEdFRL6gDjh59soG6cw" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">3.How to create a progress bar</mark>

* Prepare two images: background image and progress bar image.
* Select the progress bar layer, modify the pivot to (0, 50), and adjust it to the desired position.

<figure><img src="/files/cMVwLylPfl6sylzQOe0e" alt=""><figcaption></figcaption></figure>

* Add animation -  Universal - Scale Easing to the progress bar layer. Important parameter settings are as follows:
  * Play 1 time
  * Set the initial Scale X to 0, while keeping the Scale Y at the default value of 1.
  * Keep the end scale at the default value of 1.

<figure><img src="/files/tbMDrILv7b0EOGEyK8DC" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">4.How to create a blood bar</mark>

* Prepare two images: background image and blood bar image.
* Select the blood bar layer, modify the pivot to (0, 50), and adjust it to the desired position.

<figure><img src="/files/7shcr4eGNa2G7esI4MaS" alt=""><figcaption></figcaption></figure>

* Add animation -  Universal - Scale Easing to the blood bar layer. Important parameter settings are as follows:
  * Play 1 time
  * Keep the initial scale and  the end scale Y unchanged at the default value of 1.
  * Adjust only the end scale X value, which represents the final blood value.

<figure><img src="/files/7spdoZ6Yt00Z8aqq8Ahq" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">5.How to create an effect of "assets rotating around a specific origin"?</mark>

Taking a example of the screw puzzle gameplay, let's achieve the effect of rotating a wooden board 180° to the right with the screw as the origin.

1）Click on an empty area to create a new group layer with no content.

<figure><img src="/files/iZazGInD3E1eKTQaD7iD" alt=""><figcaption></figcaption></figure>

2）Move the position of the group to the location of the screw, which is the rotation origin (you can use the copy-paste function to quickly reuse the screw's position).

3）Select the group and add a "Spin Easing" animation.

<figure><img src="/files/IUXCfYF9J8jT4YUcRj48" alt=""><figcaption></figcaption></figure>

4）Refer to the image below for the rotation animation parameter settings. Adjust the parameters according to your specific needs.

5）Drag the wooden board layer into the group, and the setup is complete.

<figure><img src="/files/uvTRvqzgooxJ4vA57rZt" alt=""><figcaption></figcaption></figure>

####

## <mark style="color:blue;">6.How to create a "Character Running Back and Forth" Effect</mark>

Example: I have a sequence of frames for a character running in place. How can I create the effect of the character running back and forth?

**Core Logic for Animation Setup:** Use position animation combined with scale animation. When the character reaches the end point, change the scale values from (1,1) to (-1,1).  The specific parameter settings are as follows:

<div align="left"><figure><img src="/files/n3e1JaCFr8VLRIdY8Yki" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/RGIJkn3yvsVCPnJJTzde" alt=""><figcaption><p>Illustration of scale animation curve styles</p></figcaption></figure></div>

####

## <mark style="color:blue;">7.Displacement Animation – Irregular/Curved Motion Path</mark>

To create non-linear displacement animations, the **process** is: group the object image, then set displacement animations on both the image and the group layer (one for horizontal movement, the other for vertical movement). The two animations play together to achieve the desired effect.

**Note:** The specific motion path of the object depends on the settings of the [curve](https://doc.playturbo.com/playable-tools-content-editor/content-editor-creation-tips-center/common-creation-tips/pages/bLf5EaYqbNAgA6qmBX45#id-2.-special-parameter-curve) for the displacement.

<div align="left"><figure><img src="/files/Wz0xSl58cg0R0lUPTl6U" alt="" width="267"><figcaption></figcaption></figure></div>

🌟 **Example with the finger guidance animation above:**

* Add a displacement animation to the finger image \[gf\_hand] to create the horizontal motion path.
* Add a displacement animation to the group layer \[group\_hand] to create the vertical motion path.

<figure><img src="/files/xqPeAGfsM2UQS6mZgMLt" alt=""><figcaption><p>Displacement Easing - X</p></figcaption></figure>

<figure><img src="/files/w57jYjSdDC02yl6DwhDH" alt=""><figcaption><p>Displacement Easing - Y</p></figcaption></figure>

* Additional assets and animations can be added to enrich the guidance effect.

<div align="left"><figure><img src="/files/4ixXHs9t7ez8gNwbm821" alt=""><figcaption></figcaption></figure></div>




---

[Next Page](/llms-full.txt/1)