Efficient game maps and Scrolling

J2D? I should have said Slick2D or LWJGL with VBOs, but I still remember J2D.(What I used to think all games used)

Didn’t feel like pulling out the big guns for a simple demo, plus this way it all fits nicely into a single source file. :slight_smile:
Should be pretty trivial to translate, as the rendering lib used is only the V in MVC. The other parts (most of the code) stay the same.

MVC?

See reply #6.

[slightderail]
Thanks BP for indirectly showing me a better way to loop through the map, gave my game a 5-10~ FPS boost with the framerate uncapped. Went from 105-110~ to 115-120~. Not a huge difference, but every little bit is a good bit. :stuck_out_tongue:
[/slightderail]

No prob. Also that technique you were using has a slowdown that is linear with map size, so it’d be even more detrimental the larger the maps are.

Very true. I didn’t even consider that since my game is locked into 512x512 anyway for game balance reasons.

I studied the code for a while and am still a bit confused. Why do you check if the x < the y length? Is it because they are the same?

 for (int x = 0; x < tiles[y].length; x++

I have a good amount of questions and they might just be too much. Is there some kind of article that can help sum this up?

you might find it easier to learn if you start from nothing and build up each piece by yourself. make a big 2d map, put random tiles in it and draw a portion of that to the screen without moving. then add in the scrolling ability, then add in more layers. Its often hard to understand a complex system when you havnt built all the components of similar systems before.
get something to work, then ask the question “what small part do i change next to make it more like the way i want it”, then work out how to make that change, one by one. this is probably a good idea, since you will eventually want to add a lot more complexity to your tile engine so you will want to understand it quite well.

http://www.cokeandcode.com/main/tutorials/tile-maps/

I tried it myself and this is the best I could think of(for now). I have’nt implemented any camera rendering, but I just want to ask how this is so far.

Code:

import java.io.IOException;
import org.newdawn.slick.Graphics;
import org.newdawn.slick.Image;
import org.newdawn.slick.Input;
import org.newdawn.slick.SlickException;

public class IntroState extends State {
	
	private static final int TileSize = 64;
	
	//image tile i use
	private Image tile;
	
	//map width in pixels
	int map_width = 500;
	int map_height = 500;
	
	
	public void render(Graphics g) {
		
		for (int x = 0; x < map_width; x += TileSize){
			
		for (int y = 0; y < map_height; y+= TileSize) {
			
			g.drawImage(tile,  x, y);
			
		}
		}
		
	}

	public void init() throws SlickException, IOException {
		tile = new Image("res/tile.png");
		
		
	}

	public void update(int delta, Input input) {
		
	}


}

The output:

I was pretty proud of how much I did by myself with such little code. If you didn’t notice, the images have a white space between them that I drew around them when I made it.

Now, when I see you guys use a tile class, what would one look like. Maybe some psuedo code with a bunch of fake methods for an example. How would I apply that tile class also?

How do I move the screen in slick2D? Whenever I do g.translate it moves back.

what are you trying to do exactly? Move the map around?

a basic tile class would contain an image member and a rendering method.


class Tile{
    Image image;

    public Tile(Image desiredImage){
        image = desiredImage;
    }

    public render(int x, int y){
         g.drawImage(image,  x, y);
    }
}

To get different tiles you will have to create some sort of list into which you load your different tile images at the beginning of the program,
now when you use “new Tile()” to create a tile to place into your 2d map array, you will tell it which image the tile will be using.

you will then be able to say in your rendering loop:


    map[x][y].render(x*tileWidth, y*tileHeight);

You dont really need to move the screen around either… thats what the cameraX and cameraY are for

When ever you draw ANYTHING that is part of the world and you want to change its screen position when the camera moves you subtract the camera position from the images position. eg:


    g.drawImage(image,  x - camearX, y - cameraY);

This shifts the whole lot over without any stuffing around or extra work. The only thing you need to do to move your camera view is to change the cameraX and cameraY variables. it applies to all your tiles, sprites, effects but not to GUI elements.

ps, your rendering loop will work better if you step it by 1 each step rather than by tileSize (otherwise its hard to read from your map array), multiply them up to screen co-ordinates while rendering instead.

Blame typos on my phone :point:

I did it without a 2D or 3d array actually. I made a rectangle that replaces the camera and only blocks that intersect it are rendered. All I have to do is specify the width and height of the map in tiles. To draw a certain tile, I have a seperate x and y coordinate and stuff. I’m not looking at the code right now but I did what you said (differently ) except for using any kind of arrays. I have to multiply the block width/height when I want to draw a tile but apparently that’s what I’m supposed to do.

Short story I made a faster tile engine than I planned. My first file engine too. I’ll post the fps and source code in the morning. Also, even though this is my first tile engine, is it wrong to paste bin. It feels like only experts paste bin. :slight_smile: :slight_smile:

pastebin is good for anything over a few lines of code.

how do you do it without a 2d array? you cant store/retrieve or alter your tile map without a map :wink:

I don’t exactly get what you’re trying to do here. Are you just trying to move the map around the screen?

That should incredibly simple.

Pseudo-Code:


public void render(Graphics g, int map_offset_x, int map_offset_y)
{
    for (int x = map_offset_x; x < map_width + map_offset_x; x += TileSize)
        for (int y = map_offset_y; y < map_height + map_offset_y; y += TileSize)
            g.drawImage(tile, x, y);
}

You’re just telling the program to render the map starting at a different location, the coordinates for that location being [icode]map_offset_x[/icode] and [icode]map_offset_y[/icode].

  • Jev

Here’s the paste bin for my magic
http://pastebin.java-gaming.org/eaf09587a99

And the output:

Looks like you’re getting somewhere now. Next try to make it so you can have different types of tiles. You’ll need arrays for that. You could either use random tiles first untill you work out how to change them with the mouse, or you could hard code the map during setup.

When I’m starting a new project, I usually start by making a very simple map editor. That gives me 2 good things: I can experiment with designing levels very early in development, and most of the rendering code is the same for the editor as it is for the game so it gets used for both.