javascript - 如何使用 Phaser 正确排序图 block map ，使其出现在最底层？

Question

我一直在使用 Phaser 开发一款小游戏，并且大部分都可以正常工作，但是总的来说，各个部分都无法正常工作。由于某些奇怪的原因，主图 block map (本应是基础层)被设置在其他所有内容之上。

我通过删除 map 仔细检查了这一点，并看到了屏幕上生成的小行星阴影。即使将小行星组设置为 200 或更大的深度， map 仍然显示在顶部，并且使用“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() ，您可以在其中操纵顺序，但您必须搜索文档!