Utilizzo di canvas in diverse dimensioni dello schermo

Question

Sto pianificando di creare un gioco semplice utilizzando il tag HTML5 <canvas> e compili il codice in un'applicazione nativa utilizzando PhoneGap, ma il problema è che canvas utilizza le coordinate che non sono relative alla dimensione di esso, quindi 20,20 su uno schermo 960x640 è diverso su uno 480x800.

Quindi voglio sapere come lavorare con uno <canvas> (che sarà a schermo intero) su diverse dimensioni dello schermo.

Answer 1

Quindi voglio sapere come lavorare con un (che sarà a schermo intero) su diverse dimensioni dello schermo.

Questo è un problema comune che presenta una risoluzione piuttosto semplice. Spesso questo viene fatto separando le coordinate del canvas rigido da quelle che vengono talvolta definite coordinate "modello".

Dipende molto da come è organizzato il codice, ma presumo che il gioco abbia un'altezza e una larghezza maggiori rispetto al mondo che occupa la maggior parte o tutto lo schermo. Le proporzioni delle due schermate che hai scelto sono 1.5 e 1.666, quindi ti consigliamo di rispondere a quella più piccola

Quindi vorrai davvero fare il tuo gioco in una serie di coordinate "modello" che non hanno alcun rapporto con lo schermo o le dimensioni della tela. Dal momento che stai prendendo di mira solo due dimensioni dello schermo, le coordinate del tuo modello possono essere 960x640, poiché questo è il più piccolo tra i due rapporti. Non deve essere. Potrebbe invece essere 100x50 per le coordinate del modello. Ma in questo esempio useremo 960x640 come coordinate del nostro modello.

Internamente, non si utilizza mai nulla, ma queste coordinate del modello. Non hai mai pensato ad altre coordinate quando realizzi il tuo gioco.

Quando la dimensione dello schermo è 960x640 non è necessario modificare nulla poiché è un mapping 1: 1, che è conveniente.

Quindi quando la dimensione dello schermo è effettivamente 800x480, quando arriva il momento di disegnare sullo schermo, ti consigliamo di tradurre tutte le coordinate del modello di (3/4), in modo che il gioco sia fatto e utilizzato internamente 960x480, ma verrà disegnato nell'area di (720x480). Dovrai anche prendere qualsiasi input del mouse o del tocco e moltiplicarlo per (4/3) per trasformare le coordinate dello schermo in coordinate del modello.

Questa traduzione può essere semplice come chiamare ctx.scale(3/4, 3/4) prima di disegnare tutto.

Quindi entrambe le piattaforme avranno il codice che è tutto scritto assumendo che il gioco abbia una dimensione di 960x640. L'unica volta che le coordinate del modello diventano coordiants dello schermo è quando si disegna sulla tela (che è una dimensione diversa) e si converte le coordinate del mouse/tocco della tela per modellare le corde.

Se questo sembra confondervi, posso provare a fare un campione.

Answer 2

Dato che hai solo 2 dimensioni dello schermo puoi avere 2 tele diverse (e la loro logica dietro) di dimensioni diverse.
Se questa soluzione non ti piace, penso che puoi utilizzare solo le dimensioni in% anziché la dimensione assoluta dei pixel. Ultimo ma non meno importante, prova a impostare valori diversi in metatag.

Answer 3

Uso innerWidth/innerHeight di window oggetto:

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

Sarà auto-regolare qualsiasi schermata; devi testare per compatibilità cross platform/schermo!

Inoltre, invece di utilizzare pre-definite x,y coordinate, usare qualcosa di simile a questo:

var innerWidth = window.innerWidth; 
x = innerWidth/3;