HTML5 Come scalare il canvas su dispositivi mobile?

[boxbuilder]

Ciao a tutti,
da qualche giorno sto cercando una soluzione ad un problema che attualmente mi sembra insormontabile,
ovvero come scalare il canvas html5 per poter essere visualizzato anche da dispositivi mobile.
Ho tentato la strada dello script "scale_canvas" come mostrato in uno dei teck blog di yoyogames, ma senza buoni risultati.
Poi ho iniziato a provare altre strade, tra cui quella di scalare direttamente il canvas.style.width e canvas.style.height, soluzione che funziona ma che ha il problema di non aggiornare l'offset del puntatore (x_mouse e y_mouse).

Avete qualche idea o strategia da suggerirmi?

Grazie in anticipo,

Nic.

[gameplay_extreme]

set_window_size

[boxbuilder]

set_window_size

io ho usato window_set_size e surface_resize
qual è la differenza rispetto a set_window_size?

grazie.

[doom13]

Credo intendesse window_set_size, non mi risulta che nel manuale esista set_window_size ma non ho modo di vedere adesso.

[boxbuilder]

ciao, il problema è il seguente,

seguendo il tutorial "Scaling For HTML5"
https://www.yoyogames.com/tech_blog/81


usando surface_resize

ho riscontrato qualche problema:

1. si riesce a scalare automaticamente solo ciò che non viene disegnato all'interno di un draw event.
2. browser_width e browser_height restituiscono la dimensione della finestra del browser e non quella del canvas scalato (questo mi sembra assurdo, forse sto sbagliando qualcosa).

[doom13]

La butto lì, hai fatto attenzione a questa nota?
"NOTE: For this tutorial, you should have the Global Game Settings set to not be centered (since we will do that in out code), and the scaling option should be set to full scale since we will be dealing with aspect ratio as well."

[boxbuilder]

La butto lì, hai fatto attenzione a questa nota?
"NOTE: For this tutorial, you should have the Global Game Settings set to not be centered (since we will do that in out code), and the scaling option should be set to full scale since we will be dealing with aspect ratio as well."

Purtroppo sì, quel setting modifica lievemente lo stile della pagina che incorpora il gioco. La chiave della soluzione è da un'altra parte.


Comunque ci sono vicino, appena riuscirò a risolvere illutrerò il metodo.

[Arcade Blues]

io ho creato un sistema di scaling ad aspect ratio variabile senza barre per tutte le piattaforme sia con application-surface che senza e sarei curioso di testarlo nel tuo caso d'uso purtropo adesso sto uscendo ed è piu' facile a mostrarlo che a spiegarlo se ti va lasciami il tuo contatto skype in pm.

[boxbuilder]

io ho creato un sistema di scaling ad aspect ratio variabile senza barre per tutte le piattaforme sia con application-surface che senza e sarei curioso di testarlo nel tuo caso d'uso purtropo adesso sto uscendo ed è piu' facile a mostrarlo che a spiegarlo se ti va lasciami il tuo contatto skype in pm.

Pazzesco! Non ho mai creduto a Babbo Natale, ma dovrò ricredermi.

[doom13]

Non è detto che ci siano

[Arcade Blues]

Provero' a riassumere il funzionamento del sistema di scalatura.
Esso supporta un vasto range di form factors senza barre e permette di garantire uno scalamento pixel perfect a tutte le risoluzioni comuni dei device mobile in full screen e di dimenticare problemi di pixel non perfettamente quadrati eo disallineati rispetto a quelli reali del device.
Supporta tutte le piattaforme in modalità diretta o surface(utilizzando per quest' ultima l'application surface).
In browser, considerando la variabilità delle varie barre di stato, il compito di mantenere uno scalamento intero pixel perfect sarà piu' arduo portando a volte a scalature float anche se il sistema grazie alla sua adattabilità riesce sempre a mantenere la massima qualità.
Il sistema supporta virtualmente tutti gli aspect ratio,ma per praticità sono impostati dei limiti(modificabili) oltre i quali vengono presentate le barre(customizzabili in aspetto).Il limiti di default sono di 2:1 max e 1,2:1 min in entrambi gli orientamenti.
Il sistema incorpora anche la gestione del touch (indispensabile per interagire con gli elementi disegnati in draw gui anche indipendentamente dall' utilizzo del modulo opzionale di gui) è il modulo di gui dipendente dal modulo touch e quello screen resize che di default è in coordinate pixel ancorato ad un rettangolo interno safe visibile su tutti i device ,ma ancorabile ai bordi di qualsiasi device con dei semplici calcoli matematici.
Presenta vari widget(finestre gerarchiche, bottoni,sliders etc) con grafica pixelart scalabile preservandone i bordi pixel perfect ( tipo scale 9)
Sono disponibili altri moduli completamente indipendenti.
Il framework in se è in via di sviluppo ,ma stabile e production ready ,mentre il sistema di scaling è da considerarsi completamente implementato.

[Arcade Blues]

Quali sono i "contro" del tuo sistema ?

Uno dei contro è sicuramente che è molto opinionato ha una sua filosofia insita nell' utilizzo con i valori di default.
Scelte atte a standardizzare il modo di fare la grafica nei miei giochi.
Se si esce fuori da questa standardadizzazione il sistema diventa piu' flessibile , ma a mio parere meno efficace.

il primo vincolo è la risoluzione generale del gioco che è stata scelta in base a vari fattori e bilanciando qualità, banda di download e prestazioni.

Risoluzione che sebbene variabile rientra in un range piu' alto dei classici giochi 2d di tempi d'oro , ma piu' basso delle risoluzioni retina attuali.

il sistema sconsiglia , ma non vieta di raddoppiare la risoluzione per supportare al meglio i dispositivi retina, perchè in mancanza di supporto per i doppi assets si andrebbe solo a svantaggiare tutti gli altri, ma come ho detto è una mia opinione e qualcuno potrebbe obbiettare che i suoi artwork sono piu' belli in risoluzione retina e ben valgono i download maggiorati e le prestazioni basse sui device piu' anziani.

La risoluzione puo' essere invece vantaggiosamente dimezzata, ma non senza problemi es il non poter seguire le linee guida degli assets di default(font, bottoni ,finestre, sliders ).

Sul mio 5.5 full hd made in cina la risoluzione effettiva con questo sistema ai settaggio di default è di 640x360 a 3x e a mio parere i pixel sono abbastanza piccoli da nn dare fastidio e bilanciata in modo da permettere vantaggiosamente un approccio sia pixel art che vector alla realizzazione degli assets.

I settaggi di default impongono anche un ampliamento di alcune grafiche di sfondo in verticale e/o orizzontale per far fronte alla maggiore quantità di aspect ratio da coprire.

[boxbuilder]

Ciao a tutti, ritorno su questo vecchio tread per descrivere la semplice soluzione per la scala HTML5 che ho implementato, ovvero:

In un singleton creo un oggetto
obj_HTML5 che setto come persistent, (così si crea una volta sola e resta sempre attivo).

nell'evento create aggiungo i seguenti parametri:

Codice: Seleziona tutto

//le dimensioni di default del gioco
base_width = 750;
base_height = 500;

width = room_width;
height = room_height;

ratio = width/height;
scale = 1;

nello step event invece:

Codice: Seleziona tutto

if (browser_width != width || browser_height != height){
    if(browser_width > width && 
       browser_height > height){
       width = browser_width;
       height = width/ratio;
    }
    if(browser_width < width){
        width = browser_width;
        height = width/ratio;
    } 
    if(browser_height < height){
        height = browser_height;
        width = height*ratio;
    }
    
    scale = height/base_height; //500 pixel
    scale_canvas(width, height);
}

nello script scale_canvas:

Codice: Seleziona tutto

/// scale_canvas(width, height);

//argument0 = current width
//argument1 = current height

window_set_size(argument0 , argument1);
window_center();

in questo modo riesco a scalare facilmente la grafica per ogni dispositivo.
Volendo si potrebbe agguingere un controllo sull'orientamento del dispositivo:

Codice: Seleziona tutto

if (browser_width < browser_height){
//portrait
} else {
//landscape
}

bloccare il gioco e inserire una immagine per far riorientare lo schermo al giocatore, è molto semplice.

Il grave problema di questo sistema è che scalare e riposizionare gli elementi nel drawGUI non è così elementare ed è quindi necessario wrappare tutti i settaggi di posizione in script specifici (io ho risolto nei miei, per ora, semplici giochi, spostando le azioni nei drawGUI all'interno di semplici eventi draw, in questo modo non si dovrà fare assolutamente nulla e il gioco verrà scalato automaticamente.

Ps. Forse è colpa della mia noobbaggine ma col mio browser non riesco ad usare i marcatori per la formattazione del testo, quindi chiedo scusa in anticipo per la sua scarsa leggibilità.

[Solid Snake]

Vero l'ho notato pure io! Non funzionano più!