> For the complete documentation index, see [llms.txt](https://doc.playturbo.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.playturbo.com/playturbo-case-study/playable-content-editor/decoration-gameplay-cases/dress-up-blank-canvas-tutorial.md).

# Dress-up - Blank Canvas Tutorial

This tutorial uses the "Dress-Up" gameplay as an introductory case to explain the usage of the "[Global Variables](/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/top-asset-library/global-variables.md)" feature in detail. For best results, it’s recommended to use this tutorial alongside the [DEMO](https://playable-portal.mintegral.com/viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fmindworks-interactive-ads.html%253Furl%253Dhttps%25253A%25252F%25252Fmmp-cdn.rayjump.com%25252Fps%25252Fpreview%25252F24%25252F06%25252F28%25252F667e30885b67a%25252Findex.html%25253Floading%25253D1%252526preview%25253Dtrue%252526lang%25253Dzh-cn%2526mw_test%253D0%2526is_browser_tips%253D1%2526track_data%253D%25257B%252522pid%252522%25253A2283845%25252C%252522uid%252522%25253A109685%25252C%252522sct%252522%25253A%252522pt_project_ps%252522%25252C%252522env%252522%25253A%252522p%252522%25252C%252522cc%252522%25253A%252522CN%252522%25257D%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0\&orientation=3\&name=\&language=en)!

## <mark style="color:blue;">📒Basic Info</mark> <a href="#h5pts-1" id="h5pts-1"></a>

* \[Difficulty]: ⭐⭐
* \[Applicable Products]: Universal
* \[Interaction]: Click/Press
* \[Freedom]: Fully free
* \[Core Assets]: Image
* \[Features]: Global Variables (Assign the value & Condition)

#### &#x20;<a href="#effect-preview" id="effect-preview"></a>

## <mark style="color:blue;">📒Effect Preview</mark> <a href="#effect-preview" id="effect-preview"></a>

<table><thead><tr><th width="232">Best experience for playable on mobile devices</th><th width="230">Vertical screen</th><th>Horizontal screen</th></tr></thead><tbody><tr><td><img src="/files/Om3gsWlOhZZf8QaXvTb7" alt="" data-size="original"></td><td><img src="/files/GrxjHsY64zkM24VvdqA5" alt="" data-size="original"></td><td><img src="/files/u42Evfq1jF3cP7o2Jt2H" alt="" data-size="original"></td></tr><tr><td>Scan to play</td><td><a href="https://playable-portal.mintegral.com/viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fmindworks-interactive-ads.html%253Furl%253Dhttps%25253A%25252F%25252Fmmp-cdn.rayjump.com%25252Fps%25252Fpreview%25252F24%25252F06%25252F28%25252F667e30885b67a%25252Findex.html%25253Floading%25253D1%252526preview%25253Dtrue%252526lang%25253Dzh-cn%2526mw_test%253D0%2526is_browser_tips%253D1%2526track_data%253D%25257B%252522pid%252522%25253A2283845%25252C%252522uid%252522%25253A109685%25252C%252522sct%252522%25253A%252522pt_project_ps%252522%25252C%252522env%252522%25253A%252522p%252522%25252C%252522cc%252522%25253A%252522CN%252522%25257D%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0&#x26;orientation=3&#x26;name=&#x26;language=en">Click to play</a></td><td><a href="https://playable-portal.mintegral.com/viewer/mindwork-view.html?url=https%3A%2F%2Fmmp-cdn.rayjump.com%2Fmindworks-interactive-ads.html%3Furl%3Dhttps%253A%252F%252Fmmp-cdn.rayjump.com%252Fmindworks-interactive-ads.html%253Furl%253Dhttps%25253A%25252F%25252Fmmp-cdn.rayjump.com%25252Fps%25252Fpreview%25252F24%25252F06%25252F28%25252F667e30885b67a%25252Findex.html%25253Floading%25253D1%252526preview%25253Dtrue%252526lang%25253Dzh-cn%2526mw_test%253D0%2526is_browser_tips%253D1%2526track_data%253D%25257B%252522pid%252522%25253A2283845%25252C%252522uid%252522%25253A109685%25252C%252522sct%252522%25253A%252522pt_project_ps%252522%25252C%252522env%252522%25253A%252522p%252522%25252C%252522cc%252522%25253A%252522CN%252522%25257D%2526preview%253Dtrue%2526itavideo%253D2%2526vconsole%253D0%2526mw_test%253D0%2526loading%253D1%26mw_test%3D0&#x26;orientation=3&#x26;name=&#x26;language=en">Click to play</a></td></tr></tbody></table>

#### &#x20;<a href="#gameplay-overview" id="gameplay-overview"></a>

## <mark style="color:blue;">📒Gameplay Overview</mark> <a href="#gameplay-overview" id="gameplay-overview"></a>

**Before starting the production, we need to outline the gameplay logic for this case：**

* Upon entering the trial, a three-choice interactive guide is displayed.
* Players can click on any clothing option to complete the dress-up.
  * If the player selects Option A, the game redirects to the next scene, displaying Outfit A.
  * If the player selects Option B, the game redirects to the next scene, displaying Outfit B.
  * If the player selects Option C, the game redirects to the next scene, displaying Outfit C.

#### &#x20;<a href="#gameplay-overview" id="gameplay-overview"></a>

## <mark style="color:blue;">📒</mark><mark style="color:blue;">**Production Guidelines**</mark> <a href="#gameplay-overview" id="gameplay-overview"></a>

\*Scene setup, landscape/portrait adaptations, and animation settings can be directly explored in the DEMO project. This tutorial focuses on explaining **"Event Settings"**.

### 1.Add Global Variables

* In Scene 1, add variables:
* Set the variable name, such as "ClothType".
* For better understanding, set the variable type to "Value".
* Set the initial value to "0", representing that no choice has been made by the player on the initial screen.

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

### 2. Configure Events and Assign the Value

* Select the layer group for Option A.
* Add Event: Click.
* Add response events:
  * Assign the value: Set ClothType = 1 (i.e., <mark style="color:red;">assign "1" to represent the player's choice of Option A</mark>).
  * Redirect to the next scene.

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

* Repeat the same setup for Options B and C. Copy the event, and adjust the values as follows:
  * Assign ClothType = 2 for Option B.
  * Assign ClothType = 3 for Option C.

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

### 3. Add Conditions

* In Scene 2, Add Event to the scene as follows: Condition.
  * <mark style="color:red;">Condition 1: If ClothType = 1, display Outfit A.</mark>
  * Condition 2: If ClothType = 2, display Outfit B.
  * Condition 3: If ClothType = 3, display Outfit C.

⚠️ During scene setup, ensure that the initial states of Outfit A, B, and C are set to "Hidden". The corresponding outfit will be displayed based on the player's choice.

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

These steps cover all the events used in this example. To create gameplay with multiple dressing choices, please follow the same logic. You can continue adding events and assigning values in Scene 2 or beyond.

#### &#x20;<a href="#gameplay-overview" id="gameplay-overview"></a>

## <mark style="color:blue;">📒Demo Screen Recording</mark> <a href="#gameplay-overview" id="gameplay-overview"></a>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://doc.playturbo.com/playturbo-case-study/playable-content-editor/decoration-gameplay-cases/dress-up-blank-canvas-tutorial.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
