API >> Tutorials >> Tiles for games >> Animated tiles

How to display a complex board with animations?

It is pretty good to display a board, but previous examples are a little bit static, and for your great game, you surely want dynamic elements to increase to difficulties of your level.
In this chapter, we will see how to add dynamic elements on the board. Our goal is to obtain the following result:

The complete source code for this example can be found in AnimateBoard.java.

You can see, there are 2 types of animation:

animated tiles
moving tiles (with or without animation)

Animated tiles

We should simulate a moving walkway, and for this we need an animation which displays the movement of the system. A simple AnimatedSprite is used. Here, we have 3 different animations:

One for the left corner of a line
One for the right cornet of a line
One for the middle of a line

We use following sequences of pictures to create the animation:

Left corner

Middle

Right corner

Nothing particular must be known as. We previously saw that in the Fundamentals Tutorial.

Moving tiles

To practice the player abilities, it is a good thing to add moving footbridges. For this we use a sprite (in our case it is one again an AnimatedSprite) with a SpriteWrapper. The goal of the SpriteWrapper is to move the sprite, it is really simple (TileWrapper.java). It offers to us the possibility to introduce a new element: id of a sprite.

We saw in the Fundamentals Tutorial, that we have to check the instance type of a sprite during the collision, but it is not useful when we have the same type of sprites with different comportments, or different types of sprites with the same collision effect. That's why, the sprite id will save us.

In our example, the footbridge tile has to bounce only when it collides with another tile. We could specialise a new object, but it is easier to set the id of tiles, and to check it during a collision. We affect the id 0 to all tiles, and in the future, your characters should have another id.

We do this action simply with the method setId(int) of the sprite object (in AnimateBoard.java):


...
  tile.setId(0);
...

During the collision event, we check the id of the sprite with the method getId() to change direction of the tile's movement (in TileWrapper.java):


...
  protected void collisionWith(Sprite s) {
    // Checks the id of the sprite to know if the direction
    // has to be changed or not.
    if ((s != null) && (s.getId() == 0)) {
      vx *= -1;
      getActionSprite().setPosition(getX()+2*vx, getY());
    }
  }
...

Finally, for the animation, we use the following sequence of pictures:

Disposing tiles

Instead of only one type of tiles, like in previous example, we have more types to manage. In fact, we have 5 different types of tiles, plus one special type in which we don't have any tile. Therefore, to display tiles, we use a 2 dimensions array of Integers, here are values that a cell can have:

0: no tile
1: simple tile
2: middle of the moving walkway
3: left corner of the moving walkway
4: right corner of the moving walkway
5: moving footbridge

Once again, use your favourite painting program and draw your level, we obtain something like this:

We use a different colour for each type of tiles. Now we can construct our array to obtain the file AnimateTiles.java.

For the engine which will create each type of tiles, we use the Java switch command, in each case, we completely create the desired tile (AnimateBoard.java):


...
    // Display tiles from class AnimateTiles.
    // 6 types of tiles:
    //  * 0 : no tile
    //  * 1 : simple tile (no animation, no movement)
    //  * 2 : flat rolling tile (animation, no movement)
    //  * 3 : left rolling tile (animation, no movement)
    //  * 4 : right rolling tile (animation, no movement)
    //  * 5 : footbridge tile (animation, movement)
    for (int y = 0; y < AnimateTiles.tiles.length; y++) {
      for (int x = 0; x < AnimateTiles.tiles[y].length; x++) {
	Sprite tile = null;
	switch (AnimateTiles.tiles[y][x]) {
	case 0:
	  break;
	case 1:
	  tile = new Sprite(tileImage);
	  tile.setId(0);
	  break;
	case 2:
	  tile = new AnimatedSprite(rollImage, 4, 1, 3);
	  tile.setId(0);
	  break;
	case 3:
	  tile = new AnimatedSprite(rollLeftImage, 4, 1, 3);
	  tile.setId(0);
	  break;
	case 4:
	  tile = new AnimatedSprite(rollRightImage, 4, 1, 3);
	  tile.setId(0);
	  break;
	case 5:
	  AnimatedSprite anim = new AnimatedSprite(bubbleImage, 5, 1, 3);
	  // Randomly desynchronize the animation of footbridge sprites.
	  anim.setCurrentPictureNumber(((int) (Math.random()*1000))%5);
	  tile = new TileWrapper(anim);
	  tile.setId(0);
	  break;
	}
	if (tile != null) {
	  tile.setPosition(x*tileSize, y*tileSize);
	  playfield.addSprite(tile);
	}
      }
    }
...

Now you have all you need to create your own board. In a future tutorial, we will see how to move your character in a platform game.

<< Previous Page

API >> Tutorials >> Tiles for games >> Animated tiles