Babylon.js in responsive

[Cristina]

Dear all,  we are working on this platform that is in Babylon.js and React:

http://grafos.website/grafos/

Unfortunately it works only on some mobile devices but not on all. How can we fix this?

We had the basic model in Three.Js and it worked fine across mobile devices but we achieved all our functionality in Babylon. How can we make it work like this: https://www.grafosdesign.com/3dVisual_Interact/BioracerDEMO/index.html

Thank you for you ideas/input

Cristina

[none-9999]

Hi, center in all orientation/resolutions.

var ancho=1920;//width

var alto=1080;//height

function rPantalla() {
  
    var gameWidth = window.innerWidth;
    var gameHeight = window.innerHeight;
    var scaleToFitX = gameWidth/ancho ;
    var scaleToFitY =  gameHeight/alto ;

    var currentScreenRatio = gameWidth / gameHeight;
    var optimalRatio = Math.min(scaleToFitX, scaleToFitY);

    if (currentScreenRatio >= 1.77 && currentScreenRatio <= 1.79) {
        //16/9 aspect
        canvas.style.width = gameWidth + "px";
        canvas.style.height = gameHeight + "px";
    
        canvas.style.left = ((gameWidth - (ancho * optimalRatio))/2)+"px";
        canvas.style.top = ((gameHeight - (alto * optimalRatio))/2)+"px";        
        console.log("a "+canvas.style.left);
        
    }else {
        
            canvas.style.left = ((gameWidth - (ancho * optimalRatio))/2)+"px";
            canvas.style.top = ((gameHeight - (alto * optimalRatio))/2)+"px";
            canvas.style.width = ancho * optimalRatio + "px";
            canvas.style.height = alto * optimalRatio + "px";
        
    //    console.log("b "+canvas.style.left);
    }
    
    scaleX = ancho/(gameWidth-(gameWidth-(ancho*optimalRatio)));//I use this for events, but it may not be necessary
    scaleY = alto/(gameHeight-(gameHeight - (alto*optimalRatio)));
    
    
    //console.log("scale x "+scaleX+" scaley "+scaleY);
    
    console.log("width "+ancho+" height "+alto);
    dataRatio.offx = parseInt(canvas.offsetLeft);
    dataRatio.offy = parseInt(canvas.offsetTop);
    if(playing){
        
        engine.resize();
    }
    
} //fin de rPantalla : redimensionar la pantalla (end of resizing display)



function init(){
   
    dPantalla.w = window.innerWidth;
    dPantalla.h = window.innerHeight;
    dPantalla.rx = ~~(dPantalla.w/2);
    dPantalla.ry = ~~(dPantalla.h/2);
    
    
    canvas = document.getElementById('canvas1');
    
    rPantalla();

   //event resize, also change orientation

window.addEventListener("resize", function () {
        setTimeout(rPantalla,300);//important this async
}, false);



}

//end of init 

if you need more aspect ratios, tell me.

[Cristina]

Hola diyo_games! Gracias por tu respuesta. 

We followed your advice and we did the following:

1. We updated Babylon to the last version with the CDN. We had  2.2 and now we have preview version of 4.0, and it works perfectly.

 

2. With the code and info you sent we have the following questions:

• We changed the id to find the canvas for the one I consider to be our canvas..
• We added the code in the init function
• and in the rPantalla function the variable "playing" can't be found by the system.

We uploaded the code with these errors here:

http://grafos.website/grafos-aspect-ratio/

 

Any ideas/hints on how to fix these errors?

Thank you very much for your help @grafosdesign

[Cristina]

Hola Diyo-games,

No entendimos tu respuesta. Como podriamos contactarte?

Gracias!

[none-9999]

hola, [email protected]