Slick2d smooth movement between tiles

Newbie & Debugging Questions
#1

I’ve just started using Slick2d this week and have so far managed to put together the basics of a simple 2d top down game. I have a sprite moving around the screen and doing basic tile based collision detection. For the game mechanic that I eventually want restricting player/sprite movement to be tile by tile is sufficnet. However as you will see from the code below I dont have smooth movement between the tiles as during my collision detection if the target tile is not blocked I simply move the sprite 32 pixels (the size of a tile). I’m trying to figure out how can I keep my tile based collision detection by smoothly move the sprite from tile to tile, and then eventually animate it. I’ve some some experiments with multiplying by the delta in the update method but have not made any progress.

I’d be extremely grateful for any suggestions on how I should accomplish this. Source below.

import org.lwjgl.util.vector.Vector2f;
import org.newdawn.slick.AppGameContainer;
import org.newdawn.slick.BasicGame;
import org.newdawn.slick.GameContainer;
import org.newdawn.slick.Graphics;
import org.newdawn.slick.Image;
import org.newdawn.slick.Input;
import org.newdawn.slick.SlickException;
import org.newdawn.slick.tiled.TiledMap;

public class TestGame extends BasicGame{
	private boolean[][] blocked;
	Vector2f currentPosition = new Vector2f();
	Image characterFront = null;
	Image characterLeft = null;
	Image land = null;
	float x = 100;
	float y = 90;
	float scale = 1;
	TiledMap map = null;
	Player player;
	public TestGame()
	{
		super("Game");

	}

	@Override
	public void init(GameContainer gc)throws SlickException {
		//load played entity which handles resource loading for player sprite	
		player = new Player();
		//load the tiled map
		map = new TiledMap("data/untitled.tmx","/data");          
		// build a collision map based on tile properties in the tile map
		blocked = new boolean[map.getWidth()][map.getHeight()];
		//set starting position
		currentPosition.set(0f, 0f);
		//populate collision map
		for (int xAxis=0;xAxis<map.getWidth(); xAxis++)
		{
			for (int yAxis=0;yAxis<map.getHeight(); yAxis++)
			{                         
				int tileID = map.getTileId(xAxis, yAxis, 1);
				String value = map.getTileProperty(tileID, "blocked", "false");                         
				if (value.equalsIgnoreCase("true"))
				{
					System.out.println("tile id " + tileID + " at x=" + xAxis +" y=" 
							+ yAxis +" is BLOCKED");
					blocked[xAxis][yAxis] = true;
				}else{

					blocked[xAxis][yAxis] = false;
				}
			}
		} 

	}

	@Override
	public void update(GameContainer gc, int delta)
	throws SlickException
	{
		Input input = gc.getInput();
		//check what key has been pressed then check if target tile is registered as blocked in collision map
		
		if(input.isKeyPressed(Input.KEY_A))
		{
			player.setPlayerImage("a");
			if(blocked[(int) Math.abs(currentPosition.getX() - 1f)][(int) Math.abs(currentPosition.getY())] == true){
				System.out.println("blocking movement");  			
			}else{        	
				x = x - 32;
				currentPosition.setX(currentPosition.getX() - 1);
			}          
		}

		if(input.isKeyPressed(Input.KEY_D))
		{
			player.setPlayerImage("d");
			if(blocked[(int) Math.abs(currentPosition.getX() + 1f)][(int) Math.abs(currentPosition.getY())] == true){    			
				System.out.println("blocking movement");
			}else{
				x = x + 32;
				currentPosition.setX(currentPosition.getX() + 1);
			}
		}

		if(input.isKeyPressed(Input.KEY_W))
		{
			player.setPlayerImage("w");
			if(blocked[(int) Math.abs(currentPosition.getX())][(int) Math.abs(currentPosition.getY() - 1f)] == true){    			
				System.out.println("blocking movement");    			    			
			}else{
				y = y - 32;
				currentPosition.setY(currentPosition.getY() - 1);
			}       	
		}

		if(input.isKeyPressed(Input.KEY_S))
		{
			player.setPlayerImage("s");
			if(blocked[(int) Math.abs(currentPosition.getX())][(int) Math.abs(currentPosition.getY() + 1f)] == true){    			
				System.out.println("blocking movement");   			   			
			}else{      	
				y = y + 32;
				currentPosition.setY(currentPosition.getY() + 1);
			}     	
		}
	}

	public void render(GameContainer gc, Graphics g)
	throws SlickException
	{
		map.render(100,100);
		player.getPlayerImage().draw(x, y, scale);

	}

	public static void main(String[] args)
	throws Exception
	{
		AppGameContainer app =
			new AppGameContainer( new TestGame() );
		app.setDisplayMode(800, 600, false);
		app.setVSync(true); 
		app.setTargetFrameRate(60); 
		app.start();
	}
}
#2

use setTargetFPS(int fps);

and maybe setVsync(boolean);

#3

I already am, its not the issue that I have the logic and its not smooth, I dont know how to move the sprite gradually in the update method rather than moving it 32 pixels at a time.

For example, I want the player to press a key and it takes half a second or so for the sprite to move from tile to tile, rather then just suddenly appearing there as its being moved the full distance in one frame.

#4

I’ve managed to get this working by using the following code:

if(moveInProgress == true){
			if(moveDirection.equalsIgnoreCase("a")){
					if(currentMoveStep <= 31 && currentMoveStep > 0){						
					x = x-1;
					currentMoveStep--;
				}else if(currentMoveStep == 0){
					moveInProgress = false;
					currentMoveStep = 31;
				}

Every update I’m incrementing the sprites position by one pixel, once a full tile has been moved a reset a boolean value to stop any further movement and accept another key press. It seems to work well, I just cant tell if there is a better solution to this.

#5

I usually set a position for the player where the movement should stop.
When the movement is started be sure to have the target position set. Then each loop you can check if the player is standing on the target location, and then stop movement.
I usually use either a bool or an enum to define the state of the player (moving, still) so that way I know what to do and when movement stops I can just set the flag to no-movement.

#6

That’s probably what my movement code started out looking like. Over the years it’s grown to include checking/setting collision of tiles, changing the sprite based on how far through the step it is, and some other stuff.

#7

How can I resize a Image?
The Image is 800x600. I want to resize it to 640x480.
Can Graphics.drawImage already this?

#8

Check out this sweet method perfect for the job