Met hyperPad kun je jouw project maken voor meerdere apparaten en schermformaten. Wanneer het gaat om het ondersteunen van verschillende apparaten, zijn er twee soorten projecten: apparaat-specifieke projecten en universele projecten.

Apparaat-specifieke projecten: Maak een aparte versie van jouw project voor elk platform dat je wilt ondersteunen. Wanneer je jouw project aanmaakt, geef je een enkel apparaat op voor jouw project. Bijvoorbeeld, als je alleen een iPad-spel wilt maken, selecteer dan ENKEL iPad (4:3) wanneer je jouw project aanmaakt.

Universele projecten: Ondersteun meerdere apparaten met één project. Wanneer je jouw project aanmaakt, selecteer meer dan één doelapparaat. Dit betekent dat hetzelfde project zowel op iPhone als op iPad kan werken zonder dat je twee aparte versies hoeft te hebben.

Er zijn voor- en nadelen voor beide benaderingen. Voor projecten die volledige controle over het scherm vereisen, en wat je te allen tijde zichtbaar wilt maken, kan een apparaat-specifieke benadering voordelig zijn. Dit gaat echter ten koste van de noodzaak om jouw game/project opnieuw te creëren voor elk nieuw platform.

Het voordeel van universele projecten is dat je jouw game of app maar één keer hoeft te maken. Echter, je hebt minder controle over wat er op het scherm verschijnt. Bijvoorbeeld, op een breder apparaat kun je meer content zien die anders niet opgemerkt zou worden. hyperPad biedt wel enkele tools en gedragingen om bepaalde elementen te controleren, maar soms heb je gewoon totale controle nodig en maakt een apparaat-specifiek project meer zin.

Dit artikel behandelt voornamelijk universele projecten, omdat je te maken hebt met meerdere beeldverhoudingen en apparaten. Voor apparaat-specifieke projecten is het zo eenvoudig als ervoor zorgen dat jouw content past in het groene gebied op de canvas.

Een universeel project aanmaken

Wanneer je een nieuw project aanmaakt, word je gevraagd de apparaten te selecteren die je wilt ondersteunen. Standaard is alleen de iPad (4:3) geselecteerd. Je kunt op de andere apparaten tikken om ondersteuning voor hen in te schakelen. Als je meer dan één apparaat selecteert, wordt jouw project beschouwd als een "universaal project".

Cycling Devices

Wanneer je meerdere apparaten selecteert om te ondersteunen, betekent dit dat je ervoor moet zorgen dat de content van jouw project op elk apparaat/aspectratio past.

Het groene rechthoekige gebied op de canvas is de zichtbare schermruimte. Alles wat binnen de zichtbare schermruimte is geplaatst, zal zichtbaar zijn wanneer jouw project wordt uitgevoerd. Houd er rekening mee dat elk apparaat dat je hebt ingeschakeld bij het aanmaken van het project zijn eigen zichtbare schermruimte heeft.

Om ervoor te zorgen dat jouw content binnen de zichtbare schermruimte voor elk gebied past, tik je op het Cycle Device pictogram op de toolpalette.

Vergeet niet dat sommige apparaten zoals de iPhone meerdere schermformaten en beeldverhoudingen hebben. Als je een project ontwikkelt voor deze apparaten en een oudere versie van iOS wilt ondersteunen, moet je ervoor zorgen dat jouw content werkt op elke versie van dat apparaat. Dus als je iPhone selecteert, moet je ervoor zorgen dat jouw content binnen de schermruimte van de iPhone 4 (3:2) past, en de schermruimte van de iPhone 5, 6, 6+ (16:9).

Jouw project ontwerpen voor meerdere apparaten

Typisch, wanneer je een game of app ontwikkelt, wil je vermijden alles opnieuw te doen voor elk project. Met universele projecten kun je slimme ontwerpen gebruiken om de hoeveelheid werk die je opnieuw moet doen te minimaliseren.

hyperPad heeft alle schermformaten die beginnen vanuit de linksonderhoek, en dan omhoog en naar rechts schalen voor grotere apparaten. Als je dit in gedachten houdt, kunnen veel games maar één keer worden gemaakt.

Bij het ontwerpen van jouw scène, ontwerp zodat jouw belangrijkste content binnen het kleinste apparaat past, en jouw achtergrond zodat deze de grootste past. Wanneer je jouw project aanmaakt, is de grootste maat gemarkeerd als de "Ontwerp Resolutie". Door dit te doen, zien veel projecten er automatisch geweldig uit op alle apparaten.

Bijvoorbeeld, je wilt een platformspel maken dat werkt op zowel iPhone als iPad. Je kunt het hoofdniveau (grondobstakels, enz.) ontwerpen zodat het binnen het kleinste iPhone-scherm (16:9 beeldverhouding) past, en dan jouw achtergrond zoveel mogelijk laten passen bij het grootste apparaat (iPad). Op de kleinste iPhone verschijnt het spel precies zoals je het hebt ontworpen. Voor de grotere apparaten (iPad 4:3, of Desktop 16:10), zal het spel meer verticale content aan de bovenkant weergeven. Aangezien je jouw achtergrond hebt laten passen bij de grootste maat, is er altijd iets zichtbaar en heb je geen lege zwarte ruimte.

Bij het cyclen door de verschillende apparaten, merk op dat de zichtbare schermruimte in breedte niet verandert. hyperPad gebruikt een aangepaste resolutie om de breedtes consistent te houden over alle apparaten. Alleen de hoogte verandert, waardoor meer of minder content verticaal zichtbaar is.

Hieronder bevindt zich een tabel die de verschillende apparaat beeldverhoudingen en resoluties vertegenwoordigt.

Beeldverhoudingen	Pictogram	Apparaten	Ontwerp Resolutie
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 plus, iPhone 6S. iPhone 6S Plus, iPod 5e generatie, iPod 6e generatie	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4e generatie	2046 px x 1364 px
16:10		Desktop computers	2048 px x 1280 px

Een opmerking over de oudere iPhones (3GS, iPhone 4, 4S en iPod 4e generatie): Deze apparaten gebruiken een 3:2 beeldverhouding. Om de breedte van alle apparaten consistent te houden, is de zichtbare schermruimte voor 3:2 apparaten eigenlijk hoger dan die van de fysiek grotere iPhone 5, 6+ (16:9) apparaten. Als je wilt ontwikkelen voor de iPhone, en iOS 9 en lager wilt ondersteunen, MOET je er ook voor zorgen dat jouw project binnen de 3:2 schermruimte past.

Als je alleen iOS10 en nieuwer wilt ondersteunen, hoef je je geen zorgen te maken over jouw content die binnen de 3:2 schermruimte past.

Assets importeren

hyperPad schaalt jouw project automatisch zodat het er op alle apparaten geweldig uitziet. Om ervoor te zorgen dat jouw project er op alle apparaten geweldig uitziet, moet je altijd jouw afbeeldingen importeren zodat ze binnen de Ontwerp Resolutie passen. De Ontwerp Resolutie wordt gegeven in retina, dus wanneer je afbeeldingen importeert, wordt er automatisch een non-retina afbeelding voor je aangemaakt.

Bijvoorbeeld, als je een afbeelding van 512x512 pixels importeert, wordt er een afbeelding van 256x256 pixels voor je aangemaakt.

Houd ook in gedachten dat de ontwerpresolutie in pixels wordt gemeten. Op het daadwerkelijke apparaat wordt alles gemeten in punten. Dit betekent dat 2048x1536 pixels eigenlijk 1024x768 punten is (op een retina-apparaat).

Absolute en relatieve positie

Er zijn twee manieren om objecten in hyperPad te positioneren. Absolute, en Relatieve. Absolute posities plaatsen een object op een specifieke pixel locatie op de canvas en worden gemeten in meters. Relatieve posities plaatsen jouw object op basis van het percentage van de zichtbare schermruimte.

Met absolute posities kunnen jouw objecten buiten het scherm verschijnen voor kleinere apparaten. Dit gebeurt omdat het coördinatensysteem niet verandert op basis van elk apparaat (1 meter is hetzelfde op een iPhone, iPad, en wat er ook is).

Met relatieve posities verschijnt jouw object in dezelfde relatieve positie, ongeacht welk apparaat. Dus als je jouw object in het midden van jouw scherm plaatst, zal het in het midden blijven voor de iPhone, iPad, en elk groter apparaat zoals een tv of computer.

Standaard gebruikt elk object dat je op reguliere lagen plaatst absolute posities, en alles dat op de UI lagen is geplaatst, is ingesteld op procentuele posities. Op deze manier hoef je je geen zorgen te maken dat jouw knoppen, gezondheidsbalken of joysticks buiten beeld zijn voor elk apparaat.

In de gif hieronder kun je het effect van relatieve posities zien. De "Tik"-borden en de hand gebruiken relatieve posities en blijven altijd in het midden voor elk apparaat.

Om het positioneringstype van jouw object te wijzigen, selecteer je jouw object en ga je naar de Objecteigenschappen, schakel over naar de Transformeer Tab en tik op het "%"-icoon op het positieveld. Dit zal jouw huidige positie omzetten in een percentage van het scherm.

Als je door jouw ondersteunde apparaten cycled vanuit de toolpalette, kun je zien dat jouw relatieve objecten binnen de zichtbare schermruimte blijven.

Om een object volledig gecentreerd te houden, moeten de X- en Y-posities op 50% staan.

Aangepaste acties op basis van schermgrootte

Soms wil je dat jouw project er iets anders uitziet en aanvoelt voor elk apparaat. Bijvoorbeeld, je wilt een knop alleen beschikbaar maken op de iPad en niet op de iPhone.

Hiervoor kun je de "Get Screen" gedrag gebruiken om de grootte van het huidige scherm te bepalen, en met een IF-gedrag de knop op de iPhone verbergen.

In het bovenstaande voorbeeld zou je Get Screen gebruiken, en vervolgens de Beeldverhouding naar een IF-gedrag uitvoer, dat controleert of het een iPhone is (16:9).

Gebruik vervolgens het verberg grafisch gedrag om de knop te verbergen als de schermgrootte 16:9 is.

Meerdere schermformaten en apparaten