Mobile landscape mode

[ftguy2018]

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.

[ftguy2018]

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 ? 

[ftguy2018]

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

[enpu]

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
    }
};

 

[ftguy2018]

@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 ?  

[ftguy2018]

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();
    },

[ftguy2018]

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) ?

[enpu]

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.

[ftguy2018]

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 ? 

[enpu]

Are you on Windows or Mac?

[ftguy2018]

@enpu I am on windows

[enpu]

You should be able to reset window settings by removing editor-state.json and game-state.json files from %USERPROFILE%\AppData\Roaming\Panda 2\

After that restart Panda 2

[ftguy2018]

@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"}}}

[enpu]

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?

[ftguy2018]

@enpu

Here is a short video of the issue, the window does detach but never attach back. I am using panda 1.5.0 

 

[ftguy2018]

@enpu

any suggestion ?

[enpu]

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.

[ftguy2018]

Yes it worked after deleting that folder... thank you.