rado9408

Members
  • Content Count

    19
  • Joined

  • Last visited


Reputation Activity

  1. Like
    rado9408 reacted to wclarkson in Phaser 3 : set timer event one more time after fireing   
    Here is how I build a clock for games. I hope this is what you mean:
    var myClock=new Clock({scene:this,secs:60});
     
    class Clock extends Phaser.GameObjects.Container {
        constructor(config) {
            super(config.scene);
            this.scene = config.scene;
            if (!config.secs) {
                this.secs = 60;
            } else {
                this.secs--;
            }
            if (!config.style)
            {
                config.style={fontSize:game.config.width/10,color:'#27ae60',align:'center'};
            }
            this.text1=this.scene.add.text(0,0,"",config.style).setOrigin(0.5,0.5);
            this.add(this.text1);

            this.scene.add.existing(this);
            this.setText();
            this.setSize(this.text1.displayWidth,this.text1.displayHeight);
            ut.emitter.on(G.CLOCK_START,this.startClock,this);
            ut.emitter.on(G.CLOCK_STOP,this.stopClock,this);
        }
        startClock() {
            console.log("startClock");
            this.timer = this.scene.time.addEvent({
                delay: 1000,
                callback: this.tick,
                callbackScope: this,
                loop: true
            });
        }
        stopClock() {
            console.log("stopClock");
            this.timer.remove();
        }
        tick() {
            this.secs--;
            if (this.secs == 0) {
               // this.stopClock();
            }
            this.setText();
        }
        setText() {
            var mins = Math.floor(this.secs / 60);
            var secs = this.secs - (mins * 60);
            secs=this.leadingZeros(secs);
            mins=this.leadingZeros(mins);
            this.text1.setText(mins+":"+secs);
        }
        leadingZeros(num) {
            if (num < 10) {
                return "0" + num;
            }
            return num;
        }
    }
  2. Like
    rado9408 reacted to Telinc1 in Phaser 3 : Draw Circle style timer   
    This example on Phaser 3 Labs could help. You can draw a stroked circle and a thicker arc inside a Graphics object to reproduce that timer. You'd need to clear the Graphics object every frame and redraw the arc based on how close your timer is to completion.
    Keep in mind the angles are in radians. 0 radians is the rightmost (east) side. You'd need to start at -90 degrees and go up to 270 degrees clockwise - the end angle will, of course, be a function of the elapsed time.
    The text in the center of the timer can just be a normal Text object.