How to make tilemap/tileset from .png file?

Hello. Glory to Ukraine.

I want to make a class that will render and display a tilemap, but I didn’t find any example how to
this can be done, how to display part of the picture?

Hello @StasPovaliaevUkraine ,

Take a look here:


1 Like

Hi @StasPovaliaevUkraine and Hello Ukraine! :slight_smile:

You need to simply split it by the size of the tiles …

— mnse

PS: hope that helps!


PImage tilemapimg;
// how many tiles are in the image (5x5)
// means you need to know beforehand
// this needs to be figured out youself by looking at the whole image.
// as the tile image can be structured in many ways.
int tileColumns = 5;
int tileRows      = 5;

ArrayList<PImage> tiles;

void setup() {
  // loading the image with all tiles
  // you need to know how tiles are structured in the image, 
  // so you are able to figure out how many tiles are inside
  // in this case 5x5 (tileRows x tileColumns)
  tilemapimg = loadImage("tiles.jpg");

  // calculate the size of one tile by dividing width and height of the image by number of tiles per row/column 
  int tileW = tilemapimg.width/tileColumns;
  int tileH = tilemapimg.height/tileRows;
  tiles = new ArrayList<>();
  for (int y = 0; y < tileRows; y++) {
    for (int x = 0; x < tileColumns; x++) {
      // split the image into parts to get the single tiles 
      // 1st loop): y = 0* height of one tile, x=0*width of one tile in the dimension (width of one tile, height of one tile)
      // 2nd loop): y = 0* height of one tile, x=1*width of one tile in the dimension (width of one tile, height of one tile)
// and so on...

void draw() {
  // show it for example each 1/2 a second in a loop....
  image(tiles.get( (millis()/500) % tiles.size()),width/2,height/2);  


1 Like

Thank you very much! Can you please add comments to the code, I realized that it runs tiles using a cycle, but I didn’t understand everything, thank you very much and @glv!!

1 Like

Hi @StasPovaliaevUkraine,

added as many comments as I only could. :slight_smile:

— mnse

1 Like