HTML5 Come scalare il canvas su dispositivi mobile?
- boxbuilder
- Membro
- Messaggi: 158
- Iscritto il: 25/06/2015, 10:37
- Specialità: programmatore
- Uso: GM:Studio 1.4 HTML5
- Contatta:
HTML5 Come scalare il canvas su dispositivi mobile?
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.
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
- GMI VIP
- Messaggi: 3824
- Iscritto il: 13/11/2010, 16:23
- Uso: GM:Studio 2
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
set_window_size
clicca sul logo qui sopra per info e download riguardo ai miei software o per sapere come si crea un videogioco!
iscriviti qui gratuitamente a GMI !
Spoiler
- boxbuilder
- Membro
- Messaggi: 158
- Iscritto il: 25/06/2015, 10:37
- Specialità: programmatore
- Uso: GM:Studio 1.4 HTML5
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
io ho usato window_set_size e surface_resizegameplay_extreme ha scritto:set_window_size
qual è la differenza rispetto a set_window_size?
grazie.
- doom13
- Moderatore
- Messaggi: 2093
- Iscritto il: 31/08/2012, 15:40
- Specialità: Programmazione
- Uso: GM:Studio 2
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
Credo intendesse window_set_size, non mi risulta che nel manuale esista set_window_size ma non ho modo di vedere adesso.
Spoiler
"Things get hard sometimes guys... But remember, dicks get hard too, but they don't stay hard forever. Don't give up!"
- boxbuilder
- Membro
- Messaggi: 158
- Iscritto il: 25/06/2015, 10:37
- Specialità: programmatore
- Uso: GM:Studio 1.4 HTML5
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
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).
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
- Moderatore
- Messaggi: 2093
- Iscritto il: 31/08/2012, 15:40
- Specialità: Programmazione
- Uso: GM:Studio 2
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
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."
"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."
Spoiler
"Things get hard sometimes guys... But remember, dicks get hard too, but they don't stay hard forever. Don't give up!"
- boxbuilder
- Membro
- Messaggi: 158
- Iscritto il: 25/06/2015, 10:37
- Specialità: programmatore
- Uso: GM:Studio 1.4 HTML5
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
Purtroppo sì, quel setting modifica lievemente lo stile della pagina che incorpora il gioco. La chiave della soluzione è da un'altra parte.doom13 ha scritto: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."
Comunque ci sono vicino, appena riuscirò a risolvere illutrerò il metodo.
-
- Newbie
- Messaggi: 47
- Iscritto il: 09/01/2016, 12:05
- Specialità: Sogno a occhi aperti
- Uso: GM:Studio 1.4 Master
- Località: Napoli
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
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.
Ultima modifica di Arcade Blues il 05/02/2016, 12:29, modificato 2 volte in totale.
- boxbuilder
- Membro
- Messaggi: 158
- Iscritto il: 25/06/2015, 10:37
- Specialità: programmatore
- Uso: GM:Studio 1.4 HTML5
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
Pazzesco! Non ho mai creduto a Babbo Natale, ma dovrò ricredermi.Arcade Blues ha scritto: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.
- doom13
- Moderatore
- Messaggi: 2093
- Iscritto il: 31/08/2012, 15:40
- Specialità: Programmazione
- Uso: GM:Studio 2
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
Non è detto che ci siano
Spoiler
"Things get hard sometimes guys... But remember, dicks get hard too, but they don't stay hard forever. Don't give up!"
-
- Newbie
- Messaggi: 47
- Iscritto il: 09/01/2016, 12:05
- Specialità: Sogno a occhi aperti
- Uso: GM:Studio 1.4 Master
- Località: Napoli
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
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.
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.
-
- Newbie
- Messaggi: 47
- Iscritto il: 09/01/2016, 12:05
- Specialità: Sogno a occhi aperti
- Uso: GM:Studio 1.4 Master
- Località: Napoli
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
Uno dei contro è sicuramente che è molto opinionato ha una sua filosofia insita nell' utilizzo con i valori di default.Quali sono i "contro" del tuo sistema ?
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
- Membro
- Messaggi: 158
- Iscritto il: 25/06/2015, 10:37
- Specialità: programmatore
- Uso: GM:Studio 1.4 HTML5
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
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:
nello step event invece:
nello script scale_canvas:
in questo modo riesco a scalare facilmente la grafica per ogni dispositivo.
Volendo si potrebbe agguingere un controllo sull'orientamento del dispositivo:
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à.
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;
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);
}
Codice: Seleziona tutto
/// scale_canvas(width, height);
//argument0 = current width
//argument1 = current height
window_set_size(argument0 , argument1);
window_center();
Volendo si potrebbe agguingere un controllo sull'orientamento del dispositivo:
Codice: Seleziona tutto
if (browser_width < browser_height){
//portrait
} else {
//landscape
}
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à.
Ultima modifica di boxbuilder il 16/02/2016, 16:33, modificato 3 volte in totale.
-
- GMI Advanced
- Messaggi: 2093
- Iscritto il: 19/12/2010, 16:17
- Specialità: Programmazione
- Uso: GM:Studio 1.4 Standard
- Contatta:
Re: HTML5 Come scalare il canvas su dispositivi mobile?
Vero l'ho notato pure io! Non funzionano più!
♥♥♥♥♥♥
♥♥♥♥♥♥
♥♥♥♥♥♥
Spoiler
Chi c’è in linea
Visitano il forum: Nessuno e 143 ospiti