Phaser 矩形策略行为

Question

我创建了 codepen 来展示这个错误。

更新函数：

  update: function(){
  this.timeBar.width = this.timeBar.width - 1;

设置为仅更改宽度。不过在chrome上看，好像位置也变了。这是一个错误，还是我在编写这段代码时没有考虑到的问题？

Answer 1

使用 Graphics 可能有点复杂，但我找到了一个使用 BitmapData 的示例：

  create: function(){
    var bmd = this.game.add.bitmapData(300, 40);
        bmd.ctx.beginPath();
        bmd.ctx.rect(0, 0, 300, 80);
        bmd.ctx.fillStyle = '#00685e';
        bmd.ctx.fill();

    var bglife = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, bmd);
    bglife.anchor.set(0.5);

    bmd = this.game.add.bitmapData(280, 30);
    bmd.ctx.beginPath();
        bmd.ctx.rect(0, 0, 300, 80);
        bmd.ctx.fillStyle = '#FFFFFF';
        bmd.ctx.fill();

    this.widthLife = new Phaser.Rectangle(0, 0, bmd.width, bmd.height);
    this.totalLife = bmd.width;

    this.life = this.game.add.sprite(this.game.world.centerX - bglife.width/2 + 10, this.game.world.centerY, bmd);
    this.life.anchor.y = 0.5;
    this.life.cropEnabled = true;
    this.life.crop(this.widthLife);

    this.scheduler = this.game.time.events.loop(1500, this.cropLife, this);
  },

  cropLife: function(){
    if(this.widthLife.width <= 0){
      this.widthLife.width = this.totalLife;
      this.scheduler.stop();
    }
    else{
      this.game.add.tween(this.widthLife).to( { width: (this.widthLife.width - (this.totalLife / 10)) }, 200, Phaser.Easing.Linear.None, true);
    }
  },

  update: function(){
    this.life.updateCrop();
  }

You can see the discussion in detail here

Phaser 矩形策略行为

Phaser rectangle strage behavior

javascript

game-engine

phaser-framework