Flere skærmstørrelser og enheder

Med hyperPad kan du skabe dit projekt til flere enheder og skærmstørrelser. Når det kommer til at understøtte forskellige enheder, er der to typer projekter: Enhedsspecifikke projekter og Universelle projekter.

Enhedsspecifikke Projekter: Opret en særskilt version af dit projekt for hver platform, du ønsker at støtte. Når du opretter dit projekt, angiver du en enkelt enhed til dit projekt. For eksempel, hvis du kun ønsker at lave et iPad-spil, så vælg ONLY iPad (4:3), når du opretter dit projekt.

Universelle Projekter: Understøt flere enheder med et enkelt projekt. Når du opretter dit projekt, vælg mere end én målenhed. Dette betyder, at det samme projekt kan fungere på både iPhone og iPad uden at have to separate versioner.

Der er fordele og ulemper ved begge tilgange. For projekter, der kræver fuld kontrol over skærmen og hvad der skal være synligt hele tiden, kan en enhedsspecifik tilgang være fordelagtig. Dog kommer det med omkostningen ved at skulle genskabe dit spil/projekt for hver ny platform.

Fordelen ved universelle projekter er, at du kun skal oprette dit spil eller app én gang. Men du har mindre kontrol over, hvad der vises på skærmen. For eksempel, på en bredere enhed, vil du måske se mere indhold, som ellers ikke ville være mærkebart. hyperPad tilbyder nogle værktøjer og adfærd til at kontrollere visse elementer, men nogle gange har du bare brug for total kontrol, og et enhedsspecifikt projekt giver mere mening.

Denne artikel dækker hovedsageligt universelle projekter, da du arbejder med flere aspektforhold og enheder. For enhedsspecifikke projekter er det så enkelt som at sikre, at dit indhold passer inden for det grønne område på canvas.

Opret et Universelt Projekt

Når du opretter et nyt projekt, bliver du bedt om at vælge de enheder, du ønsker at støtte. Som standard er kun iPad (4:3) valgt. Du kan trykke på de andre enheder for at aktivere understøttelse for dem også. Hvis du har valgt mere end én enhed, betragtes dit projekt som et "Universelt Projekt".

Cykling af Enheder

Når du vælger flere enheder at understøtte, betyder det, at du skal sikre dig, at dit projekts indhold passer på skærmen for hver enhed/aspektforhold.

Det grønne rektangelområde på canvas er det synlige skærmrums. Alt, der placeres inden for det synlige skærmrums, vil blive set, når dit projekt kører. Husk, at hver enhed, du aktiverede, når du oprettede projektet, har sit eget synlige skærmrums.

For at sikre, at dit indhold passer inden for det synlige skærmrums for hvert område, skal du trykke på Cykel Enhed ikonet på værktøjspaletten.

Husk, at nogle enheder, såsom iPhone, har flere skærmstørrelser og aspektforhold. Hvis du udvikler et projekt til disse enheder og vil støtte en ældre version af iOS, skal du sørge for, at dit indhold fungerer på hver version af den enhed. Så hvis du vælger iPhone, skal du sikre, at dit indhold passer inden for iPhone 4 skærmrums (3:2) og iPhone 5,6,6+ (16:9) skærmrums.

Design dit projekt til flere enheder

Typisk, når du udvikler et spil eller en app, ønsker du at undgå at lave alt om for hvert projekt. Med Universelle Projekter kan du bruge smart design til at minimere mængden af arbejde, du skal lave igen.

hyperPad har alle skærmstørrelser starter fra det nederste venstre hjørne og skalerer op og til højre for større enheder. Hvis du holder dette in mente, kan mange spil oprettes én gang.

Når du designer din scene, skal du designe, så dit hovedindhold passer inden for den mindste enhed, og dit baggrundsbillede så det passer den største. Når du opretter dit projekt, er den største størrelse mærket som "Designopløsning". Ved at gøre dette ser mange projekter automatisk godt ud på alle enheder.

For eksempel, hvis du ønsker at lave et platformspil, der fungerer på både iPhone og iPad. Du kan designe hovedniveauet (jordforhindringer, osv.) så det passer inden for den mindste iPhone-skærm (16:9 aspektforhold), og så have dit baggrundsbillede passe til den største enhed (iPad). På den mindste iPhone vil spillet se præcis ud som du har designet. For de større enheder (iPad 4:3 eller Desktop 16:10) vil spillet vise mere vertikalt indhold øverst. Da du har lavet dit baggrundsbillede til at passe den største størrelse, er der altid noget synligt, og du sidder ikke tilbage med tom sort plads.

Når du cykler gennem de forskellige enheder, vil du bemærke, at det synlige skærmrums ikke ændrer sig i bredden. hyperPad bruger en brugerdefineret opløsning for at holde bredderne ensartede på tværs af alle enheder. Kun højden ændres og viser mere eller mindre indhold vertikalt.

Nedenfor er et diagram, der viser de forskellige enhedsaspektforhold og opløsninger.

Aspektforhold	Ikon	Enheder	Designopløsning
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 5. generation, iPod 6. generation	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. generation	2046 px x 1364 px
16:10		Desktopcomputere	2048 px x 1280 px

En bemærkning vedrørende de ældre iPhones (3GS, iPhone 4, 4S og iPod 4. generation): Disse enheder bruger et 3:2 aspektforhold. For at holde bredden på alle enheder konstant, er det synlige skærmrums for 3:2-enheder faktisk højere end de fysisk større iPhone 5, 6+ (16:9) enheder. Hvis du ønsker at udvikle til iPhone og støtte iOS 9 og ældre, SKAL du også sikre, at dit projekt passer ind i 3:2 skærmrums.

Hvis du kun ønsker at støtte iOS10 og nyere, så behøver du ikke at bekymre dig om, at dit indhold passer inden for 3:2 skærmrums.

Importering af ressourcer

hyperPad skalerer automatisk dit projekt, så det ser godt ud på alle enheder. For at holde dit projekt ser godt ud på tværs af alle enheder, bør du altid importere dine billeder, så de passer inden for Designopløsningen. Designopløsningen gives i retina, så når du importerer billeder, vil et ikke-retina billede automatisk blive genereret for dig.

For eksempel, hvis du importerer et billede på 512x512 pixels, vil et billede på 256x256 pixels blive oprettet for dig.

Bemærk også, at designopløsningen måles i pixels. På den faktiske enhed måles alt i punkter. Dette betyder, at 2048x1536 pixels faktisk er 1024x768 punkter (på en retina-enhed).

Absolutte og relative positioner

Der er to måder at positionere objekter i hyperPad. Abosolutte og Relative. Absolutte placeringer placerer et objekt på en specifik pixelplacering på canvas og måles i meter. Relative placeringer placerer dit objekt baseret på procentdelen af det synlige skærmrums.

Med absolutte placeringer kan dine objekter fremstå uden for skærmen for mindre enheder. Dette sker, fordi koordinatsystemet ikke ændrer sig baseret på hver enhed (1 meter er den samme på en iPhone, iPad og hvad som helst andet).

Med relative placeringer vil dit objekt fremstå i den samme relative position uanset enhed. Så hvis du placerer dit objekt i midten af din skærm, vil det være midt for iPhone, iPad, og enhver større enhed som TV eller computer.

Som standard vil ethvert objekt, du placerer på almindelige lag, bruge absolutte placeringer, og alt, der placeres på UI-lagene, er indstillet til procentbaserede positioner. På denne måde behøver du ikke at bekymre dig om, at dine knapper, sundhedsbarer eller joysticks er uden for skærmen for hver enhed.

På gif'en nedenfor kan du se effekten af relative placeringer. "Tap" tegnene og hånden bruger relative placeringer og forbliver altid i midten for hver enhed.

For at ændre positions typen af dit objekt, vælg dit objekt, og i Objekt-egenskaberne, skift til Transformeringsfanen og tryk på "%" ikonet i positionsfeltet. Dette vil ændre din nuværende position til en procentdel af skærmen.

Hvis du cykler gennem dine understøttede enheder fra værktøjspaletten, kan du se dine relative objekter forblive inden for det synlige skærmrums.

For at holde et objekt helt centreret, skal X- og Y-positionerne være på 50%.

Tilpassede handlinger baseret på skærmstørrelse

Nogle gange vil du have dit projekt til at se ud og føles lidt anderledes for hver enhed. For eksempel ønsker du kun, at en knap skal være tilgængelig på iPad og ikke på iPhone.

Til dette kan du bruge "Get Screen" adfærden for at finde størrelsen på den nuværende skærm og med en IF-adfærd for at skjule knappen på iPhone.

I eksemplet ovenfor ville du bruge Get Screen, og derefter udskrive aspektforholdet til en IF-adfærd, der tjekker, om det er en iPhone (16:9).

Brug derefter skjul grafik adfærden til at skjule knappen, hvis skærmstørrelsen er 16:9.