Joystick táctiles para juegos html5 en proceso.

dixon · Agosto 12, 2021, 09:04:16 PM

Hola, gusto en saludarlos:

Este es el resumen de lo que trate este post, fué realizado por la ia de you.com

Esta web trata sobre el desarrollo de un joystick táctil para juegos HTML5. La tecnología involucrada incluye el uso de dispositivos de entrada multitáctiles, sensores de presión, sensores acelerométricos y vibración. Se describen las principales características del joystick, como la interfaz de usuario, los mecanismos de entrada y salida, así como la compatibilidad con diversos navegadores y dispositivos. El artículo también presenta una descripción de los principales problemas de desarrollo que se encontraron durante el proceso de creación del joystick táctil, así como las soluciones diseñadas para superarlos. Finalmente, se discuten los beneficios y ventajas del uso de joysticks táctiles para mejorar la experiencia de juego en HTML5.

Al final de este post se encuentra la ultima versión del código de joysticks táctiles para juegos html5.

Joystick táctiles para juegos html5 en proceso.

1. Quiero crear un joystick táctil para juegos html5 y no puedo emplear el draw gui porque no funciona en exploradores.

2. El año pasado cree un sistema engorroso y orrible de escalas para lograr imitar la función draw gui en exploradores y logré crear joytick táctiles para el juego "adiós capitán". Pero es demasiado complicado y los resultados no son del todo agradables (Mira el juego y dale un like,

). En el proceso aprendí algunas cosas y este es el punto 3:

3. Se pueden crear Joytick táctiles para juegos html5 empleando un pequeño sistema de tres views manejado por un script encargado de escalar las views para que dé un resultado parecido a este:

1. Para lograrlo hay que crear una view principal que se ajuste al tamaño del explorador.

2. Una seguna view que contenga el juego.

3. Una tercera view que contenga el joystick táctil.
Parece fácil pero no:

1. Para que todo quede ajustado deben escalarse proporcionalmente las views 2 y 3, empleando regla de tres, (Estudia regla de tres matemáticas las vas a necesitar).

2. Debido al problema de escalado que algunos conocemos (problemas con fuentes, imágenes más dibujadas), es necesario trabajar con views superiores a 512x512.

3. Para ubicar correctamente las views vamos a necesitar un sistema o script parecido al "ajustador de canvas html5" que he creado, pero un poco más complejo, esta véz habrá que manejar muy bien las dos posiciones del dispositivo móvil:

Movil en posición horizontal: Al cambiar de posición el móvil, la posición del joystick táctil cambia.

Para lograr que todo cuadre, es conveniente trabajar ahora con 4 views como se indica abajo:

1. View azul: La que se ajusta a todo el contorno del explorador.
2. View Roja: La que mostrará el juego.
3. View verde: la que contiene la parte izquierda del joystick.
4. View naranja: la que contiene la parte izquierda del joystick táctil.

¿Y que lograremos con eso?, bueno con eso podemos manejar las views para que cuando el móvil esté en horizontal podamos mostrar algo como esto:

Ahora olviden todo lo aprendido,

. Ahora es que vengo a hablarles de lo que realmente quiero hablarles:

Características de este sistema ya explicado:

1. Solo trabajará correctamente en game maker studio 1, 2 y superiores.
2. Se requiere emplear las funciones incluidas de multitouch.
3. No se aplicará correctamente en la versión de game maker llamada "game maker html5".

En resumen: Quiero crear un sistema de joystick táctiles que funcione en la versión game maker llamada "Game maker html5".

Razones y motivos principales:
1. Los juegos creados con game maker html5 son más ligeros que los creados con game maker studio, y cargan más rápido.

Dificultades:
1. Game maker html5 no incluye función multitouch.
2. Game maker html5 presenta problemas de coordenadas del mouse en dispositivos móviles.

Objetivos y alternativas:
1. Crear joystick táctiles para juegos html5 mediante lenguajes para el desarrollo web tales como javascript, Jquery, php, angular, react, etc...

2. Integrar al juego exportado el joystick táctil creado mediante los lenguajes indicados. (para esto solo necesitamos modificar el index.html del juego)

¿Cómo funcionaría el proyecto?

1. Se crearían, mediante los lenguajes para el desarrollo web, los botones táctiles los cuales pudiesen ser ajustados mediante reglas css u otras.
2. Al pulsar los botones algún lenguaje deberá "simular" que se ha presionado una tecla y game maker reconocería esta tecla "en teoria".

Dificultades:

1. No encuentro el código que simula la teclas del teclado en exploradores, bueno solo encontré esto:
https://www.it-swarm-es.com/es/javascript/jquery-o-js-puro-simular-la-tecla-enter-presionada-para-probar/969438578/

2. Jquery está obsoleto y quizás deje de implementarse en exploradores en el futuro.

Estado actual del proyecto:
En proceso....

¿ alguna idea?

Aqui les dejo un ejemplo:

Un ejemplo sin terminar. Giren el dispositivo móvil y verán los cambios.
https://dixonysusjuegoseducativos.000webhostapp.com/_practica_game/Draw_gui_game/index.html

El juego "Adios capitan", trabaja con el sistema engorroso de escalas, giren el dispositivo movil.
https://dixonysusjuegoseducativos.000webhostapp.com/juegos_completos/adios_capitan/index.html

dixon · Diciembre 09, 2021, 12:46:41 PM

Hola, saludos a todos.

Aquí les traigo un html5 donde se logró implementar los botones de javascript, pueden verificar su funcionamiento en pc y móviles.

html5+game_maker+Javascript
El objetivo del proyecto es crear un joystick virtual para pantallas táctiles que funcione en navegadores, de esta forma se podrán crear juegos html5 con botones que funcionen en todos los dispositivos.

Aquí les dejo el index.html del proyecto exportado con game maker a html5.

<!DOCTYPE html>
<html lang="es">
    <head>
        <!-- Generated by GameMaker:HTML5 http://http://www.yoyogames.com/gamemaker/html5 -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name ="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
        <meta charset="utf-8"/>

        <!-- Set the title bar of the page -->
        <title>Game Maker HTML 5</title>

        <!-- Set the background colour of the document -->
        <style>
            body {
              background: #222;
              color:#cccccc;
            }

		#container{
		width: 90vw;
		height: 90vh;
		//background: blue;
		margin: 0 auto;
		text-align: center;

		}


            canvas {
                      image-rendering: optimizeSpeed;
                      -webkit-interpolation-mode: nearest-neighbor;
			height: 75%;
			width: auto;
            		}
			@media screen and (orientation: portrait) {canvas{width: 95%;height: auto;}}
		
		button{
		background: gray;
		font-size: 24px;
		}

		.clead_fix{
		clear: both;
		}

		#boton_reiniciar{
		background: green;
		margin-left:0px;
		}
        </style>
    </head>

    <body>
            <!-- Create the canvas element the game draws to -->
	<div id="container">
	    		<button id="boton_reiniciar" onmousedown="pulsar_boton(113)" onmouseup="soltar_boton(113)" onmouseout="soltar_boton(113)">Reiniciar</button>
		<button id="boton_pantalla" onmousedown="toggleFullScreen()">Pantalla completa</button>
		<br/>
            <canvas id="canvas" width="256" height="256">
               <p>Your browser doesn't support HTML5 canvas.</p>
            </canvas>
		<br/>
		<button id="boton_arriba" onmousedown="pulsar_boton(38)" onmouseup="soltar_boton(38)" onmouseout="soltar_boton(38)">U</button>  
		<br/>
		<button id="boton_izquierda" onmousedown="pulsar_boton(37)" onmouseup="soltar_boton(37)" onmouseout="soltar_boton(37)">L</button>  
		<button id="boton_derecha" onmousedown="pulsar_boton(39)" onmouseup="soltar_boton(39)" onmouseout="soltar_boton(39)">R</button>
		<br/>
		<br/>

		<!--<h1 id="variable_1">variable_1: </h1>-->
	</div>

        <!-- Run the game code -->
        <script type="text/javascript" src="html5game/html5_botones.js?RDPAC=1661301485"></script>

	<script>
	var variable_1 = document.getElementById("variable_1");
	var nombre_boton ="";
	var numero_boton =0;


//////////FUNCION PANTALLA COMPLETA
function toggleFullScreen() {
  if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   (!document.mozFullScreen && !document.webkitIsFullScreen)) {
    if (document.documentElement.requestFullScreen) {  
      document.documentElement.requestFullScreen();  
    } else if (document.documentElement.mozRequestFullScreen) {  
      document.documentElement.mozRequestFullScreen();  
    } else if (document.documentElement.webkitRequestFullScreen) {  
      document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
    }  
  } else {  
    if (document.cancelFullScreen) {  
      document.cancelFullScreen();  
    } else if (document.mozCancelFullScreen) {  
      document.mozCancelFullScreen();  
    } else if (document.webkitCancelFullScreen) {  
      document.webkitCancelFullScreen();  
    }  
  }  
}


	//Detectando si existe pantalla tactil.
	var touchDevice = ('ontouchstart' in document.documentElement);

	//Boton arriba
	nombre_boton="boton_arriba";
	var elementoTouch= document.getElementById(nombre_boton);
	elementoTouch.addEventListener('touchstart', function(event){
	//Comprobamos si hay varios eventos del mismo tipo
	if (event.targetTouches.length == 1) { 
	var touch = event.targetTouches[0]; 
	// con esto solo se procesa UN evento touch
	pulsar_boton(38);}}, false);
	elementoTouch.addEventListener('touchend', function(event){
	soltar_boton(38);
	}, false);

	//Boton izquierda
	nombre_boton="boton_izquierda";
	var elementoTouch= document.getElementById(nombre_boton);
	elementoTouch.addEventListener('touchstart', function(event){
	//Comprobamos si hay varios eventos del mismo tipo
	if (event.targetTouches.length == 1) { 
	var touch = event.targetTouches[0]; 
	// con esto solo se procesa UN evento touch
	pulsar_boton(37);}}, false);
	elementoTouch.addEventListener('touchend', function(event){
	soltar_boton(37);
	}, false);

	//Boton derecha
	nombre_boton="boton_derecha";
	var elementoTouch= document.getElementById(nombre_boton);
	elementoTouch.addEventListener('touchstart', function(event){
	//Comprobamos si hay varios eventos del mismo tipo
	if (event.targetTouches.length == 1) { 
	var touch = event.targetTouches[0]; 
	// con esto solo se procesa UN evento touch
	pulsar_boton(39);}}, false);
	elementoTouch.addEventListener('touchend', function(event){
	soltar_boton(39);
	}, false);

	//Boton reiniciar
	nombre_boton="boton_reiniciar";
	var elementoTouch= document.getElementById(nombre_boton);
	elementoTouch.addEventListener('touchstart', function(event){
	//Comprobamos si hay varios eventos del mismo tipo
	if (event.targetTouches.length == 1) { 
	var touch = event.targetTouches[0]; 
	// con esto solo se procesa UN evento touch
	pulsar_boton(113);}}, false);
	elementoTouch.addEventListener('touchend', function(event){
	soltar_boton(113);
	}, false);


	//Simulando el teclado
	var variable_1 = document.getElementById("variable_1");	
	function pulsar_boton(key){
	var eventObj = document.createEventObject ?
    	document.createEventObject() : document.createEvent("Events");
	eventObj.keyCode = key;
	eventObj.which = key;
	eventObj.key=' ';
	eventObj.code='Space';
	if(eventObj.initEvent){eventObj.initEvent("keydown", true, true)}
	document.dispatchEvent ? document.dispatchEvent(eventObj) : document.fireEvent("onkeydown", eventObj);}

	function soltar_boton(key){
	var eventObj = document.createEventObject ?
    	document.createEventObject() : document.createEvent("Events");
	eventObj.keyCode = key;
	eventObj.which = key;
	eventObj.key=' ';
	eventObj.code='Space';
	if(eventObj.initEvent){eventObj.initEvent("keyup", true, true)}
	document.dispatchEvent ? document.dispatchEvent(eventObj) : document.fireEvent("onkeyup", eventObj);}



	</script>

    </body>
</html>

En este código podremos ver algunos códigos claves:
1.   El código html para visualizar los botones.
2.   El código que verifica si estamos usando pantalla táctil.
3.   Los códigos para eventos de pantalla táctil.
4.   El conjunto de códigos que simula la presión de una tecla del teclado (este es el más importante.).

Conclusiones:
La simulación de teclas es efectiva, los botones de javascript puden simular que una tecla ha sido presionada y esto a su vez es reconocido por game maker correctamente.

Bueno eso es todo por ahora seguimos programando.

dixon · Enero 04, 2022, 01:49:48 AM

Hola, saludos a todos espero que estén bien.

Aquí les traigo una nueva actualización del script que dota a los juegos html5 de botones táctiles permitiendo que los juegos puedan ser jugados desde cualquier plataforma. Ahora la implementación es muy fácil solo tendrán que copiar y pegar.

El código es el siguiente:

<div id="contenedorFlecha">
	<div class="botones" id="botonLeft" onmousedown='funcionBoton(37,"pulsar")' onmouseup='funcionBoton(37,"soltar")' onmouseleave='funcionBoton(37,"soltar")'><</div>
	<div class="botones" id="botonUp" onmousedown='funcionBoton(38,"pulsar")' onmouseup='funcionBoton(38,"soltar")' onmouseleave='funcionBoton(38,"soltar")'>^</div>
	<div class="botones" id="botonRight" onmousedown='funcionBoton(39,"pulsar")' onmouseup='funcionBoton(39,"soltar")' onmouseleave='funcionBoton(39,"soltar")'>></div>
	<div class="botones" id="botonDown" onmousedown='funcionBoton(40,"pulsar")' onmouseup='funcionBoton(40,"soltar")' onmouseleave='funcionBoton(40,"soltar")'>\/</div>
	</div>
	<div id="contenedorBotones">
	<div class="botones" id="botonA" onmousedown='funcionBoton(65,"pulsar")' onmouseup='funcionBoton(65,"soltar")' onmouseleave='funcionBoton(65,"soltar")'>A</div>
	<div class="botones" id="botonW" onmousedown='funcionBoton(87,"pulsar")' onmouseup='funcionBoton(87,"soltar")' onmouseleave='funcionBoton(87,"soltar")'>W</div>
	<div class="botones" id="botonS" onmousedown='funcionBoton(83,"pulsar")' onmouseup='funcionBoton(83,"soltar")' onmouseleave='funcionBoton(83,"soltar")'>S</div>
	<div class="botones" id="botonD" onmousedown='funcionBoton(68,"pulsar")' onmouseup='funcionBoton(68,"soltar")' onmouseleave='funcionBoton(68,"soltar")'>D</div>
	</div>


	<div id="botonEnter" onmousedown='funcionBoton(13,"pulsar")' onmouseup='funcionBoton(13,"soltar")' onmouseleave='funcionBoton(13,"soltar")'>Enter</div>
	<div id="screen" onmousedown="toggleFullScreen()">Screen</div>
	<div id="reiniciar" onmousedown='funcionBoton(113,"pulsar")' onmouseup='funcionBoton(113,"soltar")' onmouseleave='funcionBoton(113,"soltar")'>Restart</div>


	<style>
	body{
	text-align: center;
	background: black;
	}

	#botonEnter,#screen, #reiniciar{
	background: brown;
	background: transparent;
	border: 1px solid red;
	color: red;
	width: 60px;
	height:24px;
	position: absolute;
	left: 5vw;
	}

	#screen{
	top: 10px;
	}

	#reiniciar{
	top: 55px;
	}

	#botonEnter{
	top: 100px;
	}

	canvas{
	background: transparent;
	border: 1px solid white;

	width: 40vw;
	max-height: 90vh;
	position: absolute;
	top: 5vh;
	left: 30vw;
	}

	#contenedorFlecha{
	background: navy;
	background: transparent;
	width: 20vw;
	height: 35vh;
	position: absolute;
	bottom: 5vh;
	left: 4vw;
	}

	#contenedorBotones{
	background: navy;
	background: transparent;
	width: 20vw;
	height: 35vh;
	position: absolute;
	bottom: 5vh;
	right: 4vw;
	}

	.botones{
	width: 30%;
	height: 30%;
	position: absolute;
	}

	#botonUp, #botonW{
	background: brown;
	background: transparent;
	border: 1px solid white;
	top: 0px;
	left: 35%;
	}

	#botonLeft, #botonA{
	background: green;
	background: transparent;
	border: 1px solid white;
	bottom: 35%;
	left: 0%;
	}

	#botonRight, #botonD{
	background: purple;
	background: transparent;
	border: 1px solid white;
	bottom: 35%;
	right: 0px;
	}

	#botonDown, #botonS{
	background: blue;
	background: transparent;
	border: 1px solid white;
	bottom: 0%;
	left: 35%;
	}

	@media (orientation: portrait) {

	#botonEnter,#screen, #reiniciar{
	left: 40vw;
	}

	#screen{
	top: 70vh;
	left: 5vw;
	}

	#reiniciar{
	top: 70vh;
	right: 5vw;
	left: auto;
	}

	#botonEnter{
	top: 70vh;
	left: calc(50vw-30px);
	}


	canvas{
	width: 90vw;
	top: 2vh;
	left: 5vw;
	}

	#contenedorBotones{
	width: 38vw;
	height: 20vh;
	}

	#contenedorFlecha{
	width: 38vw;
	height: 20vh;
	}

	}


	</style>



	<!-- Código JavaScript-->

	<script>

	/////////////////Funcion de botones
	////////////////SIMULANDO TECLADO
	////////////////////////////////////////////////////////////////////////////////
	function funcionBoton(codigoBoton, accionBoton){
    //alert(codigoBoton);
	var eventObj_izquierda = document.createEventObject ?
    	document.createEventObject() : document.createEvent("Events");
	eventObj_izquierda.keyCode = codigoBoton;
	eventObj_izquierda.which = codigoBoton;
	eventObj_izquierda.key=' ';
	eventObj_izquierda.code='Space';
	if(accionBoton == "pulsar")
		{
		if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keydown", true, true)}
		document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeydown", eventObj_izquierda);
		}
	if(accionBoton == "soltar")
		{
		if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keyup", true, true)}
		document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeyup", eventObj_izquierda);
		}
	}
	//////////////////////////////////////////////////////////////////////////////////


	///////////////FUNCION PANTALLA COMPLETA
	////////////////////////////////////////////////////////////////////////////////
	function toggleFullScreen() {
  	if ((document.fullScreenElement && document.fullScreenElement !== null) ||    
   	(!document.mozFullScreen && !document.webkitIsFullScreen)) {
   	if (document.documentElement.requestFullScreen) {  
   	document.documentElement.requestFullScreen();  
    	} else if (document.documentElement.mozRequestFullScreen) {  
	document.documentElement.mozRequestFullScreen();  
	} else if (document.documentElement.webkitRequestFullScreen) {  
	document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);  
	}  
	} else {  
	if (document.cancelFullScreen) {  
	document.cancelFullScreen();  
	} else if (document.mozCancelFullScreen) {  
	document.mozCancelFullScreen();  
	} else if (document.webkitCancelFullScreen) {  
	document.webkitCancelFullScreen();  
	}}}
	/////////////////////////////////////////////////////////////////////////////////


	/////////////Funcion para pantallas tactiles
	//////////////////////////////////////////////////////////////////////////////////
	//Detectando si existe pantalla tactil.
	var touchDevice = ('ontouchstart' in document.documentElement);
	var botonesId = ["botonLeft","botonUp","botonRight","botonDown","botonA","botonW","botonS","botonD","reiniciar","botonEnter"];
	var botonesCodigos = [37,38,39,40,65,87,83,68,113,13];
    var botonId = "";
    var botonCodigo = 0;
    var numeroArray =[];
    
	if(touchDevice == true)
	{
	
	//Analizando todos los botones contenidos en el array
	//Recorriendo el array que contiene los nombres de los botones.

        numeroX=0;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[0],"pulsar");funcionBoton(botonesCodigos[2],"soltar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[0],"soltar");}, false);
		
		
        numeroX=1;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[1],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[1],"soltar");}, false);
		
        numeroX=2;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[2],"pulsar");funcionBoton(botonesCodigos[0],"soltar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[2],"soltar");}, false);
		
	    numeroX=3;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[3],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[3],"soltar");}, false);
		
	    numeroX=4;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[4],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[4],"soltar");}, false);
		
	    numeroX=5;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[5],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[5],"soltar");}, false);
		
		
	    numeroX=6;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[6],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[6],"soltar");}, false);
		
	    numeroX=7;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[7],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[7],"soltar");}, false);
		
		
	    numeroX=8;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[8],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[8],"soltar");}, false);
		
	    numeroX=9;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) { 
		var touch = event.targetTouches[0]; 
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[9],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[9],"soltar");}, false);
	}
	///////////////////////////////////////////////////////////////////////////////////////



	</script>

Este es un código que combina html, css y javascript y para implementarlo en sus juegos html5 tendrán que seguir estos sencillos pasos:

1.   Crea tu juego html5 empleando las siguientes teclas del teclado:
Vk_left (código ascii 37);
Vk_up (código ascii 38);
Vk_rigth (código ascii 39);
Vk_down (código ascii 40);
A (código ascii 65);
W (código ascii 87);
D (código ascii 68);
S (código ascii 83);
Enter (código ascii 13);
F12: para reiniciar el juego. (código ascii 113);

2.   Exporta tu juego html5.
3.   Copia el código para botones táctiles de este post.
4.   Abre con el block de notas el index.html de tu juego.
5.   Pega el código al final del archivo justo por encima de la etiqueta de cierre </body> como se indica aquí abajo:

6. Listo.

Dudas y preguntas aquí.
Pueden ver este código funcionando en el juego "30pepas" publicado recientemente.

Tengo planeado mejorar el código y darle una mejor apariencia a los botones, ya le he encontrado varios errores pero si Dios quiere pronto serán corregidos.

dixon · Enero 05, 2022, 04:49:08 PM

Hola, saludos, espero que esten muy bien.

Bueno, hoy les traigo una nueva actualización del script para los botones táctiles en juegos html5, ahora los botones tendrán una mejor imagen "se ven geniales"

, tambien se le ha corregido un error pero lamentablemente aun presenta otro error grave donde se quedan pegadas las teclas.

El nuevo código es este:

<div id="contenedorFlecha">
	<div class="botones" id="botonLeft" onmousedown='funcionBoton(37,"pulsar")' onmouseup='funcionBoton(37,"soltar")' onmouseleave='funcionBoton(37,"soltar")'></div>
	<div class="botones" id="botonUp" onmousedown='funcionBoton(38,"pulsar")' onmouseup='funcionBoton(38,"soltar")' onmouseleave='funcionBoton(38,"soltar")'></div>
	<div class="botones" id="botonRight" onmousedown='funcionBoton(39,"pulsar")' onmouseup='funcionBoton(39,"soltar")' onmouseleave='funcionBoton(39,"soltar")'></div>
	<div class="botones" id="botonDown" onmousedown='funcionBoton(40,"pulsar")' onmouseup='funcionBoton(40,"soltar")' onmouseleave='funcionBoton(40,"soltar")'></div>
	</div>
	<div id="contenedorBotones">
	<div class="botones" id="botonA" onmousedown='funcionBoton(65,"pulsar")' onmouseup='funcionBoton(65,"soltar")' onmouseleave='funcionBoton(65,"soltar")'></div>
	<div class="botones" id="botonW" onmousedown='funcionBoton(87,"pulsar")' onmouseup='funcionBoton(87,"soltar")' onmouseleave='funcionBoton(87,"soltar")'></div>
	<div class="botones" id="botonS" onmousedown='funcionBoton(83,"pulsar")' onmouseup='funcionBoton(83,"soltar")' onmouseleave='funcionBoton(83,"soltar")'></div>
	<div class="botones" id="botonD" onmousedown='funcionBoton(68,"pulsar")' onmouseup='funcionBoton(68,"soltar")' onmouseleave='funcionBoton(68,"soltar")'></div>
	</div>

	<div id="botonEnter" onmousedown='funcionBoton(13,"pulsar")' onmouseup='funcionBoton(13,"soltar")' onmouseleave='funcionBoton(13,"soltar")'></div>
	<div id="botonScreen" onmousedown="toggleFullScreen()"></div>
	<div id="botonReiniciar" onmousedown='funcionBoton(113,"pulsar")' onmouseup='funcionBoton(113,"soltar")' onmouseleave='funcionBoton(113,"soltar")'></div>


	<style>
	body{
	text-align: center;
	background: black;
	}

	#botonEnter,#botonScreen, #botonReiniciar{
	background: brown;
	background: transparent;
	border: 1px solid red;
	color: red;
	width: 30px;
	height:24px;
	position: absolute;
	left: 5vw;
	}

	#botonScreen{
	top: 10px;
	}

	#botonReiniciar{
	top: 55px;
	}

	#botonEnter{
	top: 100px;
	width: 60px;
	}

	canvas{
	background: transparent;
	border: 1px solid white;

	width: 40vw;
	max-height: 90vh;
	position: absolute;
	top: 5vh;
	left: 30vw;
	}

	#contenedorFlecha{
	background: navy;
	background: transparent;
	width: 20vw;
	height: 35vh;
	position: absolute;
	bottom: 5vh;
	left: 4vw;
	}

	#contenedorBotones{
	background: navy;
	background: transparent;
	width: 20vw;
	height: 35vh;
	position: absolute;
	bottom: 5vh;
	right: 4vw;
	}

	.botones{
	width: 30%;
	height: 30%;
	position: absolute;
	}


	#botonUp, #botonW{
	background: brown;
	background: transparent;
	border: 1px solid white;
	top: 0px;
	left: 35%;
	}

	#botonLeft, #botonA{
	background: green;
	background: transparent;
	border: 1px solid white;
	bottom: 35%;
	left: 0%;
	}

	#botonRight, #botonD{
	background: purple;
	background: transparent;
	border: 1px solid white;
	bottom: 35%;
	right: 0px;
	}

	#botonDown, #botonS{
	background: blue;
	background: transparent;
	border: 1px solid white;
	bottom: 0%;
	left: 35%;
	}

	@media (orientation: portrait) {

	#botonEnter,#botonScreen, #botonReiniciar{
	left: 40vw;
	}

	#botonScreen{
	top: 70vh;
	left: 5vw;
	}

	#botonReiniciar{
	top: 70vh;
	right: 5vw;
	left: auto;
	}

	#botonEnter{
	top: 70vh;
	left: calc(50vw-30px);
	}


	canvas{
	width: 90vw;
	top: 2vh;
	left: 5vw;
	}

	#contenedorBotones{
	width: 38vw;
	height: 20vh;
	}

	#contenedorFlecha{
	width: 38vw;
	height: 20vh;
	}

	}



	#botonRight{
	background-image: url("imagenes/botonRight_up.png");
	}
	#botonRight:active{
	background-image: url("imagenes/botonRight_down.png");
	}
	#botonUp{
	background-image: url("imagenes/botonUp_up.png");
	}
	#botonUp:active{
	background-image: url("imagenes/botonUp_down.png");
	}
	#botonLeft{
	background-image: url("imagenes/botonLeft_up.png");
	}
	#botonLeft:active{
	background-image: url("imagenes/botonLeft_down.png");
	}
	#botonDown{
	background-image: url("imagenes/botonDown_up.png");
	}
	#botonDown:active{
	background-image: url("imagenes/botonDown_down.png");
	}

	#botonA{
	background-image: url("imagenes/botonA_up.png");
	}
	#botonA:active{
	background-image: url("imagenes/botonA_down.png");
	}
	#botonW{
	background-image: url("imagenes/botonW_up.png");
	}
	#botonW:active{
	background-image: url("imagenes/botonW_down.png");
	}
	#botonD{
	background-image: url("imagenes/botonD_up.png");
	}
	#botonD:active{
	background-image: url("imagenes/botonD_down.png");
	}
	#botonS{
	background-image: url("imagenes/botonS_up.png");
	}
	#botonS:active{
	background-image: url("imagenes/botonS_down.png");
	}



	#botonEnter{
	background-image: url("imagenes/botonEnter_up.png");
	}
	#botonEnter:active{
	background-image: url("imagenes/botonEnter_down.png");
	}

	#botonReiniciar{
	background-image: url("imagenes/botonReiniciar_up.png");
	}
	#botonReiniciar:active{
	background-image: url("imagenes/botonReiniciar_down.png");
	}

	#botonScreen{
	background-image: url("imagenes/botonScreen_up.png");
	}
	#botonScreen:active{
	background-image: url("imagenes/botonScreen_down.png");
	}



	#botonRight, #botonLeft, #botonUp, #botonDown, #botonA, #botonW, #botonD, #botonS, #botonEnter, #botonReiniciar, #botonScreen{
	border: 0px;
	background-size: 100% 100%;
	}


	</style>



	<!-- Código JavaScript-->

	<script>

	/////////////////Funcion de botones
	////////////////SIMULANDO TECLADO
	////////////////////////////////////////////////////////////////////////////////
	function funcionBoton(codigoBoton, accionBoton){
    //alert(codigoBoton);
	var eventObj_izquierda = document.createEventObject ?
    	document.createEventObject() : document.createEvent("Events");
	eventObj_izquierda.keyCode = codigoBoton;
	eventObj_izquierda.which = codigoBoton;
	eventObj_izquierda.key=' ';
	eventObj_izquierda.code='Space';
	if(accionBoton == "pulsar")
		{
		if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keydown", true, true)}
		document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeydown", eventObj_izquierda);
		}
	if(accionBoton == "soltar")
		{
		if(eventObj_izquierda.initEvent){eventObj_izquierda.initEvent("keyup", true, true)}
		document.dispatchEvent ? document.dispatchEvent(eventObj_izquierda) : document.fireEvent("onkeyup", eventObj_izquierda);
		}
	}
	//////////////////////////////////////////////////////////////////////////////////


	///////////////FUNCION PANTALLA COMPLETA
	////////////////////////////////////////////////////////////////////////////////
	function toggleFullScreen() {
  	if ((document.fullScreenElement && document.fullScreenElement !== null) ||   
   	(!document.mozFullScreen && !document.webkitIsFullScreen)) {
   	if (document.documentElement.requestFullScreen) { 
   	document.documentElement.requestFullScreen(); 
    	} else if (document.documentElement.mozRequestFullScreen) { 
	document.documentElement.mozRequestFullScreen(); 
	} else if (document.documentElement.webkitRequestFullScreen) { 
	document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 
	} 
	} else { 
	if (document.cancelFullScreen) { 
	document.cancelFullScreen(); 
	} else if (document.mozCancelFullScreen) { 
	document.mozCancelFullScreen(); 
	} else if (document.webkitCancelFullScreen) { 
	document.webkitCancelFullScreen(); 
	}}}
	/////////////////////////////////////////////////////////////////////////////////


	/////////////Funcion para pantallas tactiles
	//////////////////////////////////////////////////////////////////////////////////
	//Detectando si existe pantalla tactil.
	var touchDevice = ('ontouchstart' in document.documentElement);
	var botonesId = ["botonLeft","botonUp","botonRight","botonDown","botonA","botonW","botonS","botonD","reiniciar","botonEnter"];
	var botonesCodigos = [37,38,39,40,65,87,83,68,113,13];
    var botonId = "";
    var botonCodigo = 0;
    var numeroArray =[];
   
	if(touchDevice == true)
	{
	
	//Analizando todos los botones contenidos en el array
	//Recorriendo el array que contiene los nombres de los botones.

        numeroX=0;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[0],"pulsar");funcionBoton(botonesCodigos[2],"soltar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[0],"soltar");}, false);
		
		
        numeroX=1;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[1],"pulsar");funcionBoton(botonesCodigos[3],"soltar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[1],"soltar");}, false);
		
        numeroX=2;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[2],"pulsar");funcionBoton(botonesCodigos[0],"soltar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[2],"soltar");}, false);
		
	    numeroX=3;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[3],"pulsar");funcionBoton(botonesCodigos[1],"soltar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[3],"soltar");}, false);
		
	    numeroX=4;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[4],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[4],"soltar");}, false);
		
	    numeroX=5;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[5],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[5],"soltar");}, false);
		
		
	    numeroX=6;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[6],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[6],"soltar");}, false);
		
	    numeroX=7;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[7],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[7],"soltar");}, false);
		
		
	    numeroX=8;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[8],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[8],"soltar");}, false);
		
	    numeroX=9;
		botonId = botonesId[numeroX];
		var elementoTouch= document.getElementById(botonId);
		elementoTouch.addEventListener('touchstart', function(event){
		//Comprobamos si hay varios eventos del mismo tipo
		if (event.targetTouches.length == 1) {
		var touch = event.targetTouches[0];
		// con esto solo se procesa UN evento touch
		funcionBoton(botonesCodigos[9],"pulsar");}}, false);
		elementoTouch.addEventListener('touchend', function(event){
		funcionBoton(botonesCodigos[9],"soltar");}, false);
	}
	///////////////////////////////////////////////////////////////////////////////////////



	</script>

El proceso para integrar los botones a tu juego "HTML5" es el siguiente:
1. Crea tu juego html5 empleando las teclas del teclado:
Vk_left (código ascii 37);
Vk_up (código ascii 38);
Vk_rigth (código ascii 39);
Vk_down (código ascii 40);
A (código ascii 65);
W (código ascii 87);
D (código ascii 68);
S (código ascii 83);
Enter (código ascii 13);
F12: para reiniciar el juego. (código ascii 113);

2. Exporta tu juego html5.
3. Copia el código para botones táctiles de este post.
4. Abre con el block de notas el index.html de tu juego.
5. Pega el código al final del archivo justo por encima de la etiqueta de cierre </body> como se indica aquí abajo:

6. Descarga el paquete de imágenes de los botones "aquí";
7.Crea una carpeta llamada imágenes la cual debe encontrarse en la misma carpeta de tu juego como se indica en la imagen:

8. En esa carpeta deberás pegar las imágenes que descargastes para que te quede algo como esto:

9. Listo eso es todo.

Si quieres ver cómo quedó el diseño puedes acceder al juego "30pepas".

Listo eso es todo, seguimos programando, nos vemos luego.

dixon · Noviembre 25, 2022, 09:27:00 PM

Hola, gusto en saludarlos.

Solo quería mostrarles el joystick táctil que estoy diseñando.
Joystick_html5

Funciona en pc y móviles. este es el repositorio que contiene todo el código:
https://github.com/ReyesDavila/joystick_html5

Ahora bien, ¿qué metodos se pudiesen aplicar para que game maker reciba el estado de un joystick virtual creado con javascript?

Realmente se puede implementar este tipo de joystick virtual en juegos html5 de game maker, pero el método que conozco es un poco fastidioso y no muy amigable, por eso me estoy ideando otro método más sencillo para que todos podamos implementarlo con solo copiar y pegar.

Requiero un gamepad(control de juego) para poder crear un script completo que controle el teclado, pantallas táctiles y los posibles gamepad. Es decir que el diseñador del juego solo tenga que copiar el código para que todas las interfaces mencionadas estén disponibles para los posibles jugadores.

bye
0923

dixon · Diciembre 01, 2022, 08:09:39 AM

Hola, saludos a todos, espero que tengan un buen dÃ�a.

El joystick tÃ¡ctil o gamepad tÃ¡ctil html5 sigue en proceso, diariamente estoy programando sobre este sistema, en el proceso he aprendido muchas cosas sobre javascript y la compatibilidad con mÃ³viles antiguos. El reto es crear un gamepad tÃ¡ctil que funcione tanto en dispositivos viejos como en los nuevos.
Tengo un reto enorme y no es muy fÃ¡cil de explicar por tanto darÃ© varias explicaciones de lo que quiero conseguir:
Primero voy hablar de las palabras que usarÃ©:
A.   GamePad fÃ�sico: Son los controles de video juegos que compramos y conectamos al pc para jugar, normalmente son de puerto USB.
B.   GamePad tÃ¡ctil: Es la herramienta virtual o el conjunto de botones digitales que sirven para jugar, los cuales aparecen sobre el juego y se usan en pantallas tÃ¡ctiles.
C.   SeÃ±al: Es la seÃ±al que envÃ�a un gamepad fÃ�sico a game maker para que el jugador pueda interactuar con el juego.
Lo que necesito lograr (explicado de varias formas):
1.   Simular que un joystick ha sido conectado, sin conectar uno real.
2.   Emplear javascript para que simule las seÃ±ales del gamepad.
3.   Emplear javascript para que el gamepad tÃ¡ctil envie seÃ±ales como si fuera game pad fÃ�sico.
4.   Hacerle creer a game maker que un joystick o gamepad ha sido conectado.
Si logro esto serÃ¡ muy fÃ¡cil implementar el joystick, cuestiÃ³n de copiar y pegar, funcionarÃ�a en cualquier juego html5 y de cualquier motor de video juegos. Los programadores solo tendrÃ¡n que crear juegos donde se interactÃºe con gamepad y al finalizar podrÃ�an integrarle el gamepad tÃ¡ctil tan solo copiando y pegando el cÃ³digo en el archivo index.html.
Si no puedo conseguir eso, tengo otras alternativas menos prÃ¡cticas, es decir tendrÃ�a que simular la presiÃ³n de teclado mediante el gamepad tÃ¡ctil e interactuar con game maker de ese modo creando un script especial que interprete las seÃ±ales. No es muy agradable pero es lo que me aquedarÃ�a.

bye.

dixon · Diciembre 04, 2022, 09:13:41 AM

Hola saludos a todos.

En esto estoy trabajando actualmente y estoy contento con los resultados.

Esta es la práctica del game pad html5 para móviles (probar desde un móvil), este presenta fallas con el multi touch.
http://estudiosistemas.infinityfreeapp.com/Dixon/practicas/gamepad/

Este es el Multi_touch html5 para móviles (probar desde un móvil)
http://estudiosistemas.infinityfreeapp.com/Dixon/practicas/Multi_touch_movil/index_0.html

Ahora tengo que unir ambos sistemas para mejorar el joystick tactil.

Me conviene hacer un tutorial en youtube para explicar cómo se hace esto. En youtube y en varias webs hay tutoriales pero me parecen muy dificultosos, por eso quiero crear uno que explique de manera fácil como crear este tipo de joystick.

Luego de unir ambos sistemas tengo que aprender a "emular un gamepad" y si lo logro, la implementación será increible ya que los programadores de juegos solo tendrán que copiar y pegar el codigo para que sus juegos html5 adquieran el gamepad virtual y puedan jugarse efectivamente en cualquier dispositivo, movil o pc.

dixon · Diciembre 07, 2022, 10:07:51 PM

Hola saludos a todos.

Llevo varias semanas diseñando un gamepad virtual para juegos html5, he tenido que enfrentar diversas dificultades relacionadas con temas como la compatibilidad y el multi touch, este último el que más trabajo me ha dado pero he logrado dominarlo un poco. A continuación les muestro un ejemplo html5 en donde podrán evaluar el funcionamiento del gamepad.

Aquí pueden ver el ejemplo en funcionamiento. Mediante un dispositivo táctil podrán verificar el funcionamiento del multi touch es decir que pueden usar varios dedos a la vez. Ponganlo a prueba a ver si encuentran un fallo o incomodidad, o si se les ocurre alguna idea y quieran contarme a ver si me animo a adaptarlas o las descarto rotundamente jajaja

. De igual modo el objetivo es crear un código entendible, modificable y fácil de implementar.
http://estudiosistemas.infinityfreeapp.com/Dixon/web/javaScript/gamepad/gamepad_v1/

Aquí dejo mi repositorio de github con el proyecto:
https://github.com/ReyesDavila/gamePad

Ahora tengo las siguientes metas propuestas:

Un amigo acordó en prestarme su gamepad físico para poder programar adecuadamente. Aquí los gamepad no son muy caros, unos 10 dólares americanos, pero debido a los problemas económicos no todos podemos comprar uno ya que aquí lo regular es ganarse tan solo 60 dólares al mes.

Bye.

dixon · Diciembre 10, 2022, 10:13:45 PM

Hola, saludos a todos.

Este es el proyecto del gamepad bastante adelantado.
http://bit.ly/dixon_gamepad_v2

En el proceso de creación he notado lo siguiente:
1. Ajuste de pantalla preciso: Los juegos html5 pueden abarcar toda la pantalla aunque esta se encuentre en orientación horizontal o vertical (landspace y portrait respectivamente), es decir que un juego pudiese ocupar toda el área sin dejar espacios negros (no es el caso en el proyecto mostrado). Aunque las pantallas de diversos móviles y pc tengan distintas proporciones se puede crear un script que modifique la view según la proporción de la ventana sin que se estiren o encojan las imágenes (voy a tomar esto en cuenta para la siguiente versión del gamePad).

2. Comunicación JavaScript a Game maker: JavaScript puede comunicarse con game maker mediante distintos métodos, sea modificando un archivo ini, enviando señales de teclado en segundo plano o modificando el archivo .js que genera game maker. En el proyecto se está utilizando el envió de señales de teclado en segundo plano y funciona más o menos así:
Señales de teclado en segundo plano: para lograr enviar la posición de la palanca del game pad se utilizaron varios script de JavaScript y entre estos uno se emplea para simular la presión de teclas de teclado. La palanca al ser movida le envía señales a game maker que le indican que las teclas 150 hasta la 251 han sido presionadas y game maker se encarga de traducir eso en señales que van de -1 hasta 1 para cada eje de la palanca, todo esto mediante el siguiente script:

Script game maker para traducir las señales enviadas por js en coordenadas del gamepad.

//mandoJs(button)
//serial del script: _GAMEPADDIXON2022VER01

var button_a;
button_a = string_lower(argument0);

var eje_x_a;
eje_x_a = 0;

var eje_y_a;
eje_y_a = 0;

var button_z_a;
button_z_a = false;

var orientation;
orientation = "landspace";

if(keyboard_check(252)){button_z_a = true}

//Eje_x
for(index_a=0; index_a<51; index_a+=1)
{
if(keyboard_check(150+index_a)){eje_x_a = index_a-25}
}

//Eje_y
for(index_a=0; index_a<51; index_a+=1)
{
if(keyboard_check(201+index_a)){eje_y_a = index_a-25}
}


//orientation
if(keyboard_check(255)){orientation = "portrait"}

if(button_a = "y"){return eje_x_a*1/25}
if(button_a = "x"){return eje_y_a*1/25}
if(button_a = "z"){return button_z_a}
if(button_a = "orientation"){return orientation}

3.   Recursos de sistema: Tristemente Game maker produce juegos html5 muy pesados, aunque este proyecto corra muy bien en dispositivos actuales seguramente no andará adecuadamente en dispositivos de bajo rendimiento. Si este proyecto se hubiese creado con JavaScript puro se notoria una mejora del 100% en el rendimiento según los datos que he obtenido.

Ahora tomate una taza de café y déjame expresar lo siguiente:

Una de mis metas en la vida es replicar el track 1 del juego topGear para Snes.

Estuve haciendo algunas pruebas y no es fácil de lograr, aunque al parecer se puede lograr fácilmente con el motor de video juegos microStudio pero ese increíble motor no está en mis planes "aún". Por ahora me interesa inventar, crear, conseguir, bucar, idear, diseñar y comprender la complejidad que existe dentro de ese tipo de juegos. Aunque ahora que lo pienso, microStudio precisamente me ayudaría a comprender ya que con este aprendería las bases. ¡Viva micro Studio!

4.   Envió de señales desde game maker a JavaScript: Uno de los métodos que pudiesen emplearse para enviar señales de game maker a javascript es mediante el uso de archivos ini, pero este proceso es lento. Existe otro método que funciona modificando el archivo .js el cual consiste en modificar ciertos parámetros y crear dos script especiales, uno para game maker y otro para js, este método es bastante eficiente porque permitiría un intercambio de datos fluido, el problema es que es un poco molesto de implementar, aunque mientras escribo estas líneas me voy dando cuenta que el proceso de modificación del archivo .js pudiese automatizarse mediante un programa externo (creado inclusive con game maker), si logro esto entonces otras cosa extrañas surgirían, tales cosas como:

a.   La creación de juegos multiplayer online sin usar los scripts originales de game maker destinados a estos.
b.   Manejo de buffers en game maker aunque la versión del game maker no cuente con esto (no tengo idea de que son los buffers pero mientras implique conexión a internet entonces todo es posible).
c.   Manejo de bases de datos sin mucho problema.
d.   Se pudiese establecer un vinculo directo con php inclusive en la primera versión del game maker html5 la cual no cuenta con el método _POST.
e.   Solución al problema del mouse: Las primeras versiones del game maker html5 presentan fallos al indicar la posición del mouse cuando el juego se ejecuta en dispositivos móviles, este problema ya fue resuelto en las versiones más actuales pero puede corregirse en las primeras versiones.

Bueno tengo muchas cosas más que contar relacionadas con video juegos, programación, trabajo, dinero, bienestar social y Dios, pero esto es lo que puedo mostrar por ahora. Ya mejoraré mis posts.

dixon · Diciembre 11, 2022, 09:32:23 PM

Hola, buenas noches.

Quiero mostrarles esta nueva versión del gamepad, ahora el juego se adapta a cualquier resolución de pantalla, tanto en orientación vertical como horizontal manteniendo la proporción correcta de las imágenes. Ahora sí parece aplicación nativa para móviles android/ios.

http://estudiosistemas.infinityfreeapp.com/Dixon/web/javaScript/gamepad/gamepad03/

Giren la pantalla y evalúen el sistema, si tienen otros dispositivos verifiquen que ciertamente se ajusta a toda la pantalla al hacer full screen (con el cuadrito/botón superior derecho).

Más datos:
1. El sistema que hay que crear para enlazar correctamente javascript con game maker pudiese también corregir los problemas de audio y habilitar muchas funciones interesantes relacionadas con la reproducción de sonidos.
2. El script que permite transferir la información del gamepad virtual a game maker se llama mandoJs, y en su nueva versión se removió el verificador de orientación ya que la orientación del dispositivo puede obtenerse nativamente desde game maker con el siguiente código:

orientation = "landspace";//Horizontal
if(browser_height>browser_width){orientation="portrait" };//vertical

El script mandoJs que permite recibir información del gamepad de JavaScript quedó de la siguiente manera:

//mandoJs(button)
//serial del script: _GAMEPADDIXON2022VER01

var button_a;
button_a = string_lower(argument0);

var eje_x_a;
eje_x_a = 0;

var eje_y_a;
eje_y_a = 0;

var button_z_a;
button_z_a = false;

if(keyboard_check(252)){button_z_a = true}

//Eje_x
for(index_a=0; index_a<51; index_a+=1)
{
if(keyboard_check(150+index_a)){eje_x_a = index_a-25}
}

//Eje_y
for(index_a=0; index_a<51; index_a+=1)
{
if(keyboard_check(201+index_a)){eje_y_a = index_a-25}
}

if(button_a = "y"){return eje_x_a*1/25}
if(button_a = "x"){return eje_y_a*1/25}
if(button_a = "z"){return button_z_a}

Modo de uso:
Si colocan "x" obtendrán la posición del eje x del gamepad que varía desde -1 a 1.
Si colocan "y" obtendrán la posición del eje y
Si colocan "z" obtendrán el estado del botón izquierdo.

3. Repito: No encuentro forma de mejorar el rendimiento de los juegos html5 de game maker en dispositivos viejos y esto me obliga a comenzar a crear juegos en JavaScript puro, pero no tengo experiencia en ese tema y tendré que comenzar de cero. �

4. Ahora tengo que finalizar el gamepad, crear el sistema de comunicación directa con JavaScript para luego intentar resolver los problemas de audio que presenta game maker al exportar a html5.

Bye.

dixon · Enero 04, 2023, 07:26:26 PM

Hola, gusto en saludarlos denuevo.

Esta es la nueva actualizacion del gamePad, la anterior presentaba problemas de tiempo de reacción, es decir cuando presionaba un boton tardaba un segundo en reaccionar. Esta es la nueva version y presenta algunas fallas pero pronto si dios lo permite seguiré puliendola.

Hay muchas cosas que contar de esta versión, por ejemplo ya se logró la comunicación directa con game maker y javaScript.

No es un juego, no intentes pasarlo porque no tiene sentido...
http://estudiosistemas.infinityfreeapp.com/Dixon/practicas/gamepad/ver13/

Lo que no me agrada es que no funcione adecuadamente en dispositivos de bajo rendimiento.

dixon · Enero 05, 2023, 05:23:01 PM

Wow, ya evalué el tiempo de reacción del joystick tactil y está muy bien.

El sistema todabia esta en proceso, ahora falta concretar lo siguiente:

1. Integrar los comandos para joystick físico, es decir para que los jugadores puedan conectar su gamepad usb y jugar sin complicaciones.

2. Finalizar el script mandoJs para gamemaker, aunque ya lo he finalizado tengo que revisarlo denuevo para verificar que todo esta en orden.

3. Integrar sistema de control de audio html5, como algunos saben el sistema de audio html5 de game maker presenta muchos errores. Es necesario controlar todo el audio por medio de comandos javascript puros y esto requiere crear un sistema nuevo.

3. Crear sistema definitivo de ajuste de view. Lo que se quiere es que los juegos se ajusten adecuadamente al 100% de la pantalla aunque esta rote o gire.

4. Concretar el sistema que facilita la integracion de codigo javascript a los juegos html5. Esto es un sistema que fusiona el modelo del game pad y el sistema de audio javascript con el juego.

Bueno hay mas pero por ahora esto..bye.

dixon · Enero 06, 2023, 04:49:40 PM

Hola, saludos.

No queria mostrarles un preambulo de un proyecto que tengo en mente porque es muy especial, pero estoy contento con el diseño del gamepad y tengo que mostrarselos.

Repito no es para jugar, si es un juego pero al no estar terminado no sirve para jugar y no tiene fin...

http://estudiosistemas.infinityfreeapp.com/Dixon/practicas/gamepad/bowser/

Caracteristicas del sistema:

1. Ajuste de view: por ahora la view solo se ajustara correctamente al dispositivo, pero en el futuro se tiene planeado q abarque toda la pantalla.

2. Sistema de sonido: el sistema de sonido es bastante independiente del game maker, percibo que tiene un retraso a la ora de reproduccion de aproximadamente 30 microsegundos.

3. Gamepad: los botones tactiles actuan a tiempo, pero la movilidad del player no ha quedado perfecta, necesito hacer mas pruebas para aumentar la comodidad a la hora de mover al player...

Bueno el sistema tiene mas cosas, aunpresenta muchos errores, se iran corrigiendo poco a poco..

Vuelvo y repito: tendre que profundizar en la creacion de juegos con javascript puro si quiero ver resultados mas interesantes.

Bye.