Turn a canvas into Tiles

Hi there,

I was looking for similiar topics that might help with my issue but I feel like nothing really covers what I need.

We’re working on a project for a game and I was trying to turn an image into a tile set. I’ve made a very simplified example image of how it is supposed to look like and I could archieve the result if I want to hate myself and stab my eye out afterwards. So I was hoping someone knew an easier way resulting in less self hatred.

The extra challenge in this is the part where the tiles have to get aligned from left to right.

At first I thought (thanks to the research of similiar topics) tilemaps would work for that but I’m afraid it’s not.

Example image:
Looking for a way to turn the first image into the second image, without manually changing the canvas size and cutting tools.

Sprite-0001

Thanks in advance! :purple_heart:

Hi @Arenja,

As far as converting to a tile map layer, have you already tried this or is it not what you want?

convertToTile01

convertToTile02

Right click on the layer in the timeline. In the context menu go to Convert To, then select Tilemap. The grid affects how it’s sliced, so go to View > Grid > Grid Settings before you make the conversion.

As far as automatically rearranging the tileset into rows: Tiles are in beta. Don’t expect the feature set to match exactly what you want. If you’re willing to look into Aseprite scripting with Lua, you can start with this thread, then customize as far as the available feature set allows.

Here is a test / example. It may not do what you’re asking exactly.

The image I used is a simplification of the UV checker map from ByValle . I lowered the opacity of the original layer to make the new horizontal strip easier to see.

local activeSprite = app.activeSprite
if not activeSprite then return end

local activeLayer = app.activeLayer
if not activeLayer then return end

local appVersion = app.version
if appVersion.major < 1 or appVersion.minor < 3 then
    return
end

-- https://github.com/aseprite/aseprite/blob/beta/src/app/script/layer_class.cpp#L398
local isTilemap = activeLayer.isTilemap
if not isTilemap then return end

-- https://github.com/aseprite/aseprite/blob/beta/src/app/script/tileset_class.cpp#L87
local tileset = activeLayer.tileset
local tileCount = #tileset

-- Filter out empty tiles.
local nonEmptyTiles = {}
for i = 0, tileCount - 1, 1 do
  local tile = tileset:getTile(i)
  if not tile:isEmpty() then
    table.insert(nonEmptyTiles, tile)
  end
end

-- https://github.com/aseprite/aseprite/blob/beta/src/app/script/grid_class.cpp#L65
local tileGrid = tileset.grid
local gridSize = tileGrid.tileSize
local tileWidth = gridSize.width
local tileHeight = gridSize.height

-- Create a new image.
local nonEmptyTileCount = #nonEmptyTiles
local targetSpec = ImageSpec {
  width = nonEmptyTileCount * tileWidth,
  height = tileHeight,
  colorMode = activeSprite.colorMode,
  transparentColor = activeSprite.transparentColor }
targetSpec.colorSpace = activeSprite.colorSpace
local targetImage = Image(targetSpec)

-- Blit tile set to image.
for i = 1, nonEmptyTileCount, 1 do
    local tile = nonEmptyTiles[i]
    targetImage:drawImage(tile, (i - 1) * tileWidth, 0)
end

-- Create new layer and new cel.
app.transaction(function()
  local targetLayer = activeSprite:newLayer()
  local activeFrame = app.activeFrame or activeSprite.frames[1]
  activeSprite:newCel(
    targetLayer,
    activeFrame,
    targetImage,
    Point(0, 0))

  -- Resize canvas to contain strip dimensions.
  activeSprite.width = math.max(activeSprite.width, targetImage.width)
  app.command.FitScreen()
  app.refresh()
end)

I don’t think you can set a new layer to be a tile map layer atm. So the copied layer that arranges the tile set into a row is not in tile mode. It should be easy enough to convert again.

Best to you,
Jeremy

1 Like

Thank you for the detailed response. As said tilemaps looks like a great feature but nothing that I can use for the image described.

The second part of your response does look very helpful though and for future projects I will keep this in mind because it looks like just what I need. Having written some scripts in lua in the past, the learning curve and/or understanding of it won’t be that difficult either (once I find the time for it).

In short:
Very helpful tip and I will definetley try it at some point, unfortunately too short term to read myself into it properly.

I’m not working on it alone either, our team decided instead of cut it into a tileset we’ll include it in the background, since it’s just part of the story in the game and not part of the game play.

Thank you so much!

Hi @Arenja, if the tilemap feature isn’t useful in your case, you might give a try to the “Pack Similar Tiles.lua” script (it’s in our examples):

This will create a tilemap & a tileset with each tile from the grid. (Probably you can adjust the script to your specific needs.)

1 Like

For future projects I will definitely give it a shot, thank you :purple_heart:

1 Like