Come usare le schermate di caricamento e come personalizzarle

3

Un interrogativo comune è quella di come personalizzare la schermata di caricamento di Construct 2. Questo può essere fatto usando il loader layout, cioè uno speciale layout che viene mostrato mentre il progetto è in caricamento.

Possibilità creative

Ecco qualche idea interessante su come sfruttare al meglio la propria schermata di caricamento:

- Puoi fare la barra di caricamento nello stesso stile del tuo gioco. Questo aiuta a immergere il giocatore nello stile di gioco dal momento in cui esso inizia a caricare.

- La schermata di caricamento può essere disegnata come la schermata principale, in modo che il giocatore possa in poco tempo iniziare la partita.

- Puoi anche includere informazioni come le istruzioni e i controlli sulla schermata di caricamento, in modo che il giocatore possa leggere qualcosa di utile mentre aspetta. (Non dimenticare di includere le istruzioni nel menù principale del gioco, nel caso in cui il gioco carichi in fretta!)

- Potresti anche includere un minigioco, o una piccola parte del gioco intero, così il giocatore sarà intrattenuto nel attesa del caricamento. Non dimenticare che dovresti provare ad utilizzare meno oggetti che puoi sulla schermata di caricamento in modo da non rallentare il tutto e far caricare il gioco più velocemente!

Come si caricano i progetti

Prima di fare una schermata di caricamento, è meglio capire come i progetti di Construct 2 sono caricati. Questo avviene in 4 fasi.

1. Le pagine HTML e Javascript vengono scaricate. Fino a che l'engine di Construct 2 non finirà di scaricare, niente sarà mostrato.

2. Una volta che il Javascript sarà scaricato (di solito molto velocemente), il default loader apparirà. Questa è la schermata di caricamento predefinita di Construct 2, che è tipicamente un logo di HTML5 con una barra di caricamento blu. Questa è mostrata quando il layout sta caricando. Lo stile del default loader può anche essere cambiato nel Project Properties (lo vedremo dopo).

3. Il resto del progetto caricherà mentre è mostrato il layout caricato precedentemente.

4. Infine il gioco sarà completamente caricato e pronto per essere iniziato.

Nota che nelle fasi 2 e 3, scaricherà solo le immagini. Tutti i codici Javascript saranno scaricati nella fase 1, e l'audio viene trasmesso dopo che il progetto sarà avviato. Per più informazioni su come l'audio funziona on demand, vedi Audio in the manual. Cosi l'unica cosa che carica mentre la barra del caricamento è mostrata sono le immagini cioè gli Sprites, i Tiled Backgrounds, e così via.

Questo vuol dire che tutto quello di cui hai bisogno per velocizzare il caricamento del tuo gioco è di fare poche immagini e piccole più che puoi. Per più informazioni e consigli su come ridurre la grandezza del progetto, vedi Image compression in Construct 2 e Under the hood: spritesheets in Construct 2.

Come creare una barra di caricamento

Ci sono 2 impostazioni importanti nel Project Properties: Use loader layout e Loader style.

Loader style cambia l'aspetto del default loader. Vedi Cambiare la schermata di caricamento di default (default loader) sotto per più informazioni.

Use loader layout attiva l'uso della schermata di caricamento. Per impostazione predefinita non è attivato, quindi è necessario attivarlo specificamente per ogni progetto. Così il primo layout diventa la schermata di caricamento. Dovresti specificamente selezionare la tua schermata di caricamento con l'opzione First layout per essere sicuro che sarà la prima schermata ad apparire (altrimenti Construct 2 potrebbe scegliere un layout diverso da utilizzare per il caricamento).

Mostrare il progresso della barra

L' espressione del sistema loadingprogress è un numero compreso da 0 a 1 per il progresso del caricamento del progetto. Per esempio, se il progetto è metà caricato, loadingprogress sarà 0.5. Puoi utilizzare questo per mostrare il progresso del caricamento sulla schermata del caricamento.

Per esempio, per mostrare la percentuale caricata con un testo , dovresti impostare come testo l'oggetto del testo così:

round(loadingprogress [] 100) & "%"*

Questo moltiplica il progresso per 100 per fare così una percentuale, arrotonda il risultato, e aggiunge il carattere cento, con conseguente testo come "il 50%".

Anche l'oggetto Tiled Background fa una buona barra di caricamento. Per esempio se tu hai un Tiled Background, che è di 500 pixel di larghezza quando è pieno, metti "every tick" e set width to:

500 [] loadingprogress*

Questo comporterà il riempimento della barra fino a piena larghezza, cioè 500 pixel in questo caso, in base a quanto il progetto è caricato.

E' essenziale mostrare un riferimento su quanto il progetto è caricato. Altrimenti utenti con connessioni lente possono diventare frustrati, senza avere idea di quanto sono vicini a giocare il gioco, e uscire. Sarebbe un peccato se rinunciassero a giocare solo alcuni secondi prima che il gioco sarebbe caricato, solo perché non hai mostrato un riferimento sul caricamento.

Oltre che ad una sorta di indicatore di caricamento si potrebbe anche aggiungere altre animazioni o effetti come, ad esempio, spinners, clessidre e così via.

Considerazioni

Ricordate che le immagini di ogni oggetto devono finire di caricare completamente prima di essere mostrato sulla schermata di caricamento. Se si posiziona l'oggetto Player con 10 animazioni sul layout da caricare, tutti e 10 le animazioni devono terminare il caricamento prima che l'oggetto sia mostrato sulla schermata di caricamento. Se desideri solo mostrare l'icona dell'oggetto Player, considera l'idea di fare un oggetto separato per la schermata di caricamento con solo una delle immagini dell'oggetto Player.

Considera con attenzione ogni oggetto che posizioni sulla schermata di caricamento , così come tutte le sue animazioni. Sono tutte necessarie? Ricordate, solo gli oggetti che hanno molte immagini ritarderanno la proiezione della schermata di caricamento, quindi rifletti attentamente su ogni Sprite e Tiled Background che utilizzi, soprattutto se hanno lunghe animazioni. L'ideale sarebbe che la schermata di caricamento si mostrasse il più rapidamente possibile.

Limitazioni

Nota alcune limitazioni sull'utilizzo della schermata di caricamento:

1.Le schermate di caricamento non sono mostrate durante la pubblicazione come applicazioni native su cellulare (ad esempio attraverso [PhoneGap] [1], [CocoonJS] [2] e [appMobi] [3]). Questo perché l'intera applicazione viene scaricata in una sola volta. Dal momento che tutti i file sono immediatamente disponibili, non ha bisogno di essere mostrata. Per queste piattaforme, probabilmente è meglio informarsi invece su un'immagine iniziale personalizzata.

2.Le schermate di caricamento sono solo mostrate la prima volta che il gioco viene scaricato dal web. I giochi di Construct 2 sono salvati su disco in modo che possano essere giocati offline, la prossima volta che l'utente giocherà il gioco, esso si caricherà istantaneamente. Anche se il gioco si aggiornerà, esso sarà ancora possibile caricarlo istantaneamente. Ma mentre il gioco sarà immediatamente caricato dal disco, esso inizierà a scaricare l'aggiornamento in background. È possibile utilizzare il [Browser object] [4] per rilevare nuovi aggiornamenti, e richiedere all'utente di ricaricare il gioco quando l'aggiornamento è pronto. Per ulteriori informazioni, vedi il tutorial [Offline games in Construct 2] [5], e gli aggiornamenti nella sezione sottostante .

3. Sulla schermata di caricamento, non è possibile creare o generare oggetti, né è possibile passare ad un altro layout fino a quando il caricamento non è completo. Questo perchè, ovviamente, il resto del progetto non è ancora stato caricato.

4.Ricordate, il default loader viene ancora visualizzato mentre la schermata di caricamento è di per sé in caricamento.

Caricamento completato

Quando il caricamento è terminato, loadingprogress sarà uguale 1. Inoltre, il sistema innescherà On loader layout complete (dalla Start & End category). È possibile utilizzare questo evento per mostrare un pulsante 'Play', in modo da passare ad un menu principale, o semplicemente per avviare il gioco.

Cambiare la schermata di caricamento di default (default loader)

Il Loader style cambierà il "default loader" per il progetto. Questo viene ancora visualizzato quando la schermata di caricamento è di per sé in caricamento, o è l'unica barra di avanzamento quando non viene utilizzato la schermata di caricamento.

I quattro stili sono:

Barra di Avanzamento & Logo (the default): mostra un logo e una barra di avanzamento blu. È possibile modificare il logo sovrascrivendo logo.png nella cartella di esportazione dopo l'esportazione. Assicurarsi che il file sia il più piccolo possibile in modo che sia visualizzato il rapidamente possibile (il logo di HTML5 di default è solo di 1kb!) La barra di avanzamento è lunga come la larghezza del logo.png e sta 12px sotto di esso.

Solo barra di avanzamento: uguale a prima, ma logo.png non è ne caricato ne mostrato.

Percentuale in testo: invece della barra di avanzamento, viene mostrato un testo grigio che indica la percentuale caricata.

Niente (non raccomandato):sarà visualizzata semplicemente una schermata vuota durante il caricamento. Questo non è raccomandato con una schermata di caricamento, dal momento che gli utenti con connessioni lente non vedranno nessun riferimento mentre la schermata del layout è in caricamento. Si raccomanda vivamente di utilizzare la Percentuale in testo come minimo.

Aggiornamenti

Come descritto sopra, la schermata di caricamento mostra solo il primo caricamento. Anche se si aggiorna il gioco, la prossima volta che verrà giocato inizierà immediatamente e avviare l'aggiornamento in background, come descritto nel tutorial Offline games in Construct 2.

È possibile rilevare che questo avvenga usando le seguenti condizioni nel Browser object:

Is downloading update: true quando il tuo gioco è in esecuzione, ma tu hai caricato una nuova versione e il browser sta scaricando l'update in background.

On update ready: si attiva quando l'aggiornamento ha finito il download. La nuova versione non sarà utilizzata fino a che la pagina non sarà riaggiornata, quindi si consiglia di richiedere all'utente l'aggiornamento della pagina o utilizzare l'azione del Browser object Reload .

Mentre Is downloading update è true, anche loadingprogress è impostato per l'avanzamento del download dell'aggiornamento.

Utilizzando queste funzioni è possibile ri-utilizzare la schermata di caricamento come un layout di aggiornamento. Tuttavia, quando si finisce l'aggiornamento, non dimenticate di ricaricare invece di iniziare il gioco. In alternativa, non è necessario utilizzare questi eventi e si può semplicemente lasciare che gli aggiornamenti avvengono automaticamente e silenziosamente

Conclusione

Fare una schermata di caricamento è un modo fondamentale per fare una grande prima impressione dal primo momento in cui il gioco inizia a caricare. Basta ricordare: mostra sempre un qualche tipo riferimento al caricamento, e tenta di utilizzare il minor numero possibile di immagini sulla schermata di caricamento.

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!