Cómo usar el teclado con Phaser

Ya vimos algo básico sobre eventos del mouse ahora vamos a explorar un poco con nuestro teclado, usaremos las teclas mas comunes me refiero a las direccionales y otras complementarias usadas muy seguido en juegos de plataformas, disparos me refiero a nuestra barra esparceadora.

↻

Artículo original de 2014 · revisado en 2026

Esta entrada forma parte del archivo histórico del blog. Se ha limpiado su HTML y conservado el contenido original; cuando utiliza APIs antiguas, se indica el contexto para no confundirlas con las versiones modernas.

Phaser clásico · código histórico

Creamos una nueva instancia de nuestra clase Phaser.Game:

JavaScriptCódigo histórico

var game = new Phaser.Game(400, 400, Phaser.AUTO, 'ejemplo', { preload: preload,create:create, update:update });

Declaramos nuestras variables :

JavaScriptCódigo histórico

var _alien,teclas,saltar;

Cargamos nuestra imagen:

JavaScriptCódigo histórico

function preload() {
    game.load.image('X', 'alienx.png');
}

En nuestra función create tenemos los siguiente:

JavaScriptCódigo histórico

function create() { 
    game.stage.backgroundColor = 0x114755;
    _alien = game.add.sprite(100,150,"X");
    teclas = game.input.keyboard.createCursorKeys();
saltar = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
}

Colocamos un poco de color al canvas, agregamos nuestro sprite, ahora mediante game.input accedemos a la clase Phaser.Input que a su vez tiene una propiedad llamada keyboard que apunta a la clase Phaser.KeyBoard la cual tiene un método llamado createCursorKeys() que retorna cuatro objetos que son las cuatro teclas(up,down,left,right) de esta manera tenemos preparado nuestras direccionales y también podemos agregar de manera individual cada tecla en este caso la barra esparceadora mediante el método addKey(tecla) el numero de esta tecla es el 32 y en phaser esta definida por Phaser.Keyboard.SPACEBAR.

Creamos la función update”actualizar” :

JavaScriptCódigo histórico

function update (){

 if(teclas.right.isDown){

_alien.x +=5;

}else if (teclas.left.isDown){

 _alien.x-=5;
}

 if(teclas.up.isDown){

   _alien.y -=5;

}else if (teclas.down.isDown){

_alien.y +=5;
}

if(saltar.isDown){

_alien.y -=20;
};

 };

Ahora en nuestra variable teclas tenemos cuatro objetos almacenados apuntando a nuestras teclas solo necesitamos acceder al evento, aquí tenemos cuatro posibilidades si (derecha,izquierda,arriba,abajo) es presionada isDown aumentamos en 5(pixeles) la posición de los respectivos ejes de nuestro sprite. Por último se encuentra nuestra barra esparceadora como la agregamos directamente solo necesitamos comprobrar si es presionada, si esto sucede nuestro sprite se moverá rápidamente hacia arriba. Como puedes ver esto es muy sencillo de hacer y es el mismo concepto para cualquier tecla o evento que deseamos comprobar. Hasta la próxima.

!

Demo histórico no disponible

El ejemplo original estaba alojado en Google Drive Web Hosting, un servicio retirado. Conservamos esta referencia para documentar el tutorial: https://googledrive.com/host/0B2Br6oKX-RFNMVNZMnN0UXlYd0U/teclas.html.

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de input y eventos, sprites y recursos sigue siendo útil, pero para un proyecto nuevo conviene consultar la API de la versión de Phaser que estés utilizando en lugar de copiar literalmente estas llamadas.

ADVERTISEMENT

ADVERTISEMENT