Loader

Shoutbox

💎 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.

Junio 24, 2021, 06:28:11 AM Ultima modificación: Agosto 04, 2022, 10:45:06 PM por 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é.

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é.

Powered by EzPortal