💎 Ajustar juego html5 en diferentes pantallas (Versión 3)

dixon · Junio 23, 2021, 11:28:11 PM

Nombre del autor : Reyes Dávila.
Breve descripción de su función : Ajusta el área del juego (canvas) proporcionalmente en navegadores webs. Eso significa que el juego se ajustará a cualquier pantalla, tanto de móviles, ordenadores, ipads, Xbox, TV, etc...
Versión GM utilizada : Game maker studio 1.4, pudiese adaptarse a studio 2.
Versión del script: 3 (Ahora si está bueno

)

//ajuste_canvas_html5(str);
//DEBE SER LLAMADO OBLIGATORIAMENTE: ajuste_canvas_html5
//Función del script: Ajusta el juego html5 en el navegador adaptandose a diferentes pantallas y manteniendo la proporción.
//Colocar en evento create: ajuste_canvas_html5("create");
//Colocar en evento step: ajuste_canvas_html5("step");
//Ir a Resources -> Change Global Game Settings -> HTML5 -> Graphics -> Scaling y marcar Full scale.
//Serial del script: _a;

if(argument0="create")
{
    browser_width_previo_a=browser_width;
    browser_height_previo_a=browser_height;
    canvasPorcentaje_a=95;
    c1_a=1;
}


c2_a=(browser_width_previo_a!=browser_width);
c3_a=(browser_height_previo_a!=browser_height);


if(c1_a || c2_a || c3_a)
{
    c1_a=0;
    browser_width_previo_a=browser_width;
    browser_height_previo_a=browser_height;

    room_width_a=room_width;
    room_height_a=room_height;
    
    if(view_enabled)
    {
    
        for(i_a=0;i_a<=10;i_a+=1)
        {
            if(view_visible[i_a])
            {
                continuar_a=0;
                room_width_a=view_wview[i_a];
                room_height_a=view_hview[i_a];
                break;
            }
        }
        
    }
    
    canvasProporcion_a=room_width_a/room_height_a;
    canvasAncho_a=canvasPorcentaje_a*browser_width/100;
    canvasAlto_a=canvasAncho_a/canvasProporcion_a;
    while(canvasAlto_a>(canvasPorcentaje_a*browser_height/100))
    {
        canvasAncho_a-=1;
        canvasAlto_a=canvasAncho_a/canvasProporcion_a;
    }
    window_set_size(canvasAncho_a,canvasAlto_a);
    canvasX_a=(browser_width-canvasAncho_a)/2;
    canvasY_a=(browser_height-canvasAlto_a)/2;
    if(browser_width<browser_height)
    {
        canvasY_a=2*browser_height/100;
    }
    window_set_position(canvasX_a,canvasY_a);
}

Las instrucciones están dentro del script

Este otro script es para agregar un pequeño boton que permita colocar pantalla completa:

<div id="botonB">Fs</div>

	<style>
	#botonB
	{
   	 -webkit-user-select: none;
    	-moz-user-select: none;
   	 -khtml-user-select: none;
   	 -ms-user-select:none;
	position:absolute;
	top: 5px;
	right: 5px;
	font-size: 1em;
	border-radius: 10%;
	border: 1px solid white;
	width: 2em;
	text-align: center;
	}
	</style>

	<script>
	var botonB_Elemento = document.getElementById("botonB");
	var touchDevice = ('ontouchstart' in document.documentElement);
	if(touchDevice == true){botonB_Elemento.addEventListener("touchstart", function(){toggleFullScreen()});}
	else{botonB_Elemento.addEventListener("mousedown", function(){toggleFullScreen()});}

	///////////////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();
	}}}
	/////////////////////////////////////////////////////////////////////////////////
	</script>

Este script debe ser colocado dentro del index.html de nuestro juego html5 ya exportado.
Se debe colocar este codigo debajo de la etiqueta </script> es decir sobre la etiqueta </body>

dixon · Agosto 04, 2022, 03:32:20 PM

Nueva actualización del script que permite ajustar los juegos html5 en diferentes pantallas sean pc o moviles.

kostra · Agosto 20, 2022, 05:19:42 AM

el problema de html y cualquier script ue se haga SOLO con gml, tiene el problema del dpi, entonces en según ué dispositivo, el aspect ratio lo puedes dejar perfecto, pero por culpa de el problema con el dpi, se verá borroso y/o feo. Para arreglar eso solo se puede con alguna extensión en javascript por ejemplo (yal tiene alguno por ahí), ya que las funciones de dpi que tiene gml no funcan.

💎 Ajustar juego html5 en diferentes pantallas (Versión 3)

dixon

dixon

kostra

Quién está en línea