How does fullscreen scaling work ?

Get help using Construct 2

Post » Tue Jan 31, 2012 12:20 am

So far I have run into two issues where the C2 fullscreen scaling does not work the way I'd expect it to. Since Ashley confirmed that everything is working as it should, maybe somebody can give me more pointers on how to work with projects at different screen sizes. I have read the appropriate pages on this website but there are not many details to be found.

My expectation was that if I set a 400x400 project window size and enable fullscreen scaling, that the browser would zoom in as much as possible while maintaining the original aspect ratio. E.g. on a 1024x786 screen we'd now have a 786x786 window and all layer relationships remain the same. Clearly that's not the case. I can get this (desired) behavior by changing the Zoom setting inside Chrome and disabling C2's fullscreen scaling. However, I would like to understand C2's algorithm instead. Any pointers ?
Posts: 73
Reputation: 2,647

Post » Tue Jan 31, 2012 12:30 am

I think it does maintain the ratio, but also shows additional content horizontally or vertically depending on the size of the browser.

Ashley said that he will do a Blackbar fullscreen scale that will have black bars instead of showing extra content, so we'll all have to wait for him to do that.alspal2012-01-31 00:31:34
Posts: 1,815
Reputation: 24,863

Post » Tue Jan 31, 2012 8:16 pm

If you want the raw math used to work it out, it's based off canvasToLayer at the bottom of preview.js in the install directory. Not very helpful I know if you're not familiar with coding but this is the actual implementation of how the scaling and translation is worked out.

[code]layerProto.canvasToLayer = function (ptx, pty, getx)
          // Apply parallax
          var ox = (this.runtime.width / 2);
          var oy = (this.runtime.height / 2);
          var x = ((this.layout.scrollX - ox) * this.parallaxX) + ox;
          var y = ((this.layout.scrollY - oy) * this.parallaxY) + oy;
          // Move to top-left of visible area
          var invScale = 1 / this.getScale();
          x -= (this.runtime.width * invScale) / 2;
          y -= (this.runtime.height * invScale) / 2;
          x += ptx * invScale;
          y += pty * invScale;
          // Rotate about scroll center
          var a = this.getAngle();
          if (a !== 0)
               x -= this.layout.scrollX;
               y -= this.layout.scrollY;
               var cosa = Math.cos(a);
               var sina = Math.sin(a);
               var x_temp = (x * cosa) - (y * sina);
               y = (y * cosa) + (x * sina);
               x = x_temp;
               x += this.layout.scrollX;
               y += this.layout.scrollY;
          // Return point in layer coords
          return getx ? x : y;
Scirra Founder
Posts: 25,281
Reputation: 200,831

Post » Tue Jan 31, 2012 9:06 pm

Thanks Ashley- I just found that code last night ;)

I think there are two issues that keep throwing me off. First that scaling acts like scaling plus cropping ("no black bars") and secondly that parallax is not based on the top-left window position. Opening the C2 parallax example and changing the window size moves the background layer around which IMO should not happen.

What happens when you run in windowed mode and change the c2canvas.width/height setting during runtime ?
Posts: 73
Reputation: 2,647

Return to How do I....?

Who is online

Users browsing this forum: No registered users and 8 guests