Tilesets are a common technique in game development to create all kinds of tile-based games (from strategy to RPG games).

Here’s a example of simple 2D isometric square tilesets. I decided to use 32×32 pixels tiles and store 10 tiles per row in a single image:

I created a class called public class JGameCanvas that extends from JPanel from swing:

```package game;

import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import javax.swing.JPanel;

enum Tile {
GRASS, GRASS_STONE, GRASS_BAGS, T3, T4, T5, T6, T7, T8, T9,
TREE, TREE_CHOMP, TREE_DEAD, T13, T14, T15, T16, T17, T18, T19,
WALL, WALL_POSTER, WALL_END_RIGHT, WALL_END_LEFT, T34, T35, T36, T37, T38, T39,
T40, T41, T42, T43, T44, T45, T46, T47, T48, T49,
NEWS, T51,      RES_1, RES_2, BUSS_1, BUSS_2, HOSP_1, HOSP_2, MARK_1, MARK_2,
PIZZ_1, PIZZ_2, RES_3, RES_4, BUSS_3, BUSS_4, HOSP_3, HOSP_4, MARK_3, MARK_4,
PIZZ_3, PIZZ_4, RES_5, RES_6, BUSS_5, BUSS_6, HOSP_5, HOSP_6, MARK_5, MARK_6
}

public class JGameCanvas extends JPanel{
private static final int tW = 32; // tile width
private static final int tH = 32; // tile height
private static final Tile map[][] =
{{Tile.TREE,Tile.TREE, Tile.TREE, Tile.ROAD_V, Tile.GRASS, Tile.TREE, Tile.TREE_DEAD, Tile.GRASS_STONE, Tile.TREE, Tile.TREE},
{Tile.WALL, Tile.WALL_POSTER, Tile.WALL_END_RIGHT , Tile.ROAD_V, Tile.WALL_END_LEFT, Tile.WALL, Tile.WALL_END_RIGHT, Tile.TREE_CHOMP, Tile.GRASS_STONE, Tile.GRASS_STONE},
{Tile.GRASS,Tile.GRASS, Tile.GRASS_STONE, Tile.ROAD_V, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS},
{Tile.PIZZ_1,Tile.PIZZ_2, Tile.GRASS, Tile.ROAD_V, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS},
{Tile.PIZZ_3,Tile.PIZZ_4, Tile.GRASS, Tile.ROAD_V, Tile.GRASS, Tile.GRASS, Tile.MARK_1, Tile.MARK_2, Tile.HOSP_1, Tile.HOSP_2},
{Tile.GRASS,Tile.BUSS_1, Tile.BUSS_2, Tile.ROAD_V, Tile.TREE, Tile.NEWS, Tile.MARK_5, Tile.MARK_6, Tile.HOSP_5, Tile.HOSP_6},
{Tile.GRASS,Tile.BUSS_5, Tile.BUSS_6, Tile.ROAD_V, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS},
{Tile.GRASS,Tile.GRASS, Tile.GRASS, Tile.ROAD_V, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS, Tile.GRASS}
};

private Image tileset;

public JGameCanvas() {
tileset = Toolkit.getDefaultToolkit().getImage(this.getClass().getResource("resources/tileset.png"));
}

@Override
protected void paintComponent(Graphics g) {
g.setColor(Color.black);
g.fillRect(0, 0, getWidth(), getHeight());

for(int i=0;i<10;i++)
for(int j=0;j<10;j++)
drawTile(g, map[j][i], i*tW,j*tH);
}

protected void drawTile(Graphics g, Tile t, int x, int y){
// map Tile from the tileset
int mx = t.ordinal()%10;
int my = t.ordinal()/10;
g.drawImage(tileset, x, y, x+tW, y+tH,
mx*tW, my*tH,  mx*tW+tW, my*tH+tH, this);
}
}```

Program running:

Those graphics I created for the game BatalhÃ£o and are under Creative Commons Attribution Share Alike 3.0 license. The source code is under GPL license, download the NetBeans project with sources: tileset.tar.bz2.

Published inenglish

1. […] noticed that I had released another free tileset before with a different aesthetic approach. For now I’m merging it with the “My Free […]

2. Wow, great job. Thanks for your “tutorials”. It is very useful for my ZooTyccon simulation game project in my OOP lecture assignment.

3. James Bell

Congratulations, great example.
This is a great site for learning.
One question, how can I make a object move randomly in this TileSet?
Tanks.

4. Devlin

@James

By adding and drawing an image, implementing sidescrolling and map boundaries, adding animation, and using the rand() function in the java math library to determine the x and y coordinate changes that would result in it travelling…

That “One question” could span a whole bunch of tutorials. Learn Java.

5. on

Please code to me for my programming Studying

6. J’aime les doubles penne italiennes Ã  la carbonara.

7. Anna Polina

Moi aussi jâ€™aime les double penne