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

Armelline

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

The_Gamesalad_Guru

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

RThurman

Very very helpful --
Thanks for sharing this!

Dues

Great post! @Armelline

GreenfroggGames

Cool stuff!

Armelline

Thanks!

InovaTech

It was really helpful. thanks

Socks

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

Armelline

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

Socks

@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 !!

Socks

// double post

Socks

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

Armelline

@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!

Socks

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

Armelline

@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

BBEnk

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

Armelline

@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 Games

@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

Armelline

@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 Games

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

Icebox

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.

Armelline

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

Armelline

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.

GreenfroggGames

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

Armelline

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

GreenfroggGames

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

Armelline

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

Icebox

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

GreenfroggGames

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

Armelline

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

GreenfroggGames

@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