Come minimizzare il tuo gioco HTML5 per il concorso Js13kGames

Cosa starai creando

Come forse saprai, la terza edizione del concorso js13kGames è qui: la partenza ufficiale è fissata per il 13 agosto alle 13:00 CEST. Js13kGames è una competizione per sviluppatori di giochi HTML5 in cui la parte divertente e stimolante della compo è mantenere il tuo intero gioco sotto i 13KB.

Questo articolo dovrebbe essere un ottimo punto di partenza se vuoi imparare come generare le risorse, e minimizzare e comprimere il codice, in modo da poter soddisfare i requisiti per la competizione. Ti fornirò anche strumenti che ti possono aiutare nei tuoi progetti quotidiani se hai bisogno di mantenere le tue risorse luminose.

Quello che è esattamente il concorso js13kGames?

Il concorso js13kGames è dedicato agli sviluppatori di giochi HTML5 e ai programmatori JavaScript che desiderano testare le proprie abilità in battaglia con altri sviluppatori, seguire le regole, rispettare la scadenza e vincere alcuni premi. La competizione si svolgerà dal 13 al 13 settembre - hai l'intero mese per programmare e inviare la tua iscrizione. Tuttavia, non sono permesse librerie o risorse esterne come Google Fonts; tutto ciò che desideri utilizzare nel tuo gioco deve essere contenuto in 13 kilobyte di un pacchetto ZIP. La competizione è gratuita per tutti, ma il codice sorgente deve essere ospitato su GitHub in modo che altri possano imparare da esso in futuro. 

Il limite di 13 kilobyte è molto restrittivo, ma le limitazioni spesso generano creatività: devi pensare attentamente a come implementare le tue idee, dato che ogni byte conta davvero.

Perché partecipare?

Lo scopo principale della compo è divertente. La scadenza aiuta a renderlo divertente, perché devi terminare il progetto a un certo punto e non puoi continuare a sfruttarlo per sempre. 

Partecipare al concorso migliora le tue capacità, ti aiuta a gestire il tempo dedicato al progetto e ti dà l'opportunità di collaborare con la comunità. Inoltre, c'è la possibilità di vincere molti premi interessanti, diventare famosi, e alla fine guadagnare un sacco di soldi essendo uno sviluppatore di giochi. Cos'altro ti serve?

Suggerimenti e trucchi

Passiamo attraverso i suggerimenti e i trucchi specifici che puoi utilizzare per minimizzare il codice sorgente del tuo gioco e tutte le risorse utilizzate, da minification JavaScript, attraverso il taglio delle dimensioni dell'immagine, a livello procedurale e generazione audio.

Suggerimenti generali

Hai un mese intero per programmare il tuo gioco, quindi non devi passare notti insonni durante il weekend a bere caffè e bevande energetiche per competere con gli altri. Puoi lavorare al tuo ritmo, ogni volta che ne hai il tempo e quando ne hai voglia.

A causa delle severe restrizioni sulla dimensione del pacchetto finale, è quasi impossibile utilizzare qualsiasi framework. Ovviamente, se puoi preparare un piccolo set di funzioni di supporto che si adattano al limite di 13 kilobyte, sei più che benvenuto a farlo. 

Lo stesso vale per le immagini: gli screenshot dei giochi sono spesso più grandi dei giochi stessi, quindi devi essere intelligente. Probabilmente genererai comunque tutto da solo o utilizzerai risorse compresse molto piccole; questo è il modo migliore per adattare l'intero gioco al limite di dimensioni.

Codice di codice JavaScript

Il nucleo principale del tuo gioco JavaScript è il codice sorgente: potresti essere in grado di generare assolutamente tutto, senza utilizzare altre risorse come immagini o suoni, quindi l'ottimizzazione di questo codice è molto importante. 

La cosa più semplice da fare è minimizzare il codice, il che significa che sarà spogliato di spazi bianchi (schede, spazi, nuove righe e così via), senza che il codice stesso venga modificato.

Puoi farlo ulteriormente utilizzando altri strumenti che modificheranno il tuo codice sorgente originale per comprimere le sue dimensioni il più possibile, usando nomi di variabili più brevi e altri trucchi del genere. Come effetto collaterale, questi strumenti nascondono anche il codice sorgente e lo rendono illeggibile-chiamato offuscazione. Una delle regole principali della competizione è che devi avere comunque una versione leggibile della tua submission su GitHub, quindi spremere ogni byte rendendo il codice nel pacchetto zippato illeggibile è assolutamente soddisfacente.

Strumenti come Google Closure Compiler, YUI Compressor o UglifyJS e servizi online come Compressor Rater, JSMini o JSObfuscate possono aiutarti a comprimere il tuo codice il più possibile. Usali a tuo vantaggio.

Compressione dell'immagine

Non ci saranno molti file di immagine nel tuo gioco se vuoi inserirli in 13 kilobyte, ma comunque, se vuoi usare un'immagine devi comprimerla il più possibile. Esistono strumenti online come TinyPNG e Optimizilla, applicazioni installabili come ImageOptim, strumenti da riga di comando e script per farlo, quindi sarai in grado di trovare qualcosa che si adatti al tuo flusso di lavoro. 

Puoi anche codificare il tuo gioco in bassa risoluzione con piccole immagini e poi ridimensionare tutto, o buttare via tutte le immagini e generare tutto da zero sulla tela.

Generazione del livello procedurale

Dato lo spazio limitato disponibile, sarebbe saggio pensare a randomizzare i livelli del gioco. Il modo migliore per mantenere alto il valore di replay del tuo gioco è quello di generare i tuoi livelli proceduralmente, in modo che invece di avere uno o due livelli fissi, puoi offrire un'esperienza diversa ogni volta che il gioco viene giocato.

I migliori esempi in questa categoria sono i roguelike che usano labirinti e dungeon per i loro livelli. Puoi generare un mondo vasto solo da pochi pezzi piccoli, e può essere diverso ogni volta che inizi il gioco. Grazie a questo approccio, i tuoi giocatori non si annoieranno troppo velocemente.

Generazione audio

L'aggiunta di audio al tuo gioco aumenta l'esperienza complessiva, ma con canzoni che in genere pesano circa 5 MB o più, come puoi inserirle nella tua voce js13k? Jsfxr in soccorso!

Invece di ridurre un MP3, puoi generare la tua musica e i tuoi effetti sonori. Jsfxr è una porta JavaScript della libreria sfxr ed è stato ampiamente utilizzato dai partecipanti alla competizione dello scorso anno, il che significa che è stato testato in battaglia e dà grandi risultati.

Sistema di costruzione

Oltre agli strumenti già menzionati, puoi aiutare te stesso automatizzando alcune delle attività che hai; costruire sistemi come Grunt o Gulp può rendere molto più facile la preparazione di tutti i tuoi beni. 

Se sei un fan di Gulp, c'è una varietà di compiti di costruzione tra cui scegliere: Jack Rugile suggerisce una combo di Gulp di gulp-uglify + gulp-htmlmin + gulp-zip + gulp-filesize mentre Csaba Csecskedi aggiunge gulp-imagemin a questa collezione. Non devi usarlo se non ti senti a tuo agio con Gulp o se vuoi semplicemente lavorare alla vecchia maniera, ma questo set può migliorare notevolmente il tuo flusso di lavoro generale per la tua voce js13kGames.

Codice Boilerplate

L'unico requisito strutturale oltre al limite di dimensione è che devi avere il index.html file nella directory principale del pacchetto, tutto il resto è facoltativo. Puoi strutturare il tuo codice come ti piace, includere le cartelle per JavaScript, CSS e file immagine separatamente, o semplicemente mettere tutto all'interno del file HTML e dimenticare tutto il resto. Puoi fare tutto a mano, o usare browserify, migliorare il tuo CSS usando LESS o SASS, o persino filtrare il tuo codice con ESLint. (Questo è ciò che Florent Cailhol ha preparato nel suo repository sperimentale js13k su GitHub.) Ancora: questo potrebbe aiutarti, ma non è necessario.

Scegli il giusto tipo di gioco

Questo potrebbe essere ovvio, ma non dimenticare di scegliere con cura un tipo di gioco adatto a 13 kilobyte, perché alcuni dei giochi sono più difficili da costruire (e da mantenere piccoli) rispetto ad altri. Non sto dicendo che non puoi creare uno sparatutto in prima persona in 3D, una strategia in tempo reale, un simulatore di città, un gioco di corse in 3D, un gestore di semafori, o anche fare jogging a blocchi gialli come alcuni pazzi sviluppatori hanno fatto negli anni passati, ma il vasto la maggior parte delle voci riguardano semplici giochi con una meccanica di base che avvolge il gioco, alcune immagini generate e, a volte, un suono semplice.

Ricorda che finire qualsiasi cosa è meglio che avere un enorme progetto incompiuto che la gente non vedrà mai. Segui l'iniziativa One Game a Month, rispetta la scadenza e cerca di completare il tuo ingresso in tempo. Tenerlo di dimensioni ridotte e dimensioni ridotte; se sei soddisfatto del prototipo funzionante e disponi di uno spazio disponibile, puoi sempre aggiungere nuove funzionalità al gioco in un secondo momento. Lucidi il tuo progetto il più possibile e sarai in grado di vincere la competizione costruendo giochi come SpacePi o Radius Raid.

Impara dagli altri

Questi sono i suggerimenti e le tecniche di base che possono aiutarti a codificare il tuo gioco per la competizione js13kGames, ma non devi usarli. Ci sono molti strumenti che puoi usare nel tuo gioco per mantenerlo nel limite delle dimensioni; dipende dalle tue preferenze. Se non hai alcuna esperienza, però, la cosa migliore da fare è imparare dagli altri.

Puoi controllare il codice sorgente delle voci degli anni precedenti, giocare ai giochi e vedere cosa è possibile entro il limite, scavare nei post del blog che spiegano le esperienze delle persone, leggere il loro codice sorgente e imparare da esso. Fai domande attraverso i social media, discuti le tue idee e problemi con gli altri. Questa è la bellezza di una competizione: non sei solo; puoi collaborare con gli altri, formare squadre e migliorare le tue abilità in poco tempo.

Sommario

Tutti gli strumenti e i servizi elencati in questo articolo dovrebbero aiutarti a prepararti per la competizione js13kGames. È importante non fissare la tua attenzione sugli strumenti da solo; dovresti anche vedere cosa fanno gli altri, imparare dalle loro esperienze e far parte della comunità. 

Se hai diversi modi per prepararti alla competizione, per favore condividili nei commenti! Godiamoci tutti, impariamo e aiutiamo l'un l'altro. Dopo tutto, la competizione è iniziata per essere divertente e divertente, con un po 'di apprendimento lungo la strada.

risorse

Dai un'occhiata a queste risorse aggiuntive per la competizione:

  • 13 semplici passaggi per creare una diapositiva della compo da onGameStart 2012
  • Arcade Audio per js13kGames di Jack Rugile
  • Triskaidekaphobia, un gioco creato per promuovere js13kGames
  • Regole e requisiti ufficiali
  • Elenco dei giudici e dei premi di quest'anno
  • Iscrizioni dal 2012 e 2013
  • Newsletter settimanale Gamedev.js con aggiornamenti di compo
  • Hashtag di Twitter: # js13k o # js13kGames
  • Altre iniziative degne di nota: js1k, Ludum Dare, 1GAM
  • Trova confetture e competizioni: compohub.net, indiegamejams.com