Breadcrumb Trail
{Introduction }
Placing ||sprites:sprites||
on a ||scene:tilemap||
can be a great way to set up levels
for your player to explore. These ||sprites:sprites||
can be used as decoration
or as objects that the player can interact with.
In this case, you will create a scene where breadcrumbs are placed on the grass in a forest setting.
{Step 1}
Find ||scene:set tilemap to||
in ||scene:Scene||
and drag it into the ||loops:on start||
.
Open the tilemap editor and use the paint bucket tool to fill the canvas with a grassy background.
tiles.setTilemap(tilemap`level_0`)
{Step 2}
Open the image editor for the ||scene:tilemap||
again.
Draw a path from the top left to the bottom right with a different tile.
tiles.setTilemap(tilemap`level_1`)
{Step 3}
Find ||loops:for element value of list||
and place it after the ||scene:set tilemap to||
block.
let list: number[] = []
tiles.setTilemap(tilemap`level_1`)
for (let value of list) {
}
{Step 4}
Find ||scene:array of all locations||
in ||scene:Scene||
.
Place it in the ||loops:for element value of list||
block on top of ||variables:list||
.
Select the tile you drew diagonally across the map.
The loop will now run once for every tile of that type in the tilemap.
tiles.setTilemap(tilemap`level_1`)
for (let value of tiles.getTilesByType(sprites.castle.tileDarkGrass2)) {
}
{Step 5}
Find ||variables(sprites):set mySprite to sprite of kind player||
in ||sprites:Sprites||
and drag it into the ||loops:for element||
loop.
Draw breadcrumbs for the image of the sprite.
This will create a new ||sprites:Sprite||
for every one of the
selected ||scene:tiles||
in the ||scene:tilemap||
.
let mySprite: Sprite = null
tiles.setTilemap(tilemap`level_1`)
for (let value of tiles.getTilesByType(sprites.castle.tileDarkGrass2)) {
mySprite = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . d . . . . . . d . .
. . . . . d e d . . . . . . . .
. . . . . . d e d . . . . . . .
. . . . . . . d . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . d d . . . . .
. . . . . . . . . e e d . . . .
. . . . . . . . . d e d . . . .
. . . . e . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . d d d d . .
. . . . . . . . . . d e e d . .
. . . . d . . . . . d e d d . .
. . . . . . . . . . d d d . . .
`, SpriteKind.Player)
}
{Step 6}
Find ||scene:place mySprite on top of tilemap col row||
and place it after ||variables(sprites):set mySprite to||
.
Drag ||variables:value||
from the ||loops:for loop||
to ||variables:tilemap col row||
.
Make sure ||variables(noclick):mySprite||
is the ||variables:variable||
for the
||sprites:sprite||
you just created.
This will place the breadcrumbs on each ||scene:tile||
of the diagonal line.
let mySprite: Sprite = null
tiles.setTilemap(tilemap`level_1`)
for (let value of tiles.getTilesByType(sprites.castle.tileDarkGrass2)) {
mySprite = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . d . . . . . . d . .
. . . . . d e d . . . . . . . .
. . . . . . d e d . . . . . . .
. . . . . . . d . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . d d . . . . .
. . . . . . . . . e e d . . . .
. . . . . . . . . d e d . . . .
. . . . e . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . d d d d . .
. . . . . . . . . . d e e d . .
. . . . d . . . . . d e d d . .
. . . . . . . . . . d d d . . .
`, SpriteKind.Player)
tiles.placeOnTile(mySprite, value)
}
{Step 7}
If you want to make the tile below the sprite look the same as the others
so that it doesn’t stand out from other tiles,
find ||scene:set at tilemap col row||
in ||scene:Scene||
and place it after ||variables(sprites):set mySprite to||
.
Drag ||variables:value||
on top of ||scene:tilemap col row||
,
and select the tile you want the tile to become (in this case, the same as the other tiles).
let mySprite: Sprite = null
tiles.setTilemap(tilemap`level_1`)
for (let value of tiles.getTilesByType(sprites.castle.tileDarkGrass2)) {
mySprite = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . d . . . . . . d . .
. . . . . d e d . . . . . . . .
. . . . . . d e d . . . . . . .
. . . . . . . d . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . d d . . . . .
. . . . . . . . . e e d . . . .
. . . . . . . . . d e d . . . .
. . . . e . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . d d d d . .
. . . . . . . . . . d e e d . .
. . . . d . . . . . d e d d . .
. . . . . . . . . . d d d . . .
`, SpriteKind.Player)
tiles.placeOnTile(mySprite, value)
tiles.setTileAt(value, sprites.castle.tileDarkGrass3)
}
{Complete}
Congratulations, your forest is complete! If you want to see the breadcrumbs placed one by one,
add a ||loops:pause||
inside the ||loops:for element||
loop.
let mySprite: Sprite = null
tiles.setTilemap(tilemap`level_1`)
for (let value of tiles.getTilesByType(sprites.castle.tileDarkGrass2)) {
mySprite = sprites.create(img`
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . d . . . . . . d . .
. . . . . d e d . . . . . . . .
. . . . . . d e d . . . . . . .
. . . . . . . d . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . d d . . . . .
. . . . . . . . . e e d . . . .
. . . . . . . . . d e d . . . .
. . . . e . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . d d d d . .
. . . . . . . . . . d e e d . .
. . . . d . . . . . d e d d . .
. . . . . . . . . . d d d . . .
`, SpriteKind.Player)
tiles.placeOnTile(mySprite, value)
tiles.setTileAt(value, sprites.castle.tileDarkGrass3)
pause(350)
}
{
"transparency16": {
"data": "hwQQABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==",
"mimeType": "image/x-mkcd-f4",
"tilemapTile": true
},
"level_0": {
"id": "level_0",
"mimeType": "application/mkcd-tilemap",
"data": "MTAxMDAwMTAwMDAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMA==",
"tileset": [
"myTiles.transparency16",
"sprites.castle.tileDarkGrass3"
]
},
"level_1": {
"id": "level_1",
"mimeType": "application/mkcd-tilemap",
"data": "MTAxMDAwMTAwMDAyMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDIwMjAyMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDIwMjAyMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDIwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMjAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAyMDIwMjAyMDIwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMjAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAyMDIwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMjAyMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDIwMjAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAyMDIwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMjAyMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDIwMjAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAyMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMjAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDEwMTAxMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMA==",
"tileset": [
"myTiles.transparency16",
"sprites.castle.tileDarkGrass3",
"sprites.castle.tileDarkGrass2"
]
},
"*": {
"mimeType": "image/x-mkcd-f4",
"dataEncoding": "base64",
"namespace": "myTiles"
}
}