> 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/playable-tools-content-editor/content-editor-user-guide/editing-page-module-intro/layer-area.md).

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