Jump to content

Graphics clear() works only when I put debbuger and open developer tool


NamBui
 Share

Recommended Posts

Hi,

 

I'm new to Phaser and that just got the problem with graphics object. What I want to do is display a bar of "energy" so that when I press the SPACEBAR keyboard the energy bar will be fulfilled until the key is released. In addition I want to tracking the previous charged energy so when the key was released I will fulfilled the energy bar with the graphic alpha is 0.5. Please look at below:

 

The tracking energy is clear that I don't know why, because I think I draw right after I clear all. This doesn't work until I try to put the debugger and open the developer tool (in Chrome). You can try yourself to see that.

 

Thank

 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { create: create, update: update });
 
    var spaceButton;
    var currentEnergy = 0;
    var MAX_ENERGY = 500;
 
    var chargingEnergyGraphic;
    var previousChargingEnergyGraphic;
 
    function create() {
        chargingEnergyGraphic = game.add.graphics(0, 0);
        previousChargingEnergyGraphic = game.add.graphics(0, 0);
 
        var graphics = game.add.graphics(0, 0);
        graphics.lineStyle(2, 0xFF0000, 1);
        graphics.drawRect(50, 50, 500, 20);
 
        spaceButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
 
    }
 
    function update() {
 
        if (spaceButton.isDown && currentEnergy <= MAX_ENERGY) {
            currentEnergy += 10;
 
            chargingEnergyGraphic.clear();
 
            chargingEnergyGraphic.beginFill(0xFF0000);
            chargingEnergyGraphic.lineStyle(2, 0xFF0000, 1);
            chargingEnergyGraphic.drawRect(50, 50, currentEnergy, 20);
            chargingEnergyGraphic.endFill();
        }
 
        if (spaceButton.justReleased()) {
            trackPreviousEnergy();
        }
    }
 
    function trackPreviousEnergy() {
        debugger;
        chargingEnergyGraphic.clear();
 
        previousChargingEnergyGraphic.clear();
 
        previousChargingEnergyGraphic.alpha = 0.5;
        previousChargingEnergyGraphic.beginFill(0xFF0000);
        previousChargingEnergyGraphic.drawRect(50, 50, currentEnergy, 20);
        previousChargingEnergyGraphic.endFill();
 
        currentEnergy = 0;
    }
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...