Skip to content

Adding a new Tile

Jump to bottom
Diego Penha edited this page Jan 30, 2021 · 7 revisions

The building blocks

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 small 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".

Tiny Land Tools

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!
You can also load a tile, from a matrix of colors, by pasting it at the text area and hitting the button "load" on the right: image

Putting it on the game

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, solid, items and enemies/npcs. As the names sugest, background is what you can walk on, solid is what blocks your path, items can be picked and enemies/npcs 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.

Server side

Background tiles are entirely visual. They're 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 tho, just for you to anticipate what might be comming next when we create a solid tile. 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 server-side.
For now let's just move on.

Client side

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 are at: ./client/src/board/BackgroundLayers.ts

Let's see how the InitialRoom 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],
  ],
Clone this wiki locally