phaser-framework - 当我移动相机时，多边形从画布上消失

Question

我正在制作同构地图制作者（或目前正在尝试制作）并且正在使用箭头键移动相机。我遇到的问题是，当我超出画布范围时，地图会被剪切。

似乎它删除了不在画布范围内的部分？我不明白...

当我缩小对象时，对象在那里，但是当我重置缩放时，对象不再可见。

这是我正在使用的代码片段（我删除了调试模式，它甚至没有显示多边形；（）：

游戏.ts：

import 'phaser';

export default class Demo extends Phaser.Scene {

    private cameraMoveSpeed: number = 6;
    private tileSize: number = 64; // pixels
    private cursors: Phaser.Types.Input.Keyboard.CursorKeys;

    constructor() {
        super('demo');
    }

    preload() {
        this.load.image('grass', 'assets/grass.png');
    }

    create() {
        //  This will create a new object called "cursors", inside it will contain 4 objects: up, down, left and right.
        //  These are all Phaser.Key objects, so anything you can do with a Key object you can do with these.
        this.cursors = this.input.keyboard.createCursorKeys();
        this.cameras.main
            .setBounds(-2048, -2048, 2048 * 2, 2048 * 2, true) // TODO what should this be?
            .centerOn(0, 0)
            .setZoom(1);


        for (let i = 0; i < 20; i++) {
            for (let j = 0; j < 20; j++) {
                const x = j * this.tileSize;
                const y = i * this.tileSize;
                placetile.call(this, x, y); // Place tiles in isometric coordinates       

            }

        }

        // Zoom keys
        this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.A)
            .on('down', function (key, event) {
                console.log('Plus Clicked');
                if (this.cameras.main.zoom < 2) {
                    this.cameras.main.zoom += 0.25;
                }
            }, this);


        let minusKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S)
            .on('down', function (key, event) {
                console.log('Minus Clicked');
                if (this.cameras.main.zoom > 0.25) {
                    this.cameras.main.zoom -= 0.25;
                }
            }, this);

        this.input.on('wheel', function (pointer, gameObjects, deltaX, deltaY, deltaZ) {
            if (deltaY < 0) {
                console.log('Scrolled up (rotate left)');
            } else {
                console.log('Scrolled down (rotate right)');
            }

        });
    }

    update() {
        //  For example this checks if the up or down keys are pressed and moves the camera accordingly.
        if (this.cursors.up.isDown) {
            this.cameras.main.y += this.cameraMoveSpeed;
        }
        else if (this.cursors.down.isDown) {
            this.cameras.main.y -= this.cameraMoveSpeed;
        }

        if (this.cursors.left.isDown) {
            this.cameras.main.x += this.cameraMoveSpeed;
        }
        else if (this.cursors.right.isDown) {
            this.cameras.main.x -= this.cameraMoveSpeed;
        }
    }
}

function placetile(x, y) {

    const isoPoint = cartesianToIsometric(new Phaser.Geom.Point(x, y));
    console.log(isoPoint, this.tileSize);
    const tile = this.add.polygon(isoPoint.x, isoPoint.y, [
        this.tileSize, 0,
        0, this.tileSize / 2,
        0 + this.tileSize, this.tileSize,
        0 + this.tileSize * 2, this.tileSize / 2
    ], 0xeeeeee)
        // const tile = this.add.sprite(isoPoint.x, isoPoint.y, 'grass')
        .setOrigin(0.5, 0.5)
        // .setDepth(y)
        .setInteractive(new Phaser.Geom.Polygon([
            this.tileSize, 0,
            0, this.tileSize / 2,
            0 + this.tileSize, this.tileSize,
            0 + this.tileSize * 2, this.tileSize / 2,
        ]), Phaser.Geom.Polygon.Contains)
        .on('pointerover', function (event) {
            this.setStrokeStyle(4, 0x7878ff, 0.5);
        })
        .on('pointerout', function (event) {
            this.setStrokeStyle(0);
        });

    console.log(tile);

    // this.input.enableDebug(tile, 0xff00ff);
}

const config: Phaser.Types.Core.GameConfig = {
    type: Phaser.AUTO,
    backgroundColor: '#eeeeee',
    scale: {
        width: 1280,
        height: 1024,
        parent: 'content'
        // mode: Phaser.Scale.RESIZE ????
    },
    scene: Demo,
    // physics: {
    //     default: 'arcade',
    //     arcade: {
    //         debug: true
    //     }
    // },
};

const game = new Phaser.Game(config);

function cartesianToIsometric(cartPt) {
    return new Phaser.Geom.Point(
        cartPt.x - cartPt.y,
        (cartPt.x + cartPt.y) / 2
    );
}

function isometricToCartesian(isoPt) {
    var tempPt = new Phaser.Geom.Point();
    tempPt.x = (2 * isoPt.y + isoPt.x) / 2;
    tempPt.y = (2 * isoPt.y - isoPt.x) / 2;
    return (tempPt);
}

索引.html：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Phaser Demo</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    canvas {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <div id="content"></div>
  </div>
  <script src="game.js"></script>
</body>

标签： phaser-framework

Answer 1

您正在使用this.camera.main.x和this.camera.main.y。这些属性似乎不会更新以前屏幕外纹理的渲染。我链接了您的代码副本，该副本在使用this.camera.main.scrollXand时有效this.camera.main.scrollY。这些是用于滚动相机的正确属性。

这是一个明确声明 scrollX/scrollY 作为用于滚动的属性的文档的链接：

https://photonstorm.github.io/phaser3-docs/Phaser.Cameras.Scene2D.Camera.html#scrollX__anchor

将您的代码复制到此处并显示这些更改以显示工作：

https://stackblitz.com/edit/phaser-camera-main-scrollx-not-x