Scaling Issue in WebView+

Get help using Construct 3!

Post » Sat Jul 01, 2017 1:01 pm

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

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

Then
Code: Select all
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";
}
}


Now
Code: Select all
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";
      }


@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?
Image Image iTunes: Match3 | Google Play: Match3
B
94
S
33
G
30
Posts: 1,099
Reputation: 27,645

Post » Sat Jul 01, 2017 1:58 pm

If it works with other export options, and it only happens in Cocoon, then isn't it a Cocoon bug?
Scirra Founder
B
387
S
230
G
87
Posts: 24,249
Reputation: 192,240

Post » Sat Jul 01, 2017 2:33 pm

Ashley wrote: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.

Code: Select all
      
// 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");


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: Select all
if (this.isCocoonJS)
{
   ... set width..
   ... set height...
}
Image Image iTunes: Match3 | Google Play: Match3
B
94
S
33
G
30
Posts: 1,099
Reputation: 27,645

Post » Sat Jul 01, 2017 6:15 pm

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.
Scirra Founder
B
387
S
230
G
87
Posts: 24,249
Reputation: 192,240

Post » Sun Jul 02, 2017 8:54 am

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
Image Image iTunes: Match3 | Google Play: Match3
B
94
S
33
G
30
Posts: 1,099
Reputation: 27,645


Return to How do I...?

Who is online

Users browsing this forum: luckyrawatlucky and 0 guests