Before moving on to the next lesson, it is recommended that you check out the selected problems for this section to review the material and practice the concepts introduced in this section.
Activity: Tiles
||scene:Tile maps||
allow for an easy way to design and structure maps
that the player can explore.
||scene:Wall collision||
events and ||scene:Tiles||
allow for further
control over how developers can interact with the individual ||scene:tiles||
that make up the ||scene:tile map||
.
Concept: On Hit Tile Events
The ||scene:scene.onHitTile||
event occurs when a sprite of the given
||sprites:Kind||
collides with a given ||scene:Tile||
that is a ||scene:Wall||
.
scene.onHitTile(0, 0, null);
Example #1: Rock Collector
- Review the code below
- Identify how the
||scene:scene.onTileHit||
event is used to make the sprite interact with the scene - How does the
||variables:tile||
parameter in the||scene:on hit tile||
event correspond to the type of tile that is used?
let mySprite: Sprite = sprites.create(sprites.castle.heroWalkFront1, SpriteKind.Player);
controller.moveSprite(mySprite, 100, 100);
scene.setTileMap(img`
7 7 7 7 7 7 7 7 7 7
7 7 7 7 7 7 7 7 7 7
7 7 f 7 7 7 7 7 7 7
7 7 7 7 7 7 7 7 7 7
7 7 7 7 7 7 7 7 f 7
7 7 7 f 7 7 7 f 7 7
7 7 7 7 7 7 7 f 7 7
7 7 7 7 7 7 7 7 7 7
`);
scene.setBackgroundColor(6);
scene.setTile(7, sprites.castle.tileDarkGrass1);
scene.setTile(15, sprites.castle.rock0, true);
scene.onHitTile(SpriteKind.Player, 15, function (sprite: Sprite) {
sprite.say("Ooh! A rock!", 1000);
});
Student Task #1: Collect More
- Start with the code from example #1
- Create at least one more tile that is not a wall,
and add it to the
||scene:tile map||
- Create at least one more type of
||scene:wall||
, and add it to the||scene:tile map||
. Make the image be of something that looks like a “portal” - Add an
||scene:on hit tile||
event that occurs when||variables:mySprite||
hits the new type of||scene:wall||
- In the new event, set
||variables:mySprite||
to a random new||sprites:x||
and||sprites:y||
position
Concept: Tiles
A ||scene:tile map||
is made up of tiles of type ||scene:tiles.Tile||
.
This type is defined in the ||scene:tiles||
namespace.
The ||scene:scene.getTile||
and ||scene:scene.setTileAt||
functions
can be used to get and modify the individual ||scene:Tiles||
in the
||scene:tile map||
.
scene.getTile(0, 0);
scene.setTileAt(null, 0);
Example #2: Draw a Red Line
- Review the code below
- Identify how it gets a specific tile and stores it in variable
- Identify how a specific tile is set to be a different color
scene.setTileMap(img`
f f f f f f f f f f
f f f f f f f f f f
f f f f f f f f f f
f f f f f f f f f f
f f f f f f f f f f
f f f f f f f f f f
f f f f f f f f f f
f f f f f f f f f f
`);
for (let i = 0; i < 8; i++) {
let currentTile: tiles.Tile = scene.getTile(i, i);
scene.setTileAt(currentTile, 2);
pause(250);
}
Student Task #2: Random Tiles
- Create a 10 x 8
||scene:tile map||
- Create an
||game:on update interval||
event that runs every 2000 ms - Inside the event, get a random tile by selecting a random row (between 0 and 7) and column (between 0 and 9)
- Set this tile to be the color blue (
8
)
Concept: Placing Sprites
The ||scene:place||
function can be used to set a ||sprites:sprite||
to be centered on a given ||scene:tile||
.
This makes it easy to place ||sprites:sprites||
in different locations around the map.
Example #3: Place Some Flowers
- Review the code below
- Identify how and where the
||variables:flower||
sprite is||scene:placed||
on||variables:myTile||
- Identify where the
||variables:player||
can be placed on the||scene:tile map||
. Can it be placed in between two tiles?
namespace SpriteKind {
export const Flower = SpriteKind.create();
}
scene.setTileMap(img`
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
`);
let player: Sprite = sprites.create(sprites.castle.heroWalkFront1, SpriteKind.Player);
let flower: Sprite = sprites.create(sprites.castle.tileDarkGrass2, SpriteKind.Flower);
let myTile: tiles.Tile = scene.getTile(1, 1);
myTile.place(flower);
controller.anyButton.onEvent(ControllerButtonEvent.Pressed, function () {
myTile = scene.getTile(Math.randomRange(0, 9), Math.randomRange(0, 7));
myTile.place(player);
});
Student Task #3: Place a House
- Start with the code from example #3
- Create a type of tile that is the color orange (
4
), and add it somewhere on the||scene:tile map||
- Create a new sprite,
||variables:house||
, that represents a house. Use the image of a blue house (||sprites:sprites.castle.houseBlue||
) - Use
||scene:place||
to place||variables:house||
on top of the||scene:tile||
that was orange in the||scene:tile map||
Concept: Tiles by Type
Placing ||sprites:sprites||
on top of ||scene:tiles||
may not be
extremely exciting to start, but becomes more useful when ||scene:tiles||
are created in other ways.
The function ||scene:scene.getTilesByType||
returns an array of all of the
tiles in the ||scene:tile map||
of the color specified.
This can be very useful to help set up levels,
by placing characters and items in specific locations on the screen.
scene.getTilesByType(0);
Example #4: Flower Town
- Review the code below
- Identify how it is different from example #3
- Identify how the
||scene:Tile||
||arrays:array||
is created - Identify how the
||scene:Tile||
||arrays:array||
is used
namespace SpriteKind {
export const Flower = SpriteKind.create();
}
scene.setTileMap(img`
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
7 6 7 6 7 6 7 6 7 6
6 7 6 7 6 7 6 7 6 7
`);
let flowerTiles: tiles.Tile[] = scene.getTilesByType(6);
for (let i = 0; i < flowerTiles.length; i++) {
let flower: Sprite = sprites.create(sprites.castle.tileDarkGrass2, SpriteKind.Flower);
flower.setFlag(SpriteFlag.Ghost, true);
flowerTiles[i].place(flower);
}
let player: Sprite = sprites.create(sprites.castle.heroWalkFront1, SpriteKind.Player);
controller.moveSprite(player, 100, 100);
scene.cameraFollowSprite(player);
Student Task #4: Fill in the Neighborhood
- Start with the code from example #4
- Expand the
||scene:tile map||
to be 16 x 16, and add orange (4
) tiles on the map - Use
||scene:scene.getTilesByType||
to obtain an array of all orange||scene:Tiles||
- Use a loop to create a
||sprites:sprite||
representing houses for every orange||scene:Tile||
.||scene:Place||
the houses on top of the orange||scene:Tiles||
.
What did we learn?
- What does a
||scene:on hit tile||
event allow you to do? - What is the relationship between
||scene:Tiles||
and||scene:tile maps||
? - How can
||scene:scene.getTilesByType||
allow||sprites:Sprites||
to be placed in different locations on the screen more easily?