Come gestiresti diverse proporzioni in un platform 2D?

Molto tempo fa, 4: 3 era praticamente l'unico rapporto di aspetto che potresti trovare su un PC. Oggi il più comune è 16:10, ma la maggior parte dei nuovi monitor (soprattutto laptop) sono 16: 9

Sto scrivendo un platform 2D e non riesco a decidere come dovrei gestire tutti i diversi rapporti.

Ecco alcune idee:

1. 4: 3 ottiene più contenuti, i widescreen vengono tagliati in alto e in basso
2. 16: 9 ottiene più contenuti, gli altri vengono tagliati a sinistra ea destra
3. Il gioco è in 16: 9 con barre orizzontali nere per altri AR
4. Il gioco è in 4: 3 con barre verticali nere per altri AR

Se non hai motivi validi per rendere il tuo gioco "ampio" (nel qual caso usa l'approccio 3) o stretto (nel qual caso usa l'approccio 4), scegli una combinazione di 1 e 2 (o possibilmente 3 e 4 se vuoi nascondere le cose fuori dallo schermo).

Seleziona un rapporto di compromesso (16:10 è buono o anche 16:11). Se l'utente è su 16: 9 dai più contenuti a lato e se è su 4: 3 dai più contenuti in alto e in basso.

In ogni caso, trovo che sia meglio implementarlo con qualcosa del genere nella tua classe di fotocamere:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

A quel punto puoi semplicemente sperimentare diverse dimensioni nominali del mondo (ad esempio: la dimensione della telecamera in unità mondiali) e selezionare semplicemente la migliore.

Bene, come consiglio di base, su PC direi "non dare per scontato che il tuo utente voglia eseguire lo schermo intero". E in modalità finestra, scegli il rapporto ideale e usalo direttamente.

Gli utenti che penso generalmente accettano le barre nere quando vengono presentati con contenuti a schermo intero. Quindi le strategie 3 e 4 sono accettabili, se non ideali. Hanno il vantaggio di sapere sempre quanti contenuti stai riproducendo: cioè senza bug subdoli che si verificano solo quando si esegue in widescreen.

Se stai cercando di essere adattivo e di rilevare il rapporto degli utenti tramite la risoluzione dello schermo e mostrare il maggior numero possibile di contenuti, devi tenere conto dei contenuti ad alta e bassa priorità in modo diverso. I contenuti ad alta priorità sono cose che l'utente deve assolutamente vedere sullo schermo, se è fuori schermo il gioco non riesce. Quindi queste sono cose come gli elementi HUD e UI, l'avatar del giocatore e tutto ciò con cui interagiscono. Il contenuto a bassa priorità è roba che se è sullo schermo, allora va bene, ma se è sullo schermo non è un grosso problema. Ad esempio: grafica di sfondo e cose ragionevolmente lontane dall'avatar.

Supponendo che tu abbia una UI / HUD che viene sovrapposta alla sommità di un mondo 2D 'fisico', allora questo è abbastanza semplice. Gli oggetti a bassa priorità sono facili, devi solo assicurarti che il viewport 4: 3 sia centrato sulle cose interessanti, quindi disegna quante più cose a bassa priorità che puoi a sinistra o a destra. Le cose ad alta priorità nel mondo 2D (ad es. Il tuo personaggio, i nemici che il tuo personaggio sta combattendo direttamente) dovrebbero sempre essere mantenute nella vista 4: 3. Vale a dire che il tuo codice di gioco non fa zoomare la telecamera per sfruttare la proprietà extra dello schermo, perché in questo caso il codice di gioco agirà in modo diverso in widescreen vs. Chiedi al codice del gioco di supporre che il mondo venga visualizzato in 4: 3 e che il tuo codice di rendering sia consapevole che in realtà c'è molto di più di quello che è visibile.

La disposizione degli elementi UI / HUD può essere affrontata in due modi:

1. Posizionamento dinamico: specificare tutti gli elementi relativi ai bordi dello schermo (ovvero non tutti relativi a 0,0). A seconda delle proporzioni, gli elementi saranno più vicini o più lontani dal centro dello schermo. Pro: ti permette di agganciare le cose agli angoli e farle "solo lavorare". Contro: Difficile far funzionare bene il layout al centro e rischio di sovrapposizione degli elementi
2. Posizionamento statico conservativo: disponi tutti i tuoi elementi in 4: 3 e sfalsali semplicemente quando esegui in widescreen. Pro: logica / coordinate di layout semplici e inequivocabili. Contro: lascia spazio morto visivo alla sinistra e alla destra dei controlli dell'interfaccia utente, dove vedrai il mondo 2D in background ma nessuna interfaccia utente.

Qual è il più appropriato per il tuo gioco? Se stai realizzando Canabalt (ovvero un gioco che dipende dalla velocità orizzontale), un ampio formato con barre nere (n. 3) su aspetti più stretti sarebbe l'ideale per evidenziare il movimento laterale. D'altra parte, se hai un gioco più aereo come Super Smash Brothers, uno schermo più alto (# 2 o # 4) sarebbe il migliore. Baserei la mia decisione su ciò che funziona meglio per il gioco.

Concordo con gli altri soccorritori sul fatto che occorre prestare attenzione agli elementi che potrebbero essere visibili su un display ma non su un altro.

Castle Crashers sembra usare un po 'di # 2 e un po' di # 3 - ottieni barre nere su uno schermo 4: 3 e anche un'area visibile leggermente più piccola - ma dovresti sempre avere una "area sicura" attorno ai bordi dove non metti comunque nulla di vitale (per schermi come TV CRT che ritagliano i bordi)

C'è un'altra opzione. È possibile inquadrare per un rapporto intermedio ed eseguire sia il ritaglio che l'espansione (o il bordo) su entrambe le risoluzioni normali.

Credo che le riprese della TV siano inquadrate in questo modo, in modo che il widescreen appaia (tutti non sono affollati nel mezzo della scena), mentre il ritaglio per 4: 3 non è così drastico e c'è una panoramica minima.

Ecco un post sul blog sulla gestione di più dimensioni dello schermo su dispositivi mobili, e qui la sua seconda parte su come questo approccio ha codificato in Java usando libgdx . È un po 'come la risposta di Andrew, ma può aiutare qualcun altro.

Il post sul blog tratta tre approcci principali:

1. Vivi con barre nere in alto o ai lati.
2. Usa una finestra virtuale.
3. Usa elementi fluttuanti, proprio come potresti trovare in un layout di flexbox per pagine web.

Il n. 1 è piuttosto autoesplicativo.

Per illustrare no. 2, supponiamo di voler supportare tre diversi dispositivi con tre diverse proporzioni. Apri l'immagine in un editor di immagini. Per il primo dispositivo, disegna il rettangolo più grande con le proporzioni di quel dispositivo che si adatteranno all'interno dell'immagine. Fare lo stesso per il secondo dispositivo e il terzo dispositivo. L'area utilizzabile, o viewport virtuale, è l'intersezione di tutti e tre questi rettangoli. Non è possibile garantire che qualsiasi cosa al di fuori di quella finestra sia visibile.

Il n. 3 implica il posizionamento di oggetti sullo schermo in modo simile a come si posizionerebbero gli elementi su una pagina Web usando flexbox o float. Ad esempio, posizioneresti il ​​pulsante Pausa a 5 pixel dall'alto e 5 pixel a destra. Indipendentemente dalle proporzioni del dispositivo, il pulsante di pausa sarà sempre nell'angolo in alto a destra.