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:
https://processing.org/reference/PImage_get_.html
:)
1 Like
Hi @StasPovaliaevUkraine and Hello Ukraine! 
You need to simply split it by the size of the tiles …
Cheers
— mnse
PS: hope that helps!
ie:
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);
}
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