# 图层区

一个场景，由一个个资产堆砌而成，一个资产即为一个图层。

图层区展示**当前场景**下的全部资产内容及其类型，一般来说，我们将这些资产划分为以下三种类型：

* 普通资产：包含图片、文本、序列帧、龙骨、粒子、手势区域、组节点
* 视频资产：视频
* 音频资产：包含背景音乐与音效

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FzWd6vzb54NQiMbM3atqC%2Fimage.png?alt=media&#x26;token=5739be35-4cf8-4e52-9bbf-c1bb01ef3adc" alt=""><figcaption><p>图层区</p></figcaption></figure>

## <mark style="color:blue;">一、图层展示逻辑</mark>

* 图层面板排序逻辑与画布展示逻辑一致，最上面的图层元素展示在画布最顶层
* 图层模块排序（由上到下）：普通资产>>视频资产>>音频资产
* <mark style="color:red;">视频图层默认位于所有图层的下方</mark> (除背景图片和背景颜色)，且不可移动

👉相关阅读： [#id-4.-shi-pin-shi-pei-te-shu-xu-qiu](https://doc.playturbo.cn/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-shi-pei-xiang-guan#id-4.-shi-pin-shi-pei-te-shu-xu-qiu "mention")  [#hua-bu-de-ji-ben-cao-zuo](https://doc.playturbo.cn/ke-wan-gong-ju-zi-you-bian-ji-qi/zi-you-bian-ji-qi-shi-yong-zhi-nan/zuo-pin-yu-lan-qu#hua-bu-de-ji-ben-cao-zuo "mention")

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FaxZKVNPewt5L9Lr6BjxG%2Fimage.png?alt=media&#x26;token=ff34ed35-52f9-4db0-a608-8d2488a58cf3" alt=""><figcaption></figcaption></figure></div>

## <mark style="color:blue;">二、图层支持的操作</mark>

## 1.调整图层顺序

### **1）方法1**

* 直接在图层面板中拖拽图层，即可调整顺序
* 拖拽方式支持在【普通资产】模块的任意层移动
* 视频资产与音频资产不可拖拽调整

### **2）方法2**

* 在图层面板中，点击选中需要调整顺序的图层
* 点击快捷操作区-图层顺序图标进行调整
* 快捷操作只支持置于顶层/置于底层/上移一层/下移一层4种移动方式

## 2.图层编组/解除编组

将多个资产编组后，对该组内资产的位置大小进行统一操作，或对该组增加动画事件等

<mark style="color:blue;">👉相关阅读：</mark> [#yi-zi-chan-bian-zu](https://doc.playturbo.cn/zi-you-bian-ji-qi-zhi-zuo-ji-qiao-zhong-xin/tong-yong-zhi-zuo-ji-qiao/zhi-zuo-ji-qiao-zi-chan-xiang-guan#yi-zi-chan-bian-zu "mention")

### 1）如何进行图层编组

* 若对单个图层编组，可直接选中图层，点击编组按钮即可
* 若对多个图层编组，则需按住ctrl键，选择多个图层，再点击编组按钮

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FQrCJPGS8svEfJksrHjkO%2Fimage.png?alt=media&#x26;token=6880ac31-5778-472a-b262-81d7057c67b0" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FjF9LAYQwMcmDstEEmema%2Fimage.png?alt=media&#x26;token=763b847b-6cf1-4e1d-aab9-ed82f9f82f78" alt=""><figcaption></figcaption></figure></div>

* 当不选中任何图层时，点击编组按钮，可生成一个默认方形大小居中的组图层。此时，可自定义编辑组的位置、大小，编辑完成后再将所需资产拖进组内即可

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F6YPAiGEr7thLprhO3taC%2Fimage.png?alt=media&#x26;token=fa6c99cf-7a57-4363-93ba-8f8a05ad726b" alt=""><figcaption></figcaption></figure></div>

### 2）如何进行图层解组

* 选中该组图层
* a.鼠标右键单击，调起小弹窗，选择“解除编组”文字按钮，即可完成解组

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FaviIQ4XaAf3Zj2xaY5y4%2Fimage.png?alt=media&#x26;token=888b0f55-7708-421d-ba35-d63e98d9506f" alt=""><figcaption></figcaption></figure></div>

* b.或在快捷操作区点击【解除编组】按钮

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Ft6FhbcgXqte1u8dDO3bp%2Fimage.png?alt=media&#x26;token=1d68bf37-865f-4d43-8a00-87a1441fd1d9" alt=""><figcaption></figcaption></figure></div>

## 3.复制/粘贴图层

### **1）方法1**

* 选中需要复制的图层
* 鼠标右键单击，调起小弹窗，选择“复制图层”文字按钮
* 右键单击，调起小弹窗，选择“粘贴图层”文字按钮，即可完成图层的复制粘贴
* *名称默认为“原名称\_copy”*
* *只支持图层本身的复制粘贴*

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FfpEGOoekJxX7VdkK7uTf%2Fimage.png?alt=media&#x26;token=cdd6ae74-676e-4f47-8381-2256755277f3" alt=""><figcaption></figcaption></figure></div>

### **2）方法2**

* 选中需要复制的图层
* 点击快捷操作区快捷复制按钮
* 点击快捷操作区粘贴按钮，调起小弹窗
* 选择粘贴方式，即可完成图层的快速复制粘贴
* *支持快速复制图层，快速粘贴图层外观/位置大小/动画/事件/图层本身五种属性*

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FSLRBoX58xdjfIXnxBXLe%2Fimage.png?alt=media&#x26;token=92dbca8d-2cef-4cca-8b56-06a05e97eaa3" alt=""><figcaption></figcaption></figure></div>

## 4.删除图层

* 选中需要删除的图层
* 鼠标右键单击，调起小弹窗
* 点击选择“删除图层”文字按钮，即可成功删除图层

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F8wntEYc3BTU8h2UojgcU%2Fimage.png?alt=media&#x26;token=dcb22207-5455-40fc-a6d5-2f833364c5d7" alt=""><figcaption></figcaption></figure></div>

## 5.锁定/解锁图层

* 将鼠标悬停到需要锁定的图层上，该图层会出现解锁状态的<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FTPXsH6q7TX0Mt4SUhxIx%2F0.png?alt=media" alt="image.png" data-size="line">图标
* 点击该图标即可进行锁定，<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FukcjoLbCLfwcw5XiIJ7z%2F1.png?alt=media" alt="image.png" data-size="line">图标变成<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F4jFg7VPMnf4str5iI9Rj%2F2.png?alt=media" alt="image.png" data-size="line">图标
* 点击已锁定图标，即可进行图层解锁
* *图层默认不锁定；当图层锁定时，图层在画布中无法被选中编辑*
* *锁定适用情况：多个场景同时存在，并且位置尺寸无需再被调整的元素*

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F0SUvTHzQSntYtdeKpbFl%2Fimage.png?alt=media&#x26;token=bf112f07-5250-408e-ab38-752602970bfb" alt=""><figcaption></figcaption></figure></div>

## 6.隐藏/显示图层

* 将鼠标悬停到需要隐藏的图层上，该图层会出现显示状态的<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FHhgS3Kpk8sZ2MpedXgHK%2F0.png?alt=media" alt="image.png" data-size="line">图标
* 点击该图标即可进行隐藏，<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FGbkfhyChYi7F3MxxTBkP%2F1.png?alt=media" alt="image.png" data-size="line">图标变成<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2Fz8OmK8bdhWv8S8wFMwyN%2F2.png?alt=media" alt="image.png" data-size="line">图标
* 若需显示图层，点击已隐藏图标，即可将图层设置为显示状态
* *元素默认显示状态*
* *当元素隐藏时，图层在画布中不显示，可以通过事件设置让隐藏的图层显示出来（例如：双击后出现彩带礼花）*

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FmvuiWib2fyJ6G9709oBP%2Fimage.png?alt=media&#x26;token=5604dc16-496c-4006-b686-9bd7096a37a7" alt=""><figcaption></figcaption></figure></div>

## 7.图层颜色

* 选中图层，右键可为图层设置颜色
* 主要用于图层&事件数量较多时，对图层进行分类，方便查找/编辑

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FcsOQ7lqZJ5FNmlfsIHVS%2Fimage.png?alt=media&#x26;token=0c3aa60e-1221-4964-abb7-c6320e5db83e" alt=""><figcaption></figcaption></figure></div>

## 8.动画icon

* 图层默认无动画，图标为 ![](https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2F3K746sofBi2Yr9cohSvF%2Fimage.png?alt=media\&token=03e99f73-c8da-4b90-9588-df378cf922f3)
* 当图层添加动画后，图标自动高亮为 ![](https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FV8u7xg42T2tlYUrk8GBE%2Fimage.png?alt=media\&token=3d4ec5e3-f1d3-41ea-8a25-8105f80334e0)；点击图标可快捷切换到该图层的“动画”参数栏，方便查看&调整

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FrbH4tBv79wCx2819BfDq%2Fimage.png?alt=media&#x26;token=6d2eb547-24e0-415d-8823-12e788c81068" alt=""><figcaption></figcaption></figure>

## 9.事件icon

* 图层默认无事件，图标为<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FNXyyPgZaSnP1UQFdwsgh%2F0.png?alt=media" alt="image.png" data-size="line">
* 当图层添加事件后，图标自动高亮为<img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FAMfTaDQWpKlHlv8giz9l%2F1.png?alt=media" alt="image.png" data-size="line">；点击图标可快捷切换到该图层的“事件”参数栏，方便查看&调整

<div align="left"><figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FIjOlkAg0VNufFMAJo1za%2Fimage.png?alt=media&#x26;token=fe8dee6f-b138-40d4-898e-0592225d20a5" alt=""><figcaption></figcaption></figure></div>

<figure><img src="https://1964780147-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwzFOJWic5gvuaiaPmJmc%2Fuploads%2FUSTL2cq9Xu6l23jDxbDV%2Fimage.png?alt=media&#x26;token=99585170-f403-4a9d-8b6a-d32a1eaea607" alt=""><figcaption></figcaption></figure>