Med hyperPad kan du lage prosjektet ditt for flere enheter og skjermstørrelser. Når det gjelder støtte for ulike enheter, er det to typer prosjekter: Enhetsspesifikke prosjekter og Universal-prosjekter.

Enhetsspesifikke prosjekter: Lag en separat versjon av prosjektet ditt for hver plattform du ønsker å støtte. Når du lager prosjektet ditt, spesifiserer du en enkelt enhet for prosjektet ditt. For eksempel, hvis du ønsker å lage et spill kun for iPad, velger du BARE iPad (4:3) når du lager prosjektet ditt.

Universal-prosjekter: Støtt flere enheter med ett enkelt prosjekt. Når du lager prosjektet ditt, velger du mer enn én mål-enhet. Dette betyr at det samme prosjektet kan fungere på både iPhone og iPad uten å måtte lage to separate versjoner.

Det er fordeler og ulemper ved begge tilnærminger. For prosjekter som krever full kontroll over skjermen, og hva du ønsker å vise til enhver tid, kan en enhetsspesifikk tilnærming være fordelaktig. Imidlertid kommer dette med kostnaden ved å måtte gjenopprette spillet/prosjektet ditt for hver ny plattform.

Fordelen med universale prosjekter er at du bare trenger å lage spillet eller appen én gang. Imidlertid har du mindre kontroll over hva som vises på skjermen. For eksempel, på en bredere enhet, kan du se mer innhold som ellers ikke ville vært merkbart. hyperPad gir noen verktøy og oppførsel for å kontrollere visse elementer, men noen ganger trenger du bare total kontroll, og et enhetsspesifikt prosjekt gir mer mening.

Denne artikkelen dekker hovedsakelig universale prosjekter, ettersom du håndterer flere aspektforhold og enheter. For enhetsspesifikke prosjekter er det så enkelt som å sørge for at innholdet ditt passer inn i det grønne området på lerretet.

Opprette et Universal-prosjekt

Når du lager et nytt prosjekt, blir du bedt om å velge enhetene du ønsker å støtte. Som standard er bare iPad (4:3) valgt. Du kan trykke på de andre enhetene for å aktivere støtte for dem også. Hvis du har valgt mer enn én enhet, regnes prosjektet ditt som et "Universal-prosjekt".

Sykliske enheter

Når du velger flere enheter å støtte, betyr dette at du må sørge for at innholdet i prosjektet ditt passer på skjermen for hver enhet/aspektforhold.

Det grønne rektangelområdet på lerretet er den synlige skjermplassen. Alt som plasseres innenfor den synlige skjermplassen vil bli sett når prosjektet ditt kjører. Husk at hver enhet du aktiverte når du opprettet prosjektet har sin egen synlige skjermplass.

For å sørge for at innholdet ditt passer innenfor den synlige skjermplassen for hvert område, trykk på Syklisk enhet -ikonet på verktøypanelet.

Husk at noen enheter, som iPhone, har flere skjermstørrelser og aspektforhold. Hvis du utvikler et prosjekt for disse enhetene og ønsker å støtte en eldre versjon av iOS, må du sørge for at innholdet ditt fungerer på hver versjon av den enheten. Så hvis du velger iPhone, må du sørge for at innholdet ditt passer innenfor iPhone 4-skjermplassen (3:2), og iPhone 5,6,6+ (16:9) skjermplassen.

Designe prosjektet ditt for flere enheter

Typisk, når du utvikler et spill eller en app, vil du unngå å gjøre alt på nytt for hvert prosjekt. Med universale prosjekter kan du bruke smart design for å minimere mengden arbeid du må gjøre på nytt.

hyperPad har alle skjermstørrelser som starter fra nederste venstre hjørne, og deretter skaleres opp og til høyre for større enheter. Hvis du husker dette, kan mange spill lages én gang.

Når du designer scenen din, design slik at hovedinnholdet ditt passer innenfor den minste enheten, og bakgrunnen slik at den passer til den største. Når du oppretter prosjektet ditt er den største størrelsen merket som "Designoppløsning". Ved å gjøre dette ser mange prosjekter automatisk flotte ut på alle enheter.

For eksempel, du vil lage et plattformspill som fungerer på både iPhone og iPad. Du kan designe hovednivået (bakkeobsterkler, osv.) slik at det passer innenfor den minste iPhone-skjermen (16:9 aspektforhold), og deretter ha bakgrunnen din tilpasset den største enheten (iPad). På den minste iPhone vil spillet se akkurat ut som du har designet det. For de større enhetene (iPad 4:3, eller Desktop 16:10), vil spillet vise mer vertikalt innhold oppå. Siden du laget bakgrunnen din tilpasset den største størrelsen, er det alltid noe synlig, og du blir ikke etterlatt med tom sort plass.

Når du sykler gjennom de ulike enhetene, merk at den synlige skjermplassen ikke endres i bredde. hyperPad bruker en tilpasset oppløsning for å holde breddene konsistente på tvers av alle enheter. Bare høyden endres og viser mer eller mindre innhold vertikalt.

Nedenfor er en tabell som representerer de forskjellige enhetens aspektforhold og oppløsninger.

Aspektforhold	Ikon	Enheter	Designoppløsning
4:3		iPad, iPad Pro	2048 px x 1536 px
16:9		iPhone 5, iPhone 5S, iPhone 6, iPhone 6 pluss, iPhone 6S. iPhone 6S Pluss, iPod 5. generasjon, iPod 6. generasjon	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4. generasjon	2046 px x 1364 px
16:10		Desktop datamaskiner	2048 px x 1280 px

En merknad angående eldre iPhone-modeller (3GS, iPhone 4, 4S, og iPod 4. generasjon): Disse enhetene bruker et 3:2 aspektforhold. For å holde bredden på alle enheter konsistent, er den synlige skjermplassen for 3:2-enheter faktisk høyere enn den fysisk større iPhone 5, 6+ (16:9) enhetene. Hvis du ønsker å utvikle for iPhone, og støtte iOS 9 og eldre, MÅ du også sørge for at prosjektet ditt passer innenfor 3:2 skjermplassen.

Hvis du kun ønsker å støtte iOS10 og nyere, trenger du ikke bekymre deg for at innholdet ditt passer innenfor 3:2 skjermplassen.

Importere ressurser

hyperPad skalerer automatisk prosjektet ditt for å se flott ut på alle enheter. For å holde prosjektet ditt ser bra ut på tvers av alle enheter, bør du alltid importere bildene dine til å passe innenfor designoppløsningen. Designoppløsningen gis i retina, så når du importerer bilder vil et ikke-retina bilde automatisk bli generert for deg.

For eksempel, hvis du importerer et bilde på 512x512 piksler, vil et bilde på 256x256 piksler bli opprettet for deg.

Vær også oppmerksom på at designoppløsningen måles i piksler. På den faktiske enheten, måles alt i poeng. Dette betyr at 2048x1536 piksler faktisk er 1024x768 poeng (på en retina-enhet).

Absolutt og Relativ posisjon

Det er to måter å posisjonere objekter i hyperPad. Absolutt og Relativ. Absolutte posisjoner plasserer et objekt på en spesifikk pikselplassering på lerretet og måles i meter. Relative posisjoner plasserer objektet ditt basert på prosentandelen av den synlige skjermplassen.

Med absolutte posisjoner kan objektene dine være utenfor skjermen for mindre enheter. Dette skjer fordi koordinatsystemet ikke endres basert på hver enhet (1 meter er det samme på en iPhone, iPad, og hva som helst annet).

Med relative posisjoner vil objektet ditt vises i den samme relative posisjonen uansett hvilken enhet. Så hvis du plasserer objektet ditt midt på skjermen, vil det være i midten for iPhone, iPad, og hvilken som helst større enhet som TV eller datamaskin.

Som standard bruker ethvert objekt du plasserer på vanlige lag absolutte posisjoner, og alt som er plassert på UI-lagene er satt til prosentbaserte posisjoner. På denne måten trenger du ikke å bekymre deg for at knappene, helsebarene, eller joystickene er utenfor skjermen for hver enhet.

I gif-en nedenfor kan du se effekten av relative posisjoner. "Tap"-skiltene, og hånden bruker relative posisjoner og holder seg alltid i midten for hver enhet.

For å endre posisjoneringstypen for objektet ditt, velg objektet ditt og fra Objektinnstillingene, bytt til Transform-fanen og trykk på "%"-ikonet i posisjonsfeltet. Dette vil forvandle den nåværende posisjonen din til en prosentandel av skjermen.

Hvis du sykler gjennom de støttede enhetene fra verktøypanelet, kan du se at de relative objektene holder seg innenfor den synlige skjermplassen.

For å holde et objekt helt sentrert, bør X- og Y-posisjonene være på 50%.

Egendefinerte handlinger basert på skjermstørrelse

Noen ganger ønsker du at prosjektet ditt skal se og føles litt annerledes ut for hver enhet. For eksempel, du vil bare ha en knapp tilgjengelig på iPad og ikke på iPhone.

For dette kan du bruke "Hent skjerm"-atferden for å finne ut størrelsen på den nåværende skjermen, og med en IF-atferd for å skjule knappen på iPhone.

I eksemplet ovenfor ville du bruke Hent skjerm, deretter utdata aspektforholdet til en IF-atferd, som sjekker om det er en iPhone (16:9).

Så bruk skjul grafikk-atferden for å skjule knappen hvis skjermstørrelsen er 16:9.

Flere skjermstørrelser og enheter