Adding a new Tile
Tiny Land's building blocks are tiles.
You may not be familiar with the word "tile", but you might have heard of "sprites".
Basically a sprite is an "image" and a tile is a bundle of data that generates an image.
Tiny Land is entirely made of tiles and a tile is just a matrix of colors.
The colors in Tiny Land are taken from the NES color palete.
Now that you know about our building blocks, let's see how it looks like in code. That's one of the first tiles ever created for the game, the tree:
Tree: [[0 ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,0 ],
[Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ],
[Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ],
[Color.DarkGreen2,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen ,Color.DarkGreen2],
[0 ,Color.DarkGreen2,Color.DarkGreen2,Color.DarkGreen2,Color.DarkGreen2,Color.DarkGreen2,Color.DarkGreen2,0 ],
[0 ,0 ,0 ,Color.Brown ,Color.Brown ,0 ,0 ,0 ],
[0 ,0 ,0 ,Color.Brown ,Color.Brown ,0 ,0 ,0 ],
[0 ,0 ,0 ,Color.Brown ,Color.Brown ,0 ,0 ,0 ],],
They're all 8x8, so you could call Tiny Land an "8bit game".
You can see that all the text in the matrix kinda resembles a tree, but made out of text. And you probably already figured out how everything is made, it's very simple, right? But you might be thinking: "it must be really tedious to write a whole tile by hand".
That's what I thought aswell while developing the game, so I've created a tiny set of tools to help me build this world. I call it "Tiny Land Tools" and you can access it here:
Tiny Land Tools
well, since we want to create a tile, let's click the "Tile Generator" link and bam! You have a very visual way to create a tile, and generate the matrix our code needs, nice!
Ok, now that you've drew your tile and you have the resulting matrix of colors in hand let's put it on the game!
We have 4 types of tiles:
- background: what you can walk on
- solid: what blocks your path
- items: can be picked and used
- enemies/npcs: tiles that can interact with you
For this example let's turn your tile into a background tile, like the grass we are always stepping our feet on.
Background tiles are entirely visual. Their only purpose is to make the world look nicer, there is no rule that needs to be implemented on the server for background tiles.
I added this topic just for you to anticipate what might be comming next when we try to create a solid tile, an item or an npc. Because solid tiles must stop the player from walking over them and the server must guarantee that this rule is followed, so they must be registered and controlled server-side. Same for npcs, items, and enemies.
For now let's just move on.
To see our background tile we obviously need a room, let's use an existent one for this example, like the InitialRoom, where it all begins, in later wiki pages we are going to implement our own room!
As you may already have guessed, the same way tiles are made of colors, rooms are made of tiles. So a room is just a matrix (16x16) of tiles! Pretty simple, right? All the rooms, on the client can be found at: ./client/src/board/BackgroundLayers.ts
Let's see how the InitialRoom's background layer looks like:
InitialRoom: [
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.TallGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.TallGrass2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.TallGrass, Tiles.Rocks, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.Grass, Tiles.Rocks2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.TallGrass2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.DirtLeft, Tiles.Dirt],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Rocks, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Rocks, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.Bush, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.TallGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.TallGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.TallGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass2, Tiles.Rocks2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
[Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.Grass2, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass, Tiles.FlatGrass],
],
That's a lot of tiles! 256 in total! As you can see the tiles are not inserted directly inside the matrix, there is an object caled "Tiles" which have keys that lead to the tile matrix.
So lets find this object and register our tile. The "Tiles" object is at ./client/src/board/map/tiles/Tiles.ts.
You can see there's also an object called "SolidTiles", I wonder what is it for 🤔... Anyways, lets append our tile matrix at the end of Tiles object, should look something like this:
export const Tiles = {
FlatGrass: [[...
.....
.....
.....
OurTile: [[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,0,Color.Black,0,0,Color.Black,0,0],
[0,0,0,0,0,0,0,0],
[0,0,0,0,0,0,0,0],
[0,Color.Black,0,0,0,0,Color.Black,0],
[0,0,Color.Black,Color.Black,Color.Black,Color.Black,0,0],
[0,0,0,0,0,0,0,0],],
}
But wait, did you notice something weird? Our example tile is full of "0" values, this means nothing is going to be drawn at that spot, this is where we have not painted anything, but if it's the background how can there be an empty space in it? The answer is: there can't be empty spaces in background tiles, the code will crash at runtime if we try to use this tile on the background, because it has 0's in it.
Let's fill our tile, let's make a magma block or something:
Now our matrix has no 0's, we can add it to the Tiles object and then to the room! Remember the "InitialRoom" matrix? Let's change some tile (any "Tile.____") to be Tile.OurTile
Then open a terminal, go to the client folder and type yarn start to generate our updated bundle!
Next, go to the root folder of the project, open a terminal and type deno run --allow-net --allow-read --allow-env main.ts.
Now just open the browser and go to localhost:3000 to see our background tile in all its glory!
Are you proud? You just added a little piece of hell in the InitialRoom! Let's change all background tiles for that just to see what it looks like
Poor dog probably thinking "what the hell is going on". 
That's it for tiles, I hope you enjoyed this tutorial as much as I did making it!
Now that you added a simple background tile, let's try to create a solid tile