페이저 직사각형 스트 레지 동작

Question

이 버그를 표시하기 위해 codepen을 생성했습니다.

업데이트 기능 :

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

은 폭을 변경하도록 설정된다. 그러나 크롬에서 보아도 위치가 바뀌는 것처럼 보입니다. 이것은 버그입니까, 아니면이 코드를 작성하는 동안 고려하지 않은 것입니까?

Answer 1

그것은 다소 그래픽을 사용하여 복잡하지만 난의 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