Universalising Game with GameSalad (adapt for any device!)

ArmellineArmelline Member, PRO Posts: 4,936
edited June 11 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.



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.

Comments

  • ArmellineArmelline Member, PRO Posts: 4,936
    edited June 11

    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.


  • ArmellineArmelline Member, PRO Posts: 4,936

    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.

  • UltraLionBluUltraLionBlu Member, PRO Posts: 78

    Thanks a lot for sharing, they will be very useful, unfortunately I can't try them yet, but I can see the videos!

  • UltraLionBluUltraLionBlu Member, PRO Posts: 78

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

  • ArmellineArmelline Member, PRO Posts: 4,936
    edited June 11

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

  • UltraLionBluUltraLionBlu Member, PRO Posts: 78

    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

  • ArmellineArmelline Member, PRO Posts: 4,936
    edited June 11

    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.

  • BinnyBinny Seoul, KoreaMember, PRO Posts: 40

    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.

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

    @Armelline -- Thanks so much for sharing these templates plus videos. I intend to study them until I finally get it!

  • Braydon_SFXBraydon_SFX Member, Sous Chef, PRO, Bowlboy Sidekick Posts: 9,035

    Excellent stuff! You rock!

Sign In or Register to comment.