Multiple screen sizing for all mobile devices

3

Index

Tagged

Stats

4,679 visits, 6,091 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 26 Sep, 2014. Last updated 25 Feb, 2019

Ongeveer zes maanden geleden kreeg ik een idee voor een (mobiele) App. Ik heb ervaring met met meer dan tien programmeertalen maar op het gebied van Apps was ik een leek. Na het lezen van ontelbare artikelen en reviews op het wereldwijde web kwam ik er achter dat een App gemaakt met Construct 2 de makkelijkste manier was om mijn doel te bereiken. Ik was met Construct 2 niet gebonden aan één platform maar kon voor zowel iOS, Android en het www (HTML5) met één programma werken. John Bura's artikel had me overtuigd om voor Construct 2 te kiezen en niet voor GameMaker, GameSalad of Stencyl...

Na een korte leerperiode heb ik de basis voor Slappy Feet in drie of vier dagen geschreven. Er was echter één reden waarom ik wachtte met publicatie. Ik wou met twee varianten (gratis en betaald) de hele markt bedienen en één versie gebruiken voor zowel iOS, Android als HTML5. Om dit te bewerkstelligen had ik een elegante oplossing nodig om voor verschillende resoluties slechts één App te schrijven. Ashley's tutorial -Supporting multiple screen sizes- gaf me wel het inzicht maar helaas geen oplossing voor dit probleem...

Ik was op YouTube naar iets heel anders aan het kijken toen ik toevallig een filmpje van Ed Farias tegenkwam die de oplossing bood. Het filmpje heet Construct 2 - Screen Resolution en is deel 1 van een cursus Construct 2 Mobile Monetization waar leken zoals ik leren hoe ze geld met hun Construct 2 App kunnen verdienen. Het grootste deel van de cursus was mij al bekend maar omdat het maar $29 kost ($24 als je de link van YouTube volgt) besloot ik de cursus te volgen. Ik kan alle beginners aanraden om deze cursus te volgen, het zet alle noodzakelijke stappen die je moet zetten op een rij. Bedankt Ed!

Waarom een tutorial schrijven als de oplossing op YouTube staat vraag je je misschien af. Om te beginnen wil ik de opgedane kennis delen met jullie en heb ik wat aanpassingen gedaan die het voor veel spelletjes wat simpeler maakt. Door de aanpassingen is één van de dimensies (de hoogte) overbodig geworden waardoor het geheel wat simpeler is. Met een variabele breedte en Ed's "Safe Zone" wordt je spel perfect geschaald (getest) naar alle mobiele apparaten. Om dit te begrijpen moet ik in het kort iets uitleggen over de Aspect Ratio's van mobiele apparaten...

Eigenlijk zijn er (op het moment van schrijven) maar 5 Aspect Ratio's voor mobiele apparaten. Er zijn drie iOS en vijf Android Aspect Ratio's. Doordat sommigen door zowel iOS als Android worden gebruikt blijven er maar 5 over:

3:2 of 2:3 --- iOs en Android

4:3 of 3:4 --- iOs en Android

5:3 of 3:5 --- Android

16:9 of 9:16 --- Android

16:10 of 10:16 --- Android

Aangezien Slappy Feet gebruikt maakt van de portret modus gebruik ik in het vervolg van de tutorial de vette Aspect Ratio´s...

  • 0 Comments

Want to leave a comment? Login or Register an account!