Phaser3中的世界

在走完一遍官网的教程后，对教程中用到的一些函数进行了梳理，并结合api文档进一步学习，感觉东西挺多挺乱的，都是一些没有接触过的新东西，于是想整理一下目前所学的东西。

Game World

在phaser3中的，有一个Game World的抽象概念，表示当前游戏所虚构出来的世界，一个比较直观的做法就是，把这个世界想象成一块无穷大、没有边界的画板，我们可以在上面画各种各样的东西，比如海洋、森林等。

由于这块板是没有边界的，所以我们没有办法使用“右上角”，“左下角”这些术语在这个世界里，定位任何一个物体所在位置，所以就需要引入坐标系，通过坐标就可以准确地定位一个物体所在的位置。坐标系是有一个原点的，在规定好原点之后，所有物体的位置都可以相对于原点进行描述。

那怎么规定原点？在游戏创建的时候，需要实例化一个Phaser.Game，下面的代码会创建一个<canvas>，大小为800*600。

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

整个游戏过程，我们都是通过这个画布来观测整个Game World的（这个画布就像是我们眼睛的视网膜，只有落在视网膜上面的东西，我们才看得到。虽然不是很恰当，但是简单去这么理解感觉也可以）。而画布的左上角就是上文提到的原点。接着，我们尝试在画布中，放置一些物体，

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    create ()
    {
        this.drawRectange(0, 0, 0xff0000); // 红色
        this.drawRectange(-100, 0, 0x00ff00); // 绿色
        this.drawRectange(750, 0, 0x0000ff); // 蓝色
    }

    drawRectange(x, y, color)
    {
        // setOrigin将矩形定位原点设置为左上角
        return this.add.rectangle(x, y, 100, 100, color).setOrigin(0);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: Example
};

const game = new Phaser.Game(config);

其中红色矩形放在(0, 0)的位置，绿色矩形放在(-100, 0)的位置，蓝色放在(750, 0)的位置，由于这个画布的大小是800*600，所以可以完整地看到红色矩形，看不到绿色矩形（但是它紧挨着红色矩形），一半的蓝色矩形。

如何验证绿色矩形存在于Game World中呢？修改代码（仅展示变更行）

class Example extends Phaser.Scene
{
    create ()
    {
        // this.drawRectange(-100, 0, 0x00ff00); // 绿色
        const rect = this.drawRectange(-100, 0, 0x00ff00); // 绿色

        // 当鼠标点击画布某个位置的时候，通过setPosition方法，将矩形挪到鼠标所在的位置
        this.input.on('pointerdown', (pointer) => {
            rect.setPosition(pointer.x, pointer.y);
        })
    }

    drawRectange(x, y, color)
    {
        return this.add.rectangle(x, y, 100, 100, color).setOrigin(0);
    }
}

当我们点击鼠标的时候，可以看到绿色矩形立马出现在我们鼠标所在的位置。所以，我们在Game World中创造出来的尽管不可见的东西，它依然是存在着的。

总结

在跟着走完一遍官方教程后，基本就看得懂上面的代码了。这篇文章主要记录一下自己对Game World的一些看法，这是一个抽象概念，在框架中并没有一个实际对应的类，在看了一些例子、api文档后，感觉以这个角度去理解一些框架中的其他概念，倒也挺直观的。