laduree77

Is there a way to only detect one key press?

Recommended Posts

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');



 

Share this post


Link to post
Share on other sites

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
})

 

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

@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 by laduree77
added details

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

@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');


 

Share this post


Link to post
Share on other sites

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.

 

 

Share this post


Link to post
Share on other sites
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');

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.