How does fullscreen scaling work ?

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

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

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • 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.

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

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