Skip to content
Stefan edited this page Mar 4, 2018 · 8 revisions

After finishing the Basic Collision tutorial it's time to animate some sprite on screen! No more boring and static images but some animated action!

Animation

If you are interested in making games you might already know some basics about animation: most of the times you change between different images so fast that the human eye recognizes it as a fluent movement. You can do it with Marte in 3 simple steps:

  1. load spritesheet: the sprite sheet contains various images (for example the hero moving right),
  2. setup different animations: let MarteEngine know about the differents frame and their duration of an animation
  3. update animation: update animation according to your game logic
public class Player extends Entity {

	/**
	 * @param x
	 *            , x coordinate on screen where Player starts
	 * @param y
	 *            , y coordinate on screen where Player starts
	 */
	public Player(float x, float y) {
		super(x, y);
		// load spriteSheet
		SpriteSheet playerSheet = ResourceManager.getSpriteSheet("player");

		setupAnimations(playerSheet);

	}

	private void setupAnimations(SpriteSheet playerSheet) {
		setGraphic(playerSheet);
		duration = 150;
		addAnimation("STAND_DOWN", false, 0, 0);
		addAnimation(ME.WALK_RIGHT, true, 2, 0, 1, 2, 3, 4, 5);
	}
	
	@Override
	public void render(GameContainer container, Graphics g)
			throws SlickException {
		super.render(container, g);
	}
	
	@Override
	public void update(GameContainer container, int delta)
			throws SlickException {
		super.update(container, delta);
		
		if (check(ME.WALK_RIGHT)) {
			currentAnim = ME.WALK_RIGHT;
			if (collide(SOLID, x + 10, y) == null) {
				x = x+ 10;
			}
		}
	}

}

First this example loads the spritesheet using Marte's ResourceManager. As you can see there is a private method (we just added that method to simplify explanation) setupAnimations. This method creates different animations according to the animation logic. Last step is when the player presses the right arrow key, where we set the current animation to the one named WALK_RIGHT. On the next render phase of this Entity, super.render is called and this causes our animation to be updated, using the duration value you setup in setupAnimations.

You can see a better and more complex example in the test directory of Marte in the class MoveAvatarTest.java.

After finishing this tutorial you could proceed and learn more about Tweens.


MarteEngine version 0.3

Clone this wiki locally