Universalising Game with GameSalad (adapt for any device!)
Universalising Games with GameSalad
Templates for (almost) every occasion!
"How do I make my game look right on other devices?" is a common question on these forums. GameSalad offers limited help with this - you can letterbox your game and get rejected by Apple, you can ocerscan (crop) it and lose some of the visible game, or you can stretch it and everything looks distorted and ugly.
What GameSalad intend, though, is for you to only use these options as a starting point. If you crop your game, you're expected to move your interface and game elements around to compensate for the lost space. If you stretch it, you're expected to adjust the camera to compensate. Unfortunately GameSalad don't give much help doing this, so I've thrown together a series of templates and videos that walk you through what's happening, what you need to consider, and how you can adapt your game to work beautifully on any device.
We call this process "Universalising" - making your game work "universally." The aim of these templates is to allow you to copy and paste the necessary code from them templates into your own project.
A pack of all the templates is attached and linked at the end if you just want to grab everything.
Overview
I recommend starting with this overview video. It talks about the different options you have when adapting your game for different device sizes. It looks—very broadly—at what will happen if you properly use the Overscan (crop) and Stretch options. If you're making your first game, this is well worth a watch, even if you're not at the point in the process where you're actually trying to universalise it. It'll help you to know what parts of the screen will be safe to use, or will be common to different devices.
Landscape
If your game is landscape, you're going to want one of these templates.
Starting with an iPhone/720p aspect ratio
Non-X iPhones (i.e. 6,7,8,11) are the same aspect ratio as 720p, so the templates should work great regardless of which you started your project with. If you started your project as an iPhone 5 game, that's the same aspect ratio too so you'll be able to just copy and paste the logic from one of these templates into your game.
Grab the templates here, or here, or attached just below.
I've done videos that look in detail at two of these templates so far. One for 720p/iPhone landscape stretch and one for overscan.
This video focuses on the stretch template.
This video focuses on the overscan template.
Starting with an iPad aspect ratio
If your game is primarily going to be an iPad game, you probably want to start with an iPad as your default device size. If that's the case, and you want to adapt it to work with phones too (with it perfectly fitting the iPads being most important) then you'll want to grab one of these templates.
When using overscan, the iPad starting point actually gives you two options, which I discuss in the overview video. You can either crop it hard for iPhone, cutting off damn near half the scene, or you can do some cropping and some stretching. This template crops all iPhones to the same height, and then stretches the scene to add extra space on the iPhone X aspect ratio phones, rather than cropping even more off for those devices. This gives a good middle-ground.
Grab the templates here, or here, or atttached just below.
I'll eventually get around to doing videos for the iPad, particularly the crop one, but the principles are mostly the same as for the 720p, so watching the videos for those will give you a good idea of how they work.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Comments
Portrait
If your game is portrait, you're going to want one of these templates.
Starting with a MacBook/iPhone aspect ratio
There is no option to start a portrait 720p project (no idea why) so I used MacBook for this one. The aspect ratio is slightly different for MacBooks than for 720p and iPhones, but it's no problem, the template includes logic that adapts nicely. If your game is portrait and you chose any of the iPhone options as your starting project size, you'll want one of these templates.
I'll make one of these templates the focus of my next video, but it took me 3 weeks to do 3 videos so I figured there's no point sitting on these templates while I wait to get around to them.
Grab the templates here, or here, or attached just below.
Starting with an iPad aspect ratio
As with the landscape templates, these offer a mixed crop & stretch result for iPhone X aspect ratio devices, rather than straight, brutal cropping. As above, you want to pick this if your game is primarily an iPad game that you want to adapt to phones, rather than a phone game you want to adapt to iPads. In the past it was recommended to start your project as an iPad project and crop it down for phones, whatever your main target was. Now I recommend you only start an iPad project if your main target is iPad.
Grab the templates here, or here, or attached just below.
Get Personalised Help
I'm available for hire if you need help adapting your game or using these templates. I'll be happy to answer any questions I can in this thread, but if you download the template, poke around it, watch the videos, and still don't know what to do in order to adapt your game, you're probably going to need more help than I can give in this thread. Contact me for a personal consulation - but please keep in mind one-on-one help involves hiring me for either a fixed cost or my hourly rate.
Contact me any time at:
support@armelline.com
Or via Skype at:
armelline.support
Just Gimme Them All!
Sure thing! Get the whole lot here, here, or attached just below.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Please let me know if I accidentally linked to the wrong templates anywhere! I uploaded to Dropbox, Mega and the forums themselves, so hopefully these will be accessible for a good while. If any issues are found in the templates themselves, I'll update the templates and then update the links.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Thanks a lot for sharing, they will be very useful, unfortunately I can't try them yet, but I can see the videos!
"I'll eventually get around to doing videos for the iPad, particularly the crop "
Would it be interesting, in case you always post it in this discussion?
@UltraLionBlu The iPad starting project with overscan being used actually does things the other templates don't, so I'll update this post with a video when I can get it recorded. The overview video explains what the differences are in broad terms. After that I'm not certain if I'll do more videos or not, as the rest are essentially the same as the two above.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
I understand, I'm still undecided whether to start from ipad or ipone using stretch. I wish the game can be used on both formats.
Maybe starting from ipad there are 2 advantages
1 the graphics are compressed when viewed on a smartphone and do not lose quality, while starting from the iphone it must be enlarged and may lose quality
2 if you wanted to create an .exe file to play from a pc it would be a larger format
Still great job
What you're wanting there isn't really possible with GameSalad, and doesn't really need to be. The amount of distortion to the graphics due to upscaling or downscaling is going to be minor. If you start with iPhone or iPad should really depend on what your primarily targetted device will be. If it's iPad, start with iPad. If it's pretty much anything else, you probably want to start with iPhone. It's mostly a matter of which size you want to be working with in Creator.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Great template!! Even now, I'm customizing the old template of Aemelline to suit my game.
I should download it and see it soon. Thanks a lot.
@Armelline -- Thanks so much for sharing these templates plus videos. I intend to study them until I finally get it!
Excellent stuff! You rock!
My GameSalad Academy Courses! ◦ Check out my quality templates! ◦ Add me on Skype: braydon_sfx
Thanks! Hope this helps a few people.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
it's not working for me.
I created new project and put actors in the corners and add the code to them.
also I created the Universaliser actor as you did.. but when I run everything its not changing the positions like in your project.
this is the project (the code is just inside the top two on the screen.. there something I'm missing here?
thanks[=
The Universal actor needs to be at the BOTTOM of the layer list. GameSalad checks actors starting with the bottom of the layer list and working its way up, so the universal actor needs to be the first one it checks. Otherwise the actors don't know how much to move by, as the universal actor hasn't had a chance to do its thing yet.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
It's definitely helping me.
I LOVE YOU BRO!
It's working!! Thank you sooooo much! now I can finish my game!!
Happy to help!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
I'm going to bump this as it's still often needed.
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
this type of stuff should be pinned, unless gs gets tweaked to have a universally adjusted hud layer/canvas.
Hello @Armelline - I just got started within GameSalad and this tutorial helped me a lot. Thank you very much for took your time to share it. It's actually awesome! 🤩
Happy to help, @realmeidabr!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Great template!! Even now, I'm customizing the old template of Aemelline to suit my game.
Thanks so much for sharing these templates plus videos.
https://get-vidmateapp.com/home/
https://get-mobdroapk.com
Is the universalising template no longer working? I’m on 1.25.103 and for the life of me I can’t figure out why all my boxes stretch when in overscan mode. Plus, they no longer adapt to the screen resolution.
I’ve used your solution for years @Armelline but is it no longer working? Little point starting a project if GS can no longer properly adapt to screen sizes.
Either that or I’m going crazy. Fresh project, all code copied, yet it doesn’t seem to work. Some help would be much appreciated!!
Which of my solutions are you using? I had one from the pre-iPhone X days that probably doesn't work any more, but the more recent one from this thread I did should be working fine still. Though I haven't tested the overscan one in months, the stretch ones definitely still work fine.
Also be sure to:
* Check you're using the templates from this thread, not my owns for a couple of years before (which probably don't work any more)
* Put the Universalising actor at the BOTTOM of the layer list
* Test with TestFlight/apk on device to be sure as GS preview can be a little unreliable
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support
Gamesalad Viewer is definitely not a good representation of the final product when it comes to universalizing. You need to get it on a device properly to ensure everything works as it should. I spent days trying to make things work through the Viewer and just kept getting more and more pissed off!
Just figured it out - was using your MacBook universal template for iPhones. I think overscan is broken on .103 so I tried .104 and it worked wonders. Now it resizes! Thanks Armelline.
And noted @The Glessnerd, the viewer is ass plain and simple. Was working on a semi-big project last year and nothing was working - then realised it was just GS being GS. Lol.
These templates are no longer reliable on all Android devices. I'll do some updated ones asap!
Contact me for custom work - Expert GS developer with 15 years of GS experience - Skype: armelline.support