44 Tilemap - JcerelusDev/CanvasGameJs GitHub Wiki
Method to create a tilemap by hand using a
a tilesheet or tileset.
How to get the correct index of a tile in a tileset ?
To be able to know each tile index you need a grid system with numbers as tile image index.
How to create a grid system using this library :
1.- Create an HTML file that is not part of the game.
2.- Link the library to that file.
3.- Inside of that html file write your javascript code, because there's no need for an external js for that simple stuff.
4.- Initiate the game object
const game = new Stage()
game.add(game.stage)
const gW = game.stage.width = the width of your tileset
const gH = game.stage.height = the height of your tileset
Important :
If the tileset was created by you, you already knew it's tile image resolution like : 8×8 ; 16×16 ; 32×32 ; 64×64 and so on,
in case it's been downloaded you have to know the tile image resolution. If it is : 8×8 ; 16×16 ; 32×32 ; 64×64 and so on, you always see that info before you download a tileset .
Best practice to remember tileset resolution by tile image is to rename your tileset before you download it.
Example : terrain.png to terrain32.png , like you will notice it's 32×32
5.- Create the grid
const grid = new createGrid(gap,gW,gH,color)
gap : should = to the tile size like : (16 ; 32; 64 and so on ) depending on your tile image resolution
gW : is the canvas width , it should be equal to the tileset width
gH : is the canvas height , it should be equal to the tileset height
if the tileset is 465*456 gW = 465 and gH = 456
color : is the color of the grid lines.
Example with a 32*32 tile image resolution
const grid = new createGrid(32,641,288,"red")
const gridNumber = new addNumber(col,row,tSize,color,spaceX,spaceY)
col : number of columns = tileset width / tile image resolution
row : number of rows = tileset height / tile image resolution
tSize : tile image resolution
color: color of the grid numbers = "white" ,"blue" or any color
spaceX : x number used to place the numbers in X axis
spaceY : x number used to place the numbers in Y axis
Example :
const gridNumber = new addNumber(20,9,32,"white" 7,20)
6.- In drawGame do the following :
//example of image tileset32.png
// variable tileIm should be create first ,you already know how to do that
game.drawGame = function(){
ctx.drawImage(tileIm,0,0,gW,gH)
grid.drawGrid()
gridNumber.show()
}
How to draw tilemap by hand using tileset and
a 2d Array map?
This method is easy to use once you already have your grid system set up to identify each tile from your tileset.
Example :
let level1 = [
[40,40,40,40,40,40,40,40,40,40,40,40],
[40,40,40,40,40,40,40,40,40,40,40,40],
[40,40,40,40,43,43,43,43,43,40,40,40],
[40,40,40,40,43,40,40,40,43,40,40,40],
[20,40,43,43,43,40,40,40,43,40,40,40],
[40,40,43,40,40,40,40,40,43,40,40,40],
[40,40,43,40,40,40,40,40,43,40,40,40],
[40,40,43,40,40,40,40,40,43,40,40,40],
[40,40,43,43,43,43,40,40,43,40,40,40],
[40,40,40,40,40,43,40,40,43,40,20,40],
[40,40,40,40,40,43,43,43,43,40,40,40],
[40,40,40,40,40,40,40,40,40,40,40,40],
[40,40,40,40,40,40,40,40,40,40,40,40]
];
let level2 = [
[40,40,40,40,40,40,2,40,40,40,40,40],
[40,40,40,40,40,40,40,40,40,40,40,40],
[40,40,2,40,67,67,67,67,67,40,40,40],
[40,40,40,40,67,40,40,40,67,40,40,40],
[40,40,67,67,67,40,40,40,67,40,40,40],
[40,40,67,40,40,40,40,40,67,40,40,40],
[40,40,67,40,40,40,40,40,67,40,40,40],
[40,40,67,40,40,40,40,40,67,40,40,40],
[40,40,67,67,67,67,40,40,67,40,40,40],
[40,40,40,40,40,67,40,40,67,40,40,40],
[40,40,40,40,40,67,67,67,67,40,40,40],
[40,40,40,40,40,40,40,40,40,40,40,40],
[40,40,40,40,40,40,40,40,40,40,40,40]
];
const myLevel = new tileMap(lev,colTCount,rowTCount,total,ts,s,Src,w,h)
lev : your 2d map Array
colTCount : number of columns per row
rowTCount : number of rows
total : number of tiles in a column of your tileset
ts : tile size
s : the size you wish your tile to be on the canvas
Src : your tileset image source
w : width
h : height
w and h are optional only if you want a tile to be bigger on a specific layer like : trees , houses etc..
Let's build our tilemap
Example :
const layer1 = new tileMap(level1,12,13,18,32,16,"yourtileset32.png")
// if you want a specific for another layer
const layer2 = new tileMap(level2,12,13,18,32,16,"yourtileset32.png",25,78)
game.drawGame = function(){
layer1.drawLayer()
layer2.drawLayer()
}
Remember that was an example yours will be according to your need,