add mouse wheel zoom example

Author: Antriel

public/src/tilemap/mouse wheel zoom.js

@@ -0,0 +1,63 @@
+class Example extends Phaser.Scene {
+
+    preload() {
+        this.load.image('tiles', 'assets/tilemaps/tiles/drawtiles.png');
+    }
+
+    create() {
+        // Build a random level as a 2D array.
+        const level = [];
+        for (let y = 0; y < 60; y++) {
+            const row = [];
+            for (let x = 0; x < 60; x++) {
+                const tileIndex = Phaser.Math.RND.integerInRange(0, 6);
+                row.push(tileIndex);
+            }
+            level.push(row);
+        }
+
+        const map = this.make.tilemap({ data: level, tileWidth: 32, tileHeight: 32 });
+        const tileset = map.addTilesetImage('tiles');
+        const layer = map.createLayer(0, tileset, 0, 0);
+        const camera = this.cameras.main;
+        let cameraDragStartX;
+        let cameraDragStartY;
+
+        this.input.on('pointerdown', () => {
+            cameraDragStartX = camera.scrollX;
+            cameraDragStartY = camera.scrollY;
+        });
+
+        this.input.on('pointermove', (pointer) => {
+            if (pointer.isDown) {
+                camera.scrollX = cameraDragStartX + (pointer.downX - pointer.x) / camera.zoom;
+                camera.scrollY = cameraDragStartY + (pointer.downY - pointer.y) / camera.zoom;
+            }
+        });
+
+        this.input.on('wheel', (pointer, gameObjects, deltaX, deltaY, deltaZ) => {
+            // Get the current world point under pointer.
+            const worldPoint = camera.getWorldPoint(pointer.x, pointer.y);
+            const newZoom = camera.zoom - camera.zoom * 0.001 * deltaY;
+            camera.zoom = Phaser.Math.Clamp(newZoom, 0.25, 2);
+
+            // Update camera matrix, so `getWorldPoint` returns zoom-adjusted coordinates.
+            camera.preRender();
+            const newWorldPoint = camera.getWorldPoint(pointer.x, pointer.y);
+            // Scroll the camera to keep the pointer under the same world point.
+            camera.scrollX -= newWorldPoint.x - worldPoint.x;
+            camera.scrollY -= newWorldPoint.y - worldPoint.y;
+        });
+    }
+}
+
+const config = {
+    width: 800,
+    height: 600,
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    pixelArt: true,
+    scene: Example
+};
+
+const game = new Phaser.Game(config);