Tile map editor in 70 lines of pure JavaScript – easy tutorial


Tile map editor in 70 lines of pure JavaScript – easy tutorial

Tile map editor

This short program lets you draw a tile map using a tileset. A tileset is an image consisting of a number of tiles, from which a new image can be drawn. The tiles are drawn is a such a way that if you place several tiles next to each other, they blend together seamlessly – without any gaps between them. This is used in computer games – instead of having a huge bitmap for each level, the level is built from small ‘bricks’ – tiles. Each brick can be reused multiple times, which greatly reduces the amount of memory needed to store the information (and consequently the loading time).

There is a ton of awesome tilesets on the internet, including many that are royalty free (you can use them in your programs without having to pay for the artwork).

The tile map is the layout of those bricks. It will typically be much larger than the tileset, because many bricks will be reused multiple times.

The top grid is the ‘target’, where you will draw your map. The bottom is the ‘source’ – it shows you all the available tiles. You click on the source to select a tile, then click on the grid cells to place the tile. It’s that simple!

I’ll also show you how easy it is to include your map in your own JavaScript program.

Let’s talk about how the editor code works.

The source image and the target grid are simply two areas of one HTML5 Canvas (they are not separate objects per se). The program differentiates between them only based on the Canvas coordinates.

The vast majority of the work is done by two functions that handle the ‘mousemove’ and ‘mouseclick’ events.

The doMouseMove function displays the blue rectangle if the user moves the mouse over the source area.

The doMouseClick function selects the source tile (if the source is clicked) or draws the source tile on the map (if the target is clicked).

See that weird label that says ‘let tiles=[…]’?

This part is added so that you can easily include the map that your created in your own JavaScript program. Your map becomes an array – each element of the array is the number of tile from your source tileset. You just have to paste this array into the code snippet below to display your tile map in your own program.

In the beginning the array is empty – you only see the commas separating the empty elements. Once you start drawing your map, you will see the values pop up.

If you’re not interested in that or want to simplify the program, ignore anything that has to do with sourceTile or string.

Now let’s look at the details of the editor code:

[Lines 7-9 and 12-13] describe the tileset image: the tileset filename, the width and the height of the individual tile, as well as the width and height of the entire tileset.

All the Widths and Heights in this tutorial are in pixels.

[10-11] describe your map – how many rows and columns of tiles do you need?

[14-22] declare and calculate some auxiliary variables and set up the Canvas.

[24-33] draw the grid.

[35-37] redraw the source image from the original bitmap. If we don’t do this, the mouse will leave a trail of blue boxes on the source.

Now the important part – the mouseclick [39-54]:

[40-43] get the mouse coordinates and determine the grid cell coordinate (which grid cell is the mouse in?)

[45] if the mouse coordinates are in the source area:

[46-50] determine the coordinates of the top-left corner of the source tile (sourceX and sourceY) and the number of the source tile.

[55] if the mouse coordinates are in the target area:

[56] clear the cell (if the tiles are not transparent you can skip this – the new tile will simply overwrite the previous one)

[57] draw the source tile on the map.

[58-61] convert the mouse coordinates into the number of the element of the tiles array.

[63-69] update and display the string that contains the array.

[73-88] The mousemove function checks if the mouse is in the source area and displays a blue box around the current tile.

[90-95] Draw the red box that shows which source tile is currently selected.

This image will help you understand the relationship between the tiles array, the string and the images:

Tile map editor in 70 lines of pure JavaScript - easy tutorial

The black numbers are the indexes of the tiles array.

The blue ones are the values of the tiles array. These are the numbers you see in the brackets below the tileset.

The red ones are the tile numbers. They are not stored anywhere, but calculated by the program to be transferred upon mouseclick to the tiles array via the sourceTile variable.

Look at the line of code below the tileset: in this example, the value in the first cell of the map (index 0) is 51 (corresponding to the alien in the tileset).

Somewhere around the middle (index 62) is the value 54 – the round cave ceiling.

Finally, the last cell (index 143) is 50 – the diamond in the tileset.

Here is the full code of the editor:

Clickontheimageatthebottomtoselectatile, thenclickonthegridtodraw.
letimage= newImage();
image.src= ‘Tiles_32x32.png’;
consttileWidth= 32,
tileHeight= 32;
constmapRows= 8,
mapColumns= 18;
constsourceWidth= 256,
sourceHeight= 256;
lettiles= newArray(mapColumns* mapRows);
letmapHeight= mapRows* tileHeight;
letmapWidth= mapColumns* tileWidth;
letsourceX, sourceY, sourceTile;
letcanvas= document.getElementById(‘myCanvas’);
letcontext= canvas.getContext(‘2d’);
canvas.addEventListener(‘click’, doMouseClick);
canvas.addEventListener(‘mousemove’, doMouseMove);
image.addEventListener(‘load’, redrawSource);
// draw the grid
for(leti= 0; i<= mapColumns; i++) {
context.moveTo(i* tileWidth, 0);
context.lineTo(i* tileWidth, mapHeight);
for(leti= 0; i<= mapRows; i++) {
context.moveTo(0, i* tileHeight);
context.lineTo(mapWidth, i* tileHeight);
functionredrawSource() {
context.drawImage(image, 0, 0, sourceWidth, sourceHeight, 0, mapHeight, sourceWidth, sourceHeight);
functiondoMouseClick(e) {
letx= e.clientX;
lety= e.clientY;
letgridX= Math.floor(x/ tileWidth) * tileWidth;
letgridY= Math.floor(y/ tileHeight) * tileHeight;
if(y> mapHeight&& y< (mapHeight+ sourceHeight) && x< sourceWidth) { // source
lettileX= Math.floor(x/ tileWidth);
lettileY= Math.floor((y- mapHeight) / tileHeight);
sourceTile= tileY* (sourceWidth/ tileWidth) + tileX;
sourceX= gridX;
sourceY= gridY- mapHeight;
if(y< mapHeight&& x< mapWidth) { // target
context.clearRect(gridX, gridY, tileWidth, tileHeight);
context.drawImage(image, sourceX, sourceY, tileWidth, tileHeight, gridX, gridY, tileWidth, tileHeight);
lettileX= Math.floor(x/ tileWidth);
lettileY= Math.floor(y/ tileHeight);
lettargetTile= tileY* mapColumns+ tileX;
tiles[targetTile] = sourceTile;
// update the string    
letstring= ‘lettiles= [‘;
for(leti= 0; i< mapColumns* mapRows; i++) {
if(tiles[i] != undefined) string= string+ tiles[i];
string= string+ ‘,’;
string= string+ ‘];’;
document.getElementById(‘result’).innerHTML= string;
functiondoMouseMove(e) {
letx= e.clientX;
lety= e.clientY;
if(y> mapHeight&& y< (mapHeight+ sourceHeight) && x< sourceWidth) { // source
letgridX= Math.floor(x/ tileWidth) * tileWidth;
letgridY= Math.floor(y/ tileHeight) * tileHeight;
context.clearRect(0, mapHeight, sourceWidth, sourceHeight);
context.strokeStyle= ‘blue’;
context.rect(gridX, gridY, tileWidth, tileHeight);
functiondrawBox() {
context.strokeStyle= ‘red’;
context.rect(sourceX, sourceY+ mapHeight, tileWidth, tileHeight);

Now let’s see how easy it is to include your tile map in your own program.

letimage= newImage();
image.src= “Tiles_32x32.png”;
consttileWidth= 32,
tileHeight= 32;
constmapHeight= 8,
mapColumns= 12;
lettiles= [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,75,,,,,,,,,,,,,,,,,,,,,,,,53,60,60,60,55,,,,,,,,,,,,,,,,,,,,,,,,,,,,];
image.addEventListener(‘load’, draw);
letcanvas= document.getElementById(“myCanvas”);
letcontext= canvas.getContext(“2d”);
image.addEventListener(‘load’, draw);
functiondraw() {
for(leti=0;i<mapColumns*mapHeight;i++) {
lettile= tiles[i];
letsourceX= (tile% mapColumns) * tileWidth;
letsourceY= Math.floor(tile/mapColumns)* tileHeight;
lettargetX= (i% mapColumns) * tileWidth;
lettargetY= Math.floor(i/mapColumns)* tileHeight;
context.drawImage(image, sourceX, sourceY, tileWidth, tileHeight, targetX, targetY, tileWidth, tileHeight);

This small code snippet displays your map. You just need to replace line [12] with the string that you generated in the editor.

If you want to use a different tileset, you may also need to update lines [7-11]. The same numbers should be entered in the editor and the display program.

The tileset above ( Public Domain by Eris ) was a side view – great for platformers. The one below ( Public Domain by Matiaan ) is top view – great for top-down scrolling shooters or RPGs.

Tile map editor in 70 lines of pure JavaScript - easy tutorial

The bottom two rows are the transparency tiles, which we are not using. You can hide them by changing the sourceHeight to 6*32 (the height of the tileset without the transparency tiles).

Here is another version of the editor where you can ‘paint’ multiple tiles by dragging the mouse and delete them using the right mouse button.

Good luck!

原文 : Echo JS


免责声明:本文内容来源于Echo JS,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。