2d hack 'n' slash - Problem with drawing the game world right

Game Mechanics
#1

So I’ve decided to make a 2d hack and slash tile game…

I’ve decided to go on with a model view control pattern for my “gui hook” into the game…

I can draw the game like snake would do. Gameworld static, and player moves around the screen.

I want to draw my game with the player fixed in the middle, and the world moving “under” the player.

until now my drawing method is like this:

public void draw(){
Graphics g = getGraphics();
Graphics bbg = this.backBuffer.getGraphics();
BufferedImage image = null;

	bbg.setColor(Color.BLACK);
	bbg.fillRect(0, 0, windowWidth, windowHeight);
	Player player = game.getTileMap().getPlayer();

	

	for(int y = 0; y < 12; y++){
		for(int x = 0; x < 20; x++){
			Position position = new Position(x,y);
			//Draw tiles
			Tile tile = game.getTileMap().getTileAt(position);
			if(tile != null){
				image = tile.getImage();
			}

			//Draw items
			Item item = game.getTileMap().getItemAt(position);
			if(item != null){
				image = item.getImage();
			}

			//Draw units
			Unit unit = game.getTileMap().getUnitAt(position);
			if(unit != null && !(unit instanceof Player)){
				image = unit.getImage();
			}
			bbg.drawImage(image, x*40, y*40, this);
		}
	}
	bbg.drawImage(player.getImage(), player.getPosition().getX()*40, player.getPosition().getY()*40, this);

	g.drawImage(this.backBuffer, 0, 0, this);
}

So my question is: How do I draw the world calculated from the player position, and not fixed like the code is now?

#2

what you have to do IIRC is that you have to offset the world.

so the player is alwyas in the center, but hwne you draw the world, u change the x and y according to the x and y of the player

pseudo code:

instead of:
bbg.drawImage(image, x40, y40, this);

do something like this:
bbg.drawImage(image,x*40- player.getPosition().getX()20,y40 - player.getPosition().getY()*20,this);

this is just rough, not exact.

also though I suggest (although I dunno if it makes a dif) that you draw all the images in your for loop onto an image, and then draw that image (if that makes any sense)

also though, just google “how to do scrolling map”

#3

Thx alot! I knew it was something with the player position somewhere, but couldn’t figure out where, but pretty obvious actually :stuck_out_tongue: Have tried to figure this out for days now :smiley:

#4

Another way to do it, is to do a translation at the beging :


  Graphics2D g2D = (Graphics2D)this.backBuffer.getGraphics();

...
 AffineTransform trans = g2D.getTransform(); // Allways good to backup

 g2D.translate(-camera.x*40,-camera.y*40);

  for(int y=camera.y;y<camera.y+12;y++)
 {
     for(int x=camera.x;x<camera.x+20;x++)
    {
       ...
    }
 }

  g2D.setTransform(trans);

By the way, the “Position position = new Position(x,y);” is “horrible” ;D. You are creating 240 objects by frame for nothing. Create a method “Position.set(x,y);” and reuse the object.

#5

Ill try this when I come back to “the office” :slight_smile: Thx for the post, and can see the point in the position argument :slight_smile:

#6

This isn’t the way I would paint my graphics.

I use double buffering with the main panel being repainted with a worker thread a certain amount every second.

Just sayin’.

#7

Please don’t derail this thread. The way he’s doing his painting is fine. Your way is not recommended since it is passive rendering :wink: