Cu hyperPad, poți crea proiectul tău pentru multiple dispozitive și dimensiuni de ecran. Atunci când vine vorba de suportul pentru diferite dispozitive, există două tipuri de proiecte: Proiecte Specifice pentru Dispozitive și Proiecte Universale.

Proiecte Specifice pentru Dispozitive: Creează o versiune separată a proiectului tău pentru fiecare platformă pe care dorești să o sprijini. Când creezi proiectul tău, specifici un singur dispozitiv pentru proiectul tău. De exemplu, dacă dorești să faci doar un joc pentru iPad, atunci selectează NUMAI iPad (4:3) atunci când creezi proiectul tău.

Proiecte Universale: Sprijină multiple dispozitive cu un singur proiect. Atunci când creezi proiectul tău, selectează mai mult de un dispozitiv țintă. Acest lucru înseamnă că același proiect poate funcționa pe ambele, iPhone și iPad, fără a avea două versiuni separate.

Există avantaje și dezavantaje pentru ambele abordări. Pentru proiectele care necesită control total asupra ecranului și asupra a ceea ce dorești să fie vizibil în permanență, o abordare specifică pentru dispozitive poate fi benefică. Cu toate acestea, acest lucru vine cu costul de a recrea jocul/proiectul tău pentru fiecare platformă nouă.

Beneficiul proiectelor universale este că trebuie să-ți creezi jocul sau aplicația o singură dată. Cu toate acestea, ai mai puțin control asupra a ceea ce apare pe ecran. De exemplu, pe un dispozitiv mai lat, este posibil să vezi mai mult conținut care, în mod normal, nu ar fi vizibil. hyperPad oferă unele instrumente și comportamente pentru a controla anumite elemente, dar uneori ai nevoie de control total și un proiect specific pentru dispozitive are mai mult sens.

Această articol abordează în principal proiectele universale, deoarece te ocupi de multiple raporturi de aspect și dispozitive. Pentru proiectele specifice pentru dispozitive, este la fel de simplu ca să te asiguri că conținutul tău se potrivește în zona verde de pe canvas.

Crearea unui Proiect Universal

Atunci când creezi un proiect nou, ți se va solicita să selectezi dispozitivele pe care dorești să le sprijini. În mod implicit, doar iPad (4:3) este selectat. Poți atinge celelalte dispozitive pentru a activa suportul pentru ele, de asemenea. Dacă ai mai mult de un dispozitiv selectat, proiectul tău este considerat un "Proiect Universal".

Schimbarea Dispozitivelor

Când selectezi mai multe dispozitive pentru a le sprijini, acest lucru înseamnă că trebuie să te asiguri că conținutul proiectului tău se potrivește pe ecran pentru fiecare dispozitiv/raport de aspect.

Zona dreptunghiului verde de pe canvas este spațiul de ecran vizibil. Orice plasat în spațiul de ecran vizibil va fi văzut atunci când proiectul tău este în execuție. Ține minte că fiecare dispozitiv pe care l-ai activat atunci când ai creat proiectul are propriul său spațiu de ecran vizibil.

Pentru a te asigura că conținutul tău se potrivește în spațiul de ecran vizibil pentru fiecare zonă, atinge pictograma Schimbă Dispozitivul din paleta de unelte.

Ține minte, unele dispozitive, cum ar fi iPhone-ul, au mai multe dimensiuni și relații de aspect ale ecranului. Dacă dezvolți un proiect pentru aceste dispozitive și dorești să sprijini o versiune mai veche de iOS, trebuie să te asiguri că conținutul tău funcționează pe fiecare versiune a acelui dispozitiv. Așadar, dacă selectezi iPhone, trebuie să te asiguri că conținutul tău se potrivește în spațiul de ecran al iPhone 4 (3:2) și al iPhone 5, 6, 6+ (16:9).

Proiectarea proiectului tău pentru multiple dispozitive

De obicei, atunci când dezvolți un joc sau o aplicație, dorești să eviți să refaci totul pentru fiecare proiect. Cu Proiectele Universale poți folosi un design ingenios pentru a minimiza cantitatea de muncă pe care trebuie să o faci din nou.

hyperPad are toate dimensiunile de ecran începând din colțul din stânga jos, apoi se scalează în sus și spre dreapta pentru dispozitivele mai mari. Dacă ții cont de acest lucru, multe jocuri pot fi create o singură dată.

Când îți proiectezi scena, design-ul astfel încât conținutul tău principal să se potrivească în cel mai mic dispozitiv, iar fundalul tău să se potrivească pentru cel mai mare. Atunci când creezi proiectul tău, cea mai mare dimensiune este marcată ca "Rezoluția de Design". Procedând astfel, multe proiecte arată automat grozav pe toate dispozitivele.

De exemplu, vrei să faci un joc platformă care să funcționeze atât pe iPhone cât și pe iPad. Poți proiecta nivelul principal (obstacolele de bază etc.) pentru a se potrivi în cea mai mică dimensiune de ecran a iPhone-ului (raport de aspect 16:9), apoi să ai fundalul tău să se potrivească pentru cel mai mare dispozitiv (iPad). Pe cel mai mic iPhone, jocul va apărea exact așa cum l-ai proiectat. Pentru dispozitivele mai mari (iPad 4:3 sau Desktop 16:10), jocul va arăta mai mult conținut vertical în partea de sus. Deoarece ai făcut ca fundalul tău să se potrivească cu cea mai mare dimensiune, există întotdeauna ceva vizibil și nu rămâi cu un spațiu negru gol.

În timp ce schimbi între diferitele dispozitive, observă că spațiul de ecran vizibil nu se schimbă în lățime. hyperPad folosește o rezoluție personalizată pentru a menține lățimile consistente pe toate dispozitivele. Numai înălțimea se schimbă, arătând mai mult sau mai puțin conținut vertical.

Mai jos este un tabel care reprezintă diferitele raporturi de aspect și rezoluții ale dispozitivelor.

Raporturi de Aspect	Iconiță	Dispozitive	Rezoluția de Design
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 5th generation, iPod 6th generation	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4th generation	2046 px x 1364 px
16:10		Computere desktop	2048 px x 1280 px

O notă referitoare la vechile iPhone-uri (3GS, iPhone 4, 4S și iPod 4th Generation): Aceste dispozitive folosesc un raport de aspect 3:2. Pentru a menține lățimea tuturor dispozitivelor consistente, spațiul de ecran vizibil pentru dispozitivele 3:2 este de fapt mai înalt decât spațiul de ecran al iPhone 5, 6+ (16:9) care este fizic mai mare. Dacă dorești să dezvolți pentru iPhone și să sprijini iOS 9 și versiuni anterioare, TREBUIE de asemenea să te asiguri că proiectul tău se încadrează în spațiul de ecran 3:2.

Dacă dorești să sprijini doar iOS10 și versiuni mai noi, atunci nu trebuie să-ți faci griji cu privire la potrivirea conținutului tău în spațiul de ecran 3:2.

Importarea resurselor

hyperPad scalează automat proiectul tău pentru a arăta grozav pe toate dispozitivele. Pentru a menține proiectul tău având un aspect grozav pe toate dispozitivele, ar trebui să imporți întotdeauna imaginile pentru a se încadra în Rezoluția de Design. Rezoluția de Design este dată în retina, așa că atunci când imporți imagini, o imagine non-retina va fi generată automat pentru tine.

De exemplu, dacă imporți o imagine de 512x512 pixeli, o imagine de 256x256 pixeli va fi creată pentru tine.

De asemenea, reține că rezoluția de design este măsurată în pixeli. Pe dispozitivul real, totul este măsurat în puncte. Aceasta înseamnă că 2048x1536 pixeli este, de fapt, 1024x768 puncte (pe un dispozitiv retina).

Poziționare Absolută și Relativă

Există două modalități de a poziționa obiectele în hyperPad. Poziționarea Absolută și Poziționarea Relativă. Pozițiile absolute plasează un obiect la o anumită locație în pixeli pe canvas și este măsurată în metri. Pozițiile relative își bazează obiectul pe procentul din spațiul de ecran vizibil.

Cu poziționarea absolută, obiectele tale pot apărea în afara ecranului pentru dispozitivele mai mici. Acest lucru se întâmplă deoarece sistemul de coordonate nu se schimbă în funcție de fiecare dispozitiv (1 metru este același pe un iPhone, iPad și oricelalte).

Cu poziționările relative, obiectul tău va apărea în aceeași poziție relativă, indiferent de dispozitivul utilizat. Așadar, dacă îți plasezi obiectul în mijlocul ecranului, el va fi în mijloc pentru iPhone, iPad și orice dispozitiv mai mare, cum ar fi un TV sau un computer.

Prin default, orice obiect pe care îl plasezi pe straturi obișnuite va folosi poziții absolute, iar orice obiect plasat pe straturile UI este setat la poziții bazate pe procente. În acest fel, nu trebuie să te îngrijorezi cu privire la butoanele, barele de sănătate sau joystick-urile care sunt în afara ecranului pentru fiecare dispozitiv.

În gif-ul de mai jos, poți vedea efectul poziționărilor relative. Semnele „Tap” și mâna folosesc poziționări relative și rămân întotdeauna în mijloc pentru fiecare dispozitiv.

Pentru a schimba tipul de poziționare al obiectului tău, selectează obiectul și din Proprietățile Obiectului, comută pe Tab-ul Transformare și apasă pe iconița "%" din câmpul de poziție. Acest lucru va transforma poziția ta curentă într-un procent din ecran.

Dacă schimbi între dispozitivele selectate din paleta de unelte, poți vedea obiectele tale relative rămânând în spațiul de ecran vizibil.

Pentru a păstra un obiect complet centrat, pozițiile X și Y ar trebui să fie setate la 50%.

Acțiuni Personalizate pe Bază de Dimensiune a Ecranului

A uneori, dorești ca proiectul tău să arate și să se simtă ușor diferit pentru fiecare dispozitiv. De exemplu, dorești ca un buton să fie disponibil doar pe iPad și nu pe iPhone.

Pentru aceasta, poți folosi comportamentul „Obține Ecran” pentru a determina dimensiunea ecranului curent și cu un comportament IF pentru a ascunde butonul pe iPhone.

În exemplul de mai sus, ai folosi Obține Ecran, apoi ieși raportul de aspect către un comportament IF, care verifică dacă este vorba despre un iPhone (16:9).

Apoi folosește comportamentul de ascundere a graficilor pentru a ascunde butonul dacă dimensiunea ecranului este 16:9.

Dimensiuni multiple de ecran și dispozitive