Cómo acelerar objetos en Phaser

Despues de un tiempo sin ningun tutorial de phaser volvemos a la carga y no crean que me habia olvidado de el, con respecto al js13k aun no tengo ningun prototipo pero creo que en dos semanas lo puedo hacer y publicar, tambien quiero publicar algunos reportes de mi juego, como va el mercado entre otras cosas ya veremos.

↻

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

Una de las partes mas complejas de phaser ya las hemos visto asi que si lo asimilaste lo que viene solo sera aplicar conceptos vistos y una gota de creatividad.

En esta ocasion vamos a mover objetos que sigan al puntero del mouse pero con el sistema de fisica que provee Phaser, lo cual hace este proceso muy sencillo.

Empezamos:

Creamos una nueva instancia de Phaser y declaramos las variables:

JavaScriptCódigo histórico

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

Nada nuevo tenemos las cuatro funciones principales,ahora cargamos la imagen que vamos a utilizar:

JavaScriptCódigo histórico

function preload(){
game.load.image("_diamante","diamante.png");
};

En la funcion create tenemos:

JavaScriptCódigo histórico

function create() {
    game.physics.startSystem(Phaser.Physics.ARCADE);
    game.stage.backgroundColor = '#0072bc';
    sprite = game.add.sprite(200, 200, '_diamante');
    sprite.anchor.setTo(0.5, 0.5);
    game.physics.enable(sprite, Phaser.Physics.ARCADE);
    sprite.body.allowRotation = false;
};

Primero iniciamos el sistema de Fisica, agregamos un poco de color, agregamos nuestro sprite, configuramos el anchor, activamos la fisica a este sprite, como dicha fisica ha sido activada podemos acceder a la rotacion del objeto mediante la propiedad de body "Permitir rotacion":

JavaScriptCódigo histórico

allowRotation="false";

En este caso no queremos que lo haga le pasamos "false", en la funcion update es donde ocurre la magia:

JavaScriptCódigo histórico

function update() {
    sprite.rotation = game.physics.arcade.moveToPointer(sprite, 60, game.input.activePointer, 500);
};

Aqui vemos algo interesante en la propiedad anterior indicaba que no se permitiria la rotacion del cuerpo pero cuidado eso se refiera al body es decir al cuerpo invisible con el cual el sistema comprueba las colisiones y otro tipo de cosas.

En este caso es la propiedad rotation pero del sprite la cual afecta la rotacion del objeto con un valor en radianes(Angulo),para mover este objeto empleamos el metodo de sistema Arcade moveToPointer(mover a puntero):

JavaScriptCódigo histórico

game.physics.arcade.moveToPointer(objeto a mover, velocidad, puntero activo, tiempo);

Este recibe como parametro el objeto (el sprite),la velocidad(por defecto es 60),el puntero activo accedemos a el mediante la clase Phaser.Input y la propiedad "activePointer" nos devuelve dicho puntero o el primer click, toque, etc, y el tiempo se refiere a la velocidad que tardaria en llegar el objeto a la posicion del puntero(1000=1segundo).

El metodo nos devuelve un angulo en radianes y ademas mueve el objeto a la posicion del puntero activo, para ver como es afectado las propiedades del sprite usamos la funcion render.

JavaScriptCódigo histórico

function render() {
    game.debug.spriteInfo(sprite, 32, 32);
};

Con el metodo spriteInfo(informacion del sprite) accdemos a las propidades basicas de nuestro sprite.

Resultado:

!

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://058eb6f7306383b3accec63b31a87ad450619402.googledrive.com/host/0B2Br6oKX-RFNRFhfSWJYOGl6WW8/puntero.html.

Asi logramos un efecto muy cool ,sencillo de hacer y con el cual se han creado juegos comerciales , muy adictivos como el popular Sinuous un juego cuya mision es esquivar puntos rojos.

Hasta la proxima.

Contexto actual

El código de esta entrada pertenece a una versión antigua de Phaser. El concepto de colisiones y física, 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