Sign in to follow this  
ftguy2018

Mobile landscape mode

Recommended Posts

Hello,

We have some issue trying to see our web browser project on mobile, we have no special config for mobile at this time (mobile is empty), actually our config file is something the following :

 width: 1280,
 height: 768,
 scale: true,
 center: true,
  resize: false,

the issue that we have is that when trying to access from a mobile, we have only a white page until we turn the device to be on landscape, then at that time we can see something, so can someone advise what type of setting we should add in the config so the screen will be also displayed when the device is oriented in portrait, ideally we would like to lock it on landscape.

Share this post


Link to post
Share on other sites

Yes, I can confirm that for some reason the first scene does not start before we do one rotation of the device in landscape and then after it will work as intended (using pixi engine), please kindly advise how to fix this. Actually, when we are checking into the editor, if we select mobile mode and try to reduce the width of window on the right then at some point the screen does not draw anymore, while in desktop mode it does reduce the whole screen properly and never stop the rendering, so what would be different in mobile mode so the engine does not longer render ? 

Share this post


Link to post
Share on other sites

@enpuThere must be a bug with rotateScreen when width < height in an original setup screen set with width > height when watching a web export on a mobile device....nothing is drawn. Btw, playing with the config file also made my game window to disappear, I cannot see it attached to the editor anymore.

Share this post


Link to post
Share on other sites

This is normal behaviour of the game engine in mobile browser. By default, if your game size is landscape (width is more than height) the game will only show when the mobile devices is on landscape mode. You disable this feature by setting rotateScreen attribute in System class to false.

game.config = {
    system: {
        rotateScreen: false
    }
};

 

Share this post


Link to post
Share on other sites

@enpu

Oh I see...that is quite strange and could be confusing for users, I disabled the rotatescreen to false and indeed it is better like this, I suggest you have some references for mobile on your website because there is nothing at all I could find about setting up the engine for mobile and have the best out of it. Now how can I get back the window attached to the editor ? It does not want anymore to be attached, please kindly advise.

 I have a question about resize, currently resize is resizing to the full size of the window regardless of the ratio screen size we set, so will it be possible to have like the scale mode (scaling while keeping the ratio) doing the same in resize mode ? Like having a resize mode to full (like now) if required but also a resize to the full possible but respecting the ratio ? for example if we setup 720p 1280x720 , and the window size is changing to 2000x2000, we still want to have the benefit of the extra pixels as much as possible and so then resize to 2000x1125 and no resize to 2000x2000, this could help for having better performances in the fillrate ( I imagine) does it make sense ?  

Share this post


Link to post
Share on other sites

That is what I was talking about, actually working well like this for me :

 


_onWindowResize: function() {
        this._updateWindowSize();
        if (this._toggleRotateScreen()) return;

        var width = this._windowWidth;
        var height = this._windowHeight;
        
            
         if (width / this.originalWidth < height / this.originalHeight)
         {
             
            height = ~~(width * (this.originalHeight / this.originalWidth));
        }
        else {
            width = ~~(height * (this.originalWidth / this.originalHeight));
            
        }
            
        
        var scalePercent = game.System.scalePercent / 100;
       // this._scale(this._windowWidth * scalePercent, this._windowHeight * scalePercent);
       // this._resize(this._windowWidth, this._windowHeight);
        
        console.log( this._windowWidth+' x '+this._windowHeight);
        console.log( this.originalWidth+' x '+this.originalHeight);
        
         this._scale(width * scalePercent, height * scalePercent);
        this._resize(width, height);

        if (game.System.center || game.System.resize)
        {
            game.renderer._position((this._windowWidth - this.canvasWidth) / 2, (this._windowHeight - this.canvasHeight) / 2);
        }

        if (game.System.scale || game.System.resize || game.System.hidpi && game.device.pixelRatio > 1) {
            game.renderer._size(this.canvasWidth, this.canvasHeight);
        }

        if (game.isStarted && !game.scene) game.onStart();
    },

Share this post


Link to post
Share on other sites

actually if we combine with the following code then I can get the perfect resize keeping the scale and I can work like in a virtual window:

  onResize: function()
    {
        
        
        var scalex = game.width/game.system.originalWidth;
        var scaley = game.height/game.system.originalHeight;
        
     
        
        this.stage._worldTransform.a = scalex;
        this.stage._worldTransform.d = scaley;
        
       
         
          
        
    },

 

Regarding performances, shall we have a benefit if we change the stage original Container to be FastContainer in the engine (if we do not rotate the screen) ?

Share this post


Link to post
Share on other sites
2 hours ago, ftguy2018 said:

Now how can I get back the window attached to the editor ? It does not want anymore to be attached, please kindly advise.

Can you tell me exact steps how to reproduce that issue? It's a bit hard to follow your messages.

Share this post


Link to post
Share on other sites

Sorry the window bug is related to the editor and not with the project, actually I was playing with the size of the window in the config file, I tried small values, which ones I do not recall today so I cannot list the steps but now when I click detach window I can see it detached but if I click again it does just disappear, is there any ini files or setting files I could reset ? 

Share this post


Link to post
Share on other sites

@enpu


unfortunately, still the same, I can see the window detached only, is there a special command to attach it back to the text editor ?

Here is my setting , can you see something strange maybe the size 0 ?

{"brightray":{"devtools":{"bounds":{"height":600,"width":800,"x":378,"y":568},"preferences":{"Inspector.drawerSplitViewState":"{\"horizontal\":{\"size\":0,\"showMode\":\"OnlyMain\"}}","inspectorVersion":"24","networkBlockedURLs":"[]","panel-selectedTab":"\"console\""}},"media":{"device_id_salt":"xxxxxxxxxxxxxxx"}}}

Share this post


Link to post
Share on other sites

So you can see the game window only when detached to it's own window? (When you have two separate windows).

You should be able to detach it back to the editor window with the same button that you use to detach it.

What Panda 2 version are you using?

Can you show screenshot of your issue?

Share this post


Link to post
Share on other sites

That sure doesn't look right. I tried to reproduce the issue with 1.5.0 version on Windows 10, but wasn't able.

Can you try to delete the whole %USERPROFILE%\AppData\Roaming\Panda 2\ folder and then restart.

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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.