https://github.com/qiuxiang/canvas-tilemap
Super smooth 2d tilemap build with canvas2d.
https://github.com/qiuxiang/canvas-tilemap
canvas maps tilemap
Last synced: 7 months ago
JSON representation
Super smooth 2d tilemap build with canvas2d.
- Host: GitHub
- URL: https://github.com/qiuxiang/canvas-tilemap
- Owner: qiuxiang
- License: mit
- Created: 2023-02-01T15:44:00.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-14T03:35:31.000Z (about 3 years ago)
- Last Synced: 2025-06-13T11:57:31.489Z (11 months ago)
- Topics: canvas, maps, tilemap
- Language: TypeScript
- Homepage: https://qiuxiang.github.io/canvas-tilemap/
- Size: 125 KB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# 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
### Create tilemap
```html
```
```typescript
const tilemap = new Tilemap({
element: "#tilemap",
size: [12288, 12288],
origin: [3568, 6286],
});
```
### Add TileLayer
```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`;
},
})
);
```
### Add MarkerLayer
```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);
```