Con hyperPad puoi creare il tuo progetto per più dispositivi e dimensioni dello schermo. Quando si tratta di supportare diversi dispositivi, ci sono due tipi di progetti: progetti specifici per dispositivo e progetti universali.

Progetti specifici per dispositivo: Crea una versione separata del tuo progetto per ciascuna piattaforma che desideri supportare. Quando crei il tuo progetto, specifichi un solo dispositivo per il tuo progetto. Ad esempio, se desideri creare un gioco solo per iPad, seleziona SOLO iPad (4:3) quando crei il tuo progetto.

Progetti universali: Supporta più dispositivi con un solo progetto. Quando crei il tuo progetto, seleziona più di un dispositivo target. Questo significa che lo stesso progetto può funzionare sia su iPhone che su iPad senza dover avere due versioni separate.

Ci sono pro e contro per entrambi gli approcci. Per i progetti che richiedono il controllo totale dello schermo e di ciò che vuoi visibile in ogni momento, un approccio specifico per dispositivo può essere vantaggioso. Tuttavia, ciò comporta il costo di dover ricreare il tuo gioco/progetto per ogni nuova piattaforma.

Il vantaggio dei progetti universali è che devi creare il tuo gioco o app solo una volta. Tuttavia, hai meno controllo su ciò che appare sullo schermo. Ad esempio, su un dispositivo più largo, potresti vedere più contenuto che altrimenti non sarebbe visibile. hyperPad fornisce alcuni strumenti e comportamenti per controllare determinati elementi, ma a volte hai bisogno del controllo totale e un progetto specifico per dispositivo ha più senso.

Questo articolo tratta principalmente dei progetti universali, poiché stai affrontando più rapporti d'aspetto e dispositivi. Per i progetti specifici per dispositivo, è semplice come assicurarsi che il tuo contenuto si adatti nell'area verde sulla tela.

Creare un Progetto Universale

Quando crei un nuovo progetto, ti verrà chiesto di selezionare i dispositivi che desideri supportare. Di default, è selezionato solo l'iPad (4:3). Puoi toccare gli altri dispositivi per abilitare il supporto anche per loro. Se hai selezionato più di un dispositivo, il tuo progetto è considerato un "Progetto Universale".

Ciclare Dispositivi

Quando selezioni più dispositivi da supportare, questo significa che devi assicurarti che il contenuto del tuo progetto si adatti allo schermo per ciascun dispositivo/rapporto d'aspetto.

L'area rettangolare verde sulla tela è lo spazio visibile dello schermo. Qualsiasi cosa posizionata all'interno dello spazio visibile dello schermo sarà visibile quando il tuo progetto è in esecuzione. Tieni presente che ogni dispositivo abilitato durante la creazione del progetto ha il proprio spazio visibile sullo schermo.

Per assicurarti che il tuo contenuto si adatti all'interno dello spazio visibile dello schermo per ogni area, tocca l'icona Cycle Device nella palette degli strumenti.

Ricorda, alcuni dispositivi come l'iPhone hanno più dimensioni dello schermo e rapporti d'aspetto. Se stai sviluppando un progetto per questi dispositivi e desideri supportare una versione precedente di iOS, devi assicurarti che il tuo contenuto funzioni su ciascuna versione di quel dispositivo. Quindi, se selezioni l'iPhone, devi assicurarti che il tuo contenuto si adatti allo spazio dello schermo dell'iPhone 4 (3:2) e dello schermo dell'iPhone 5,6,6+ (16:9).

Progettare il tuo progetto per più dispositivi

Tipicamente, quando sviluppi un gioco o un'app, vuoi evitare di rifare tutto per ogni progetto. Con i Progetti Universali puoi usare un design intelligente per ridurre al minimo la quantità di lavoro da fare di nuovo.

hyperPad ha tutte le dimensioni dello schermo che partono dall'angolo in basso a sinistra, per poi scalare verso l'alto e a destra per i dispositivi più grandi. Se tieni questo a mente, molti giochi possono essere creati una volta sola.

Quando progetti la tua scena, fai in modo che il tuo contenuto principale si adatti all'interno del dispositivo più piccolo e che lo sfondo si adatti al più grande. Quando crei il tuo progetto, la dimensione maggiore è etichettata come "Risoluzione di Design". Facendo così, molti progetti sembrano automaticamente fantastici su tutti i dispositivi.

Ad esempio, se desideri realizzare un gioco di piattaforme che funzioni sia su iPhone che su iPad. Puoi progettare il livello principale (ostacoli a terra, ecc.) in modo che si adatti all'interno dello schermo dell'iPhone più piccolo (rapporto d'aspetto 16:9), poi avere il tuo sfondo che si adatta al dispositivo più grande (iPad). Sull'iPhone più piccolo, il gioco apparirà esattamente come l'hai progettato. Per i dispositivi più grandi (iPad 4:3, o Desktop 16:10), il gioco mostrerà più contenuto verticale nella parte superiore. Poiché hai fatto adattare il tuo sfondo alla dimensione più grande, c'è sempre qualcosa di visibile e non ti ritrovi con uno spazio vuoto nero.

Durante il ciclo dei diversi dispositivi, nota che lo spazio visibile dello schermo non cambia in larghezza. hyperPad utilizza una risoluzione personalizzata per mantenere le larghezze coerenti tra tutti i dispositivi. Solo l'altezza cambia, mostrando più o meno contenuto verticalmente.

Di seguito è riportato un grafico che rappresenta i diversi rapporti d'aspetto e risoluzioni dei dispositivi.

Rapporti d'Aspetto	Icona	Dispositivi	Risoluzione di 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 5ª generazione, iPod 6ª generazione	2048 px x 1158 px
3:2		iPhone 3GS, iPhone 4, iPhone 4S, iPod 4ª generazione	2046 px x 1364 px
16:10		Computer desktop	2048 px x 1280 px

Una nota riguardo ai vecchi iPhone (3GS, iPhone 4, 4S e iPod 4ª generazione): Questi dispositivi utilizzano un rapporto d'aspetto 3:2. Per mantenere coerente la larghezza di tutti i dispositivi, lo spazio visibile dello schermo per i dispositivi 3:2 è in realtà più alto rispetto ai dispositivi iPhone 5, 6+ (16:9) fisicamente più grandi. Se desideri sviluppare per iPhone e supportare iOS 9 e precedenti, DEVI anche assicurarti che il tuo progetto si adatti allo spazio dello schermo 3:2.

Se desideri supportare solo iOS10 e versioni successive, non devi preoccuparti che il tuo contenuto si adatti allo spazio dello schermo 3:2.

Importare asset

hyperPad scala automaticamente il tuo progetto per avere un aspetto fantastico su tutti i dispositivi. Per mantenere il tuo progetto bello su tutti i dispositivi, dovresti sempre importare le tue immagini in modo che si adattino alla Risoluzione di Design. La Risoluzione di Design è fornita in retina, quindi quando importi le immagini, un'immagine non-retina verrà automaticamente generata per te.

Ad esempio, se importi un'immagine di 512x512 pixel, verrà creata per te un'immagine di 256x256 pixel.

Nota anche che la risoluzione di design è misurata in pixel. Sul dispositivo reale, tutto è misurato in punti. Ciò significa che 2048x1536 pixel è in realtà 1024x768 punti (su un dispositivo retina).

Posizionamento Assoluto e Relativo

Ci sono due modi per posizionare oggetti in hyperPad. Assoluto e Relativo. Le posizioni assolute posizionano un oggetto in una posizione pixel specifica sulla tela e sono misurate in metri. Le posizioni relative posizionano il tuo oggetto in base alla percentuale dello spazio visibile dello schermo.

Con le posizioni assolute, i tuoi oggetti possono apparire fuori schermo per i dispositivi più piccoli. Questo accade perché il sistema di coordinate non cambia in base a ciascun dispositivo (1 metro è lo stesso su un iPhone, un iPad e qualsiasi altro).

Con le posizioni relative, il tuo oggetto apparirà nella stessa posizione relativa indipendentemente dal dispositivo. Quindi, se posizioni il tuo oggetto al centro dello schermo, sarà al centro per iPhone, iPad e qualsiasi dispositivo più grande come un TV o un computer.

Per impostazione predefinita, qualsiasi oggetto che posizioni su livelli normali utilizzerà posizioni assolute, e qualsiasi cosa posizionata sui livelli UI è impostata su posizioni basate su percentuale. In questo modo non devi preoccuparti che i tuoi pulsanti, barre della salute o joystick siano fuori schermo per ciascun dispositivo.

Per modificare il tipo di posizionamento del tuo oggetto, seleziona il tuo oggetto e dalle Proprietà dell'Oggetto, passa alla Scheda Trasformazione e tocca l'icona "%" nel campo della posizione. Questo trasformerà la tua posizione attuale in una percentuale dello schermo.

Se cicli tra i dispositivi supportati dalla palette degli strumenti, puoi vedere i tuoi oggetti relativi rimanere all'interno dello spazio visibile dello schermo.

Per mantenere un oggetto completamente centrato, le posizioni X e Y dovrebbero essere al 50%.

Azioni Personalizzate Basate sulla Dimensione dello Schermo

A volte vuoi che il tuo progetto appaia e si comporti in modo leggermente diverso per ciascun dispositivo. Ad esempio, desideri che un pulsante sia disponibile solo su iPad e non su iPhone.

Per questo, puoi utilizzare il comportamento "Get Screen" per capire la dimensione dello schermo attuale, e con un comportamento IF per nascondere il pulsante sull'iPhone.

Nell'esempio sopra, useresti Get Screen, poi outputteresti il Rapporto d'Aspetto a un comportamento IF, che verifica se si tratta di un iPhone (16:9).

Quindi usa il comportamento hide graphic per nascondere il pulsante se la dimensione dello schermo è 16:9.

Dimensioni e dispositivi con schermi multipli