Add tilemap and group layers

jmcurr · May 25, 2021 · 2a29cb5 · 2a29cb5
1 parent 02edf5d
commit 2a29cb5
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 6 deletions.
diff --git a/layer-group.md b/layer-group.md
@@ -0,0 +1,22 @@
+# Layer Group
+
+To better organize your sprite, you can group a set of layers in a little folder:
+
+![Layer Groups](layer-group/layer-groups.png)
+
+With groups you can show/hide (<kbd>Shift+X</kbd>) or lock/unlock
+several layers at the same time, or expand/collapse the folder
+in the [timeline](timeline.md) (<kbd>Shift+E</kbd>)
+
+To create a new *Layer Group* you can use the *Layer > New > New
+Group* menu, or pressing <kbd>Alt+Shift+N</kbd> shortcut. If there is
+a [selected range of layers](range.md) in the [timeline](timeline.md),
+the new group will be created containing those selected layers
+automatically.
+
+---
+
+**SEE ALSO**
+
+[Layers](layers.md) |
+[Timeline](timeline.md)
diff --git a/layer-group/layer-groups.png b/layer-group/layer-groups.png
diff --git a/layers.md b/layers.md
@@ -58,19 +58,43 @@ When you select a portion of a transparent layer and clear it (using
 *Edit > Clear* menu), the selection will be cleared with
 [transparent color](transparent-color.md).
 
+You can use *Layer > New > New Layer* menu or <kbd>Shift+N</kbd> to
+create a new transparent layer.
+
 ## Background from Layer
 
-If there is no background layer, you can convert the any transparent
-layer to the background using the *Layers > Background from Layer*
+If there is no background layer, you can convert any transparent
+layer to the background using the *Layer > Convert To > Background*
 menu. All transparent pixels will be filled with the active
 [background color](color-bar.md#background-color).
 
+> Previously, on Aseprite v1.2 the option was *Layer > Background from Layer*
+
 ## Layer from Background
 
 If you want to convert the background to a transparent layer
 (e.g. because you want to move it with the [Move tool](move-tool.md)
-![Move tool icon](tools/move-tool.png)), you can use the *Layers >
-Layer from Background* menu.
+![Move tool icon](tools/move-tool.png)), you can use the
+*Layer > Convert To > Layer* menu.
+
+> Previously, on Aseprite v1.2 the option was *Layer > Layer from Background*
+
+## Layer Group
+
+You can [group layers](layer-group.md) to handle a set of layers as
+one unity.
+
+## Tilemap Layer
+
+Since **Aseprite v1.3**, you can create [tilemap layers](tilemap.md)
+from *Layer > New > New Tilemap Layer* menu or using <kbd>Space+N</kbd>.
+You can also use *Layer > Convert To > Tilemap* from any regular transparent
+layer (the tiles will be created from the active grid settings).
+
+## New Layers from Selection
+
+* <kbd>Ctrl+J</kbd> or <kbd>⌘J</kbd>: Copies the [selection](selecting.md) and creates a new layer from it
+* <kbd>Ctrl+Shift+J</kbd> or <kbd>⇧⌘J</kbd>: Cuts the [selection](selecting.md) and creates a new layer from it
 
 ---
 

diff --git a/new-layer.md b/new-layer.md
@@ -1,8 +1,8 @@
 # New Layer
 
-Add new layers using *Layers > New Layer* menu (`Shift+N` key). Also
+Add new layers using *Layer > New > New Layer* menu (`Shift+N` key). Also
 you can right-click a layer in the [timeline](timeline.md) and
-select *New* option.
+select *New* option:
 
 ![Layer right-click](new-layer/layer-right-click.png)
 

diff --git a/sidebar.md b/sidebar.md
@@ -12,6 +12,7 @@
 [Sprite](sprite.md)
 * [Layers](layers.md)
 * [Animation](animation.md)
+* [Tilemap](tilemap.md)
 
 Files & Customization
 * [Exporting](exporting.md) &mdash; [CLI](cli.md)

diff --git a/tilemap.md b/tilemap.md
@@ -0,0 +1,48 @@
+# Tilemap
+
+Since **Aseprite v1.3** you can create *tilemaps* with *tilesets*.
+
+What is a **tilemap**? A tilemap is a special kind of layer where each grid cell on the canvas is a reference to a tile (a little image) in its *tileset*. You can create a new tilemap from *Layer > New > New Tilemap Layer* or pressing <kbd>Space+N</kbd>.
+
+What is a **tileset**? As its name says, it's a set of tiles, just like the color palette which is a set of colors. Each tile has an index and can be re-used in different position in the canvas on each tilemap grid cell.
+
+Example:
+
+![Tilemap Example](tilemap/tilemap-example.png)
+
+## Similarities with Indexed Color
+
+We can compare a tilemap with an [indexed image](color-mode.md#indexed):
+
+| Tilemaps | Indexed Color
+| -------- | -------------
+| **Tile**: One little image that can be reused in several places of a Tilemap Layer | **Palette entry**: One RGBA color that can be reused in several places of an Indexed Image.
+| **Tileset**: A collection of tiles of the same size. | **Palette**: A collection of RGBA colors (palette entries).
+| **Tilemap Layer**: A 2D image where each pixel is a “tile index” that references a tile in the tileset. Each tilemap has a specific tileset associated. | **Indexed Image**: A 2D image where each pixel references a palette entry with an index.
+| **Tile Index**: A value from 0 to N (where N=number of tiles in the tileset, and 0 is the *empty tile*) | **Palette Index**: A value from 0 to N-1 (where N=number of palette entries)
+
+## Modes
+
+When you are in a Tilemap Layer, there are 2 main modes, you can switch between these modes pressing <kbd>Space+Tab</kbd>:
+
+| Mode |   | Description
+| ---- | - | -----------
+| *Draw Pixels* | ![](tilemap/pixels-mode.png) |  Draws pixels in each tile, i.e. modifies the tile content/pixels. This is like when you modify regular layers (you modify pixels). |
+| *Draw Tiles* | ![](tilemap/tiles-mode.png) | Puts/gets tiles directly (doesn't modifying tiles content, modifies the tilemap information) |
+
+When we draw pixels in a tilemap, we are modifying the content of each
+tile, but there are three special modes that indicate how we should
+handle these modifications between tiles:
+
+| Draw Pixels  |   | Description
+| ------------ | - | -----------
+| ![](tilemap/manual-mode.png) | *Manual* | It will modify each tile content, without re-ordering the tileset. Useful if you have already a fixed tileset and don’t want to change the position of each tile in the tileset. <kbd>Space+1</kbd>
+| ![](tilemap/auto-mode.png) | *Auto* | It tries to create new tiles (or reuse existing tiles) when you draw, and will erase unused tiles if they are not found in any tilemap referencing the tileset. It’s the default mode because it tries to simulate a regular layer adjusting the whole tileset automatically. <kbd>Space+2</kbd>
+| ![](tilemap/stack-mode.png) | *Stack* | It will create a new tile for each modification that is done in an existing tile, without modifying existing tiles, and stacking all the new ones. <kbd>Space+3</kbd>
+
+---
+
+**SEE ALSO**
+
+[Color Mode](color-mode.md) |
+[Layers](layers.md)
diff --git a/tilemap/auto-mode.png b/tilemap/auto-mode.png
diff --git a/tilemap/manual-mode.png b/tilemap/manual-mode.png
diff --git a/tilemap/pixels-mode.png b/tilemap/pixels-mode.png
diff --git a/tilemap/stack-mode.png b/tilemap/stack-mode.png
diff --git a/tilemap/tilemap-example.png b/tilemap/tilemap-example.png
diff --git a/tilemap/tiles-mode.png b/tilemap/tiles-mode.png