Scaling Issue in WebView+

0 favourites
  • 5 posts
From the Asset Store
Adjusting the game screen for different resolutions (Letterbox scale)
  • I'm currently working on a guide to export a c3 game with Cordova and built an app via Cocoon (not Canvas+, but WebView+).

    However I stuck at the scaling issue (there was a workarround for C2, but the code has changed with c3).

    Result (atm)

    I tried to find the same code snippet in the c3 runtime.js file and I did, however it is changed.

    Then

    if (this.canvas)
    {
    this.canvas.width = Math.round(w * dpr);
    this.canvas.height = Math.round(h * dpr);
    if (this.isEjecta || this.isCocoonJs) //maybe this is better (Ask Ashley): if (this.isDomFree)
    {
    this.canvas.style.left = Math.floor(offx) + "px";
    this.canvas.style.top = Math.floor(offy) + "px";
    this.canvas.style.width = Math.round(w) + "px";
    this.canvas.style.height = Math.round(h) + "px";
    }
    else if (this.isRetina && !this.isDomFree)
    {
    this.canvas.style.width = Math.round(w) + "px";
    this.canvas.style.height = Math.round(h) + "px";
    }
    }
    [/code:3cqlydma]
    
    [b]Now[/b]
    [code:3cqlydma]
    if (this.canvas)
    		{
    			this.canvas.width = Math.round(w * dpr);
    			this.canvas.height = Math.round(h * dpr);
    			
    			if (this.isRetina)
    			{
    				this.canvas.style.width = Math.round(w) + "px";
    				this.canvas.style.height = Math.round(h) + "px";
    			}
    			
    			this.canvas.style.marginLeft = Math.floor(offx) + "px";
    			this.canvas.style.marginTop = Math.floor(offy) + "px";
    		}
    		
    		if (this.overlay_canvas)
    		{
    			this.overlay_canvas.width = Math.round(w * dpr);
    			this.overlay_canvas.height = Math.round(h * dpr);
    			
    			this.overlay_canvas.style.width = this.cssWidth + "px";
    			this.overlay_canvas.style.height = this.cssHeight + "px";
    			
    			this.overlay_canvas.style.left = Math.floor(offx) + "px";
    			this.overlay_canvas.style.top = Math.floor(offy) + "px";
    		}
    [/code:3cqlydma]
    
    @Ashley I know you are not a friend of cocoon, however this issue also comes up while using WebView+. Do you now where we need to adjust the runtime.js file to get a fullscreen display?
  • If it works with other export options, and it only happens in Cocoon, then isn't it a Cocoon bug?

  • If it works with other export options, and it only happens in Cocoon, then isn't it a Cocoon bug?

    I'm not quite sure. It seems that C3 doesn't use HDPI if using the cocoon wrapper. In c2 it was sufficient to add "this.isCocoonJs" to set the accurate display size.

    Isn't there a way to do this in c3?

    I added following line in the c3 runtime file.

    		
    // Detect wrapper platforms
    		this.isCrosswalk = /crosswalk/i.test(navigator.userAgent) || /xwalk/i.test(navigator.userAgent) || !!(typeof window["c2isCrosswalk"] !== "undefined" && window["c2isCrosswalk"]);
    		this.isCocoonJs = !!window["c2cocoonjs"];                //<- added to detect cocoon
    		this.isCordova = (this.exportType === "cordova");
    [/code:1ionpv6k]
    
    This condition is true when the game was built with cocoon. But I don't know where to adjust the screen/window size.
    so that I can do 
    [code:1ionpv6k]
    if (this.isCocoonJS)
    {
       ... set width..
       ... set height...
    }
    [/code:1ionpv6k]
  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • There's no point making shotgun changes without understanding what's happening. Can you test some other export options and see if they're the same? That will determine if it's a C2 or Cocoon issue. It might be worth checking the window inner width and inner height sizes in each case too, since that's the most important determinant of the game canvas size, and if it's even 1px smaller it might push letterbox integer scale down a level. So for example if Cocoon's window inner size was just 1px off, it'd have this effect. And that'd be a Cocoon issue, not a C2 issue, and not something you want to go tinkering with JS to work around.

  • I'll make some further tests and let you know. I just tried a new project made with C3 (not the KiwiStory game), and here it's working fine. At least for WebView+.

    Thank you for your help!

    Regards

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)