From 93496325392a2f81776b5be2ded8c806aa28823e Mon Sep 17 00:00:00 2001 From: Michael Hadley Date: Wed, 29 Jan 2025 09:31:49 -0600 Subject: [PATCH] Update example for latest phaser --- examples/phaser/index.html | 4 +- examples/phaser/main.js | 106 ++++++++++++++++++++++++++----------- 2 files changed, 77 insertions(+), 33 deletions(-) diff --git a/examples/phaser/index.html b/examples/phaser/index.html index 85d9cc4..618a17f 100644 --- a/examples/phaser/index.html +++ b/examples/phaser/index.html @@ -1,4 +1,4 @@ - + @@ -9,7 +9,7 @@
- + diff --git a/examples/phaser/main.js b/examples/phaser/main.js index 764978a..2912bd3 100644 --- a/examples/phaser/main.js +++ b/examples/phaser/main.js @@ -1,40 +1,84 @@ +class MainScene extends Phaser.Scene { + zoomSpeed = 0.005; + + constructor() { + super("MainScene"); + } + + preload() { + this.load.image("buch-tileset", "./assets/buch-tileset-3x.png"); + this.load.image("buch-tileset-extruded", "./assets/buch-tileset-3x-extruded-4px.png"); + this.load.tilemapTiledJSON("map", "./assets/test.json"); + } + + create() { + // Map with non-extruded tileset, showing bug + const map = this.add.tilemap("map"); + const tileset = map.addTilesetImage("buch-tileset"); + map.createLayer(0, tileset, -50, 30); + + // Map with extruded tileset, showing no bug + const extrudedMap = this.add.tilemap("map"); + const extrudedTileset = extrudedMap.addTilesetImage( + "buch-tileset", + "buch-tileset-extruded", + 48, + 48, + 4, + 8, + ); + extrudedMap.createLayer(0, extrudedTileset, 500, 30); + + const mainCamera = this.cameras.main; + mainCamera.setZoom(0.75); + + // Round pixels is useful to enable for pixel art to prevent anti-aliasing + // artifacts when zooming the camera in and out. + mainCamera.setRoundPixels(true); + + const cursors = this.input.keyboard.createCursorKeys(); + + this.controls = new Phaser.Cameras.Controls.SmoothedKeyControl({ + camera: mainCamera, + left: cursors.left, + right: cursors.right, + up: cursors.up, + down: cursors.down, + acceleration: 0.04, + drag: 0.0005, + maxSpeed: 0.7, + }); + + this.input.on("wheel", (pointer, gameObjects, deltaX, deltaY, deltaZ) => { + const newZoom = mainCamera.zoom + deltaY * this.zoomSpeed; + const clampedZoom = Math.max(0.1, Math.min(newZoom, 3)); + mainCamera.setZoom(clampedZoom); + }); + + const debugUI = this.add.text(-50, 0, `Round Pixels: ${mainCamera.roundPixels}`, { + font: "18px monospace", + fill: "#ffffff", + }); + + const rKey = this.input.keyboard.addKey("R"); + rKey.on("down", () => { + mainCamera.roundPixels = !mainCamera.roundPixels; + debugUI.setText(`Round Pixels: ${mainCamera.roundPixels}`); + }); + } + + update(_, delta) { + this.controls.update(delta); + } +} + const config = { type: Phaser.WEBGL, width: 1000, height: 600, backgroundColor: "#000000", parent: "game-container", - scene: { - preload: preload, - create: create - } + scene: MainScene, }; const game = new Phaser.Game(config); - -function preload() { - this.load.image("buch-tileset", "./assets/buch-tileset-3x.png"); - this.load.image("buch-tileset-extruded", "./assets/buch-tileset-3x-extruded.png"); - this.load.tilemapTiledJSON("map", "./assets/test.json"); -} - -function create() { - // Map with non-extruded tileset, showing bug - const map = this.add.tilemap("map"); - const tileset = map.addTilesetImage("buch-tileset"); - const layer = map.createStaticLayer(0, tileset, -50, 30); - - // Map with extruded tileset, showing no bug - const extrudedMap = this.add.tilemap("map"); - const extrudedTileset = extrudedMap.addTilesetImage( - "buch-tileset", - "buch-tileset-extruded", - 48, - 48, - 1, - 2 - ); - const extrudedLayer = extrudedMap.createStaticLayer(0, extrudedTileset, 500, 30); - - this.cameras.main.setZoom(0.75); -}