Tweak to "Scale To Fit (Fill)" mode

GuyCockcroft

  • Posts: 193
I was wondering if it were possible to add a bit of code (perhaps in a code block) that modifies the behaviour of the Scale to Fit (Fill) mode. My game is in portrait mode and has space at the bottom of the screen that is basically expendable. The aspect ratio of the screen must be kept though. The Scale to Fit (Fill) mode seems to be the one I need because it stretches the shortest side of the game screen across until it reaches the edge of the actual screen. But, it is centred around the middle of the screen so that I lose a little off the top and bottom of the game whereas I need it to be centred around the top of the screen so that I lose only the lower part of the game screen. I hope that makes sense and that somebody can help me out!

thanks

letmethink

  • *
  • Posts: 2545
Try putting this in a code block
Code: [Select]
Engine.root.y = 0Does that help?
~Letmethink

GuyCockcroft

  • Posts: 193
Hi. Thanks for your quick response. I put that code snippet in a code block that runs on the first scene of my game, but I get a compile error:

Preloader_Behaviour: Missing ;
   from scripts.Design_321_321_PreloaderBehaviour
   line: 87
   columns: 18-19
Preloader_Behaviour: Class<com.stencyl.Engine> has no field root
   from scripts.Design_321_321_PreloaderBehaviour
   line: 87
   columns: 2-13

Adding the ; to the end of the line gets rid of the first error, but the second one remains.


GuyCockcroft

  • Posts: 193
That works perfectly! Thankyou both very much.

GuyCockcroft

  • Posts: 193
Actually, on further testing, it looks like there is in fact an issue with this method. It seems as though the coordinates of an on-screen tap get messed up. So, if I want to tap a button, I now have to tap slightly above it. So, it's as though the co-ordinates of the tap have not been moved along with the graphics. Everything else seems ok though.

Also, is it possible to change scale modes at runtime? I noticed that this seems to get set in MyAssets.hx. I've tried adding a code block that does this:

scripts.MyAssets.scaleToFit1 = false;
scripts.MyAssets.scaleToFit2 = false;
scripts.MyAssets.scaleToFit3 = true;
scripts.MyAssets.stretchToFit = false;

but this doesn't seem to do anything. I need to do this because the Scale to Fit (Fullscreen) mode is the one I need for most devices, but I need this small tweak to Scale to Fit (Fill) for others.

Alternatively, is there a way to change the behaviour of the Scale To Fit (Fullscreen) mode so that the shortest edge is stretched out to the side of the screen, rather than the longest edge.

« Last Edit: April 30, 2016, 11:02:06 am by GuyCockcroft »

letmethink

  • *
  • Posts: 2545
After you change those values, use Engine.engine.toggleFullScreen(true); I think works.
~Letmethink

GuyCockcroft

  • Posts: 193
With that line included, I get a compile error:
 com.stencyl.Engine has no field toggleFullScreen

Even if this worked, though, I'd still be left with the problem whereby the touch input is being read from the wrong co-ordinates (see above). What I really need is for the Scale to Fit (Full screen) mode to work by stretching the smallest edge of the game to the edge of the screen (rather than scaling the largest edge). Is this possible with a code block?

thanks

letmethink

  • *
  • Posts: 2545
After you change those values, use Engine.engine.toggleFullScreen(true); I think works.
Almost got it right. This one is actually more difficult than expected since there is no built in way to force full screen being on. (This could be added reasonably easily so I may do).

I think to sort out the touch input you can run:
Code: [Select]
Engine.screenOffsetX = 0; Engine.screenOffsetY = 0;
I still don't understand what you are trying to say about the changes in the scale mode. Can you express this visually?
~Letmethink

GuyCockcroft

  • Posts: 193
Sorry for the confusion. My game is in portrait mode and is designed at 320x480 (3:4 ratio). I need to keep the aspect ratio the same on all devices as the game's main area has to be a square.

Diagram 1 shows the black edge of the iPad screen with the game's screen outline showing in green. It stretches the longest dimension to the bottom edge of the iPad screen, but because the iPad screen dimensions are a little wider and shorter than the standard 3:4 ratio, it leaves black space to the right. What I'd like is for there to be an option so that the shortest edge gets stretched to the edge of the screen - as in diagram 2. The game's background will disappear off the bottom of the screen, but for me, this is not an issue.

letmethink

  • *
  • Posts: 2545
Is that not what Scale to fit (fill) does? Obviously it balances the sides for the offset, but I think we've worked out how to overcome that.
~Letmethink

GuyCockcroft

  • Posts: 193
Well, I can now achieve what I need (on iPad) with those code blocks you have given me (oh, and the touch input is fixed with the addition of that other line of code - thanks!). The game is now stretched across the screen (in portrait), keeping the aspect ratio, and losing some of the graphics off the bottom. All good.

On iPhones with a taller screen, though, the engine appears to be stretching the game downwards until it meets the edge of the screen, which results in the left and right edges of the game going off the sides of the screen. So, maybe it scales the graphics differently, based on the screen's aspect ratio?

rob1221

  • *
  • Posts: 9472
Scale to fit (fill) scales the game proportionally until the entire device screen is included.

GuyCockcroft

  • Posts: 193
Using that mode will result in the sides being lost on iphone5/6, but not on iPad. What I need is to base the scaling only on the width of the game screen, and simply allow some of the graphics to poke off the bottom of the screen on wider, shorter devices (i.e. iPad).

rob1221

  • *
  • Posts: 9472
Scale to fit (full screen) would do that, but you can't use multiple scaling modes.