Supportare diversi fattori di forma e dimensioni dello schermo

I dispositivi Android sono disponibili in una varietà di fattori di forma e dimensioni dello schermo. Le categorie comuni includono:

• Telefoni cellulari
• Tablet
• Televisori e decoder
• Laptop con Android Runtime per Chrome

Questa varietà fa sì che il tuo gioco incontrerà diverse risoluzioni dello schermo, spesso con proporzioni diverse. Ecco alcuni esempi:

• Un telefono con orientamento orizzontale con proporzioni 19:9 (2280 x 1080)
• Un altro telefono con orientamento orizzontale con proporzioni 20:9 (3200 x 1400)
• Una TV HD a 1080p con proporzioni 16:9 (1920 x 1080)
• Un tablet con proporzioni 4:3 (2048 x 1536)

Il design del tuo gioco deve tenere conto di queste differenze per garantire una presentazione corretta, indipendentemente dalla risoluzione dello schermo e dalle proporzioni del dispositivo.

Espandi modalità di proiezione

Un progetto Defold ha una risoluzione di base configurabile. Questa risoluzione viene impostata nel file game.project utilizzando i campi Larghezza e Altezza nella categoria Display.

Figura 1. Impostazioni del progetto Display

Il comportamento predefinito di Defold consiste nel visualizzare alla risoluzione di base e quindi ridimensionare l'immagine risultante alla risoluzione effettiva del dispositivo di destinazione. La defold fa riferimento a questa modalità come proiezione estesa. La proiezione elastica non mantiene le proporzioni originali. Per alcuni giochi, questa impostazione predefinita potrebbe essere visivamente accettabile. Lo script di rendering Defold standard include due opzioni di proiezione aggiuntive che mantengono le proporzioni di base: proiezione con formato fisso e proiezione fissa.

L'esempio seguente mostra un progetto di esempio progettato con una risoluzione di base di 480 x 272, visualizzato nell'editor Defold.

In questo esempio:

• Un oggetto tilemap viene utilizzato per disegnare un frame intorno ai bordi della risoluzione di base.
• Due oggetti sprite e un oggetto di testo si trovano all'interno dei limiti della risoluzione di base.
• Esistono quattro oggetti sprite posizionati al di fuori dei limiti della risoluzione di base, rispettivamente in alto, in basso, a sinistra e a destra.

Figura 2. Layout degli oggetti del progetto di esempio

Quando viene eseguito a una risoluzione del display di 960 x 544, esattamente il doppio della risoluzione di base, il progetto viene visualizzato come segue:

Figura 3. Il progetto di esempio con una risoluzione di base 2x, utilizzando la proiezione estesa predefinita

Proiezione estesa

I seguenti esempi mostrano i risultati del ridimensionamento della finestra con la proiezione elastica predefinita, in cui le proporzioni non vengono mantenute:

Figura 4. Il progetto di esempio è stato compresso orizzontalmente durante l'utilizzo della proiezione Estendi

Figura 5. Il progetto di esempio ha allungato orizzontalmente durante l'utilizzo della proiezione elastica

Proiezione fissa

La modalità di proiezione fixed-fit mantiene le proporzioni di risoluzione di base. Poiché le proporzioni vengono conservate, l'area dello schermo aggiuntiva non sarà coperta dalla risoluzione di base ridimensionata. A seconda dell'asse principale della differenza di proporzioni, quest'area extra si trova nella parte superiore e inferiore oppure a sinistra e a destra della risoluzione di base. La proiezione con adattamento fisso modificherà la risoluzione di base per tenere conto di quest'area. Questa modifica comporta il rendering di aree aggiuntive della scena del gioco al di fuori della regione di risoluzione di base. L'immagine risultante viene poi ridimensionata in base alla risoluzione del display.

I seguenti esempi mostrano il rendering di proiezione con adattamento fisso a una risoluzione del display con proporzioni diverse rispetto alla risoluzione base di 480 x 272:

Figura 6. Il progetto di esempio viene eseguito su un display con proporzioni più alte rispetto a quelle di base utilizzando la proiezione con adattamento fisso

Figura 7. Il progetto di esempio su un display con proporzioni più ampie rispetto a quelle di base utilizzando la proiezione con adattamento fisso

Proiezione fissa

La modalità proiezione fissa mantiene le proporzioni di risoluzione di base e ridimensiona la risoluzione di base in base a un fattore di zoom specificato. A seconda della risoluzione del display e del fattore di zoom, potrebbe essere visualizzato un sottoinsieme o un soprainsieme dell'area di risoluzione di base.

I seguenti esempi mostrano la modalità di proiezione fissa utilizzando una risoluzione dello schermo di 644 x 408 con fattori di zoom 1x e 2x, rispettivamente:

Figura 8. Il progetto di esempio ha una risoluzione del display di 644 x 408 utilizzando una proiezione fissa con un fattore di zoom 1x

Figura 9. Il progetto di esempio ha una risoluzione del display di 644 x 408 utilizzando la proiezione fissa con un fattore di zoom 2x.

Cambiare le modalità di proiezione

La modalità di proiezione attiva può essere commutata in fase di runtime inviando il messaggio appropriato al renderer. Questi messaggi vengono inviati utilizzando il sistema di messaggi Defold standard. Tutti i messaggi relativi alla modalità di proiezione includono parametri che specificano i valori Z del piano vicino e lontano.

Nota: il messaggio relativo alla proiezione fissa contiene un parametro aggiuntivo che specifica il livello di zoom.

-- Change to stretch projection mode
msg.post("@render:", "use_stretch_projection", { near = -1, far = 1 })

-- Change to fixed fit projection mode
msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })

-- Change to fixed projection mode
msg.post("@render:", "use_fixed_projection", { near = -1, far = 1, zoom = 2 })

Rimuovi script di rendering

Il comportamento di visualizzazione Defold è controllato da uno speciale file di script chiamato script di rendering. Come altri script Defold Engine, lo script di rendering è scritto nel linguaggio di programmazione Lua. Al momento della creazione del progetto è incluso uno script di rendering predefinito, ma puoi anche sostituirlo con uno script di rendering personalizzato.

Le modalità di proiezione allungata, ad adattamento fisso e fisse sono le caratteristiche dello script di rendering predefinito. Quando utilizzi una di queste modalità, lo script di rendering genera una matrice di proiezione ortografica 2D da utilizzare nel rendering degli oggetti di gioco. La configurazione di questa matrice varia a seconda della modalità di proiezione utilizzata.

Puoi utilizzare uno script di rendering personalizzato per estendere o modificare la configurazione della matrice di proiezione. Le funzionalità non supportate dallo script predefinito, ad esempio letterbox o pillarbox per proporzioni diverse, possono essere implementate con gli script di rendering personalizzato.

Gli sviluppatori open source hanno creato script di rendering e pacchetti della fotocamera che offrono più funzionalità rispetto agli script Defold predefiniti. Due pacchetti di uso comune sono RenderCam e Defold-Orthographic.

Espandi il sistema GUI

Defold include un sistema GUI basato sul concetto dei file di scena GUI. I file di scena delle GUI includono oggetti chiamati nodi che definiscono singoli elementi dell'interfaccia utente, come immagini o testo.

I file di scene GUI possono essere aggiunti come componente a un oggetto di gioco Defold. Le scene GUI e i nodi inclusi vengono visualizzati separatamente e funzionano in modo leggermente diverso rispetto ai normali oggetti di gioco. A causa di queste differenze, il supporto di più risoluzioni dello schermo con scene GUI comporta ulteriori considerazioni relative alle coordinate del sistema GUI e agli ancoraggi e ai pivot dei nodi GUI.

Coordinate del sistema GUI

Gli oggetti di gioco Defold normali specificano le loro coordinate nello spazio del mondo. Un oggetto fotocamera converte lo spazio mondiale nello spazio dello schermo e mostra gli oggetti di gioco che rientrano nell'attuale visualizzazione virtuale della videocamera. Il sistema GUI usa una fotocamera separata. I nodi di una scena GUI usano le coordinate dello spazio dello schermo invece delle coordinate dello spazio. Quando la risoluzione di visualizzazione è diversa da quella di base del progetto utilizzata per il layout dei nodi GUI, i nodi potrebbero avere margini diversi rispetto ai bordi dello schermo o di un nodo padre. Defold ha diverse opzioni per apportare modifiche al layout della GUI in modo da tenere conto delle differenze nella risoluzione del display.

Pivot e ancoraggi dei nodi della GUI

I nodi della GUI possono essere ancorati ai bordi verticali e/o orizzontali utilizzando le proprietà Ancoraggio X e Ancoraggio Y.

• Se un nodo ha un nodo principale, l'ancoraggio si trova ai bordi del nodo principale.
• Se un nodo non ha un nodo principale, l'ancoraggio si trova ai bordi dello schermo.

Di seguito è riportata una scena di esempio con due nodi GUI, le icone del controller negli angoli in basso a sinistra e in alto a destra. Entrambi i nodi hanno Ancora X e Ancora Y impostati su None:

Figura 10. Una scena di esempio con elementi GUI

Quando il display viene ridimensionato senza un ancoraggio, le icone del controller mantengono le loro posizioni relative alla risoluzione di base:

Figura 11. La scena di esempio ridimensionata con elementi GUI per cui gli ancoraggi sono impostati su None

Quando l'ancoraggio Y del nodo in basso a sinistra è impostato su Bottom e l'ancoraggio Y del nodo in alto a destra è impostato su Top, i nodi della GUI si ancorano ai bordi appropriati dello schermo:

Figura 12. La scena di esempio ridimensionata con elementi GUI per cui gli ancoraggi sono impostati su Edges

La proprietà Pivot di un nodo GUI specifica il punto sul rettangolo dei limiti del nodo che corrisponde alla sua proprietà Posizione della coordinata dello spazio schermo. Per impostazione predefinita, i nodi GUI utilizzano l'impostazione Center, posizionando il punto Posizione al centro diretto del rettangolo dei limiti. Altre impostazioni Pivot possibili includono le quattro direzioni cardinali più le quattro diagonali. La proprietà Pivot può semplificare la specifica degli spazi a margine se utilizzata in combinazione con le proprietà X Anchor e Y Anchor.

Nell'esempio seguente, il nodo GUI dell'icona del controller in basso a sinistra ha una Posizione di 0,0 e una Pivot impostata su Center.

Figura 13. Un nodo GUI con Pivot impostato su Center

La modifica di Pivot su South West comporta la seguente modifica:

Figura 14. Un nodo GUI con Pivot impostato su South West

Modalità di regolazione dei nodi GUI

I nodi GUI possono essere ridimensionati quando la risoluzione di visualizzazione è diversa da quella di base del progetto. La proprietà Modalità di regolazione controlla il comportamento di scalabilità dei contenuti del nodo. La modalità di regolazione ha tre impostazioni: Fit, Zoom e Stretch.

Nota: l'oggetto scena della GUI principale ha una proprietà Regola riferimento. Se questa proprietà è impostata su Disabled, le proprietà Regola modalità di tutti i nodi GUI nella scena verranno ignorate. Quando l'opzione Modifica riferimento è impostata su Disabled, i nodi GUI non verranno ridimensionati o riposizionati per tenere conto delle modifiche alla risoluzione del display.

Fit

L'impostazione Fit conserva le proporzioni dei contenuti del nodo. I contenuti vengono adattati in base alla larghezza o all'altezza del rettangolo dei limiti ridimensionati del nodo. L'asse scelto è quello con la differenza minore. In questo modo i contenuti rientrano nel rettangolo dei margini, mantenendo le proporzioni originali.

Zoom

L'impostazione Zoom conserva anche le proporzioni dei contenuti dei nodi. Come per l'impostazione Fit, Zoom ridimensiona i contenuti in modo che corrispondano alla larghezza o all'altezza del rettangolo dei limiti ridimensionato del nodo. A differenza di Fit, Zoom utilizza come target di corrispondenza l'asse con la differenza maggiore rispetto alla dimensione originale. Ciò significa che i contenuti ridimensionati potrebbero superare il rettangolo dei limiti.

Di seguito è riportato un esempio di due nodi GUI con impostazioni di regolazione diverse. L'icona del controller in basso a sinistra ha una modalità Regola pari a Fit, mentre l'icona del controller in alto a destra ha una modalità Regola pari a Zoom.

Figura 15. Due nodi GUI con diverse impostazioni Modalità di regolazione

Stretching

L'impostazione Stretch scala i contenuti del nodo in modo che corrispondano esattamente al rettangolo dei limiti ridimensionato del nodo. Le proporzioni originali non vengono mantenute.

Layout delle GUI

Defold offre un metodo alternativo per adattare i layout delle GUI a diverse risoluzioni dello schermo: i layout. I layout possono essere aggiunti a una scena della GUI per sostituire le proprietà predefinite del nodo GUI. Un layout è associato a una risoluzione dello schermo specifica. Quando sono disponibili più layout, Defold sceglie quello che più si avvicina alla risoluzione effettiva dello schermo. La posizione, le dimensioni, la scala o le risorse grafiche predefinite utilizzate da un nodo GUI possono essere sostituite da un layout.

Risorse aggiuntive

• Defold manuale - Esegui il rendering della pipeline
• Defold manuale - Scene GUI
• Defold manuale - Layout GUI