Microsoft MakeCode

Arcade Advanced Stream #104 - Zoom Zoom

Join @hassan and me as we make a city tilemap with the 8x8 tileset! Here’s the Javascript you need to copy and paste into a new “custom.ts” file to make a new 8x8 tilemap block:

namespace custom {
//% blockId=tilemap_editor_eight block=“set tilemap (8) to $tilemap”
//% weight=200 blockGap=8
//% tilemap.fieldEditor=“tilemap”
//% tilemap.fieldOptions.decompileArgumentAsString=“true”
//% tilemap.fieldOptions.filter=“tile”
//% tilemap.fieldOptions.tileWidth=8
//% tilemap.fieldOptions.taggedTemplate=“tilemap”
//% blockNamespace=“scene” group=“Tiles” duplicateShadowOnDrag
//% help=tiles/set-tile-map
export function setTilemap(tilemap: tiles.TileMapData) {

Watch the full stream here. Sorry the audio is echo-y :sob:. Hassan is fine, if you want to listen to his cooking journey!:

Check out the code below:

The MakeCode Arcade Advanced stream happens weekdays at 1:00 PM PST on

1 Like

Is there a way to make it 32 by 32?

yes there is! You can use that same bit of Javascript, but for the .tileWidth setting, change it from 8 to 32. And for clarity, you can rename the block to be blockId=tilemap_editor_thirtytwo and then block="set tilemap (32) to $tilemap"


I always wanted to do that.

1 Like

I have always been wondering, how do you make screen icons?

ooo what do you mean by screen icon?

There is a screen icon in that game at the bottom of the left hand side

I think @LCProCODER means that speed display you made


OOOOOO yeah so that’s actually just a sprite! I used the “relative to camera” flag to stick it to the bottom of the screen

1 Like

Something like this?

1 Like

yeah!!! that looks awesome :smiley:

1 Like

Do tilemap tile sizes have to be powers of two (8, 16, 32…)? I think I saw some old posts from @jwunderl (like this one) that mentioned there are some optimizations that don’t support arbitrary sizes…

It’s pegged to powers of two, lots of bit shifting in the implementation for performance on hardware

1 Like