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

Publicado por dixon, Junio 24, 2021, 06:28:11 AM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

dixon

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 XD)


//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>
Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.

dixon

Nueva actualización del script que permite ajustar los juegos html5 en diferentes pantallas sean pc o moviles.
Si Dios quiere; Limpiaré la oficina, puliré el piso y les serviré café a todos, luego, me enseñarán a programar e iré a comprarles más café.

kostra

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.
[spoiler="ola k ase clickarme o k ase"]la imagen no se quita xD
[/spoiler]

Powered by EzPortal
SMF spam blocked by CleanTalk