Comunidad Game Maker

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 : Para todos los Game makers que exporten a Html5.
Versión del script: 2 (El código original GML no era eficiente, ahora es un código JavaScript que se coloca en el archivo index).

Código JavaScript











<script>
var canvas = document.getElementById("canvas");

ajusteCanvas();
window.addEventListener('resize', ajusteCanvas);

function ajusteCanvas()
{
var ventanaAncho = window.innerWidth;
var ventanaAlto = window.innerHeight;
var ventanaOrientacion=screen.orientation.type.match(/\w+/)[0];
var porcentajeMaximo = 90;
var ventanaAnchoMaximo = porcentajeMaximo*ventanaAncho/100;
var ventanaAltoMaximo = porcentajeMaximo*ventanaAlto/100;
var canvasProporcion = canvas.clientWidth/canvas.clientHeight;
var canvasW = porcentajeMaximo*ventanaAncho/100;
var canvasH = canvasW/canvasProporcion;
console.log(`canvasW: ${canvasW}; canvasH: ${canvasH}; `)
while(canvasH>ventanaAltoMaximo)
{
porcentajeMaximo-=1;
canvasW = porcentajeMaximo*ventanaAncho/100;
canvasH = canvasW/canvasProporcion;
}

canvas.style.position="absolute";
canvas.style.width=`${canvasW}px`;
canvas.style.heigth=`${canvasH}px`;
var canvasX = (ventanaAncho-canvasW)/2;
canvas.style.left=`${canvasX}px`;
}
</script>














Modo de uso del código JavaScript:
1. Exporta tu juego html5.
2. Copia e código JavaScript que se está entregando.
3. Pégalo en el archivo índex sobre la etiqueta de cierre </body>.
(http://imgfz.com/i/ECoY7a0.jpeg)


4. Listo.




Lo siguiente está obsoleto:




Código del script GML (Versión 1 obsoleto):
ajuste_canvas_html5(width,height);




///ajuste_canvas_html5(width,height);
//Este script deberá ser llamado "ajuste_canvas_html5"
//Colocar en evento create: ajuste_canvas_html5("create");
//Colocar en evento step : ajuste_canvas_html5("step");

if(argument0="create")
{
    ///////////////////////////////////Datos a modificar
    Ancho00=room_width;
    Alto00=room_height;
    intervalo_ajuste=20;
    //////////////////////////Fin de datos a modificar

    ajuste_canvas_html5_step_time=0;
    proporcion_browser_previa=0;
    modulo="otro";
    if(string_length(string(self))>2){modulo="html5";alarm[0]=20};
}

if(argument0="step")
{
    ajuste_canvas_html5_step_time+=1;
    if(ajuste_canvas_html5_step_time=intervalo_ajuste)
    {
        ajuste_canvas_html5_step_time=0;
       
        proporcion00=Ancho00/Alto00;
        proporcion_browser00=browser_width/browser_height;

        if(modulo="html5")
        {
            if(proporcion_browser00!=proporcion_browser_previa)
            {
                anchox100=90*browser_width/100;
                altoy100=90*browser_height/100;
                altoy00=anchox100/proporcion00;

                while(altoy00>altoy100)
                {
                    anchox100-=1;
                    altoy00=anchox100/proporcion00;
                }

                window_set_size(anchox100,altoy00);
                window_set_position((browser_width-anchox100)/2,0);

            }//fin if(proporcion_browser00!=proporcion_browser_previa)

            proporcion_browser_previa=proporcion00;
        }
    }
}










Modo de uso

1. Crear un script llamado: ajuste_canvas_html5 con el código anterior.

2. En el evento create colocar:
ajuste_canvas_html5("create");

3. En el evento step colocar:
ajuste_canvas_html5("step");