GameSalad

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

VIDEO & TEMPLATE - 5 Minute Universalisation with copy and paste and almost no effort. (Free!)

ArmellineArmelline Posts: 4,780Member, PRO
edited June 2016 in Community Tutorials

A regular topic on these forums is how to best universalise apps to support all devices - particularly the myriad of Android devices with their many screen sizes. There are two typical methods of doing this - using Overscan, and using Stretch.

This video gives a brief overview of both methods, and shows how to use the attached template to copy and paste the necessary logic into your own projects. It really is a 5 minute job to universalise many games!

Take a few minutes to watch the video, and then get universalising! (There's also more explanation after the video if you fancy reading it!)

The Overscan method, the golden oldie, the original go-to guy for universalising projects, cuts off the parts of the screen that are not common to all devices. This method was best explained by @Lovejoy, but has been a common method, in various forms, for most of GameSalad's existence. It results in a loss of screen space, though, when moving from iPads to most other devices.

The Stretch method, the new kid on the block, adds new screen space - different amounts depending on the device and its aspect ratio compared to the iPad. This method I learned about from @BBEnk, though I think others have explored it too. It has the benefit (or the curse!) of adding new screen space when moving from iPads to most other devices.

My method for both is similar to those I've linked, but is different in a few ways. Most notably, it relies on no constrain attributes for the Stretch method. A huge thanks to both, though, for sharing their great methods with the community - this template would not have been possible without their work.

I tested it pretty thoroughly, but please let me know of any issues you may encounter!

  • Armelline
«1

Comments

  • The_Gamesalad_GuruThe_Gamesalad_Guru Posts: 9,913Member

    This is a must needed video as we get this question a ton.

  • RThurmanRThurman Posts: 2,827Member, Sous Chef, PRO

    Very very helpful --
    Thanks for sharing this!

  • DuesDues Posts: 1,159Member

    Great post! @Armelline

  • GreenfroggGamesGreenfroggGames Posts: 224Member

    Cool stuff!

  • ArmellineArmelline Posts: 4,780Member, PRO
  • InovaTechInovaTech Posts: 161Member
    edited May 2016

    It was really helpful. thanks

  • SocksSocks London, UK.Posts: 12,822Member

    @Armelline said:
    A regular topic on these forums is how to best universalise apps to support all devices - particularly the myriad of Android devices with their many screen sizes. There are two typical methods of doing this - using Overscan, and using Stretch.

    Great method, great video too :)

    The second option you describe at 1:05 onwards as 'stretch' is actually letterbox ?

  • ArmellineArmelline Posts: 4,780Member, PRO
    edited May 2016

    @Socks said:
    The second option you describe at 1:05 onwards as 'stretch' is actually letterbox ?

    No, it's stretch. It doesn't add bars, it adds more screen space.

    Apple will reject letterbox, so it's essentially pointless.

  • SocksSocks London, UK.Posts: 12,822Member

    @Armelline said:

    @Socks said:
    The second option you describe at 1:05 onwards as 'stretch' is actually letterbox ?

    No, it's stretch. It doesn't add bars, it adds more screen space.

    If you were to use stretch on an iPad project, to fit it to a 16:9 screen, there would be no space added as such, it would simply be distorted to fit the 16:9 shape, in your example the iPad area is shrunk such that its the same height as the smaller 16:9 area, and its edges move inwards . . . but this wouldn't happen with stretch, instead the scene would completely fill the screen with nothing lost or gained . . . for example if on the iPad original we have 1, 2, 3, 4 right in the corners, when stretched to the 16:9 iPhone shape/size those numbers would still be in the corners . . . hope that makes sense !!

  • SocksSocks London, UK.Posts: 12,822Member
    edited May 2016

    // double post

  • SocksSocks London, UK.Posts: 12,822Member

    P.S . . . . quick sketches of Letterbox, Stretch and Overscan as I understand them . . .




    4-3.jpg 60.2K
  • ArmellineArmelline Posts: 4,780Member, PRO
    edited May 2016

    @Socks Using stretch like this method doesn't simply stretch the scene, it doesn't distort the images - it resizes the camera too. If you used an image exactly the size of the iPad screen, you'd end up with black bars on the sides. But if you had an image wider than an iPad screen, those black bars would show the sides of the image that weren't visible on an iPad.

    Try the project out!

  • SocksSocks London, UK.Posts: 12,822Member

    @Armelline said:
    @Socks Using stretch like this method doesn't simply stretch the scene, it doesn't distort the images - it resizes the camera too. If you used an image exactly the size of the iPad screen, you'd end up with black bars on the sides. But if you had an image wider than an iPad screen, those black bars would show the sides of the image that weren't visible on an iPad.

    Ah! I see now, yes that makes sense, I wasn't aware of your camera trickery !! Just going by the video it looks like the Landscape iPad scene is scaled down so that the sides meet the 16:9 area (overscan) - and then later scaled down so that the top/bottom meets the 16:9 area (letterbox), but I wasn't aware you were also doing some camera magic, but it all makes sense now !! :)

    @Armelline said:
    Try the project out!

    Unfortuntely I'm GameSaladless (not an actual word) at the moment, but when I'm back up and running I'll check it out.

  • ArmellineArmelline Posts: 4,780Member, PRO

    @Socks said:
    Ah! I see now, yes that makes sense, I wasn't aware of your camera trickery !! Just going by the video it looks like the Landscape iPad scene is scaled down so that the sides meet the 16:9 area (overscan) - and then later scaled down so that the top/bottom meets the 16:9 area (letterbox), but I wasn't aware you were also doing some camera magic, but it all makes sense now !! :)

    I thought it best not to go into the use of stretch to just... stretch, or letterbox, as both of those are ill advised and most new users don't ever need to worry about them :D

  • BBEnkBBEnk Posts: 1,764Member

    @Armelline

    Yea Universal is always a topic on here so good job, just a note you said in video about me using constrains there only used once on first scene/intro not on every scene, and the only reason I even used constrains then was because Android was not reading code on the first few frames so constrains made sure they got executed. I assume that bug has been fixed not tested myself.

  • ArmellineArmelline Posts: 4,780Member, PRO

    @BBEnk said:
    I assume that bug has been fixed not tested myself.

    Not fixed, I didn't remove the constrains so much as put them in a rule so they don't need to be constantly monitored.

  • Bowhill GamesBowhill Games Posts: 191Member

    @Armelline thanks for this iv been looking for a good universal build tutorial for ages as I develop for both android and iPhone, with the stretch method you describe will every actor in the scene need to have the rule of only ui elements?

    I don't want my character to distort based of device used.

    Thanks

    (site currently under construction)
  • ArmellineArmelline Posts: 4,780Member, PRO
    edited June 2016

    @Bowhill Games - None of the actors will be distorted, and you only need to put logic in the individual actors if their position is tide to one of the edges. Using stretch adds more space to the sides (or top/bottom, if you're using portrait) of the screen so if something needs to be on one of the edges, it'll need the logic. Anything that doesn't matter where it is, no logic is needed. So most likely just UI elements, but there are some cases in some games where it'll need to be in others too. And not even all UI elements.

  • Bowhill GamesBowhill Games Posts: 191Member

    @Armelline thanks for the info this has really helped a lot

    (site currently under construction)
  • IceboxIcebox Posts: 1,483Member

    Hey @Armelline , first thanks for this great template , i have a problem with the stretch method , in your landscape template ( stretch scene ) if you set the layer to unscrollable , all the rabbit actors will move to the left.

    Example of what i mean

    In my game it doesnt work at all even if it was scrollable, the actors will always move to the left.

  • ArmellineArmelline Posts: 4,780Member, PRO

    @Icebox It's to do with the camera moving to accommodate the stretch mode offset. When we stretch the camera, we stretch it out, meaning all the extra space is on the right. To even things up, we move the camera to the left a bit. For scrollable layers, stuff will still end up in the middle. For non-scrollable layers, though, they'll ignore the camera movement. This means when we move them, they're out of place. What you need to do is to add the camera movement offset to the non-scrollable layer. Like this:

    The formula can actually be simplified down a fair bit, but showing it this way most clearly demonstrates the change that needs to happen, I think.

    You have drawn my attention to an oversight in the template, though (the way it uses height rather than width in that formula!), which I'll fix, and I'll have a think about the best way to offer non-scrollable layer support without overcomplicating things.

  • ArmellineArmelline Posts: 4,780Member, PRO

    Here's the simplified version:

    Ultimately, on non-scrollable layers, only stuff on the right needs to move. The stuff on the left will still hug the left side. The stuff on the right, however, will need to move twice as far - as it needs to move the whole amount the camera width was increased by. The rule (self.Position.X > game.Display Size.Width/2) is only needed in actors that are found on both the left and the right. Actors on the left need no adjustment logic, and actors only found on the right don't need that rule as they'll definitely have to move.

  • GreenfroggGamesGreenfroggGames Posts: 224Member

    @Armelline Great template! Let's say your template is a game and I'm using stretch in landscape. When the bunny in the bottom-left corner is pressed change it's self.position x to 40. What formula do I need for this to look the same on all devices?

  • ArmellineArmelline Posts: 4,780Member, PRO

    @GreenfroggGames said:
    @Armelline Great template! Let's say your template is a game and I'm using stretch in landscape. When the bunny in the bottom-left corner is pressed change it's self.position x to 40. What formula do I need for this to look the same on all devices?

    In your case I'd probably avoid offsetting the camera, keeping the left edge of the screen at 0. Then you put no repositioning logic in the left bunnies, and use the same logic in the right ones that I put above. This avoids having to deal with the moving of the camera usually done.

  • GreenfroggGamesGreenfroggGames Posts: 224Member

    @Armelline If I want to move the bottom-right bunny the same way as the left one (toward center of the scene). Will that still work?

  • ArmellineArmelline Posts: 4,780Member, PRO

    @GreenfroggGames said:
    @Armelline If I want to move the bottom-right bunny the same way as the left one (toward center of the scene). Will that still work?

    I'm afraid you've lost me now. Perhaps show how you're wanting it to work prior to universalising?

  • IceboxIcebox Posts: 1,483Member

    Thanks for the quick reply armelline ill test it as soon as i go back home

  • GreenfroggGamesGreenfroggGames Posts: 224Member
    edited June 2016

    @Armelline Yeah sorry about the bad explanation :) forget that question. I have a game with dual joysticks, one in each bottom corner. How do I add the offset when stretched?

  • ArmellineArmelline Posts: 4,780Member, PRO

    @GreenfroggGames said:
    @Armelline Yeah sorry about the bad explanation :) forget that question. I have a game with dual joysticks, one in each bottom corner. How do I add the offset when stretched?

    Are the joysticks on a scrollable or non-scrollable layer? If scrollable, just use the template. If non-scrollable, see my reply to @Icebox.

  • GreenfroggGamesGreenfroggGames Posts: 224Member

    @Armelline Ok, I'll try when I'm back home. Maybe I messed up somewhere, when I grab the stick it jumps about 50pixels to the right. Thanks for the help :) Need to check the code later tonight

Sign In or Register to comment.