Universalising Game with GameSalad (adapt for any device!)
Templates for (almost) every occasion!
"How do I make my game look right on other devices?" is a common question for game developers. GameSalad offers limited help with this - you can letterbox your game and get rejected by Apple, you can overscan (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.
Section 1: 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.
Section 2: Landscape
If your game is landscape, you're going to want one of these templates. Which you use depends on what aspect ratio you started your game with.
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.
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.
Download the 720p landscape templates
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:
Download the iPad landscape templates
I haven't done videos for iPad or portrait yet, but the same principles apply. Here are the templates for portrait.
Starting with an iPhone/720p aspect ratio:
Download the iPhone/720p portrait templates
Starting with an iPad aspect ratio:
Download the iPad portrait templates
Section 3: Template Bundle!
And finally a bundle of ALL the templates:
Download the templates bundle
Section 4: HELP!
Don't forget, if you need help getting your project universalised, just get in touch and I'll be happy to give you a quote tailored to your specific project!