Wednesday, June 12, 2019

javascript - How to draw a tileset using HTML5 canvas?


I have a tileset something like this:


0, 1, 2, 3, 4, 5,
6, 7, 8, 9, 10, 11,
12, 13, 14, 15, 16,

17, 18, 19, 20

My tileset draw code looks like this:


var image = new Image();
image.src = '32x32.png';
var tile = 5;
var tileSize = 32;
var x = 100;
var y = 100;
context.drawImage(image, Math.floor(tile * tileSize), 0, tileSize, tileSize, x, y, tileSize, tileSize);


And this code draws the 5 tile, but how would I draw the 10 tile, or the 15 tile without adding tileX and tileY? I probably need something like if tile is equal to 15, then draw tile 15.




No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...