Different fill mode for desktop

Help & Support
1

Is it possible to have the fill mode “Keep aspect ratio” for desktop and “Fill window” for mobile devices?

2

Hi,
Yes its possible,

 setFillMode() {
        if(pc.platform.mobile)
        {
            this.app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        }
    }
3

thanks for answering! … but where I should place and call that function? I’m using the editor

4

Call it in the initialize function of any script.

5

I will add an answer here, instead of Discord:

As @Saad_Haider mentioned you should add it in the initialize() method. For example:

Script.attributes.initialize = function() {
    this.setFillMode();
};
Script.attributes.setFillMode = function() {
    if (pc.platform.mobile) {
        this.app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
    }
};
1 Like
6

thanks!

I was getting a black stripe above

Screenshot 2020-08-21 at 17.07.25
Screenshot 2020-08-21 at 17.07.25400×652 40.1 KB

I fixed that adding those lines:

if(pc.platform.mobile) {
       
          this.app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        
          document.getElementById("application-canvas").style.height = "100%";
          document.getElementById("application-canvas").style.margin = 0;
}
7

I’m wondering if script initialise is too late and perhaps adding it the loading script is better or even earlier?

8

no, same problem if I do it in the preload script

9

Hi there! Has anyone found the solution for that black bar issue? I am getting the same problem

10

@Cheburashka Please see this thread: [SOLVED] Trying to switch between Fill Mode to Keep Aspect ratio