Prefazione e note di traduzione
Questo è un tutorial scritto originariamente da pcfernandesjr e tradotto, mantenendo la prima persona singolare, da MattCage. Ove possibile il traduttore cerca di rimanere il più fedele possibile al testo originale tuttavia, essendo passati due anni dalla sua stesura, il traduttore ha inserito eventuali aggiornamenti e/o modifiche dove necessario.
Introduzione
Ho incontrato un SACCO di difficoltà lavorando con i fonts in Construct 2. Dopo un paio di testate al muro e qualche ricerca tra tutorial e post riguardanti questo problema, ho sviluppato questo metodo (o una sorta, almeno) che credo sia il migliore disponibile ad oggi. Io non l'ho testato su piattaforme mobile come iOS o Android mentre il traduttore MattCage l'ha testato su Windows Phone 8+ e funziona egregiamente: ad oggi, ne garantiamo quindi il funzionamento su progetti esportati per Windows Store e per il Web.
1 - Scegliere un font
Innanzitutto devi scegliere un font carino per il tuo gioco. Assicurati di leggere i termini di utilizzo e controlla che il font designer permetta che venga utilizzato per questo tipo di lavoro.
2 - Preparare i file giusti
Serviti del Webfont Generator di Font Squirrel - fontsquirrel.com/tools/webfont-generator - che ti preparerà i files di cui avrai bisogno. Inoltre, questo sito ha una fornita varietà di font utilizzabili gratuitamente: dagli un'occhiata!
Carica i font da convertire cliccando su Upload Font, lascia selezionata l'opzione di default (Optimal) e seleziona la casella di controllo Agreement.
Se ne hai bisogno, puoi caricare anche più di un singolo font: saranno tutti inclusi nel singolo file CSS che ne gestirà i collegamenti.
Dopo poco, apparirà un pulsante Download Your Kit in basso a destra nel riquadro del generatore. Cliccalo e dopo pochi istanti avrai scaricato un file ZIP contenente i file che ti serviranno.
3 - Estrarre i file
Ora apri il file ZIP appena scaricato. Ti serviranno i file che hanno le estensioni: .eot, .svg, .woff, .ttf e .css. Per assicurarsi la massima compatibilità con le tecnologie più recenti (ad esempio le ultime versioni dei browser WebKit come Chrome), ti consigliamo di includere anche il file .woff2.
Seleziona questi file dall'archivio ZIP ed estraili dove meglio preferisci.
4 - Importare i file nel Progetto
Ora apri (o ingrandisci) la finestra di Construct 2. Nel pannello Project, clicca con il tasto destro sulla cartella Files, seleziona l'opzione Import Files e scegli i file appena estratti.
5 - Creare l'evento per utilizzare i Web Font
Ora hai aggiunto i tuoi font al tuo Progetto. Prima di iniziare a creare gli eventi che ne gestiscono il corretto funzionamento, e fanno sì che il font venga letto, ti consigliamo di creare sin da ora la cartella che conterrà il tuo gioco HTML5, ad esempio nella Cartella Pubblica di Dropbox o da qualche parte in Google Drive. Solitamente i font vengono aggiunti nella root, la cartella principale, del gioco.
Ora puoi creare, nei Layout dove ne hai bisogno, l'evento padre. Nell'Event Sheet seleziona:
System -> On start of layout
Seleziona quindi un Oggetto Text al quale vuoi settare il font.
Seleziona, in Appearance, "Set web font".
La finestra di dialogo che si aprirà di chiederà di inserire due valori, Family name e CSS URL.
Il primo è il nome del font, che DEVE essere lo stesso riportato nel file .css.
Il secondo è il percorso al quale si trova il file .css e va così compilato:
"[percorso] / [nome file].css"
Nel caso tu stia sviluppando un gioco per il Web, assicurati che il percorso funzioni sul tuo servizio di cloud hosting; se altrimenti hai a che fare con un gioco per Windows Store (e presupponiamo quindi anche per le altre piattaforme mobile ma NON GARANTIAMO), lascia vuoto il campo del percorso.
Fatto ciò puoi ora esportare il tuo progetto e caricarlo dove meglio preferisci, o distribuirlo sulla piattaforma che ti interessa.
Se vuoi puoi fare un piccolo test per verificare se Construct 2 riesce a leggere il tuo font. Per impostazione predefinita, se il file richiesto non viene trovato l'interprete (o compilatore) del dispositivo caricherà qualsiasi altro font disponibile che rientri nella eventuale famiglia, o "gruppo di font", del font richiesto. Anche notare questo comportamento è un segnale che il codice funziona comunque correttamente, ma in questo caso bisogna controllare il percorso dove risiedono i file che hai scaricato!
6- Esporta il gioco
A seconda della piattaforma che il tuo progetto ha come target, puoi ora esportare il tuo gioco cliccando sulla ruota dentata in alto a sinistra dello schermo e selezionare Export Project.
Qui vi indicheremo come esportare un progetto per il Web, in ogni caso consigliamo di seguire i tutorial ufficiali che trattano l'argomento.
Esporta il tuo progetto come HTML5 Website.
7- Upload su Dropbox / Google Drive
Carica il tuo gioco sul servizio di cloud hosting. Assicurati che venga caricato nel percorso che sia compatibile con quello che hai impostato affinchè il gioco possa leggere i font. Ora puoi testarlo!
P.S. Sfortunatamente potrebbe volerci molto tempo affinché il gioco legga i font, a seconda di dove è mantenuto il gioco, la velocità di connessione ad internet ecc. Nel mio caso, mantenendolo su Google Drive, ha richiesto una manciata di secondi. Su Gamejolt invece vengono letti istantaneamente.
A tal proposito, raccomando di creare un Event Sheet dedicato ai soli font ed includerlo dove necessario.
Se hai ancora dubbi e/o suggerimenti, sentiti liberi di contattare o me o il traduttore MattCage (per richieste in lingua italiana)!
E se vuoi vedere i risultati di questo tutorial, puoi provare il mio gioco: Tinysaur