Forums » Help » Play/ Pause Button

Hi All,

I'm trying to implement a play/pause button that can be clicked on with the mouse, to track the mouse I do:

EntityPointer = ig.Entity.extend
({
    checkAgainst: ig.Entity.TYPE.B,
    type: ig.Entity.TYPE.NONE,
    size: {x:1, y:1},
    isClicking: false,
    
    init: function()
    {
    	ig.input.initMouse();
    },
    
    update: function()
    {
        this.pos.x = ig.input.mouse.x;
        this.pos.y = ig.input.mouse.y;

        this.isClicking = ig.input.pressed('click');
    },
    
    check: function(other)
    {
        if( this.isClicking && typeof(other.clicked) == 'function' )
        {
            other.clicked();
        }
    }
});

And then for the pause button I do:

EntityPauseButton = ig.Entity.extend
({
	size: {x: 35, y: 36},
	type: ig.Entity.TYPE.B,
	animSheet: new ig.AnimationSheet( 'media/images/pause.png', 35, 36 ),
	paused: false,
	
	init: function(x, y, settings)
	{
		this.parent(x, y, settings);
		this.addAnim( 'idle', 1, [0] );
	},
	
	clicked: function()
	{
		if(this.paused == false)
		{
			this.paused = true;
			ig.system.stopRunLoop();
		}
		else
		{
			ig.system.startRunLoop();
			this.paused = false;
		}
		
	},

});

However as soon as stopRunLoop is called, the whole loop stops running, and therefore the mouse click -> clicked: function() -> startRunLoop is not run on the next click.

I feel like I might be missing something but obvious here, but I can't see any way to unpause, it seems like once I have paused, I just closed the door with the keys left inside.

Thanks,

Matt.

You could either have the pause button somewhere "external" from the rest of the game, or don't pause the game completely.

I.e. for the second option, if you want to build some in game menus in Impact, add a .ignorePause property to some of your entities and do something like this in your Game class:

update: function() {
	if( this.paused ) {
		// only update some of the entities when paused:
		for( var i = 0; i < this.entities.length; i++ ) {
			if( this.entities[i].ignorePause ) {
				this.entities[i].update();
			}
		}
	}
	else {
		// call update() as normal when not paused
		this.parent(); 
	}
}

Your pointer and pause-button would then have their .ignorePause property set to true and the pause-button would toggle ig.game.paused instead of calling stopRunLoop().

Hi Dominic,

Thanks for the info, I think trying to pause within the game will get messy and un-scalable, as I have a lot of timers etc.

Initially I thought putting the pause button outside the game was a bit of a messy workaround, but since I have been only working with canvas so far, my thinking has been a bit 'inside the box', and I can see it works well to do a lot more outside the canvas.

I implemented the pause button with jquery:

<div id="pause"></div>

$('#pause').toggle
(
	function()
	{
		ig.system.stopRunLoop();
	},
	
	function()
	{
		ig.system.startRunLoop();
	}
);

And I also think I will do my whole 'levels menu' outside the canvas. That way I can pause the whole game, let the user choose a past level with straight html/javascript laid on top of the canvas, and then restart the game in the right state with a javascript call. This seems to work better than trying to do these kind of things inside the game with the game timer running. If you have any thoughts on this please let me know.

Thanks,

Matt.

Thanks for the trick. I ended up using an external button:

 <div id="pause">[ pause ]</div>

    <script type="text/javascript">
        var pauseBtn = document.getElementById("pause");
        var gameIsPaused = false;
        if(pauseBtn){
            pauseBtn.onclick = function(){
                if(gameIsPaused){
                    ig.system.startRunLoop();
                }else{
                    ig.system.stopRunLoop();
                }
                gameIsPaused = !gameIsPaused;
            };
        }
    </script>

At first I also thought of doing many things like menus outside the canvas, but remember, if you are ever going to make your game an app for iPad (using appMobi or iOS Impact or other technology), you need to make everything inside the canvas. I think this is because compiling as an app ignores the regular browser DOM in order to optimize the canvas redraw.