Joystick



Joystick

En esta guía, aprenderemos cómo usar una biblioteca externa llamada nipple.js para agregar controles de joystick para plataformas móviles. Primero necesitamos descargar la biblioteca de pezones de github e importarla al proyecto. La biblioteca está disponible en https://yoannmoinet.github.io/nipplejs/.

Para importar el archivo javascript al editor, arrástrelo al explorador de recursos. El archivo aparecerá como un recurso de JavaScript que se puede importar a los scripts usando el método import ().

Los objetos de secuencia de comandos pueden importar () archivos desde los recursos del proyecto o directamente desde URL externas. Dependiendo del modo de biblioteca configurado (configurado en el panel del inspector de objetos de secuencia de comandos), los archivos pueden evaluarse en el contexto de la secuencia de comandos, agregarse al código de secuencia de comandos antes de la compilación o incluirse globalmente.



include("nipplejs.min.js");

var cube, camera;

var manager;
var direction, pressed;

function initialize()
{
camera = scene.getObjectByName("camera");
cube = scene.getObjectByName("cube");

direction = new Vector2(0, 0);
pressed = false;

manager = nipplejs.create(
{
	zone: program.division,
	multitouch: false,
	maxNumberOfNipples: 1,
	mode: "dynamic"
});

manager.on("added", function(event, nipple)
{
	nipple.on("move start end", function(event, data)
	{
		if(event.type === "move")
		{
			var force = 0.08 * data.force;

			direction.x = Math.cos(data.angle.radian) * force;
			direction.y = Math.sin(data.angle.radian) * force;
		}
		else if(event.type === "start")
		{
			pressed = true;
		}
		else if(event.type === "end")
		{
			pressed = false;
		}
	});
});

manager.on("removed", function(event, nipple)
{
	nipple.off("move start end");
});
}

function update()
{
//If the joystick is pressed update position
if(pressed)
{
	cube.position.x += direction.x;
	cube.position.y += direction.y;
}

//Limit the square movement
if(cube.position.x > camera.right) cube.position.x = camera.right;
if(cube.position.x < camera.left) cube.position.x = camera.left;
if(cube.position.y > camera.top) cube.position.y = camera.top;
if(cube.position.y < camera.bottom) cube.position.y = camera.bottom;
}

function dispose()
{
manager.destroy();
}

Ejemplo

Joystick GB Engine Demo











NUESTROS Partners
image
Official

MANTENTE CONECTADO

Twitch
image image
Facebook
image image
Twitter
image image
YouTube
image image
Instagram
image image
Vimeo
image image