diff --git a/tutorial.md b/tutorial.md index f5b4f38..63b27e5 100644 --- a/tutorial.md +++ b/tutorial.md @@ -3,6 +3,8 @@ ## Articles * [Color Bar Article](tutorial/color-bar-tutorial.md) +* [Timeline and Animation Article](tutorial/timeline-tutorial.md) +* [Tilemaps and Tilesets Article](tutorial/tilemap-tutorial.md) ## Tutorials by Users @@ -30,6 +32,12 @@ world. And we are grateful that they use Aseprite for this: +### Community Guides + +There are also guides made by the community on the [Aseprite Community Page](https://community.aseprite.org/c/guides/). + +https://community.aseprite.org/c/guides/ + ## Common tasks and questions ### Animation diff --git a/tutorial/color-bar-article/add-to-palette.png b/tutorial/color-bar-article/add-to-palette.png new file mode 100644 index 0000000..674564d Binary files /dev/null and b/tutorial/color-bar-article/add-to-palette.png differ diff --git a/tutorial/color-bar-article/discrete.png b/tutorial/color-bar-article/discrete.png new file mode 100644 index 0000000..3a8d18c Binary files /dev/null and b/tutorial/color-bar-article/discrete.png differ diff --git a/tutorial/color-bar-article/foreground-background.png b/tutorial/color-bar-article/foreground-background.png new file mode 100644 index 0000000..bc7fde1 Binary files /dev/null and b/tutorial/color-bar-article/foreground-background.png differ diff --git a/tutorial/color-bar-article/palette-triangles.png b/tutorial/color-bar-article/palette-triangles.png new file mode 100644 index 0000000..0c74c5d Binary files /dev/null and b/tutorial/color-bar-article/palette-triangles.png differ diff --git a/tutorial/color-bar-article/remap-palette.gif b/tutorial/color-bar-article/remap-palette.gif new file mode 100644 index 0000000..133b773 Binary files /dev/null and b/tutorial/color-bar-article/remap-palette.gif differ diff --git a/tutorial/color-bar-tutorial.md b/tutorial/color-bar-tutorial.md index 0e3e90c..d476365 100644 --- a/tutorial/color-bar-tutorial.md +++ b/tutorial/color-bar-tutorial.md @@ -1,4 +1,7 @@ # Article - The Color Bar and Palettes +*By [crashtestjava](https://github.com/crashtestjava)* + +
This article will explain the color bar and palettes, covering everything from the very basics to more niche/advanced features, like sprite color modes and color wheel picker types. @@ -28,9 +31,12 @@ This article will explain the color bar and palettes, covering everything from t * [Sorting](#sorting) * [Gradients](#gradients) * [FAQ/Troubleshooting](#faqtroubleshooting) + * [What are the black/white triangles in the palette?](#what-are-the-blackwhite-triangles-in-the-palette) * [Why didn't my palette load in order?](#why-didnt-my-palette-load-in-order) * [Why can't I draw with colors not in the palette?](#why-cant-i-draw-with-colors-not-in-the-palette) * [Why can't I draw with the first color in the palette?](#why-cant-i-draw-with-the-first-color-in-the-palette) + * [Why does switching a sprite's color mode to Indexed change the first color?](#why-does-switching-a-sprites-color-mode-to-indexed-change-the-first-color) + * [How can I re-arrange my palette in Indexed mode without breaking the sprite's colors?](#how-can-i-re-arrange-my-palette-in-indexed-mode-without-breaking-the-sprites-colors) * [How can I change the color picker type?](#how-can-i-change-the-color-picker-type) * [How can I access the color sliders menu?](#how-can-i-access-the-color-sliders-menu) * [How can I change the location of the color bar?](#how-can-i-change-the-location-of-the-color-bar) @@ -45,27 +51,33 @@ The color bar is where the palette, color picker, and foreground/background colo The foreground color is the main color you'll be using to draw with. The background color is more of a secondary color that you may or may not use depending on your workflow. -When using the color bar, Left Click is associated with the foreground color and Right Click is associated with the background color (e.g: left clicking selects the foreground color, rightclicking selects the background color). +When using the color bar, Left Click is associated with the foreground color and Right Click is associated with the background color (e.g: left clicking selects the foreground color, right clicking selects the background color). ### What is the palette? -The palette is a list of colors (sometimes referred to as "palette entries") that you can use in your sprite. Colors can be added, changed, moved around, etc. You can use colors that aren't in the palette (unless your sprite is in Indexed mode, which will be talked about later). +The palette is a list of colors (sometimes referred to as "palette entries") that you can use in your sprite. Colors can be added, changed, moved around, etc. You can use colors that aren't in the palette (unless your sprite is in *Indexed* mode, which will be talked about in the [Color Modes](#indexed-color-mode) section). -While the palette does not have a limit of how many entries it can have, palettes with more than `256` entries will not load correctly ([#3804](https://github.com/aseprite/aseprite/issues/3804)). +While the palette does not have a limit of how many entries it can have, palettes with more than `256` entries will not load correctly due to a bug ([#3804](https://github.com/aseprite/aseprite/issues/3804)). ### What is the color picker? -The color picker (not to be confused with the eyedropper tool) is how you will create new colors to use in your sprite. By default, the color picker is set to "Color Tint/Shade/Tone" (HSV). +The color picker (not to be confused with the [Eyedropper Tool](https://www.aseprite.org/docs/eyedropper#eyedropper)) is how you will create new colors to use in your sprite. By default, the color picker is set to "Color Tint/Shade/Tone" (HSV). ## Using the Color Picker and Foreground/Background Colors -To pick the foreground color from the color picker, Left Click and drag. To pick the background color, Right Click and drag. You can also change the foreground/background color by clicking on the foreground/background color buttons below the color pickers to open up the sliders menu; dragging the sliders menu into the sprite editor will make it stay open after unfocusing. +To pick the foreground color from the color picker, Left Click and drag. To pick the background color, Right Click and drag. + +The Mouse Wheel can be used to adjust the color hue. Holding Ctrl, Alt, or Shift while doing this will adjust the hue more quickly. + +You can also change the foreground/background color in the sliders menu, which can be opened by clicking on the foreground/background color buttons below the color pickers. Dragging the sliders menu into the sprite editor will make it stay open after unfocusing. You can show more than one type of color selector (RGB, HSV, etc) by Ctrl/Shift/Alt+Left Clicking on a selector type button. + +![foreground and background color buttons](color-bar-article/foreground-background.png) ![color picking demo](color-bar-article/color-picking.gif) ## Changing the Color Picker Type -To change the type of color picker, go to the *Options* ![options icon image](color-bar-article/options-icon.png) menu above the palette. The color picker types are located in the fourth section. At the moment, there is only five options available: +To change the type of color picker that is shown on the color bar, go to the *Options* ![options icon image](color-bar-article/options-icon.png) menu above the palette. The color picker types are located in the fourth section. At the moment, there are only five options available: * Color Tint/Shade/Tone (HSV) * Color Spectrum (HSL) @@ -77,7 +89,11 @@ To change the type of color picker, go to the *Options* ![options icon image](co ### Color Wheel Harmonies and Discrete Mode -The color wheel types have a few extra options: [color harmony](https://en.wikipedia.org/wiki/Harmony_(color)) modes and the *Discrete* mode toggle, which splits the color wheel into color sections. They can be accessed from the menu icon in the top right-hand corner of the color picker. +The color wheel types have a few extra options: [color harmony](https://en.wikipedia.org/wiki/Harmony_(color)) modes and the *discrete mode* toggle. They can be accessed from the menu icon in the top right-hand corner of the color picker. + +Discrete mode splits the color wheel into color sections: + +![discrete mode example](color-bar-article/discrete.png) The color harmony options allow for multiple colors to be picked in accordance with a harmonious color scheme. The options are: @@ -96,21 +112,28 @@ The colors that are picked are shown in the bottom right corner of the color whe ## Using the Palette -To add a color to the palette, click the red icon ![red icon image](color-bar-article/red-icon.png) next to the foreground or background color below the palette. If there isn't a red icon, that means the color has already been added to the palette. +To add a color to the palette, click the red icon ![red icon image](color-bar-article/red-icon.png) next to the foreground or background color buttons below the palette. If there isn't a red icon, that means the color has already been added to the palette. + +![add to palette example](color-bar-article/add-to-palette.png) + +Left Click a color to select it as the foreground color; Right Click a color to select it as the background color. If a color has a black or white triangle in its *top left* corner, that means it is selected as the foreground color; if it has a smaller triangle in its *bottom right* corner, it is selected as the background color. -Left Click a color to select it as the foreground color; Right Click a color to select it as the background color. To select multiple colors, Right or Left Click and drag. If a color has a black or white triangle in its top left corner, that means it is selected as the foreground color; if it has a smaller triangle in its bottom left corner, it is selected as the background color. +To select multiple colors, Right or Left Click and drag. To move a color or multiple colors, Right or Left Click the yellow selection outline and drag. ![changing the palette demo](color-bar-article/selecting-palette.gif) -To duplicate a color or multiple colors, Right or Left Click the yellow selection outline while holding Ctrl and drag. +To duplicate a color or multiple colors, Right or Left Click the yellow selection outline while holding either Ctrl or Alt and drag. -To quickly move between palette colors, you can press [ to move back a color and ] to move forward a color. +To add to the current selection, Right or Left Click while holding either Ctrl or Shift. Additionally, doing this while clicking on a color *inside* the selection will change the foreground/background color to that color without altering the selection. + +To quickly move between palette colors, you can press [ to move back a color and ] to move forward a color. Alternatively, you can also use Alt+Mouse Wheel. You can change the size of the palette entries with Ctrl+Mouse Wheel or by going into the *Options* ![options icon image](color-bar-article/options-icon.png) menu and selecting *Small Size*, *Medium Size*, or *Large Size*. -Clicking and dragging the two lines at the end of the palette can delete or add entries to the palette (the color of the added entries will be #000000). +Clicking and dragging the two lines at the end of the palette can delete or add entries to the palette (the color of the added entries will be `#000000`). + ### Editing colors @@ -122,7 +145,7 @@ You can turn on *Edit Color* mode by pressing A, toggling the *lock b ### Loading and Saving with Files -To load a palette from a file, open the *Options* ![options icon image](color-bar-article/options-icon.png) menu and then click on *Load Palette*. To save a palette to a file, open the *Options* menu and then click on *Load Palette*. +To load a palette from a file, open the *Options* ![options icon image](color-bar-article/options-icon.png) menu and then click on *Load Palette*. To save a palette to a file, open the *Options* menu and then click on *Save Palette*. ![load palette demo](color-bar-article/load-palette.gif) @@ -172,6 +195,10 @@ The Indexed color mode is best for sprites with a pre-defined palette. In Indexe ![indexed color mode demo](color-bar-article/create-color-indexed.gif) +If you re-arrange the palette, the colors in your sprite will change because the re-arranging changed the colors and not the indexes. Clicking on the "Remap Palette" button that appears below the palette will remap the sprite's indexes, fixing the sprite's colors. + +![remap palette demo](color-bar-article/remap-palette.gif) + Indexed mode also needs an index to be used as the transparent color, which is indicated by a dot in the color's center. By default, the first (0th) index is the transparent color, but it can be changed in the *Sprite > Properties* menu. ### Grayscale Color Mode @@ -209,6 +236,12 @@ Aseprite allows you to create a gradient between two colors in the palette. You ## FAQ/Troubleshooting +### What are the black/white triangles in the palette? + +A black or white triangle in a palette color indicates that that color is selected as the foreground/background color. A large triangle in the top left corner means it's selected as the foreground color, and a small triangle in the bottom right corner means it's selected as the background color. See [Using the Palette](#using-the-palette) for more information on the palette. + +![palette triangles example](color-bar-article/palette-triangles.png) + ### Why didn't my palette load in order? If you loaded your palette as a `.png` file and the palette is out of order, the "RGB to palette index mapping" setting is likely the problem. In the [Preferences](https://www.aseprite.org/docs/preferences#preferences) menu, under "Experimental", setting the RGB to palette index mapping to `Table RGB 5 bits + Alpha 3 bits` will make the palette load correctly. @@ -225,11 +258,19 @@ This is likely because your sprite [color mode](#color-modes) is set to *Indexed Your sprite [color mode](#color-modes) is likely set to *Indexed*, which requires a palette index to be used as the transparent color; by default, this is the first color (0th index) in the palette. -You can fix it by doing one of the following: +You can fix it by doing one of the following things: * Setting your color mode to RGB with *Sprite > Color Mode > RGB Color* * Changing the transparent color index in the *Sprite > Properties* menu * Making your first index a different color +### Why does switching a sprite's color mode to Indexed change the first color? + +Indexed mode palettes require an index to used as the transparent color, which defaults to the first color (0th index) in the palette. To prevent this, add another color before the first index + +### How can I re-arrange my palette in Indexed mode without breaking the sprite's colors? + +Re-arranging the palette and pressing the "Remap Palette" button that appears below the palette will remap the sprite's indexes, fixing the sprite's colors. See [Indexed Color Mode](#indexed-color-mode) for a demo. + ### How can I change the color picker type? See the [Changing the Color Picker Type](#changing-the-color-picker-type) section. diff --git a/tutorial/tilemap-article/draw-mode.png b/tutorial/tilemap-article/draw-mode.png new file mode 100644 index 0000000..17ae668 Binary files /dev/null and b/tutorial/tilemap-article/draw-mode.png differ diff --git a/tutorial/tilemap-article/draw-pixels-auto.gif b/tutorial/tilemap-article/draw-pixels-auto.gif new file mode 100644 index 0000000..3384949 Binary files /dev/null and b/tutorial/tilemap-article/draw-pixels-auto.gif differ diff --git a/tutorial/tilemap-article/draw-pixels-manual.gif b/tutorial/tilemap-article/draw-pixels-manual.gif new file mode 100644 index 0000000..a00fffa Binary files /dev/null and b/tutorial/tilemap-article/draw-pixels-manual.gif differ diff --git a/tutorial/tilemap-article/draw-pixels-stack.gif b/tutorial/tilemap-article/draw-pixels-stack.gif new file mode 100644 index 0000000..95dc1ea Binary files /dev/null and b/tutorial/tilemap-article/draw-pixels-stack.gif differ diff --git a/tutorial/tilemap-article/draw-tiles.gif b/tutorial/tilemap-article/draw-tiles.gif new file mode 100644 index 0000000..546efe8 Binary files /dev/null and b/tutorial/tilemap-article/draw-tiles.gif differ diff --git a/tutorial/tilemap-article/grid.gif b/tutorial/tilemap-article/grid.gif new file mode 100644 index 0000000..283a436 Binary files /dev/null and b/tutorial/tilemap-article/grid.gif differ diff --git a/tutorial/tilemap-article/import-tileset.gif b/tutorial/tilemap-article/import-tileset.gif new file mode 100644 index 0000000..53ab1c7 Binary files /dev/null and b/tutorial/tilemap-article/import-tileset.gif differ diff --git a/tutorial/tilemap-article/sub-auto-icon.png b/tutorial/tilemap-article/sub-auto-icon.png new file mode 100644 index 0000000..ce6064a Binary files /dev/null and b/tutorial/tilemap-article/sub-auto-icon.png differ diff --git a/tutorial/tilemap-article/sub-manual-icon.png b/tutorial/tilemap-article/sub-manual-icon.png new file mode 100644 index 0000000..853bfe0 Binary files /dev/null and b/tutorial/tilemap-article/sub-manual-icon.png differ diff --git a/tutorial/tilemap-article/sub-modes.png b/tutorial/tilemap-article/sub-modes.png new file mode 100644 index 0000000..f5bda93 Binary files /dev/null and b/tutorial/tilemap-article/sub-modes.png differ diff --git a/tutorial/tilemap-article/sub-stack-icon.png b/tutorial/tilemap-article/sub-stack-icon.png new file mode 100644 index 0000000..7edc384 Binary files /dev/null and b/tutorial/tilemap-article/sub-stack-icon.png differ diff --git a/tutorial/tilemap-article/tile-flipping.gif b/tutorial/tilemap-article/tile-flipping.gif new file mode 100644 index 0000000..c6547b7 Binary files /dev/null and b/tutorial/tilemap-article/tile-flipping.gif differ diff --git a/tutorial/tilemap-article/tile.png b/tutorial/tilemap-article/tile.png new file mode 100644 index 0000000..9caded9 Binary files /dev/null and b/tutorial/tilemap-article/tile.png differ diff --git a/tutorial/tilemap-article/tiled-canvas.gif b/tutorial/tilemap-article/tiled-canvas.gif new file mode 100644 index 0000000..5e6b74a Binary files /dev/null and b/tutorial/tilemap-article/tiled-canvas.gif differ diff --git a/tutorial/tilemap-article/tilemap-layer.png b/tutorial/tilemap-article/tilemap-layer.png new file mode 100644 index 0000000..7f3fa7d Binary files /dev/null and b/tutorial/tilemap-article/tilemap-layer.png differ diff --git a/tutorial/tilemap-article/tilemap.png b/tutorial/tilemap-article/tilemap.png new file mode 100644 index 0000000..520b95e Binary files /dev/null and b/tutorial/tilemap-article/tilemap.png differ diff --git a/tutorial/tilemap-article/tileset-icon.png b/tutorial/tilemap-article/tileset-icon.png new file mode 100644 index 0000000..5d4efa9 Binary files /dev/null and b/tutorial/tilemap-article/tileset-icon.png differ diff --git a/tutorial/tilemap-article/tileset-mode-icon.png b/tutorial/tilemap-article/tileset-mode-icon.png new file mode 100644 index 0000000..1074391 Binary files /dev/null and b/tutorial/tilemap-article/tileset-mode-icon.png differ diff --git a/tutorial/tilemap-article/tileset-properties.gif b/tutorial/tilemap-article/tileset-properties.gif new file mode 100644 index 0000000..55af2df Binary files /dev/null and b/tutorial/tilemap-article/tileset-properties.gif differ diff --git a/tutorial/tilemap-article/tileset-properties.png b/tutorial/tilemap-article/tileset-properties.png new file mode 100644 index 0000000..3bb6fad Binary files /dev/null and b/tutorial/tilemap-article/tileset-properties.png differ diff --git a/tutorial/tilemap-article/tileset.png b/tutorial/tilemap-article/tileset.png new file mode 100644 index 0000000..23dcc7e Binary files /dev/null and b/tutorial/tilemap-article/tileset.png differ diff --git a/tutorial/tilemap-tutorial.md b/tutorial/tilemap-tutorial.md new file mode 100644 index 0000000..4b389d4 --- /dev/null +++ b/tutorial/tilemap-tutorial.md @@ -0,0 +1,250 @@ +# Article - Using Tilemaps and Tilesets +*By [crashtestjava](https://github.com/crashtestjava)* + +
+ +This article will cover using tilemaps and tilesets in Aseprite. + +> *Tileset used: https://opengameart.org/content/monkey-lad-in-magical-planet* + + +### Table of Contents + +* [What are Tiles, Tilemaps, and Tilesets?](#what-are-tiles-tilemaps-and-tilesets) +* [Creating a Tilemap Layer](#creating-a-tilemap-layer) +* [Creating a Tileset](#creating-a-tileset) + * [Tileset Properties](#tileset-properties) + * [The Tileset Palette](#the-tileset-palette) + * [Exporting a Tileset](#exporting-a-tileset) +* [Drawing Tiles \& Draw Modes](#drawing-tiles--draw-modes) + * [Draw Tiles](#draw-tiles) + * [Draw Pixels](#draw-pixels) + * [Tile Flipping](#tile-flipping) +* [Using the Grid](#using-the-grid) + * [Grid Settings](#grid-settings) + * [Snap to Grid](#snap-to-grid) +* [Tiling the Canvas](#tiling-the-canvas) +* [FAQ/Troubleshooting](#faqtroubleshooting) + * [Is there support for isometric / hexagonal tiles?](#is-there-support-for-isometric--hexagonal-tiles) + * [How do I import tilesets into Aseprite?](#how-do-i-import-tilesets-into-aseprite) + * [How do I remove the first (transparent) index of a tileset?](#how-do-i-remove-the-first-transparent-index-of-a-tileset) + * [How do I resize the tilemap grid (tile size)?](#how-do-i-resize-the-tilemap-grid-tile-size) + * [How can I re-arrange the tileset without breaking the tilemap tiles?](#how-can-i-re-arrange-the-tileset-without-breaking-the-tilemap-tiles) + * [How do I delete a tileset?](#how-do-i-delete-a-tileset) + * [How can I layer two tiles on top of eachother?](#how-can-i-layer-two-tiles-on-top-of-eachother) + * [How can I make the Color Bar show only the tileset?](#how-can-i-make-the-color-bar-show-only-the-tileset) + +## What are Tiles, Tilemaps, and Tilesets? + +When making a game, you'll usually need a level. Instead of drawing an entire level as one image, some games use tilemaps to make a level. A **tilemap** is similar to a regular sprite in the [Indexed color mode](https://www.aseprite.org/docs/color-mode#indexed), except instead of being divided into pixels on a grid, it's divided into **tiles** on a grid. A **tile** is simply an image with an index. Each space on the tilemap grid has an index which references a **tile**'s index in the **tileset**, which is a list of tiles. The indexes allow a tilemap's tiles to be easily changed and edited; if you change the tile image an index is pointing to, all of the tiles with that index will change too. + +![tile image](tilemap-article/tile.png) + +![tilemap tiles image](tilemap-article/tilemap.png) + +To recap: + +* A **tileset** is a list of tiles. +* A **tile** is an image in the tileset with an index. +* A **tilemap** is a grid, with each space containing an index pointing to a tile in the tileset. + +## Creating a Tilemap Layer + +To use tilemaps and tilesets in Aseprite, you need to create a tilemap layer. Tilemap layers have most of the same features as regular layers, with the main difference being that it has special features for editing tiles. If you aren't familiar with regular layers and the timeline, it is recommended that you read the [Timeline and Animation Article](timeline-tutorial.md). + +Tilemap layers can be created by going to *Layer > New... > New Tilemap Layer* or by pressing Space+N. You can also convert a regular layer into a tilemap layer with *Layer > Convert To > Tilemap*. + +Tilemap layers can be identified in the timeline by the small tileset icon next to the layer name. + +![tilemap layer image](tilemap-article/tilemap-layer.png) + +When you create a tilemap layer, a dialog will appear with two main properties: + +* **Name**: The name of the tilemap layer. +* **Tileset**: The tileset to use for the tilemap, along with the tileset's properties. Choosing *New Tileset* will create a new tileset. Tileset properties will be covered in the [next section](#creating-a-tileset). + +## Creating a Tileset + +Tilesets are created by creating tilemap layers. To create a new tileset, select *New Tileset* in the dropdown menu of the **Tilemap** property. Creating a tilemap layer will also show the [tileset properties](#tileset-properties) menu. + +If you convert a layer to a tilemap layer with *Layer > Convert To > Tilemap*, the tileset will be made from the layer content. + +A tilemap layer's tileset will appear in the color bar, under the palette. + +### Tileset Properties + +The tileset properties menu can be shown either by [creating a tilemap layer](#creating-a-tilemap-layer) or by pressing the *Tileset icon* ![tileset icon image](tilemap-article/tileset-icon.png) in the Layer Properties menu. + +![opening tileset properties demo](tilemap-article/tileset-properties.gif) + +**Tileset** - Specifies the tileset to use/edit. When creating a tilemap layer, choosing *New Tileset* will create a new tileset with the tileset parameters. +* **Name** - The tileset name. Note that this is different from the tilemap layer name. +* **Grid Width** - The width, in pixels, of a tile; defaults to the [grid width](#using-the-grid). Note that this property **cannot be changed** after the tileset has been created. +* **Grid Height** - The height, in pixels, of a tile; defaults to the [grid height](#using-the-grid). Note that this property **cannot be changed** after the tileset has been created. +* *Advanced Options* + * **Base Index** - The starting index of the tileset. Defaults to `1`. + * **Allowed Flips** - Aseprite will *reuse* tiles that match another tile when flipped (in the `X`, `Y`, or `Diagonal` axes). See the [Tile Flipping](#tile-flipping) section for more details. + +![tileset properties image](tilemap-article/tileset-properties.png) + +### The Tileset Palette + +The tileset palette in the Color Bar works almost identically to the regular palette in Indexed mode. + +You can Left Click a tile to select it as the foreground tile, and Right Click a color to select it as the background tile. + +You can select multiple tiles by clicking and dragging, and you can move the selection by clicking and dragging the selection outline. + +Right Clicking on the tileset button *tileset button* ![tileset mode toggle button image](tilemap-article/tileset-mode-icon.png) above the palette will show only the selected palette (tileset or sprite). + +![tileset example](tilemap-article/tileset.png) + +Moving around tiles in the tileset will have [the same effect as in Indexed mode](color-bar-tutorial.md#indexed-color-mode): the tilemap image will get messed up (because moving around the tiles changed what tiles the tilemap indexes point to). To fix this, press the "Remap Palette" button that appears below the palette, which will remap the indexes in the tilemap. + +Similarly to how Indexed mode palettes have a transparent color entry, tilesets have a transparent or "Empty" tile, which is always at the start of a tileset. The transparent tile cannot be moved or changed. + +For more detailed information on the palette, see the [Color Bar Article](color-bar-tutorial.md#using-the-palette) (most of the features are the same for the tileset palette). + +### Exporting a Tileset + +To export a tileset, go to *File > Export > Export Tileset*. + +The exporting process is exactly the same as [*File > Export > Export Sprite Sheet*](https://www.aseprite.org/docs/sprite-sheet#export). + +## Drawing Tiles & Draw Modes + +When drawing on a tilemap layer, there are two main drawing modes: **Draw Tiles** and **Draw Pixels**. Drawing in draw tiles mode will draw the current tile onto the tilemap grid. Drawing in draw pixels mode will draw the current color on the *tile images*; it will alter the tile content. + +The draw mode can be changed by Left Clicking the *tileset button* ![tileset mode toggle button image](tilemap-article/tileset-mode-icon.png) above the palette, pressing Space+Tab, or by selecting either the tileset palette or the sprite palette. + +![draw mode diagram](tilemap-article/draw-mode.png) + +Right Clicking on the tileset button will change how the sprite palette and tileset palette are shown in the color bar; Right Clicking will toggle between showing a single palette and showing both palettes. Left Clicking will change which palette is selected. + +### Draw Tiles + +When draw tiles mode is selected, drawing will draw the current tile onto the tilemap grid. Most [tools](https://www.aseprite.org/docs/drawing/) can be used in draw tiles mode, like the brush tool, fill tool, rectangle tool, etc. + +When drawing with tiles, they will be restricted to the tilemap grid. + +![draw tiles demo](tilemap-article/draw-tiles.gif) + +### Draw Pixels + +Drawing in draw pixels mode will draw the current color on the *tile images*; it will alter the tile content. + +There are three sub-modes to the Draw Pixel mode, which control what happens when pixels are drawn on a tile: *Manual*, *Auto*, and *Stack*. The sub-mode buttons are located next to the draw mode button: + +![submodes diagram](tilemap-article/sub-modes.png) + +| Draw Pixels Sub-modes: +--- +* ![manual sub-mode icon](tilemap-article/sub-manual-icon.png) **Manual** (Space+1): Drawing on a tile will modify it. It will not create a new tile. + +![manual mode demo](tilemap-article/draw-pixels-manual.gif) + +* ![auto sub-mode icon](tilemap-article/sub-auto-icon.png) **Auto** (Space+2): Drawing on an exisiting tile creates a new tile. Drawing on the new tile will *modify* it until it is placed somewhere else in the tilemap. + +![auto mode demo](tilemap-article/draw-pixels-auto.gif) + + +* ![stack sub-mode icon](tilemap-article/sub-stack-icon.png) **Stack** (Space+3): Drawing on an exisiting tile creates a new tile. Drawing on the new tile will *create another new tile*. + +![stack mode demo](tilemap-article/draw-pixels-stack.gif) + + +### Tile Flipping + +Aseprite allows you to flip the image of tiles without making new ones. In the [tileset properties](#tileset-properties), the **Allowed Flips** property controls how tiles are flipped. **X** will allow tiles to be flipped on the `X` axis (horizontally), **Y** will allow tiles to be flipped on the `Y` axis (vertically), and **D** will allow tiles to be flipped diagonally. When making a new tile, Aseprite will check if the flipped version matches an existing tile. If it does, and flipping is enabled, it will use the index of the existing tile. + +* To flip a tile in the `X` axis (horizontally), press Space+X or Space+H. +* To flip a tile in the `Y` axis (vertically), press Space+Y or Space+V. +* To flip a tile diagonally, press Space+D. + +![tile flipping demo](tilemap-article/tile-flipping.gif) + +## Using the Grid + +Aseprite has a grid function that shows gridlines, which can be useful when using tilemaps. + +To show the grid, go to *View > Show > Grid* or press Ctrl+'. By default, the grid is broken up into `16x16` squares, but it can be changed in the [grid settings](#grid-settings). + +When using a [selection tool](https://www.aseprite.org/docs/selecting/), Double Clicking on a pixel on the canvas will select the grid space that it is in. The grid does not have to be visible for it to work. + +![grid demo](tilemap-article/grid.gif) + +When the grid is being shown while a tilemap layer is selected, the grid size will automatically adjust to match the tile size. + +### Grid Settings + +The grid settings can be accessed with *View > Grid > Grid Settings*. + +Settings: +* **X**: The `X` offset of the grid. +* **Y**: The `Y` offset of the grid. +* **Width**: The width of a grid space. +* **Height**: The height of a grid space. + +You can also change the grid color and opacity in the [preferences](https://www.aseprite.org/docs/preferences/#grid). + +### Snap to Grid + +Snap to grid will snap the current brush/selection/etc to the grid. The grid does not have to be visible for it to work. + +When [translating](https://www.aseprite.org/docs/move-selection/) (moving) a selection, holding Alt will snap it to the grid. + +Selection snapping when Snap To Grid is enabled can be changed by going to *Edit > Preferences > Selection* and checking *Snap to Grid when the option is enabled*. + +Cursor snapping when Snap To Grid is enabled can be changed by going to *Edit > Preferences > Cursors* and checking *Snap to Grid when the option is enabled*. + +## Tiling the Canvas + +Aseprite allows you to tile the canvas view in the `X` and `Y` axes, which can be useful when you want to make an individual tile without setting up and managing a tilemap. + +Canvas tiling can be controled by the *View > Tiled Mode* option: +* ***View > Tiled Mode > None*** disables canvas tiling +* ***View > Tiled Mode > Tiled in Both Axes*** tiles the canvas in both the `X` and `Y` axes +* ***View > Tiled Mode > Tiled in X axis*** tiles the canvas in only the `X` axis +* ***View > Tiled Mode > Tiled in Y axis*** tiles the canvas in only the `Y` axis + +![canvas tiling demo](tilemap-article/tiled-canvas.gif) + +## FAQ/Troubleshooting + +### Is there support for isometric / hexagonal tiles? + +Aseprite does not currently support sometric / hexagonal tiles; it is a planned feature ([#720](https://github.com/aseprite/aseprite/issues/720), [#977](https://github.com/aseprite/aseprite/issues/977)). + +### How do I import tilesets into Aseprite? + +Aseprite currently does not have a way to cleanly import a tileset from a file ([#977](https://github.com/aseprite/aseprite/issues/977)), but you can import one by: + 1. Opening the tileset file in Aseprite + 2. Converting the layer to a tilemap layer with *Layer > Convert To > Tilemap* + 3. Creating another tilemap layer with *Layer > New... > New Tilemap Layer*, setting the **Tilemap** property to the tileset that was created in the last step + 4. Deleting the first layer + +![import tileset demo](tilemap-article/import-tileset.gif) + +### How do I remove the first (transparent) index of a tileset? + +You can't change or move the first (transparent/empty) index in the tileset. + +### How do I resize the tilemap grid (tile size)? + +You can't resize a tileset's grid size after it's already been created. To get a tileset with a different size, you need to [create a new one](#creating-a-tileset). + +### How can I re-arrange the tileset without breaking the tilemap tiles? + +Moving around tiles in the tileset will have [the same effect as in Indexed mode](color-bar-tutorial.md#indexed-color-mode): the tilemap image will get messed up (because moving around the tiles changed what tiles the tilemap indexes point to). To fix this, press the "Remap Palette" button that appears below the palette, which will remap the indexes in the tilemap. + +### How do I delete a tileset? + +There isn't a clean way to delete a tileset, but you can delete a tileset by deleting all of the tilemap layers that use it. A tileset manager is a planned feature [#977](https://github.com/aseprite/aseprite/issues/977). + +### How can I layer two tiles on top of eachother? + +You can achieve this by making another tilemap layer with the same tileset. If you want the tiles to merge into one tile, you can copy a tile's image in Draw Pixels mode and paste it in over another tile. + +### How can I make the Color Bar show only the tileset? + +Right Click on the tileset button *tileset button* ![tileset mode toggle button image](tilemap-article/tileset-mode-icon.png) above the palette. This will show only the selected palette (tileset or sprite), Left Clicking will toggle between the two. See [The Tileset Palette](#the-tileset-palette) section. diff --git a/tutorial/timeline-article/active-cel.png b/tutorial/timeline-article/active-cel.png new file mode 100644 index 0000000..d1ab325 Binary files /dev/null and b/tutorial/timeline-article/active-cel.png differ diff --git a/tutorial/timeline-article/blendmode.gif b/tutorial/timeline-article/blendmode.gif new file mode 100644 index 0000000..256923e Binary files /dev/null and b/tutorial/timeline-article/blendmode.gif differ diff --git a/tutorial/timeline-article/cel-continuity-icon.png b/tutorial/timeline-article/cel-continuity-icon.png new file mode 100644 index 0000000..4ab22c0 Binary files /dev/null and b/tutorial/timeline-article/cel-continuity-icon.png differ diff --git a/tutorial/timeline-article/elements.gif b/tutorial/timeline-article/elements.gif new file mode 100644 index 0000000..d897b62 Binary files /dev/null and b/tutorial/timeline-article/elements.gif differ diff --git a/tutorial/timeline-article/first-frame-icon.png b/tutorial/timeline-article/first-frame-icon.png new file mode 100644 index 0000000..14ed6af Binary files /dev/null and b/tutorial/timeline-article/first-frame-icon.png differ diff --git a/tutorial/timeline-article/group-icon.png b/tutorial/timeline-article/group-icon.png new file mode 100644 index 0000000..83169c2 Binary files /dev/null and b/tutorial/timeline-article/group-icon.png differ diff --git a/tutorial/timeline-article/groups.gif b/tutorial/timeline-article/groups.gif new file mode 100644 index 0000000..b0815d9 Binary files /dev/null and b/tutorial/timeline-article/groups.gif differ diff --git a/tutorial/timeline-article/last-frame-icon.png b/tutorial/timeline-article/last-frame-icon.png new file mode 100644 index 0000000..42ff2cd Binary files /dev/null and b/tutorial/timeline-article/last-frame-icon.png differ diff --git a/tutorial/timeline-article/layer-menu.gif b/tutorial/timeline-article/layer-menu.gif new file mode 100644 index 0000000..a96526c Binary files /dev/null and b/tutorial/timeline-article/layer-menu.gif differ diff --git a/tutorial/timeline-article/layer-types.png b/tutorial/timeline-article/layer-types.png new file mode 100644 index 0000000..defaf9f Binary files /dev/null and b/tutorial/timeline-article/layer-types.png differ diff --git a/tutorial/timeline-article/layers.gif b/tutorial/timeline-article/layers.gif new file mode 100644 index 0000000..ae50de9 Binary files /dev/null and b/tutorial/timeline-article/layers.gif differ diff --git a/tutorial/timeline-article/linked-cels.gif b/tutorial/timeline-article/linked-cels.gif new file mode 100644 index 0000000..0914547 Binary files /dev/null and b/tutorial/timeline-article/linked-cels.gif differ diff --git a/tutorial/timeline-article/linked-cels.png b/tutorial/timeline-article/linked-cels.png new file mode 100644 index 0000000..f74ccfc Binary files /dev/null and b/tutorial/timeline-article/linked-cels.png differ diff --git a/tutorial/timeline-article/lock-icon.png b/tutorial/timeline-article/lock-icon.png new file mode 100644 index 0000000..9c68e59 Binary files /dev/null and b/tutorial/timeline-article/lock-icon.png differ diff --git a/tutorial/timeline-article/next-frame-icon.png b/tutorial/timeline-article/next-frame-icon.png new file mode 100644 index 0000000..0d3f6d4 Binary files /dev/null and b/tutorial/timeline-article/next-frame-icon.png differ diff --git a/tutorial/timeline-article/onion-skin-handles.gif b/tutorial/timeline-article/onion-skin-handles.gif new file mode 100644 index 0000000..15d12b5 Binary files /dev/null and b/tutorial/timeline-article/onion-skin-handles.gif differ diff --git a/tutorial/timeline-article/onion-skin-icon.png b/tutorial/timeline-article/onion-skin-icon.png new file mode 100644 index 0000000..0ddc912 Binary files /dev/null and b/tutorial/timeline-article/onion-skin-icon.png differ diff --git a/tutorial/timeline-article/onion-skin.gif b/tutorial/timeline-article/onion-skin.gif new file mode 100644 index 0000000..05dcc72 Binary files /dev/null and b/tutorial/timeline-article/onion-skin.gif differ diff --git a/tutorial/timeline-article/play-icon.png b/tutorial/timeline-article/play-icon.png new file mode 100644 index 0000000..ed667ed Binary files /dev/null and b/tutorial/timeline-article/play-icon.png differ diff --git a/tutorial/timeline-article/prev-frame-icon.png b/tutorial/timeline-article/prev-frame-icon.png new file mode 100644 index 0000000..3e558b7 Binary files /dev/null and b/tutorial/timeline-article/prev-frame-icon.png differ diff --git a/tutorial/timeline-article/preview-center-icon.png b/tutorial/timeline-article/preview-center-icon.png new file mode 100644 index 0000000..40b42e5 Binary files /dev/null and b/tutorial/timeline-article/preview-center-icon.png differ diff --git a/tutorial/timeline-article/preview-play-icon.png b/tutorial/timeline-article/preview-play-icon.png new file mode 100644 index 0000000..23cc64c Binary files /dev/null and b/tutorial/timeline-article/preview-play-icon.png differ diff --git a/tutorial/timeline-article/preview.gif b/tutorial/timeline-article/preview.gif new file mode 100644 index 0000000..3bffc93 Binary files /dev/null and b/tutorial/timeline-article/preview.gif differ diff --git a/tutorial/timeline-article/properties.gif b/tutorial/timeline-article/properties.gif new file mode 100644 index 0000000..680023c Binary files /dev/null and b/tutorial/timeline-article/properties.gif differ diff --git a/tutorial/timeline-article/reference-layer.gif b/tutorial/timeline-article/reference-layer.gif new file mode 100644 index 0000000..bfbcc95 Binary files /dev/null and b/tutorial/timeline-article/reference-layer.gif differ diff --git a/tutorial/timeline-article/selection-issue.png b/tutorial/timeline-article/selection-issue.png new file mode 100644 index 0000000..2799488 Binary files /dev/null and b/tutorial/timeline-article/selection-issue.png differ diff --git a/tutorial/timeline-article/settings-icon.png b/tutorial/timeline-article/settings-icon.png new file mode 100644 index 0000000..60e7745 Binary files /dev/null and b/tutorial/timeline-article/settings-icon.png differ diff --git a/tutorial/timeline-article/show-preview-icon.png b/tutorial/timeline-article/show-preview-icon.png new file mode 100644 index 0000000..b415df0 Binary files /dev/null and b/tutorial/timeline-article/show-preview-icon.png differ diff --git a/tutorial/timeline-article/show-timeline-icon.png b/tutorial/timeline-article/show-timeline-icon.png new file mode 100644 index 0000000..2a43ed4 Binary files /dev/null and b/tutorial/timeline-article/show-timeline-icon.png differ diff --git a/tutorial/timeline-article/tags.gif b/tutorial/timeline-article/tags.gif new file mode 100644 index 0000000..abede35 Binary files /dev/null and b/tutorial/timeline-article/tags.gif differ diff --git a/tutorial/timeline-article/timeline-settings.gif b/tutorial/timeline-article/timeline-settings.gif new file mode 100644 index 0000000..99d7b30 Binary files /dev/null and b/tutorial/timeline-article/timeline-settings.gif differ diff --git a/tutorial/timeline-article/timeline.png b/tutorial/timeline-article/timeline.png new file mode 100644 index 0000000..171f448 Binary files /dev/null and b/tutorial/timeline-article/timeline.png differ diff --git a/tutorial/timeline-article/userdata-icon.png b/tutorial/timeline-article/userdata-icon.png new file mode 100644 index 0000000..c38bab6 Binary files /dev/null and b/tutorial/timeline-article/userdata-icon.png differ diff --git a/tutorial/timeline-article/visibility-icon.png b/tutorial/timeline-article/visibility-icon.png new file mode 100644 index 0000000..dbc7a13 Binary files /dev/null and b/tutorial/timeline-article/visibility-icon.png differ diff --git a/tutorial/timeline-article/visibility-locking.gif b/tutorial/timeline-article/visibility-locking.gif new file mode 100644 index 0000000..cef1193 Binary files /dev/null and b/tutorial/timeline-article/visibility-locking.gif differ diff --git a/tutorial/timeline-tutorial.md b/tutorial/timeline-tutorial.md new file mode 100644 index 0000000..ff9e7ba --- /dev/null +++ b/tutorial/timeline-tutorial.md @@ -0,0 +1,435 @@ +# Article - The Timeline and Animation +*By [crashtestjava](https://github.com/crashtestjava)* + +
+ +This article will cover the timeline, covering everything from the very basics to more advanced features. + +### Table of Contents + +* [What is the Timeline?](#what-is-the-timeline) + * [What is a layer?](#what-is-a-layer) + * [What are frames and cels?](#what-are-frames-and-cels) +* [Selecting and Moving](#selecting-and-moving) +* [Using Layers](#using-layers) + * [Layer Menu](#layer-menu) + * [Visibility and Locking](#visibility-and-locking) + * [Layer Properties](#layer-properties) + * [Blend Modes](#blend-modes) + * [Background Layers](#background-layers) + * [Reference Layers](#reference-layers) + * [Groups](#groups) +* [Using Frames \& Cels](#using-frames--cels) + * [Frame Menu](#frame-menu) + * [Frame \& Cel Properties](#frame--cel-properties) + * [Linked Cels](#linked-cels) + * [Tags \& Tag Properties](#tags--tag-properties) + * [Timeline Settings](#timeline-settings) + * [Onion Skin](#onion-skin) + * [Playback Controls](#playback-controls) +* [The Preview Window](#the-preview-window) +* [FAQ/Troubleshooting](#faqtroubleshooting) + * [Why can't I paste in cels/frames more than once?](#why-cant-i-paste-in-celsframes-more-than-once) + * [Why do frame numbers go back to 01 after reaching 99?](#why-do-frame-numbers-go-back-to-01-after-reaching-99) + * [Why isn't the onion skin overlay appearing on the sprite?](#why-isnt-the-onion-skin-overlay-appearing-on-the-sprite) + * [How can I change how many frames the onion skin shows?](#how-can-i-change-how-many-frames-the-onion-skin-shows) + * [How can I hide the timeline?](#how-can-i-hide-the-timeline) + * [How can I change the location of the timeline?](#how-can-i-change-the-location-of-the-timeline) + * [How do I duplicate a selection to a new layer?](#how-do-i-duplicate-a-selection-to-a-new-layer) + * [How do I create a reference layer?](#how-do-i-create-a-reference-layer) + * [How can I delete tags?](#how-can-i-delete-tags) + * [How do I turn off onion skin by default?](#how-do-i-turn-off-onion-skin-by-default) + +## What is the Timeline? + +The timeline contains the sprite's layers, cels, and frames. By default, the timeline is located at the bottom of the Aseprite window, below the sprite editor. + +![timeline diagram](timeline-article/timeline.png) + +You can hide the timeline by going to *View > Timeline*, clicking the timeline toggle button ![show timeline button image](timeline-article/show-timeline-icon.png) in the bottom right corner of the timeline, or by pressing Tab. + +### What is a layer? + +Layers are used to subdivide different parts of the sprite. Layers stack on top of each other *vertically* in the timeline. Layers will be shown above any other layers that are below it. A sprite's collection of layers is sometimes called the *layer stack* or *layer hierarchy*. + +![layers demo](timeline-article/layers.gif) + +Aseprite also has special kinds of layers that are used for specific purposes, which will be covered in the [Using Layers](#using-layers) section. + +### What are frames and cels? + +A 2D animation is made up of multiple images in sequence. These images are called *frames*. + +In Aseprite, a frame is not just one image. Instead, each frame contains a set of images, **one for each layer**. These images are called *cels*. In other words, a cel is **the image of a layer at a certain frame**. The *active cel* is the current cel that is being shown/edited. + +On the timeline, frames and cels are next to eachother *horizontally*. Animations are played from left to right. + +![example of layers, frames, & cels](timeline-article/elements.gif) + +![active cel example](timeline-article/active-cel.png) + +If you aren't creating an animation, your sprite will only have 1 frame. + +## Selecting and Moving + +Selecting an element (layer, frame, cel) will show a *yellow outline* around the selected element. Additionally, the active cel, selected layer, and selected frames will be highlighted. The active timeline selection is also sometimes called the timeline *range*. + +By default, you can Left Click to select a single element in the timeline. You can select multiple elements by Left Clicking an element and dragging over the adjacent elements you want to select. + +To add an element to the current selection, Left Click an element while holding Shift. Additionally, doing this while clicking on an element *inside* the selection will change the active cel without altering the selection. Keep in mind that the selection outline can be misleading, as it also surrounds unselected layers/frames/cels that are between two selected layers/frames/cels ([#5869](https://github.com/aseprite/aseprite/issues/5869)). + +![image of selection outline issue](timeline-article/selection-issue.png) + +To move the selection, Right Click inside the selection and drag. Alternatively, you can move the selection by Left Clicking the selection outline and dragging. + +To duplicate a selection, hold either Ctrl or Alt while moving the selection. + +You can disable some of these functions in the Preferences menu, under [*Edit > Preferences... > Timeline > Timeline Range Selection*](https://www.aseprite.org/docs/preferences/#timeline). + +When copying the timeline range, it will *not* be saved to the clipboard, and as a result, you cannot paste a copied range twice ([#2005](https://github.com/aseprite/aseprite/issues/2005)). + +When pasting in *frames* copied with *Edit > Copy*, the frames will be pasted *before* the selected frame ([#2685](https://github.com/aseprite/aseprite/issues/2685)). + +## Using Layers + +There are four kinds of layers in Aseprite: *Regular* layers, *Background* layers, *Reference* layers, and *Tilemap* layers. Aseprite does *not* have a "mask layer" or "effects layer", but they are both planned features ([#459](https://github.com/aseprite/aseprite/issues/459), [#5081](https://github.com/aseprite/aseprite/issues/5081)). This section will only cover the first three types of layers. The fourth type, the *Tilemap* layer, is covered in the [Using Tilemaps and Tilesets](tilemap-tutorial.md) article. + +![layer types image](timeline-article/layer-types.png) + +You can create a layer with *Layer > New.. > New Layer*, or with Shift+N. + +To quickly move between layers, you can use the Up and Down arrow keys. + +### Layer Menu + +The layer menu, which is located at the top of the window in the [Menu Bar](https://www.aseprite.org/docs/menu-bar#menu-bar), contains options for manipulating layers and the layer stack. Some options may be disabled depending on the context. Additionally, Right Clicking on a layer or group will show a popup version of this menu, with some options missing. + +* **Properties** (F2) - Shows the [layer properties](#layer-properties) menu. Double Left Clicking on a layer or group will also show this menu. +* **Visible** (Shift+X) - Toggles the [visibility](#visibility-and-locking) of the currently selected layer(s). +* **Lock Layers** - [Locks/unlocks](#visibility-and-locking) the currently selected layer(s). +* **Open Group** (Shift+E) - Expands/collapses the currently selected [group](#groups). +* *New...* + * **New Layer** (Shift+N) - Creates a new layer above the selected layer. If the selected layer is in a group, it will make the new layer in the group. + * **New Group** (Alt+Shift+N) - Creates a new group with the currently selected layer(s). + * **New Layer via Copy** (Ctrl+J) - Copies the current selection content and pastes it into a new layer. + * **New Layer via Cut** (Ctrl+Shift+J) - Cuts the current selection content and pastes it into a new layer. + * **New Reference Layer from File** - Creates a new [reference layer](#reference-layers) from a file. + * **New Tilemap Layer** (Space+N) - Creates a new tilemap layer above the selected layer. +* **Delete Layer** - Deletes the currently selected layers(s). +* *Convert To...* + * **Background** - Converts the selected layer into a background layer. + * **Layer** - Converts the selected layer into a layer. + * **Tilemap** - Converts the selected layer into a tilemap layer. +* **Duplicate** - Duplicates the selected layer. +* **Merge Down** - Merges the selected layer with the layer below it. +* **Flatten** - Merges all of the layers in the layer stack. +* **Flatten Visible** - Merges all of the [visible](#visibility-and-locking) layers in the layer stack. + +![layer menu demo](timeline-article/layer-menu.gif) + +### Visibility and Locking + +Layers can be made invisible. To toggle a layer's visibility, press Shift+X, toggle *Layer > Visible*, or click on the eye icon ![eye icon image](timeline-article/visibility-icon.png) to the left of the layer. Clicking the eye icon while holding Alt will hide all layers except the clicked one. + +Locking a layer prevents its content from being edited. To lock/unlock a layer, toggle *Layer > Lock Layers* or click the lock icon ![lock icon image](timeline-article/lock-icon.png) located to the left of the layer. To lock/unlock all of the layers in the layer stack, click the topmost lock icon. + +![visibility and locking demo](timeline-article/visibility-locking.gif) + +### Layer Properties + +Every layer has properties that can be changed; some properties may be disabled depending on the layer type. You can access a layer's properties with *Layer > Properties*, pressing F2, or by Double Left Clicking on a layer. + +* **Name** - The layer's name. +* **Mode** - The [blend mode](#blend-modes) of the layer. +* **Opacity** - The opacity of the layer, a value from `0-255` or `0%-100%` depending on [your settings](https://www.aseprite.org/docs/preferences#color). + +The following properties can be accessed by pressing the *User Data* button ![userdata button image](timeline-article/userdata-icon.png) next to the *Name* property: + +* **Color** - The layer's color in the timeline. +* **User Data** - Layer user data. Usually used for scripts/extensions. + +![layer properties demo](timeline-article/properties.gif) + +You can use the Up and Down arrow keys to quickly change the layer you're editing without closing the properties menu. + +### Blend Modes + +A layer's [*blend mode*](https://en.wikipedia.org/wiki/Blend_modes) is what determines how a layer *blends* with the layers below it. There are 19 different blend modes in Aseprite, which are listed below. + +* Normal +* Darken +* Multiply +* Color Burn +* Lighten +* Screen +* Color Dodge +* Addition +* Overlay +* Soft Light +* Hard Light +* Difference +* Exclusion +* Subtract +* Divide +* Hue +* Saturation +* Color +* Luminosity + +![blendmode demo](timeline-article/blendmode.gif) + +### Background Layers + +Background layers are special layers that are used for blank backgrounds. Each sprite can only have one background layer, and the background layer will always be at the bottom of the layer stack. Background layers will have an *underlined name* in the layer stack, even if the background layer is renamed. + +You can create a background layer by going to *Layer > Convert To... > Background* or by Right Clicking on a regular layer and clicking on *Convert To... > Background*. + +Upon creation, background layers are filled with the current [background color](color-bar-tutorial.md). If the canvas size is expanded, the current background color will fill the expanded area. + +Background layers can be drawn on. If a portion of the background layer is erased, it will be replaced by the current background color. + +### Reference Layers + +Reference layers are special layers that can show an image at its full resolution (which usually a higher resolution than the canvas). Reference layers will have a *struck-through name* in the layer stack, even if the layer is renamed. + +![reference layer example](timeline-article/reference-layer.gif) +> Image used taken from [publicdomainpictures.net](https://www.publicdomainpictures.net/en/view-image.php?image=142181). + +You can create a reference layer by going to *Layer > New... > New Reference Layer from File*. You can also create one from the clipboard with *Edit > Paste Special > Paste as New Reference Layer*. + +### Groups + +Aseprite allows you to group multiple layers together with groups. Groups share some features with layers: they can be hidden, locked, renamed, colored, etc. + +You can create a new group by pressing Alt+Shift+N or going to *Layer > New... > New Group*. The currently selected layer(s) will be put inside the new group. + +Groups can be collapsed or expanded by toggling *Layer > Open Group*, pressing Shift+E, or clicking on the folder icon ![folder icon image](timeline-article/group-icon.png) to the left of the group. + +![groups demo](timeline-article/groups.gif) + +When using *Layer > Flatten* with a group selected, only the layers in the group will be flattened. + +If the selected layer is in a group when creating a new layer, it will make the new layer in the group. + +## Using Frames & Cels + +Aseprite uses a very simple animation system. Frames are horizontal and are played from left to right, and each frame has a duration in milliseconds (not in FPS; but it is a planned feature [[#662](https://github.com/aseprite/aseprite/issues/662), [#4729](https://github.com/aseprite/aseprite/issues/4729)]). There isn't a set "project framerate", but you can easily set the duration of all frames with *Frame > Constant Frame Rate*. + +You can create a new (duplicate) frame by going to *Frame > New Frame* or by pressing Alt+N. You can create a new *empty* frame by going to *Frame > New Empty Frame* or by pressing Alt+B. + +To quickly move between frames, you can use the Left and Right arrow keys. + +Holding Ctrl+Mouse Wheel while hovering over the timeline will show cel thumbnails. This can also be changed in the [timeline settings](#timeline-settings). + +### Frame Menu + +The frame menu in the [Menu Bar](https://www.aseprite.org/docs/menu-bar#menu-bar) contains options for manipulating frames and cels on the timeline. Some options may be disabled depending on the context. Right Clicking on a frame or cel will show a popup version of this menu, with some options missing. + +* **Frame Properties** (P) - Shows the [frame properties](#frame--cel-properties) menu. Double Left Clicking on a frame will also show this menu. +* **Cel Properties** - Shows the [cel properties](#frame--cel-properties) menu. Double Left Clicking on a cel will also show this menu. +* **New Frame** (Alt+N) - Creates a new (duplicate) frame after the selected frame. +* **New Empty Frame** (Alt+B) - Creates a new empty frame after the selected frame. +* **Duplicate Cel(s)** (Alt+D) - Duplicates the currently selected cels. This will replace the cels that are after the selection. +* **Duplicate Linked Cel(s)** (Alt+M) - Duplicates the currently selected cels and [links the duplicates](#linked-cels). This will replace the cels that are after the selection. +* **Delete Frame** (Alt+C) - Deletes the selected frame(s) from the timeline. +* *Playback* + * **Play Animation** (Enter) - Plays the animation. + * **Play Preview Animation** (Shift+Enter) - Plays the animation in the [preview](#the-preview-window) window. + * **Playback Speed 0.25x** - Sets the animation playback speed to 0.25x. + * **Playback Speed 0.5x** - Sets the animation playback speed to 0.5x. + * **Playback Speed 1x** - Sets the animation playback speed to 1x. + * **Playback Speed 1.5x** - Sets the animation playback speed to 1.5x. + * **Playback Speed 2x** - Sets the animation playback speed to 2x. + * **Playback Speed 3x** - Sets the animation playback speed to 3x. + * **Play Once** - When checked, playing the animation will only play it once. + * **Play All Frames (Ignore Tags)** - When checked, playing the animation will play all frames, ignoring tags. + * **Play Subtags & Repetitions** - When checked, playing the animation will play the timeline's [tags](#tags--tag-properties), including their animation directions and repeats. Note that the *Play All Frames (Ignore Tags)* option takes priority over this option. + * **Rewind on Stop** - When checked, stopping the animation will go back to the starting frame. This can also be changed in the [preferences](https://www.aseprite.org/docs/preferences/#timeline). +* *Tags* + * **Tag Properties** - Shows the [tag properties](#tags--tag-properties) menu of the currently selected tag. Left Clicking on a tag will also show this menu. + * **New Tag** - Creates a new tag around the selected frames. + * **Delete Tag** - Deletes the currently selected tag +* *Jump to* + * **First Frame** (Home) - Selects the first frame in the timeline. + * **Previous Frame** (Left) - Selects the frame before the currently selected frame. + * **Next Frame** (Right) - Selects the frame after the currently selected frame. + * **Last Frame** (End) - Selects the last frame in the timeline. + * **First Frame in Tag** - Selects the first frame in the currently selected [tag](#tags--tag-properties). + * **Last Frame in Tag** - Selects the last frame in the currently selected tag. + * **Go to Frame** (Alt+G) - Opens a menu which selects an inputted frame or tag. +* **Constant Frame Rate** - Sets the frame duration of all of the frames in the timeline. + > **Tip:** *You can input math operations, e.g: `1000 / 24` (it will round to an integer)* +* **Reverse Frames** (Alt+I) - Reverses the order of the currently selected frames. + +There are some additional options that are only available in the popup version of the menu (Right Clicking on a frame or cel): + +* **Set Loop Section** *[Frame Only]* (F2) - Creates a [tag](#tags--tag-properties) around the selected frames with the name "Loop". If there is already a loop tag, it will move it to surround the current selection. Also located at *View > Set Loop Section*. +* **Delete** *[Cel Only]* - Deletes the currently selected cel(s). +* **Unlink** *[Cel Only]* - [Unlinks](#linked-cels) the currently selected cel(s). +* **Link Cels** *[Cel Only]* - [Links](#linked-cels) the currently selected cel(s). + +### Frame & Cel Properties + +Frames and cels both have properties menus. + +The **frame properties** menu can be accessed with *Frame > Frame Properties*, pressing P or by Double Left Clicking on a frame. Frames only have one property: the **Duration** property, which sets the frame's length, in milliseconds. + +The **cel properties** menu can be accessed with *Frame > Cel Properties* or by Double Left Clicking on a cel. + +* **Opacity** - The opacity of the cel, a value from `0-255` or `0%-100%` depending on [your settings](https://www.aseprite.org/docs/preferences#color). +* **Z-Index** - Visually moves the cel image a specified amount of layers up or down. + +The following cel properties can be accessed by pressing the *User Data* button ![userdata button image](timeline-article/userdata-icon.png) next to the *Opacity* property: + +* **Color** - The cel's color in the timeline. +* **User Data** - Cel user data. Usually used for scripts/extensions. + +### Linked Cels + +Linked cels are cels that share an image. A cel is just a layer's image at a certain frame; when cels are linked, they all share the same image across multiple frames. + +![linked cels diagram](timeline-article/linked-cels.png) + +To link a selection of cels, Right Click inside the selection and click *Link Cels* in the popup menu; to unlink a selection of cels, click *Unlink Cels* in the popup menu. + +![linked cels demo](timeline-article/linked-cels.gif) + +The *cel continuity* button ![cel continuity button image](timeline-article/cel-continuity-icon.png) to the left of a layer will toggle if new cels will be linked or unlinked with the previous cel image. + +### Tags & Tag Properties + +Tags are a way to organize frames in the timeline, as well as change animation direction and repeats. + +You can create a new tag by going to *Frame > Tags > New Tag*. This will show the *Tag Properties* menu, which is also shown when using *Frame > Tag > Tag Properties*. + +You can delete a tag by Right Clicking on a tag and clicking *Delete*. You can also use *Frame > Tags > Delete*, which will delete the tag that surrounds the currently selected frame. + +**Tag Properties:** + +* **Name** - The name of the tag. +* **From** - The first frame of the tag. +* **To** - The last frame of the tag. +* **Animation Direction** - The animation direction: + * Forward - Play frames in tag from left to right. + * Reverse - Play frames in tag from right to left. + * Ping-Pong - Play frames in tag from left to right, then right to left. + * Ping-Pong Reverse - Play frames in tag from right to left, then left to right. +* **Repeat** - Repeats the tag a specified amount of time. If a number isn't specified, it will repeat an infinite amount of times. + +The following tag properties can be accessed by pressing the *User Data* button ![userdata button image](timeline-article/userdata-icon.png) next to the *Name* property: + +* **Color** - The tag's color in the timeline. +* **User Data** - Tag user data. Usually used for scripts/extensions. + +![tags demo](timeline-article/tags.gif) + +### Timeline Settings + +The timeline settings are where some timeline-related settings are located. To open the menu, click on the settings menu button ![settings button image](timeline-article/settings-icon.png) above the layer stack. + +![timeline settings button location](timeline-article/timeline-settings.gif) + +* **Position** - Controls the timeline's position in the Aseprite window. This can also be changed in [Workspace Layout](https://www.aseprite.org/docs/workspace-layout/) mode. +* **Frame Header** + * *First Frame* - Controls what number the frames will start at (e.g: start at 0 or start at 1). +* **Thumbnails** - Show cel images on the timeline. + * *Thumbnail Size* - Controls the thumbnail size. + * *Overlay Size* - Controls the overlay size (hovering over cels). + * *Scale up to fit* - Scales up the cel image in the thumbnail to fit. +* **Onion Skin** - See the [Onion Skin](#onion-skin) section. + +### Onion Skin + +*Onion skinning* is a a tool used by animators to overlay a transparent version of the previous frame image onto the current frame, which can help with animating. Aseprite allows you to onion skin any number of frame images forward and backward. + +To enable onion skinning, go to *View > Show Onion Skin*, press F3, or click on the onion skin button ![onion skin button image](timeline-article/onion-skin-icon.png) above the layer stack. + +To change how many frames the onion skin will show, move the corner handles inside of the frame number header. + +![onion skin corner handles demo](timeline-article/onion-skin-handles.gif) + +![onion skin demo](timeline-article/onion-skin.gif) + +Onion skin settings can be edited in the [timeline settings](#timeline-settings): + +* **Merge Frames / Red/Blue Tint** - Red/Blue Tint will tint the succeeding frame overlays blue and the preceding frame overlays red. Merge Frames will not tint the frame overlays. +* **Opacity** - Changes the opacity of the overlayed frame(s). +* **Opacity Step** - Changes the amount that the opacity decreases by each frame when the onion skin overlays multiple frames. +* **Loop through tag frames** - Onion skin sections that are outside of a [tag](#tags--tag-properties)'s bounds will loop around to the start of the tag. +* **Current layer only** - If enabled, the onion skin will only overlay cels from this layer. +* **Behind sprite / In front of sprite** - Shows the overlay in front of or behind the sprite. + +* **Reset** - Resets the timeline settings to their defaults. +* **Set as Defaults** - Sets the default timeline settings for new sprites. + +### Playback Controls + +The *playback controls* are located at the very top of the timeline. They are button controls for these commands: + +* *Frame > Jump To > First Frame* ![first frame button image](timeline-article/first-frame-icon.png) (Home) - Selects the first frame in the timeline. +* *Frame > Jump To > Previous Frame* ![previous frame button image](timeline-article/prev-frame-icon.png) (Left) - Selects the frame before the currently selected frame. +* *Frame > Playback > Play Animation* ![play animation button image](timeline-article/play-icon.png) (Enter) - Plays the animation. +* *Frame > Jump To > Next Frame* ![next frame button image](timeline-article/next-frame-icon.png) (Right) - Selects the frame after the currently selected frame. +* *Frame > Jump To > Last Frame* ![last frame button image](timeline-article/last-frame-icon.png) (End) - Selects the last frame in the timeline. + +Right-clicking on the play animation button ![play button image](timeline-article/play-icon.png) will show a popup version of the *Frame > Playback* menu. + +## The Preview Window + +The preview window is a window that shows a preview of your sprite (think of it like a second editor window). You can open the preview window by going to *View > Preview > Preview*, pressing F7, or by clicking on the *Preview button* ![preview button image](timeline-article/show-preview-icon.png) in the bottom right corner of the timeline (technically it's in the toolbar, so if you've changed your layout it might be in a different spot). + +To play the timeline animation in the preview window, go to *Frame > Playback > Play Preview Animation*, press Shift+Enter, or click on the *play button* ![preview play button image](timeline-article/preview-play-icon.png) in the preview window. + +The *center button* ![preview center button image](timeline-article/preview-center-icon.png) next to the play button in the preview window will center the preview window view. + +![preview demo](timeline-article/preview.gif) + +Right-clicking on the *play animation button* ![preview play button image](timeline-article/preview-play-icon.png) will show a popup version of the *Frame > Playback* menu for the preview window. + +If *View > Preview > Hide Other Layers* (Shift+F7) is checked, the preview window will only show the current layer. + +If *View > Preview > Brush Preview* is checked, the preview will show the brush cursor. + +## FAQ/Troubleshooting + +### Why can't I paste in cels/frames more than once? + +This is a known issue. Copying timeline elements does not add it to the clipboard, so the workaround is that you can only paste a copied selection once ([#2005](https://github.com/aseprite/aseprite/issues/2005)). + +### Why do frame numbers go back to 01 after reaching 99? + +There isn't enough room. This is a known issue ([#3350](https://github.com/aseprite/aseprite/issues/3350)). + +### Why isn't the onion skin overlay appearing on the sprite? + +This is likely because your onion skin is behind the sprite. You can fix this by going to the [timeline settings](#timeline-settings) and selecting "In front of sprite". + +### How can I change how many frames the onion skin shows? + +To change how many frames the onion skin will show, move the corner handles that are inside of the frame number header. + +![onion skin corner handles demo](timeline-article/onion-skin-handles.gif) + +### How can I hide the timeline? + +You can hide the timeline by going to *View > Timeline*, clicking the timeline toggle button ![show timeline button image](timeline-article/show-timeline-icon.png) in the bottom right corner of the timeline, or by pressing Tab. + +### How can I change the location of the timeline? + +You can change it with the **Position** property in the [Timeline Settings](#timeline-settings). + +### How do I duplicate a selection to a new layer? + +Make a selection and press Ctrl+J (*Layer >New > New Layer via Copy*) to copy the selection to a new layer. Press Ctrl+Shift+J (*New Layer via Cut*) to cut the selection to a new layer. + +### How do I create a reference layer? + +See the [Reference Layers](#reference-layers) section. + +### How can I delete tags? + +To delete a tag, Right Click on a tag and click on *Delete Tag*. You can also go to *Frame > Tags > Delete Tag*, which will delete the tag that surrounds the current frame. + +### How do I turn off onion skin by default? + +In any sprite, turn off onion skin and then go to the [timeline settings](#timeline-settings). Then, press *Set as Defaults* (keep in mind this will also set the other settings as the default). \ No newline at end of file