Rendering Tiles and Sprites in Java

I’m in the middle of designing a simulation, I’d like to use top down sprite views (Legend of Zelda style) or Isometric views (RTS, C&C and CivIV). But I don’t really have any experience in doing this in java. Are there any basic tutorials that take you through the whole process from scratch? I’m happy to use a library like libGDX and such but the basic idea is I need to understand the following:

How you actually render tiles (with tiles and example code)
How to render sprites on those tiles
How do you differentiate between tiles on a sprite sheet?
How do you animate a sprite using a sprite sheet?
How do you ensure the sprites do not collide with each other and the environment?

Any and all help would be much appreciated, I’ve scoured the internet to no avail, there are many articles on ‘isometric drawing’ and articles assuming I already have the tiles to draw, I need something that takes you from nothing and produces something you can see.

EDIT: I accidently posted this before I finished it, let me do some editing.

To be honest I haven’t seen a tutorial which goes through the whole process them scratch but I’ll try to explain some of the theory to you, and some of the options that you have. There are a lot of different ways in which map data can be stored, parsed etc. and the method which you want to use depends on a few factors:

  • Do you have much experience with Java/programming as a whole?
  • What are the size of your maps?
  • How complicated are the maps going to be?


Here are the two routes which you should consider:

[li]Use Java2D which is fine for relatively small, simple top-down tiled maps

  • Use a game engine like LibGDX which will be good for large, more complicated tiled maps

So my advice to you is if you’ve not got a lot of experience in Java and want to start out with something small, use Java2D, otherwise use LibGDX. I started out by experimenting with Java2D and eventually started to use LibGDX. If you want to use LibGDX, refer to this page.

By rendering tiles you’re simply rendering a grid of squares, so the basic idea of how to draw a simple tiled grid is to do something like this:


class Tile {
	
	int x, y;
	int width, height;

	Tile(int x, int y, int width, int height) {
		this.x = x;
		this.y = y;
		this.width = width;
		this.height = height;
	}

	public void draw() {
		// draw on to the screen at position x,y
	}

}

class Grid() {
	
	Tile[][] tiles;

	public Grid(int tileWidth, int tileHeight, int tilesX, int tilesY) {
		tiles = new Tile[tilesX][tilesY];
		for(int x = 0; x < tiles.length; x++) {
			for(int y = 0; y < tiles[x].length; y++) {
				tiles[x][y] = new Tile(x * tileWidth, y * tileWidth, tileWidth, tileHeight); // create tiles
			}
		}	
	}

	public void draw() {
		for(Tile[] row : tiles) {
			for(Tile tile : row) {
				tile.draw();
			}
		}
	}

}

Drawing a grid of tiles is simple enough, but you need a way of storing map data. If you’re using something like Java2D and you want to create a fairly simple game, you can just store the map data in an array, or possibly in a binary or text file. You’ll need to create a file parser to load that map data. Map data can be represented in a lot of different ways, but a simple way of representing it is by using a number for each type of tile. For example, a 1 might represent a grass tile, 2 might represent a sand tile etc. Creating a method of parsing the map data is totally dependant on the way you want to store the tile data, but if you want to go for the easiest option and store the map data in an array, you could do something like this:


short[][] tiles = { {0, 0, 0, 0, 0, 0, 0, 0},
			{0, 0, 0, 0, 0, 0, 0, 1},
			{0, 0, 0, 0, 0, 0, 1, 1},
			{0, 0, 0, 0, 0, 1, 1, 2},
			{0, 0, 0, 0, 1, 1, 1, 2},
			{0, 0, 0, 0, 1, 1, 1, 2} }; // 0 might be grass, 1 might be sand, 2 might be water

Creating the grid:


public Grid(short[][] mapData, int tilesX, int tilesY) {
		tiles = new Tile[tilesX][tilesY];
		for(int x = 0; x < tiles.length; x++) {
			for(int y = 0; y < tiles[x].length; y++) {
				tiles[x][y] = new Tile(x * tileWidth, y * tileWidth, tileWidth, tileHeight); // create tiles
				switch(mapData[x][y]) {
				case 0:
					tiles[x][y].setImage(/* image path */); // set tile image
					break;
				case 1:
					tiles[x][y].setImage(/* image path */); // set tile image
					break;
				case 2:
					tiles[x][y].setImage(/* image path */); // set tile image
					break;
				//etc...
				}
			}
		}	
	}

Hopefully that’ll give you some idea of how tiles are rendered. Regarding how to differentiate between sprite, again, if you’re using LibGDX then look through the wiki. However, if using Java2D then it’s actually pretty easy. You just need to load the spritesheet as a bufferedimage and use this method:

This is quite comprehensive so thanks for that, i’ve about 4 years experience with Java but never done anything quite so ‘visual’ always worked on back end systems and command line based programs so Although I could probably use LibGDX, doing something simple first and them moving on is probably my best bet.

If you know you’ll eventually use LibGDX, why waste time working with Java2D?

It’s not like Java2D makes everything easier. Many things are actually much harder with Java2D – e.g. handling input, drawing rotated sprites, adding themed UI, handling sprite sheets and animations, enabling fullscren, or even just getting sprites to render at 60 FPS.

If your game needs any of these things, then Java2D is probably the wrong choice.

Here is source code:
http://www.ludumdare.com/compo/ludum-dare-22/?action=preview&uid=398
Here is a tutorial for this code. It is not really copy/paste, stuff is different, but similar kinda.


Here is an almost copy/paste version: