Lavorando alla mia idea di un metodo semplice e veloce per personalizzare l’esportazione in HTML di progetti di Construct 3 mi sono nuovamente imbattuto in un problema: C3 rende abbastanza difficile gestire pagine html responsive. Anche se, dopo averci sbattuto la testa un po’ di volte, ho forse trovato un metodo abbastanza veloce e replicabile per simulare Media Query in Construct 3.

Comincio con il far vedere il risultato che ho ottenuto. La GIF è un po’ pesante, spero non in impieghi una vita e mezza a caricarsi.

Bello, vero? Ovviamente questo è il file c3p con il codice che ho usato. Vale però la pena, soprattutto pensando al me futuro riassumere il ragionamento e i vari passaggi necessari.

L’idea

L’idea alla base è piuttosto banale: far si che Construct 3 non gestisca direttamente la posizione e la dimensione dei vari elementi della pagina. Come? Usando una serie di sprite come caselle di una griglia da usare come riferimento per tutto quanto. Questi sprite si posizionano automaticamente in base alla dimensione della finestra del browser.

Per poter fare tutto ciò ci sono due problemi da risolvere:

  1. Construct 3 non deve modificare la dimensione relativa dei vari elementi con il cambiare della dimensione della finestra
  2. Ogni sprite deve calcolare la propria posizione in relazione alla dimensione della finestra. E deve essere abbastanza furbo da capire quando le dimensioni possono variare da quando invece devono essere fisse.

Adattare dinamicamente l’elemento CANVAS di Construct 3 alla finestra

Il primo problema si può risolvere abbastanza rapidamente impostando Fullscreen mode su Off:

e poi modificando la dimensione della canvas alle dimensioni della finestra:

-> System: Set canvas size to Browser.WindowInnerWidth x Browser.WindowInnerHeight

Adattare dinamicamente la dimensione e la posizione degli sprite

Il secondo problema richiede la creazione di un sistema di coordinate e di misurazione da sovrapporre a Construct 3. Fortunatamente possiamo crearlo usando due variabili:

  • VIEWPORT_SIZE_WIDTH
  • VIEWPORT_SIZE_HEIGHT

Nella prima registriamo la larghezza originale della viewport (per capirci, in questo esempio, 856), nella seconda l’altezza (quindi 480). Per calcolare la posizione relativa basta una semplice proporzione:

X_originale : Viewport_originale = X_nuova : Finestra_Browser

Che diventa quindi:

X_nuova = (X_originale / VIEWPORT_SIZE_WIDTH) * Browser.WindowInnerWidth

Lo stesso ragionamento si può applicare per le altre coordinate.

position = absolute in Construct 3

Esiste poi un caso ancora più semplice, ovvero il voler tenere un elemento fisso nella stessa pozione e della stessa dimensione. In questo caso è sufficiente:

X_nuova = X_originale

Tutto qui.

Media Query in Construct 3

È possibile affrontae il discorso dell’insiremnento delle Media Query in Construct 3 in due modi. Il primo, modificando la posizione degli sprite in base alle dimensioni della finestra. Per esempio, in pseudo code:

switch(Browser.WindowInnerWidth) {
  case <500:
    sprite.x = 50;
  break;
  case <768:
    sprite.x = 100;
  break;
  default:
    sprite.x = 200;
}

Per quanto sia la soluzione più semplice ed elegante in JS, è però anche particolarmente lunga e soggetta a errori se sviluppata in un event sheet di Construct 3.

L’alternativa, quella usata nel file di esempio, è creare più livelli e in ogni livello inserire gli sprite nella posizione voluta in base alla dimensione dello schermo. Poi, usando un semplice evento

+ System: Browser.WindowInnerWidth ≤ 500
  -> System: Set layer "grid_little" Visible
  -> System: Set layer "grid" Invisible
  -> System: Set layer "grid_big" Invisible
  -> System: Set layer "grid_large" Invisible

rendere visibile solo il layer voluto.

Infine

Infine, l’ultima questione. Questo metodo permette di creare una griglia responsive in grado di adattarsi a diversi schermi. Si puù usare lo stesso metodo, oltre che per gli sprite anche per ogni altro oggetto di Construct. Oppure, volendo, usare questa griglia come base di riferimento per l’inserimento di altri elementi.

Scrivi un commento