2024-06-01 06:31:08 +00:00
|
|
|
import kaplay from "./modules/kaplay.js";
|
2024-06-05 07:30:05 +00:00
|
|
|
import { KaplayMap } from "./KaplayMap/map.js";
|
|
|
|
import { EventMapperManager } from "./KaplayMap/mapper.js";
|
2024-05-29 05:16:02 +00:00
|
|
|
|
2024-06-01 18:36:00 +00:00
|
|
|
const map = document.querySelector("#map");
|
2024-06-02 05:39:23 +00:00
|
|
|
const mapUi = document.querySelector("#map-ui");
|
2024-05-29 15:15:05 +00:00
|
|
|
|
2024-06-01 06:31:08 +00:00
|
|
|
const kp = kaplay({
|
|
|
|
canvas: map,
|
|
|
|
focus: true,
|
|
|
|
loadingScreen: false,
|
2024-06-01 18:36:00 +00:00
|
|
|
crisp: true,
|
|
|
|
// debug: false,
|
|
|
|
// touchToMouse: false,
|
2024-06-01 06:31:08 +00:00
|
|
|
global: false,
|
|
|
|
maxFPS: 120,
|
2024-06-01 18:36:00 +00:00
|
|
|
texFilter: "nearest",
|
2024-06-11 04:16:13 +00:00
|
|
|
background: window.backgroundBranding ?? "404040",
|
2024-06-01 06:31:08 +00:00
|
|
|
});
|
2024-05-29 15:15:05 +00:00
|
|
|
|
2024-06-01 06:31:08 +00:00
|
|
|
const kaplaymap = new KaplayMap(kp, {});
|
2024-06-11 04:16:13 +00:00
|
|
|
const eventmappermanager = new EventMapperManager(kaplaymap, mapUi, {
|
|
|
|
gameobj: window.gameObjBranding,
|
|
|
|
});
|
2024-05-29 15:15:05 +00:00
|
|
|
|
2024-06-04 22:54:40 +00:00
|
|
|
async function main() {
|
2024-06-10 18:11:54 +00:00
|
|
|
const grid = kp.loadSprite(null, "/files/images/grid.png");
|
|
|
|
|
|
|
|
kp.onDraw(() => {
|
|
|
|
kp.drawSprite({
|
|
|
|
sprite: grid,
|
|
|
|
tiled: true,
|
|
|
|
opacity: 0.25,
|
|
|
|
width: kp.width() + 200,
|
|
|
|
height: kp.height() + 200,
|
|
|
|
anchor: "center",
|
|
|
|
pos: kp.vec2(
|
|
|
|
Math.floor(kp.camPos().x / 100) * 100 + 0.5,
|
|
|
|
Math.floor(kp.camPos().y / 100) * 100 + 0.5
|
|
|
|
),
|
|
|
|
});
|
|
|
|
});
|
2024-06-05 07:30:05 +00:00
|
|
|
|
|
|
|
await eventmappermanager.load();
|
2024-06-04 22:54:40 +00:00
|
|
|
}
|
|
|
|
|
2024-06-05 07:30:05 +00:00
|
|
|
main();
|