Cristina

Babylon.js in responsive

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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:
 
Any ideas/hints on how to fix these errors?
Thank you very much for your help @grafosdesign :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.