如何正确排序tilemap,使其显示在Phaser的最底层?

时间:2015-12-13 22:26:00

标签: javascript phaser-framework

我一直在使用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);
    }
}

1 个答案:

答案 0 :(得分:2)

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

通常,如果要在不同的“z”图层中添加组,则将它们添加到游戏中的顺序非常重要。 例如,如果你有:

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

然后渲染顺序将始终为:

  • groupA background
  • groupB middle和
  • groupC前景

可能有一些像bringToTop()这样的方法可以操作订单,但是你必须搜索文档!