Tilemap/tileset system

Before we can do anything with the tileset, we need to create a tilemap layer first. See how we do that here.

Note that we can only operate with the tileset/tilemap system when the tilemap layer is selected.

Know the tileset window

Artwork by TransientCode

1. Tools (on the left side) - similar to regular drawing tools, but for tiles

   1. Move

   2. Brush

   3. Eraser

   4. Tile bucket

   5. Eyedropper

2. Actions (Top bar)

   1. Panel resize

   2. New empty tile

   3. Duplicate tile

   4. Remove tiles

3. Option panel

   1. Top bar

      1. Tileset name

      2. Edit name

      3. Merge tileset

      4. Export tileset

   2. Multi-tile placement: If multiple tiles are selected, this determines how the brush and bucket will place them onto the tilemap.

      1. Random

      2. In-order

   3. Reorder mode

      1. Move - move the dragged tiles to the new position, shifting all tiles in between

      2. Swap - Swap the position of the source and target tiles, and the in-between tiles remain in the same positions

   4. Auto new tiles - If this options is on, new tiles will be added automatically to the tileset and the tilemap as we draw onto unassigned tiles on the tilemap

   5. Tiles per row

   6. Canvas grid customization

Assign tile to the tilemap

Manual placement

To assign tiles to the grid on the canvas, we need to first select the tile(s). Tap on a tile to select it. To select multiple tiles, tap on the box next to the More (...) button, then tap on each tile to toggle its selection.

The selected tiles will have a border around them. Now select a tile tool (brush or tile bucket) and then draw the tiles onto the canvas.

When multiple tiles are selected, we can choose to a placement strategy: random or in-order.

We can also move the assignment around with the move tool. If there is an active selection, it will move all tiles selected by that selection, if there isn't one, it will only move 1 tile at a time.

Removing an assignment is the same as assigning tiles, but we need to select the eraser button instead of the brush/tile bucket.

We can use the tile eyedropper to select a tile on the canvas, similar to how we pick a color using color eyedropper.

Auto new tiles

When auto new tiles option is enabled, we can just draw on the canvas and new tiles will be added automatically

Reorder tiles

To reorder tiles within the tileset, we need to long-press on a tile and then drag it to the new position. If the dragged tile is one of the selected tiles, it will move all selected tiles together. The assignment on the tilemap grid will be updated automatically to match the new order.

Import/Export

There are 2 supported file types for tilesets:

• pxts: Pixquare's own tileset file format, for effortless transfer within Pixquare

• png: For better compatibility with other software and game engines

We can also convert regular layers into tilemap layers. To do that active the contextual menu, then tap "New tilemap layer".

Tileset exporting

To access this menu, select the "..." button of the tileset panel, then "Export"

These tinkerings are only needed for png format. We can select "Individual PNGs" to export the tiles into individual pngs instead of in one sheet.

Tileset importing

We can import tilesets when we create new tilemap layers. And again, pxts file will just work, while png importing will require tinkering like the above image.

Tileset merge

Tap on the merge icon to start the process. We can only merge tilesets with the same tile size. When merging, the receiving tileset will have the tiles of the merged tileset while the merged tileset remains unchanged.

What else?

That's it, we can now start drawing and see the magic of the tileset system.

We can animate tilemap layers just like regular layers.

If we hold the tileset button, it will temporarily toggle the canvas grid on/off