# How to make tilemap/tileset from .png file?

**URL:** <https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837>\
**Category:** Coding Questions\
**Created:** [July 5, 2022, 7:17am UTC](https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837 "2022-07-05T07:17:00Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![StasPovaliaevUkraine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/staspovaliaevukraine/32/16599_2.png) [@StasPovaliaevUkraine](https://discourse.processing.org/u/StasPovaliaevUkraine)\
**Post date:** [July 5, 2022, 7:17am UTC](https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837/1 "2022-07-05T07:17:00Z")

</div>

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?

 ![tile](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/4/8425ec0b68f8645ac72a02c2cd7b9d45f0467ff2.jpeg)

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 5, 2022, 9:25am UTC](https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837/2 "2022-07-05T09:25:16Z")

</div>

Hello @StasPovaliaevUkraine ,

> [@StasPovaliaevUkraine](#):
>
> how to display part of the picture?

Take a look here:  
[https://processing.org/reference/PImage\_get\_.html](https://processing.org/reference/PImage_get_.html)

`:)`

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 5, 2022, 9:25am UTC](https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837/3 "2022-07-05T09:25:49Z")

</div>

Hi @StasPovaliaevUkraine and Hello Ukraine! 🙂

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

Cheers  
— mnse

PS: hope that helps!

ie:

```auto
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() {
  size(300,300);
  // 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...
      tiles.add(tilemapimg.get(x*tileW,y*tileH,tileW,tileH));      
    }    
  }  
  imageMode(CENTER);  
}

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

```

![output](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/b/bb40a8e20758374ee487d6c64474f3626d3991e0.webp)

---

<div class="post-metadata">

**Author:** ![StasPovaliaevUkraine](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/staspovaliaevukraine/32/16599_2.png) [@StasPovaliaevUkraine](https://discourse.processing.org/u/StasPovaliaevUkraine)\
**Post date:** [July 5, 2022, 12:10pm UTC](https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837/4 "2022-07-05T12:10:11Z")

</div>

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!!

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [July 5, 2022, 2:21pm UTC](https://discourse.processing.org/t/how-to-make-tilemap-tileset-from-png-file/37837/5 "2022-07-05T14:21:58Z")

</div>

Hi @StasPovaliaevUkraine,

added as many comments as I only could. 🙂

Cheers  
— mnse