Amb hyperPad pots crear el teu projecte per a diferents dispositius i mides de pantalla. A l'hora de donar suport a diferents dispositius, hi ha dos tipus de projectes: projectes específics del dispositiu i projectes universals.

Projectes Específics del Dispositiu: Crea una versió separada del teu projecte per a cada plataforma que vulguis donar suport. Quan crees el teu projecte, especifiques un sol dispositiu per al teu projecte. Per exemple, si vols fer només un joc per a iPad, selecciona NOMÉS iPad (4:3) quan crees el teu projecte.

Projectes Universals: Dona suport a múltiples dispositius amb un sol projecte. Quan crees el teu projecte, selecciona més d'un dispositiu objectiu. Això significa que el mateix projecte pot funcionar tant en iPhone com en iPad sense necessitat de tenir dues versions separades.

Hi ha avantatges i inconvenients per a ambdós enfocaments. Per a projectes que requereixen un control total de la pantalla i del que vols visible en tot moment, un enfocament específic del dispositiu pot ser beneficiós. Tanmateix, això ve amb el cost de tornar a crear el teu joc/projecte per a cada nova plataforma.

L'avantatge dels projectes universals és que només has de crear el teu joc o aplicació una vegada. Tanmateix, tens menys control sobre el que apareix a la pantalla. Per exemple, en un dispositiu més ampli, pots veure més contingut que, de no ser així, no seria visible. hyperPad proporciona algunes eines i comportaments per controlar certs elements, però de vegades només necessites un control total i un projecte específic del dispositiu té més sentit.

Aquest article tracta principalment sobre projectes universals, ja que estàs treballant amb múltiples relacions d'aspecte i dispositius. Per a projectes específics del dispositiu, és tan senzill com assegurar-te que el teu contingut s'ajusti a l'àrea verda del canvas.

Creant un Projecte Universal

Quan crees un nou projecte, se't demana que seleccionis els dispositius que desitges suportar. De manera predeterminada, només s'ha seleccionat l'iPad (4:3). Pots tocar els altres dispositius per habilitar el suport per a ells també. Si tens més d'un dispositiu seleccionat, el teu projecte es considera un "Projecte Universal".

Ciclant Dispositius

Quan seleccionis múltiples dispositius per a suport, això significa que has de garantir que el contingut del teu projecte s'ajusti a la pantalla per a cada dispositiu/relació d'aspecte.

L'àrea rectangular verda al canvas és l' espai de pantalla visible. Qualsevol cosa col·locada dins de l'espai de pantalla visible es veurà quan el teu projecte estigui en execució. Tingues en compte que cada dispositiu que vas habilitar al crear el projecte té el seu propi espai de pantalla visible.

Pots assegurar-te que el teu contingut s'ajusti dins de l'espai de pantalla visible per a cada zona tocant la icona del Cicle de Dispositius al paleta d'eines.

Recorda, alguns dispositius com l'iPhone tenen múltiples mides de pantalla i relacions d'aspecte. Si estàs desenvolupant un projecte per a aquests dispositius i vols donar suport a una versió anterior d'iOS, has d'assegurar-te que el teu contingut funcioni en cada versió d'aquest dispositiu. Així que si seleccionis l'iPhone, has d'assegurar-te que el teu contingut s'ajusti a l'espai de pantalla de l'iPhone 4 (3:2) i a l'espai de pantalla de l'iPhone 5,6,6+ (16:9).

Dissenyant el teu projecte per a múltiples dispositius

Normalment, quan desenvolupes un joc o aplicació, vols evitar repetir-ho tot per a cada projecte. Amb els Projectes Universals, pots utilitzar un disseny intel·ligent per minimitzar la quantitat de treball que necessites fer de nou.

hyperPad fa que totes les mides de pantalla comencin des de la cantonada inferior esquerra, després escalen cap amunt i a la dreta per a dispositius més grans. Si tens això en ment, molts jocs es poden crear una sola vegada.

Quan dissenyes la teva escena, dissenya el teu contingut principal perquè s'ajusti al dispositiu més petit i el teu fons perquè s'ajusti al més gran. Quan crees el teu projecte, la mida més gran s'etiqueta com a "Resoldre de Disseny". Fent això, molts projectes semblen automàticament fantàstics a tots els dispositius.

Per exemple, si vols fer un joc de plataformes que funcioni tant en iPhone com en iPad. Pots dissenyar el nivell principal (obstacles al sòl, etc.) per ajustar-se dins de la pantalla de l'iPhone més petit (relació d'aspecte 16:9), i després tenir el teu fons ajustat al dispositiu més gran (iPad). A l'iPhone més petit, el joc apareixerà exactament tal com ho vas dissenyar. Per als dispositius més grans (iPad 4:3, o Desktop 16:10), el joc mostrarà més contingut vertical a la part superior. Com que vas fer que el teu fons s'ajusti a la mida més gran, sempre hi ha alguna cosa visible i no et quedes amb un espai negre buit.

Mientras ciclis els diferents dispositius, notaràs que l'espai de pantalla visible no canvia en amplada. hyperPad utilitza una resolució personalitzada per mantenir les amplades consistents entre tots els dispositius. Només canvia l'altura mostrant més o menys contingut vertical.

A continuació es mostra un tauler que representa les diferents relacions d'aspecte i resolucions dels dispositius.

Relacions d'Aspcte	Icona	Dispositius	Resolució de Disseny
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		Ordinadors de taula	2048 px x 1280 px

Una nota sobre els iPhones antics (3GS, iPhone 4, 4S i iPod de 4a generació): Aquests dispositius utilitzen una relació d'aspecte 3:2. Per mantenir l'amplada de tots els dispositius constant, l'espai de pantalla visible per als dispositius 3:2 és realment més alt que el físicament més gran dels dispositius iPhone 5, 6+ (16:9). Si vols desenvolupar per a l'iPhone i donar suport a iOS 9 i anteriors, HAS d'assegurar-te que el teu projecte també s'ajusti a l'espai de pantalla 3:2.

Si només vols donar suport a iOS10 i versions més noves, llavors no cal que et preocupis per si el teu contingut s'ajusta a l'espai de pantalla 3:2.

Importació d'assets

hyperPad escala automàticament el teu projecte per veure bé a tots els dispositius. Per mantenir el teu projecte en bon estat a tots els dispositius, sempre has d'importar les teves imatges per ajustar-te a la Resolució de Disseny. La Resolució de Disseny es dona en retina, així que quan importis imatges, se'n generarà automàticament una imatge sense retina per a tu.

Per exemple, si importes una imatge de 512x512 píxels, se'n crearà una imatge de 256x256 píxels per a tu.

També nota que la resolució de disseny es mesura en píxels. En el dispositiu real, tot es mesura en punts. Això significa que 2048x1536 píxels és realment 1024x768 punts (en un dispositiu retina).

Posició Absoluta i Relativa

Hi ha dues maneres de posicionar objectes a hyperPad. Absoluta, i Relativa. Les posicions absolutes col·loquen un objecte en una ubicació de píxels específica al canvas i es mesuren en metres. Les posicions relatives col·loquen el teu objecte en funció del percentatge de l'espai de pantalla visible.

Amb posicions absolutes, els teus objectes poden aparèixer fora de la pantalla per als dispositius més petits. Això passa perquè el sistema de coordenades no canvia en funció de cada dispositiu (1 metre és el mateix en un iPhone, iPad i qualsevol altre).

Amb les posicions relatives, el teu objecte apareixerà en la mateixa posició relativa, tinguis el que tinguis. Així que si col·loques el teu objecte al mig de la teva pantalla, estarà al centre tant per a l'iPhone, l'iPad i qualsevol dispositiu més gran com un televisor o un ordinador.

Per defecte, qualsevol objecte que col·loquis en capes normals utilitzarà posicions absolutes, i qualsevol cosa col·locada a les capes d'UI es configura en posicions basades en percentatges. D'aquesta manera no has de preocupar-te que els teus botons, barres de salut o joysticks quedin fora de pantalla per a cada dispositiu.

En el gif a continuació, pots veure l'efecte de les posicions relatives. Els signes "Tap" i la mà utilitzant posicions relatives sempre es mantenen al mig per a cada dispositiu.

Per canviar el tipus de posicionament del teu objecte, selecciona el teu objecte i des de les Propietats de l'Objecte, canvia al Fitxer de Transformació i toca la icona "%" al camp de posició. Això convertirà la teva posició actual en un percentatge de la pantalla.

Si ciclar pel espais dels teus dispositius suportats a partir de la paleta d'eines, pots veure com els teus objectes relatives es mantenen dins de l'espai de pantalla visible.

Per mantenir un objecte completament centrat, les posicions X i Y haurien de ser del 50%.

Accions Personalitzades Basades en la Mida de la Pantalla

De vegades, vols que el teu projecte llueixi i se senti lleugerament diferent per a cada dispositiu. Per exemple, només vols que un botó estigui disponible a l'iPad i no a l'iPhone.

Per això, pots utilitzar el comportament "Obtenir Pantalla" per determinar la mida de l'actual pantalla, i amb un comportament IF per ocultar el botó a l'iPhone.

En l'exemple anterior, utilitzaries Obtenir Pantalla, després sortiries la Relació d'Aspcte en un comportament IF que comprova si és un iPhone (16:9).

Després utilitzes el comportament oculta gràfica per ocultar el botó si la mida de la pantalla és de 16:9.

Mides de Pantalla Múltiples i Dispositius