我怎样才能正确地排序一个 tilemap 以便它出现在 Phaser 的最底层？

Question

我一直在使用 Phaser 开发一款小游戏，并且大部分时间都能正常运行，但总的来说，各个部分都无法正常运行。出于某种奇怪的原因，主要的 tilemap - 意味着作为基础层，被设置在其他所有东西之上。

我通过删除地图仔细检查了这一点，并在屏幕上看到了小行星的阴影。即使将小行星组设置为200或更多深度，地图仍然出现在顶部并且使用'group.sort'似乎没有效果。我该如何解决这个问题？

GameObject.Engine = function() {};

GameObject.Engine.prototype = {
    init : function()
    { 
        this.map;
        this.cursors;
        this.mapLayer = System.add.group();
        this.mapLayer.z = 0;

        this.asteroidShadowGroup = System.add.group();
        this.asteroidShadowGroup.z = 200;

        this.mapSizeWidth = 1280;
        this.mapSizeHeight = 960;
        this.bufferZone = 60;


        System.world.setBounds(0, 0, this.mapSizeWidth, this.mapSizeHeight);
        this.initPhysics();
    },
    initPhysics :function()
    {
        System.physics.startSystem(Phaser.Physics.ARCADE);
        this.asteroidShadowGroup.enableBody = true;
        this.asteroidShadowGroup.physicsBodyType = Phaser.Physics.ARCADE;       
    },
    create : function()
    {
        this.map = System.add.tilemap('World');
        this.map.addTilesetImage('Tiles', 'Background');

        this.map.createLayer('BaseWorld');
        this.cursors = System.input.keyboard.createCursorKeys();

        this.buildAsteroids();
    },
    update: function() {

        this.asteroidShadowGroup.forEachExists(this.checkBoundaries, this);

        if (this.cursors.up.isDown)
        {
            System.camera.y -= 4;
        }
        else if (this.cursors.down.isDown)
        {
            System.camera.y += 4;
        }

        if (this.cursors.left.isDown)
        {
            System.camera.x -= 4;
        }
        else if (this.cursors.right.isDown)
        {
            System.camera.x += 4;
        }
    },
    checkBoundaries: function (sprite) {
        if (sprite.x < -this.bufferZone) {
            sprite.x = this.mapSizeWidth + this.bufferZone;
        } else if (sprite.x > this.mapSizeWidth + this.bufferZone) {
            sprite.x = -this.bufferZone;
        } 

        if (sprite.y < -this.bufferZone) {
            sprite.y = this.mapSizeHeight  + this.bufferZone;
        } else if (sprite.y > this.mapSizeHeight  + this.bufferZone) {
            sprite.y = -this.bufferZone;
        }
    },
    buildAsteroids: function () {

        for (var i=0; i < 8; i++ ) {

            var x;
            var y;

            x = System.rnd.integerInRange(0, this.mapSizeWidth);
            y = System.rnd.integerInRange(0, this.mapSizeHeight);

            this.createAsteroid(x, y);
        }   
    },
    createAsteroid: function (x, y) {
        var asteroid = this.asteroidShadowGroup.create(x, y, 'asteroids', System.rnd.integerInRange(0, 12));
        asteroid.anchor.set(0.5, 0.5);
        asteroid.angularVelocity = System.rnd.integerInRange(0, 360);

        var randomAngle = System.math.degToRad(System.rnd.angle());
        var randomVelocity = System.rnd.integerInRange(10, 40);

        System.physics.arcade.velocityFromRotation(randomAngle, randomVelocity, asteroid.body.velocity);
    }
}

Answer 1

您可以在 create() 方法中创建 this.map 后创建和初始化您的组。

一般来说，如果您想在不同的 "z" 层中添加组，那么将它们添加到游戏中的顺序很重要。例如，如果您有：

this.groupA = this.game.add.group();
this.groupB = this.game.add.group();
this.groupC = this.game.add.group();

那么渲染顺序将永远是：

A组背景
B组中等
C组前景

可能有一些方法，例如 bringToTop()，您可以在其中操纵顺序，但您必须搜索文档才能找到它！

我怎样才能正确地排序一个 tilemap 以便它出现在 Phaser 的最底层？

How can I correctly order a tilemap so that it appears on the bottom-most layer with Phaser?

javascript

phaser-framework