canvas-tilemap

Super smooth 2d tilemap build with canvas2d.

https://user-images.githubusercontent.com/1709072/216881683-b17ac057-c1f3-435f-8c98-9486d1c631e7.mp4

Install

``
npm i @7c00/canvas-tilemap
`

Usage

$3

`html



`

`typescript
const tilemap = new Tilemap({
element: "#tilemap",
size: [12288, 12288],
origin: [3568, 6286],
});
`

$3

`typescript
tilemap.tileLayers.add(
new TileLayer(tilemap, {
minZoom: 10,
maxZoom: 13,
getTileUrl(x, y, z) {
return https://assets.yuanshen.site/tiles_yxg2/${z}/${x}_${y}.png;
},
})
);
`

$3


`typescript
const image = new Image();
image.src = "https://assets.yuanshen.site/icons/127.png";
image.addEventListener("load", () => {
tilemap.draw();
});
const markerLayer = new MarkerLayer(tilemap, {
positions: [
[-999, 3766],
[-1685, 2359],
[112, 1365],
[1231, 575],
[1202, -346],
[1737, 14],
[3101, 422],
[3488, 215],
[3147, 1495],
[3455, 801],
[4229, 888],
[2804, 2379],
[3073, 3269],
[2716, 4054],
[3845, 2665],
[4522, 2307],
[6108, 974],
[5866, 205],
[5178, 29],
[6231, -411],
[2095, -591],
[1188, -4131],
[7413, -2412],
[4783, 5059],
],
image: image,
});
tilemap.markerLayers.add(markerLayer);
``