Universalising Game with GameSalad (adapt for any device!)

ArmellineArmelline Member, PRO Posts: 5,354
edited June 2020 in Working with GS (Mac)

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.


https://youtu.be/v5qa9s3rvpg


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.


https://youtu.be/w7Tt03X5N5I


This video focuses on the overscan template.

https://youtu.be/8xQa3DJMok4


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

Sign In or Register to comment.

© Vanilla Keystone Theme 2024