Phaser Game Development - Movement with arrows too fast in Menu

Question

I am testing Phaser doing a simple spaceships game. I have configured some states (boot, load, menu and levelOne) for the game and his functionality.

On the menú I have 3 options in gray color (start, continue and credits), I keep a var called selected to mark which menu is selected (1, 2 or 3). When I press the Up arrow I set selected - 1, and down arrow selected + 1, in the way to navigate between options. It works perfect, but its impossible to select an option because of the change speed, see it yourself: Spaceships

JS code of the menu:

var title = ""
var starfield = null
var selected = 1;
var cursores = null;

var menuOptions = {
  start: {title: "Empezar partida", variable: null},
  continue: {title: "Continuar partida", variable: null},
  credits: {title: "Creditos", variable: null}
}

var menuState = {
  downMenu: function(){
    selected += 1
    console.log(selected)
    if(selected>=4){
      selected = 1
    }
  },
  upMenu: function(){
    selected -= 1
    console.log(selected)
    if(selected<=0){
      selected = 4
    }
  },
  preload: function(){
    var me = this;
    //console.log('preload')
    space.load.bitmapFont('titleFont', 'assets/Fonts/title.png', 'assets/Fonts/title.fnt');
    space.load.bitmapFont('menuFont', 'assets/Fonts/menuFont.png', 'assets/Fonts/menuFont.fnt');
    space.load.image('background', 'assets/Backgrounds/menuStarfield.png')
  },
  create: function(){
    //console.log('create')
    starfield = space.add.image(0, 0, 'background')
    space.stage.backgroundColor = '#000000'
    title = space.add.bitmapText(50, 50, 'titleFont', 'Deviant Spaceships!', 64);

    menuOptions.start.variable = createText(150, menuOptions.start.title)
    menuOptions.continue.variable = createText(225, menuOptions.continue.title)
    menuOptions.credits.variable = createText(300, menuOptions.credits.title)

    cursores = space.input.keyboard.createCursorKeys()
    //cursores.onDown.addOnce(this.changeMenu, this)
  },
  update: function(){
    title.text = 'Oh No! Spaceships! \n';
    if(cursores.down.isDown){
      this.downMenu()
    }
    if(cursores.up.isDown){
      this.upMenu()
    }
    if(selected == 1){
      //menuOptions.start.variable.text = "-> "+menuOptions.start.variable.text
      menuOptions.start.variable.fill = '#FFFFFF'
    }else{
      menuOptions.start.variable.fill = '#999999'
    }
    if(selected == 2){
      //menuOptions.start.variable.text = "-> "+menuOptions.start.variable.text
      menuOptions.continue.variable.fill = '#FFFFFF'
    }else{
      menuOptions.continue.variable.fill = '#999999'
    }
    if(selected == 3){
      //menuOptions.start.variable.text = "-> "+menuOptions.start.variable.text
      menuOptions.credits.variable.fill = '#FFFFFF'
    }else{
      menuOptions.credits.variable.fill = '#999999'
    }

    menuOptions.continue.variable.text = menuOptions.continue.title
    menuOptions.credits.variable.text = menuOptions.credits.title
    starfield.x -= 2
    if(starfield.x <= -1026){
      starfield.x = 0
    }
  }
}

function createText(y, texto) {

    var text = space.add.text(space.world.centerX, y, texto);
    text.anchor.set(0.5);
    text.align = 'center';

    //  Font style
    text.font = 'Arial Black';
    text.fontSize = 50;
    text.fontWeight = 'bold';
    text.fill = '#999999';

    return text;

}

¿How can I take the menu items selected one by one? Is there a way to stop the key being pressed in code every time I add or deduct the selected var?

score 1 · Accepted Answer · answered Feb 23 '16 at 08:44

I had the same problem a couple a weeks ago and I didn't find a nice solution, so I finally made a not very elegant hack... I allow to change the menu just once every a little time (200ms). I'm sure there will be a nicer solution but something like this is what I'm using(check the console):

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'game');
var selected = 1;
var menuState = { 

create:function(){
    cursores = game.input.keyboard.createCursorKeys();
    this.cambia_menu = this.time.now + 200;
},
downMenu: function(){
    selected += 1
    console.log(selected)
    if(selected>=4){
      selected = 1
    }
  },
upMenu: function(){
    selected -= 1
    console.log(selected)
    if(selected<=0){
      selected = 4
    }
},
update:function(){
    if(cursores.down.isDown && this.cambia_menu<this.time.now){
        this.cambia_menu = this.time.now + 200;
        this.downMenu();
    }
    if(cursores.up.isDown && this.cambia_menu<this.time.now){
        this.cambia_menu = this.time.now + 200;
        this.upMenu();
    }       
},
  
};
game.state.add('menu', menuState);  
game.state.start('menu');

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.min.js"></script>
<div id="game"></div>

I understand your solution and is a great trick. I like it, i think I will use it ^^ — Programador Adagal, Feb 23 '16 at 08:49
Worked perfect, but I used 500ms, 200ms was so fast. Thanks! — Programador Adagal, Feb 23 '16 at 10:01

Phaser Game Development - Movement with arrows too fast in Menu

1 Answers1