Cosa devo tenere a mente quando realizzo giochi 2D per risoluzioni multiple?


27

Sto realizzando un gioco 2D (Android). I dispositivi Android variano molto nella risoluzione dello schermo; cosa devo tenere a mente quando realizzo il mio gioco?

  • Devo mantenere le versioni più grandi di tutte le immagini e ridimensionarle a seconda della risoluzione (non spreca spazio)?
  • I caratteri bitmap si ridimensionano bene o devo usare qualcos'altro?
  • Qualcos'altro che sto dimenticando?

Risposte:


26

Sono lo sviluppatore di un gioco portatile estremamente portatile che funziona su qualsiasi cosa, dai PC, ai televisori, persino al Kindle Amazon in bianco e nero (Smiles HD - http://smileshd.com - Più dispositivi e piattaforme di quelli che vedi lì) .

Il modo migliore che ho trovato per supportare qualsiasi dispositivo è scegliere una risoluzione di base, quindi ridimensionare (o ridurre) alla schermata corrente. Se vuoi imbrogliare, puoi adattarti alla nuova risoluzione dello schermo, ma idealmente dovresti mantenere le stesse proporzioni. Il montaggio di un gioco realizzato per un display 4: 3 sembra orribile su un 16: 9, ma un 16: 9 su un 16:10, nessuno se ne accorgerebbe. Noterai che mi riferisco agli schermi in base alle proporzioni e non alle dimensioni, il che è un modo particolarmente utile di pensare in questa era di dimensioni LCD totalmente casuali.

Per creare opere d'arte che si adattano a qualsiasi schermo mantenendo le proporzioni, creare sfondi più grandi di quelli che vedranno la maggior parte degli schermi tipici. Questo è simile al concetto di aree sicure con la televisione.

http://en.wikipedia.org/wiki/Safe_area

Gli sfondi generati funzionano davvero bene per questo. Disegni piastrellati, scacchiere, forme frattali, ecc. Devi solo generare un po 'di più per adattarsi a un nuovo schermo.

Inoltre, creando immagini statiche più grandi di quelle che vedrà il tuo tipico utente. Più ampio del widescreen (16: 9) e più quadrato del def standard (4: 3). Ancora una volta nelle aree sicure per il titolo, adatta le tue informazioni importanti in un'area sicura, ingrandiscile un po 'in modo che l'area sicura tocchi uno dei bordi dello schermo e lasci un po' di fuga per i dispositivi che sono solo un po 'più grandi.

Una variante con cui sto lavorando oggi è la creazione di oggetti 3D "sicuri per il titolo". Dal momento che sono 3D, composti interamente da vertici, rendendoli più grandi dello schermo non occupa praticamente più memoria che se si adattassero. Proprio come la densità dei pixel aumenta, è possibile che si desideri disporre di trame di dettaglio più elevate. Altrimenti, vabbè, è un po 'sfocato.

Interfacce utente, mi piace adattare l'interfaccia utente principale all'interno di un quadrato perfetto al centro dello schermo. Gli angoli e i bordi centrali sono anche ottimi posti per mettere le cose; Dovresti calcolare le loro coordinate in quanto tali (relative all'angolo o ai bordi centrali).

http://www.smileshd.com/press/iPad/png/UI01.png

Se vuoi davvero essere sofisticato, puoi supportare sia gli orientamenti Tall che Wide. Alcuni dispositivi segnalano che le loro risoluzioni dello schermo sono più alte che larghe (ad esempio iPhone), quindi potresti dover fare comunque qualcosa per quei dispositivi, anche se sta semplicemente ruotando tutte le tue coordinate.

Un'interfaccia utente che si adatta a schermi alti e larghi può essere uno spettacolo piuttosto impressionante.

Ampio: http://www.smileshd.com/press/iPad/jpg/SmilesHD01.jpg

Alto: http://www.smileshd.com/press/iPad/jpg/SmilesHD02.jpg

Tra i lati positivi, dal punto di vista del design, devi solo considerare Tall e Wide, invece di Portrait + Reverse Portrait + Landscape + Reverse Landscape. Quando scegli le posizioni delle cose sullo schermo, considera di avere una posizione alternativa più appropriata per l'altro orientamento.

Devo mantenere le versioni più grandi di tutte le immagini e ridimensionarle a seconda della risoluzione (non spreca spazio)?

Bene, puoi "sprecare spazio" e supportare una più ampia varietà di dispositivi con una sola build, oppure "perdere tempo" e devi creare MOLTE build e ridimensionare le opere d'arte per molti dispositivi.

Nel migliore dei casi, dovresti creare le tue opere d'arte a una risoluzione più alta rispetto alle dimensioni finali di un televisore 1080p (1920x1080). 2048x2048 dovrebbe essere una dimensione comune nella grafica di origine. O quello, o considerare l'utilizzo di strumenti di grafica vettoriale come Flash e Adobe Illustrator.

Consiglio vivamente di creare un processo automatizzato per il ridimensionamento della grafica. La maggior parte dei dispositivi mobili oggi, tablet inclusi, non supera risoluzioni superiori a 720p (1280x720) ... almeno, non di molto. Vieni l'anno prossimo, però, non sappiamo se sarà più vero (iPad 3?).

In entrambi i casi, per prestazioni ottimali, è necessario abituarsi all'idea della grafica e delle risorse di origine. È quindi possibile eseguire un processo che ottimizza i dati per qualsiasi dispositivo o target.

I caratteri bitmap si ridimensionano bene o devo usare qualcos'altro?

Si adattano bene se stai usando un buon filtro. Se stai realizzando il tuo gioco 2D con hardware 3D (OpenGL ES), allora ti consiglio vivamente di utilizzare il filtro lineare combinato con MipMapping (ovvero una serie di immagini ridimensionate). Puoi ottenere risultati percettivamente perfetti con questo, ed è spesso più veloce usare le mipmap che non farlo.

http://en.wikipedia.org/wiki/Mipmapping

Spero comunque che aiuti. Buona fortuna con il tuo progetto.


2

In generale, ogni trama che crei dovrebbe essere 256x256 o 512x512. Se stai anche prendendo di mira i pad (Galaxy Tab, Honecomb, iPad), allora 512x512 non riempirà l'intero schermo, quindi potresti voler includere versioni più grandi di quelle risorse artistiche che devono riempire lo schermo. Apple include un suffisso di immagine "@ 2x" nativo per gestire questo caso.

La soluzione semplice, che ho usato io stesso, è semplicemente creare il tuo gioco per uno schermo 320x480 (iPhone). Lascia che questo doppio naturalmente per iPhone 2 (640 x 960), e quindi l'unico altro caso che devi davvero gestire in modo diverso è il fatto che alcuni dispositivi Android hanno uno schermo più alto - quindi basta mettere un buffer in alto e in basso (in verticale modalità).

In breve, costruisci il tuo gioco per una dimensione dello schermo neutra, quindi copri le eccezioni, in base a


2
Penso che ti sia perso il mio Androidtag. Comunque, il buffer fa schifo; è meglio se il tuo gioco si ingrandisce davvero e sembra bello.
ashes999,

1

È meglio conservare le copie funzionanti di qualsiasi risorsa tu abbia. Se stai sviluppando un'immagine in Photoshop, ad esempio, salva il file psd originale. Ogni volta che hai bisogno di un'immagine di risoluzione diversa, puoi aprirla ed esportare la nuova immagine con una perdita di qualità minima.

Invece di costruire per una dimensione dello schermo o un altro, lo farei fortemente consiglio di creare una varietà dall'inizio. Non stai solo parlando di diverse densità di pixel, ma stai anche parlando di diverse proporzioni. 16x9 e 16x10 possono produrre un'esperienza visiva molto diversa. Quindi assicurati di testare le nuove modifiche su una varietà di forme e dimensioni dello schermo diverse.

Nella mia esperienza, i caratteri bitmap non si adattano affatto bene. Può dipendere molto dallo stile del carattere utilizzato, ma in generale il ricampionamento della bitmap del carattere produce risultati molto scarsi. I caratteri bitmap funzionano meglio quando il campionamento delle trame non è impostato su multicampionamento (GL_NEAREST e senza mipmap) ed è reso in modo tale da mappare pixel per pixel sullo schermo. Puoi prendere in considerazione l'utilizzo di una serie di rendering dello stesso carattere con dimensioni diverse e assicurarti che il carattere appaia sempre in scala == 1 nel tuo gioco; questo ti consentirà alcune opzioni limitate quando scegli una dimensione del carattere da usare in un particolare scenario.


1

Android fornisce un aiuto per questo ...

Puoi specificare "risorse alternative" per elementi come la tua grafica.
Dai un'occhiata alla sezione "Fornitura di risorse alternative" a questo link: http://developer.android.com/guide/topics/resources/providing-resources.html Dovresti essere in grado di trovare esempi negli esempi SDK o tramite Google.

Inoltre, Google fornisce un emulatore Android ottenuto con l'SDK. È possibile definire diversi dispositivi virtuali con diverse configurazioni per testare il codice. Ecco un link per maggiori informazioni: http://developer.android.com/guide/developing/devices/emulator.html

Buona fortuna amb


0

Oltre agli aspetti tecnici (affrontati da Mr Strange) fai attenzione quando progetti un gioco con dimensioni dello schermo variabili. Ad esempio, immagina di giocare a strade di rabbia in uno schermo simile a un paesaggio e poi in uno schermo verticale.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.