# Layer Area

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.md#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.md#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>


---

# Agent Instructions: 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:

```
GET https://doc.playturbo.com/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.