Come posso rendere un sistema indipendente dalla risoluzione?

Mi sto nascondendo su questo. Posso ancorare cose sui bordi, ovviamente, ciò renderebbe la mia risoluzione dell'interfaccia utente indipendente ... fino a quando non cambierà così tanto che la grafica è troppo piccola. Come scalare in modo appropriato ogni volta che è necessario? Come posso mantenere la mia grafica nella giusta proporzione durante il ridimensionamento? Non li voglio allungare se la risoluzione ha una proporzione diversa come 16:10 rispetto a qualsiasi altra cosa.

Esiste un approccio vero e testato a questo? I lettori video mostrano bordi neri a causa di questo problema, non è risolvibile correttamente?

Innanzitutto, tieni presente che tecnicamente con la rasterizzazione non esiste una vera indipendenza della risoluzione. Con un ingrandimento sufficientemente elevato, i singoli tex inizieranno a diventare visibili. L'unica soluzione a questo è scrivere un sistema di grafica vettoriale.

Detto questo, ci sono alcuni passaggi per creare un robusto sistema indipendente dalla risoluzione basata su raster: dimensionamento, sistemi di coordinate e layout.

Per il dimensionamento e il posizionamento è necessario utilizzare un insieme di unità che mantengono un rapporto con la risoluzione effettiva dell'applicazione. In questo caso, usiamo i pollici perché sono americano e puoi ridimensionare gli elementi con DPI (punti per pollice). Ad esempio, supponiamo che l'applicazione sia in esecuzione a 800x600. Il DPI di Windows predefinito è 96, quindi l'applicazione ha una risoluzione di (800/96) x (600/96) pollici o 8,33x6,25 pollici.

Dal momento che devi essere in grado di lavorare, almeno, con entrambi i rapporti di aspetto 4: 3 e 16: 9 come gestisci il tuo sistema di coordinate dello schermo diventa un po 'complicato. Quello che consiglio di fare è mettere (0,0) al centro dell'area di visualizzazione (oltre a finestre e controlli). Funziona bene perché se metti (0,0) in un angolo, allora mentre quell'angolo si sposta in base alla risoluzione e alle proporzioni, tradurrà tutti i tuoi sprite mentre il centro dello schermo sarà sempre il centro dello schermo no importa il dispositivo. Continuando il nostro esempio con 800x600, ciò comporterebbe un sistema di coordinate che è (da sinistra a destra) da -4,165 pollici a 4,165 pollici e (dall'alto verso il basso) da 3,125 pollici a -3,125 pollici.

Quindi al momento hai un sistema di interfaccia utente indipendente DPI con elementi che saranno sempre nello stesso punto rispetto al centro dello schermo - non del tutto indipendenti dalla risoluzione. Fortunatamente ciò che l'indipendenza DPI ti consente di fare è ridimensionare l'interfaccia utente ridimensionando DPI in base a qualche euristica. Ad esempio, possiamo ridimensionare DPI usando la risoluzione verticale come nostra euristica. Se 800x600 è 96 DPI, utilizzeremo 123 DPI per 1024x768 o 115 DPI per 1280x720.

Infine, dovrai costruire un sistema di layout che gestisca sia il posizionamento assoluto sia il posizionamento relativo. Esempi eccellenti di questo sono WPF e il web. Puoi specificare che i controlli / le caselle riempiono una parte dell'elemento genitore mentre lo ancorano a un bordo insieme a molte altre utili opzioni di layout automatico. Tutto questo insieme si tradurrà in un sistema di interfaccia utente in grado di apparire quasi identico in molte risoluzioni e proporzioni diverse.

Per riassumere, ti consiglio vivamente di studiare WPF poiché fa quasi tutto questo tranne che mantiene un'origine nel sistema di coordinate dell'angolo in alto a sinistra e non ridimensiona automaticamente DPI in base alla risoluzione verticale.

Generalmente ciò che vorresti fare dipende dal gioco.

Un'opzione è quella di avere bordi neri se le proporzioni (proporzione) sono diverse (probabilmente il più semplice, basta renderizzare su trama, quindi renderlo su schermo, ridimensionando come appropriato).

Un'altra opzione è quella di avere percorsi di rendering diversi per diverse proporzioni. Potresti averne uno per widescreen, uno per "normale".

Un'altra opzione è quella di ridimensionare le cose separatamente, ad esempio ingrandire o ridurre una finestra di messaggio dell'interfaccia utente a seconda della risoluzione. Ogni volta che devi capire dove disegnare, invece di usare pixel esatti, fai cose come 0.2 giù, 0.8 attraverso, larghezza 0.1, altezza 0.3. Ovviamente in questo caso otterresti un allungamento delle cose, anche se a seconda di come stai disegnando le cose che potrebbero andare bene (cioè allungare uno sfondo dell'interfaccia utente, ma non il testo).

In termini di 3D, fintanto che si imposta correttamente il viewport, si dovrebbe finire con i giocatori widescreen in grado di vedere leggermente più delle configurazioni non widescreen. (in alternativa disegna bordi neri / o allunga la vista).