> For the complete documentation index, see [llms.txt](https://viridian-games.gitbook.io/pixel-palette/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://viridian-games.gitbook.io/pixel-palette/core-components/layer-system.md).

# Layer System

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

The layer UI has two implementations:

**uGUI (`LayersPanelUGUI` + `LayerItemUGUI`)**

Each layer is a prefab (`LayerItemUGUI`) with these controls:

<table><thead><tr><th width="256">Control</th><th>What it does</th></tr></thead><tbody><tr><td><strong>Click the row</strong></td><td>Selects that layer (sets it active) — highlighted with <code>selectedBorder</code></td></tr><tr><td><strong>Opacity slider</strong></td><td>Fades the layer (0–100%). Calls <code>SetLayerOpacity()</code> then <code>CompositeAllLayers()</code></td></tr><tr><td><strong>Name input</strong></td><td>Editable text field — renames the layer on edit end</td></tr><tr><td><strong>Preview image</strong></td><td>Shows the layer's Texture2D thumbnail</td></tr><tr><td><strong>Move Up / Move Down</strong></td><td>Reorders by one slot via <code>MoveLayer(index, index±1)</code>. Buttons gray out at edges</td></tr><tr><td><strong>Duplicate</strong></td><td>Clones the layer's pixels into a new layer above it</td></tr><tr><td><strong>Merge Down</strong></td><td>Blends this layer into the one below, then deletes it.</td></tr><tr><td><strong>Delete</strong></td><td>Removes the layer. Shows a <code>ConfirmPopupUGUI</code> first.</td></tr><tr><td><strong>Add Layer (bottom button)</strong></td><td>Appends a new blank layer.</td></tr></tbody></table>

#### Layer

Layer is a data class holding a
&#x20;`Texture2D` and a
&#x20;`Color32[]` raw pixel array. Each layer has:

<table><thead><tr><th width="210">Property</th><th>Description</th><th data-hidden></th></tr></thead><tbody><tr><td>Texture</td><td>Unity <code>Texture2D</code> for GPU display</td><td></td></tr><tr><td>RawPixels</td><td><code>Color32[]</code> backing array for CPU operations</td><td></td></tr><tr><td>Visible</td><td>Whether the layer contributes to the composite</td><td></td></tr><tr><td>Opacity</td><td>Layer opacity (0–1)</td><td></td></tr><tr><td>Name</td><td>Display Name</td><td></td></tr></tbody></table>

**Each layer is like a transparent sheet of paper.** You can draw on it, hide it, or fade it. Layers stack from bottom to top — the top sheet covers what's underneath.

**Per-layer:** Every layer has its own `RawPixels` array (stores every pixel's color) and a `Texture2D` (for the GPU to display). Each layer also has a visibility toggle and an opacity slider (0–100%).

**What you can do:**

* Add, delete, duplicate, reorder (drag), and rename layers
* Merge a layer down into the one below it (blends then removes the top one)
* Toggle visibility and adjust opacity

**How the final picture is built (compositing):**

1. Only the area that changed (dirty rectangle) is recomputed — not the whole canvas
2. **Fast path:** If you have exactly one layer that's visible and fully opaque, just copy it straight to the screen. No blending needed.
3. **General path:** For each pixel, walk all visible layers bottom-to-top and alpha-blend them over each other using the standard "over" operator. Layer opacity is multiplied into each pixel's alpha before blending.
4. **Extras on top:** Selection outline (marching ants), floating selection content, and onion skin preview are stamped over the final pixels
5. **Upload:** The result is sent to the GPU texture via `SetPixels32` + `Apply`


---

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

```
GET https://viridian-games.gitbook.io/pixel-palette/core-components/layer-system.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.