Problem Set: Tiles

This section contains a number of selected problems for the Tiles section.

It is recommended that you review the problems, and complete a few before moving on to the next section.

Color Coded Tilemap

This section uses the color coded tilemap in some of the examples.

These were the original style of tilemaps, that got replaced with new blocks prior to the release of arcade. The new blocks show the tilemap in full as you draw it, allow more tiles at once, and let you set tiles as walls without changing the image.

If you open any example using the edit button, the extension will be automatically added to the project.

If you wish to use these blocks in another project, they can be added using the color-coded-tilemap extension.

Problem #1: Road Building

Create a small, rectangular road with the tilemap below. This will require six different colors of tiles: one for each corner of the road, and one for each direction of the road (that is, horizontal and vertical segment).

scene.setTileMap(img`
    . . . . . . . . . .
    . a 7 7 7 7 7 7 b .
    . 6 . . . . . . 6 .
    . 6 . . . . . . 6 .
    . 6 . . . . . . 6 .
    . 6 . . . . . . 6 .
    . c 7 7 7 7 7 7 d .
    . . . . . . . . . .
`);

Problem #2: Forest Development

Create a tilemap that represents the paths in a forest - include tiles that look like grass, flowers, and dirt paths.

Once your tilemap has been created, create three sprites that represent trees. Use scene.getTile and place to place the trees on the following Tiles:

Column	Row
2	3
6	6
7	2

Create two sprites that represent cherries. Place these cherries on the following Tiles:

Column	Row
1	1
5	4

Problem #3: Hold the Wall

In the snippet below, there is a wall (of Walls) on the right side of the tilemap.

Run
scene.setTileMap(img`
    . . . . . . . . d .
    . . . . . . . . d .
    . . . . . . . . d .
    . . . . . . . . d .
    . . . . . . . . d .
    . . . . . . . . d .
    . . . . . . . . d .
    . . . . . . . . d .
`);
scene.setTile(13, img`
    f e e e e e e e . . . . . . . .
    e e e e e e e e . . . . . . . .
    e e e e d e e e . . . . . . . .
    f e e e d e e e . . . . . . . .
    e e e e d e e e . . . . . . . .
    e e e e d e e e . . . . . . . .
    f e e e e e e e . . . . . . . .
    e d e e e e e e . . . . . . . .
    e d e e e e e e . . . . . . . .
    f d e e e e e e . . . . . . . .
    e d e e e e e e . . . . . . . .
    e d e e e d e e . . . . . . . .
    f e e e e d e e . . . . . . . .
    e e e e e d e e . . . . . . . .
    f e e e e e e e . . . . . . . .
    f e e e e e e e . . . . . . . .
`, true);

Create a scene of enemies storming the walls (and failing). To do this, you should do the following:

Create Sprites in an on update interval event
Set each of these Sprites to start in a random position on the left side of the screen, and move to the right
Create an on sprite of kind hits wall event between the Sprites in the on update interval event and the Wall in the tilemap, that destroys the given Sprite

Problem #4: Candy Cornucopia

The tilemap below is the start of a “candy cornucopia”; it’s up to you to fill it!

scene.setTileMap(img`
    d d d d d d d d d d
    e d d 9 b 9 d 2 e d
    d 2 d d d d b d d d
    d e d 2 d b 9 d d d
    d d d d e d d d 2 d
    d b d b d d d 2 e d
    d d 9 d 9 d e d d d
    d d d d d d d d d d
`);

Use array of all tiles to fill each of the given types of Tiles with the type of candy or sweet listed below!

Tile Type	Candy or Sweet
Brown (`0xE`)	Cake
Red (`0x2`)	Strawberry
Purple (`0xB`)	Ice Cream
Blue (`0x9`)	Donut

Problem #5: Fire Hazard

You’ve decided to add a fire hazard to your game; fire will be projected from the floor, and the player needs avoid being hit by it.

To implement this behavior, start with the code snippet below.

Run
namespace SpriteKind {
    export const Flame = SpriteKind.create();
}

let fire: Image = img`
    . 2 . . . . . . . . . . . . . .
    4 2 . . 2 . . . . 2 . . . . . .
    4 2 . . 2 . . 4 4 . . 4 4 2 . .
    . 4 4 4 . . 4 4 4 . . 4 4 4 . .
    4 4 4 4 . 4 4 2 4 4 4 2 4 4 . .
    4 4 4 4 4 4 2 2 4 2 2 2 4 4 . .
    . 4 4 4 2 2 2 2 2 5 2 2 4 4 . .
    . 4 4 2 2 2 2 2 5 5 2 2 2 4 . .
    4 4 4 2 2 2 2 5 5 5 2 2 2 4 . .
    4 4 4 2 2 5 5 5 5 2 2 2 4 4 . .
    . 4 4 2 5 5 5 2 2 2 2 4 4 4 . .
    . 4 4 2 2 2 2 2 2 2 4 4 4 4 . .
    . 4 4 4 2 2 2 2 2 4 4 4 4 4 . .
    . . 4 4 4 2 2 4 4 4 4 4 4 . . .
    . . 4 4 4 4 4 4 4 4 4 . . . . .
    . . . . 4 4 4 4 4 . . . . . . .
`

scene.setTileMap(img`
    1 1 1 1 1 1 1 1 1 1
    1 1 1 1 f 1 1 1 1 1
    1 1 1 1 f 1 1 1 1 1
    1 1 1 1 f 1 1 1 1 1
    1 1 1 1 f 1 1 1 1 1
    1 1 1 1 f 1 1 1 1 1
    1 1 1 1 f 1 1 1 1 1
    1 1 1 1 1 1 1 1 1 1
`);

forever(function () {

});

This contains the three things you need to get started: an image of fire, a tilemap with a row of black tiles set for the trap, and a forever loop.

The forever at the end will run in the background, forever. This is where the trap will be implemented.

In forever, use scene.getTilesByType to obtain an array of all the black tiles. Iterate over each of these in a loop. In this loop,

Create a Sprite with an image of fire
Set the Sprite‘s lifespan property to 1000 ms
Place the Sprite on top of the current Tile
pause for 250 ms

After the loop, pause for another 750 ms, to let most of the fire go away.

Edit this page on GitHub
Edit template of this page on GitHub