Is there a way to only detect one key press?

[laduree77]

At the moment I'm just trying to switch in between game states by having the user press the spacebar. However, when the user holds down the spacebar, it continues to change. Is there a simple way to have the state change only once even when the spacebar is held down? I came across something called JustPressed, but it seems to be behaving in the same fashion as isDown. (rather than cycling through them infinitely when the spacebar is held down) I am brand new to Phaser and Javascript so a simple solution that's easy to understand would be amazing!

// define game
var game = new Phaser.Game(900, 500, Phaser.AUTO);

// define MainMenu state and methods
var MainMenu = function(game) {};
MainMenu.prototype = {
	preload: function() {
		console.log('MainMenu: preload');
	},
	create: function() {
		console.log('MainMenu: create');
		game.stage.backgroundColor = "#facade";
	},
	update: function() {
		// main menu logic
		if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
			game.state.start('GamePlay');
		}
	}
}

// define GamePlay state and methods
var GamePlay = function(game) {};
GamePlay.prototype = {
	preload: function() {
		console.log('GamePlay: preload');
	},
	create: function() {
		console.log('GamePlay: create');
		game.stage.backgroundColor = "#ccddaa";
	},
	update: function() {
		// GamePlay logic
		if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
			game.state.start('GameOver');
		}
	}
}

// define GameOver state and methods
var GameOver = function(game) {};
GameOver.prototype = {
	preload: function() {
		console.log('GameOver: preload');
	},
	create: function() {
		console.log('GameOver: create');
		game.stage.backgroundColor = "#bb11ee";
	},
	update: function() {
		// GameOver logic
		if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {
			game.state.start('MainMenu');
		}
	}
}

// add states to StateManager and start MainMenu
game.state.add('MainMenu', MainMenu);
game.state.add('GamePlay', GamePlay);
game.state.add('GameOver', GameOver);
game.state.start('MainMenu');

 

[Mickety]

PS: This is an example for Left Mouse Key but should be the same-ish for space bar

 

game.input.activePointer.leftButton.onDown.add()

This piece of code adds callback function once LMB has been pressed. You use it like this

game.input.activePointer.leftButton.onDown.add( level_switch );

function level_switch(){
    // code for changing the level
}

Alternatively you can call anonymous callback functions easily like this

game.input.activePointer.leftButton.onDown.add( function() {
    // code for changing the level
})

 

[Mickety]

Also - check out "addCallbacks" method of keyboard - you can specify three functions - when the key is down, when it's been released and when it's been pressed (sounds like something you want)

[Mickety]

Well in 2.10.3 at least you can do something like this:

SPACEBAR = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);

SPACEBAR.onDown.add(function(){
    console.log('asd');
});

This will trigger only once

[laduree77]

@Mickety Thank you! I'll go ahead and give it a try! I remember seeing a very simple solution where the only thing that was changed was the "isDown" from this piece of code: "if(game.input.keyboard.isDown(Phaser.Keyboard.SPACEBAR)) {". But I can't remember what function they changed it to. Would it work if I used "justPressed" instead of "isDown"?

Edited April 17, 2018 by laduree77
added details

[Mickety]

if( game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR) ) {
    console.log('asdqwe')
}

Yeah, that will work. If you use that instead don't forget to put it in UPDATE scope.

[laduree77]

@Mickety Hmm, so when I use justPressed, it still seems to be cycling through  I tried using a keyDown variable and the justReleased function to help detect when the user presses the spacebar, but this also doesn't work:

// define game and key detector
var game = new Phaser.Game(900, 500, Phaser.AUTO);
var keyDown = false;

// define MainMenu state and methods
var MainMenu = function(game) {};
MainMenu.prototype = {
	preload: function() {
		//preload mainMenu image
		game.load.atlas("sprites", "assets/img/spritesheet.png", "assets/img/sprites.json");
	},
	create: function() {
		//adding mainMenu
		game.add.image(0, 0, "sprites", "mainMenu");
	},
	update: function() {
		// main menu logic
		if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR) && keyDown == false) {
			keyDown = true;
			game.state.start('GamePlay');
		}
		if (game.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR)) {
			keyDown = false;
		}
	}
}

var player;
var cursors;
var lives = 0;
var livesText;
var background;
var spaceInstruct;

// define GamePlay state and methods
var GamePlay = function(game) {};
GamePlay.prototype = {
	preload: function() {
		//preload assets
		game.load.atlas("sprites", "assets/img/spritesheet.png", "assets/img/sprites.json");
	},
	create: function() {
		//adding background
		background = game.add.tileSprite(0, 0, 900, 500, "sprites", "background");

		//enable arcade physics system
		game.physics.startSystem(Phaser.Physics.ARCADE);

		//create player and enable physics
		player = game.add.sprite(33, game.world.height - 150, "sprites", "dude0004");
		game.physics.arcade.enable(player);

		//give player slight bounce
		player.body.bounce.y = 0.5;
		player.body.gravity.y = 200;
		player.body.collideWorldBounds = true;

		//left and right walk animations for player
		player.animations.add("left", Phaser.Animation.generateFrameNames("dude", 0, 3, "", 4), 10, true);
		player.animations.add("right", Phaser.Animation.generateFrameNames("dude", 5, 8, "", 4), 10, true);
		
		//displays lives on screen
		livesText = game.add.text(16, 16, "Lives: 3", {fontSize: "32px", fill: "#FFFFFF"});
		
		//displays instructions to go to next stage of game
		spaceInstruct = game.add.text(350, 100, "Use the arrow keys to move and press" + "\n" + " the spacebar to go to the next stage", {fontSize: "14px", fill: "#FFFFFF"});
	},
	update: function() {
		//scrolling background
		background.tilePosition.x -= 2;

		// GamePlay logic
		if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR) && keyDown == false) {
			keyDown = true;
			game.state.start('GameOver');
		}
		if (game.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR)) {
			keyDown = false;
		}

		//built in keyboard manager
		cursors = game.input.keyboard.createCursorKeys();
		
		//reset player velocity
		player.body.velocity.x = 0;

		//moving with arrow keys
		if (cursors.left.isDown) {
			player.body.velocity.x = -90;
			player.animations.play("left");
		}
		else if (cursors.right.isDown) {
			player.body.velocity.x = 90;
			player.animations.play("right");
	
		}
		else {
			player.animations.stop();
			player.animations.add("idle", Phaser.Animation.generateFrameNames("dude", 4, 4,"", 4), 10, true);
		}
		
		//player jumping
		if (cursors.up.isDown) {
			player.body.velocity.y = -250;
		}
	}
}

// define GameOver state and methods
var GameOver = function(game) {};
GameOver.prototype = {
	preload: function() {
		//preload gameOver image
		game.load.atlas("sprites", "assets/img/spritesheet.png", "assets/img/sprites.json");
	},
	create: function() {
		//adding gameOver
		game.add.image(0, 0, "sprites", "gameOver");
	},
	update: function() {
		// GameOver logic
		if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR) && keyDown == false) {
			keyDown = true;
			game.state.start('MainMenu');
		}
		if (game.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR)) {
			keyDown = false;
		}

	}
}

// add states to StateManager and start MainMenu
game.state.add('MainMenu', MainMenu);
game.state.add('GamePlay', GamePlay);
game.state.add('GameOver', GameOver);
game.state.start('MainMenu');

 

[Mickety]

You don't need anything but "justPressed"
So instead of

if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR) && keyDown == false) {
    keyDown = true;
    game.state.start('GamePlay');
}
if (game.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR)) {
    keyDown = false;
}

Just put this:

if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR)) {
    game.state.start('GamePlay');
}

"justPressed" has an in-built switch for button press, so you don't really need any "keyDown" and stuff.

 

 

[laduree77]

@Mickety Thanks again! I tried that too but it didn't seem to work  But I did figure out how to do it via a mouse click instead! Thanks for your help!!

[Mickety]

while we on the subject I fixed spacebar just pressed by the code provided. I tested it, it has to work. Here you go.

 

code taken from this thread:

 

[Mickety]

var game = new Phaser.Game(820, 360, Phaser.AUTO);

var mainMenu = function(game) {};
mainMenu.prototype = {
	preload: function() {
		//preloading assets
		game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json');
	},
 
 	create: function () {
		// background
    		this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background');
   		this.background.autoScroll(-100, 0);

    		// ground
    		this.background = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground');
    		this.background.autoScroll(-200, 0);

    		// player
    		this.player = this.add.sprite(30, 253, 'sprites', 'bunny');
    		this.player.animations.add('run', Phaser.Animation.generateFrameNames('bunny', 4, 5, "", 4), 10, true);
    		this.player.animations.play('run', 10, true);

    		// logo
    		this.splash = this.add.sprite(this.game.world.centerX, this.game.world.centerY - 40, 'sprites', 'logo');
    		this.splash.anchor.setTo(0.5);
  	},
  	update: function () {

            if ( this.game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR)) {
                this.game.state.start('gamePlay');
            }
  	}
};

var gamePlay = function(game) {};
gamePlay.prototype = {
	preload: function() {
		//preloading assets
		game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json');
	},
 
 	create: function () {
		// physics engine
    		this.game.physics.startSystem(Phaser.Physics.ARCADE);
    		this.game.physics.arcade.gravity.y = 2000;

		// background
    		this.background = this.game.add.tileSprite(0, -30, this.game.width, 390, 'sprites', 'background');
    		this.background.autoScroll(-100, 0);

	    	// ground
    		this.ground = this.game.add.tileSprite(0, 310, this.game.width, 60, 'sprites', 'ground');
    		this.ground.autoScroll(-200, 0);

		// player
    		this.player = this.add.sprite(30, 253, 'sprites', 'bunny');
    		this.player.animations.add('right', Phaser.Animation.generateFrameNames('bunny', 4, 5, '', 4), 10, true);
    		this.player.animations.play('right', 10, true);
		
		// physics on sprites
    		this.game.physics.arcade.enable([this.player, this.ground]);
    		this.ground.body.immovable = true;
    		this.ground.body.allowGravity = false;
    		this.player.body.collideWorldBounds = true;
	
		//add spacebar for jump
		this.jumpButton = this.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
 	},
  	update: function () {
    		// look for collisions between sprites
    		this.game.physics.arcade.collide(this.player, this.ground);

		//add arrow keys for movement
		var cursors = this.input.keyboard.createCursorKeys();

		//reset player velocity
		this.player.body.velocity.x = 0;

		//moving right
		if (cursors.right.isDown) {
			this.player.body.velocity.x = 90;
			this.player.animations.play('right');
		}
		else if (cursors.left.isDown) {
			this.player.body.velocity.x = -90;
			this.player.animations.play('right');
		}

        // jump
        //if (this.jumpButton.isDown && (this.player.body.touching.down)) {
        if( this.game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR) && this.player.body.touching.down ) {
            this.player.body.velocity.y = -800;
        }
  	}
};

var gameOver = function(game) {};

gameOver.prototype = {
	preload: function() {
		//preloading assets
		game.load.atlas('sprites', 'assets/img/spritesheet.png', 'assets/img/sprites.json');
	},
 
 	create: function () {
		console.log('create');
		game.stage.backgroundColor = '#4488AA';

		//click to start text
    this.game.add.text(this.game.world.centerX - 100, this.game.world.centerY + 80, 'Click to return to main menu', { font: "30px Raleway"} );

  	},
  	update: function () {
    		if (this.game.input.activePointer.justPressed()) {
      			this.game.state.start('mainMenu');
    		}
  	}
}

game.state.add('mainMenu', mainMenu);
game.state.add('gamePlay', gamePlay);
game.state.add('gameOver', gameOver);
game.state.start('mainMenu');

 

[sanidhya077]

can i check if the spacebar is pressed at the moment like this.. i dont need a event listener

cursors.up.isDown