Slik reduserer du HTML5-spillet ditt til Js13kGames-konkurransen

Hva du skal skape

Som du kanskje vet, er den tredje utgaven av js13kGames-konkurransen her: Den offisielle starten er satt til 13. august, 13:00 CEST. Js13kGames er en konkurranse for HTML5 spillutviklere hvor den morsomme og utfordrende delen av kompoen holder hele spillet under 13KB.

Denne artikkelen bør være et godt utgangspunkt hvis du vil lære å generere eiendelene, og redusere og komprimere koden, slik at du kan oppfylle kravene til konkurransen. Jeg vil også gi deg verktøy som kan hjelpe deg i dine daglige prosjekter hvis du trenger å holde ressursene dine lyse.

Hva er egentlig js13kGames-konkurransen?

Js13kGames-konkurransen er dedikert til HTML5-spillutviklere og JavaScript-programmerere som vil teste sine ferdigheter i kamp med andre utviklere, følge reglene, holde seg til fristen, og vinne noen premier. Konkurransen går fra 13. august til 13. september. Du har hele måneden til å kode og sende inn oppføringen. Ingen eksterne biblioteker eller ressurser som Google Fonts er tillatt. alt du vil bruke i spillet ditt må passe inn i 13 kilobytes av en ZIP-pakke. Konkurransen er gratis for alle, men kildekoden må være vert for GitHub slik at andre kan lære av det i fremtiden. 

Den 13 kilobytegrensen er svært restriktiv, men begrensninger skaper ofte kreativitet: du må nøye tenke på hvordan du implementerer dine ideer, da hver byte virkelig teller.

Hvorfor ta del?

Hovedformålet med kompo er morsomt. Fristen bidrar til å holde det gøy, fordi du må avslutte prosjektet på et tidspunkt og ikke kan holde slaver vekk på det for alltid. 

Å delta i konkurransen forbedrer din ferdighet, hjelper deg med å styre tiden du bruker på prosjektet, og gir deg muligheten til å samarbeide med samfunnet. I tillegg er det en sjanse for at du kan vinne mange interessante premier, bli kjent, og til slutt tjene en bøttebelastning som en spillutvikler. Hva annet trenger du?

Tips og triks

La oss gå gjennom de spesifikke tipsene og triksene du kan bruke til å redusere spillets kildekode og alle de brukte ressursene, fra JavaScript-reduksjon, ved å skjære bildestørrelser, til prosessnivå og lydgenerering.

Generelle tips

Du har en hel måned for å kode spillet ditt, slik at du ikke trenger å tilbringe søvnløse netter gjennom helgen å drikke kaffe og energidrikker for å konkurrere med andre. Du kan jobbe i ditt eget tempo, når du har tid og når du føler deg som den.

På grunn av de stramme restriksjonene på størrelsen på den endelige pakken, er det nesten umulig å bruke noe rammeverk. Selvfølgelig, hvis du kan forberede et lite sett med hjelpefunksjoner som passer inn i 13 kilobytegrensen, er du selvfølgelig mer velkommen til å gjøre det. 

Det samme gjelder bildene, skjermbilder av spillene er ofte større enn spillene selv, så du må være smart. Du vil trolig generere alt på egen hånd uansett, eller bruke svært små, komprimerte eiendeler; det er den beste måten å passe hele spillet inn i størrelsesgrensen.

JavaScript Kode Minification

Hovedkjernen til JavaScript-spillet ditt er kildekoden. Du kan muligens generere absolutt alt uten å bruke andre ressurser som bilder eller lyder, så optimalisering av denne koden er svært viktig.. 

Den enkleste tingen å gjøre er å redusere koden, noe som betyr at den vil bli fjernet av hvite plasser (faner, mellomrom, nye linjer og så videre) uten at selve koden blir endret.

Du kan ta dette videre ved hjelp av andre verktøy som vil endre din opprinnelige kildekode for å komprimere størrelsen så mye som mulig, ved å bruke kortere variabelnavn og andre slike triks. Som en bivirkning vil disse verktøyene også skjule kildekoden og gjøre den ulestelig-kalt obfuscation. En av de viktigste konkurransebetingelsene er at du må ha en lesbar versjon av innleveringen din på GitHub uansett, så klemme hver byte ved å lage koden i pakken med pakker som ikke kan leses, er helt greit.

Verktøy som Google Closure Compiler, YUI Compressor eller UglifyJS, og online-tjenester som Compressor Rater, JSMini eller JSObfuscate, kan hjelpe deg å komprimere koden din så mye som mulig. Bruk dem til din fordel.

Bildekomprimering

Det vil ikke være mange bildefiler i spillet ditt hvis du vil tilpasse det til 13 kilobytes, men likevel, hvis du vil bruke et bilde, må du komprimere det så mye som mulig. Det finnes elektroniske verktøy som TinyPNG og Optimizilla, installerbare programmer som ImageOptim, kommandolinjeverktøy og bygge skript for å gjøre det, slik at du kan finne noe som passer til arbeidsflyten din.. 

Du kan også kode ditt spill i lav oppløsning med små bilder og deretter skalere alt opp, eller kaste bort alle bildene og generere alt på lerretet fra grunnen av.

Prosessnivå Generering

Gitt det begrensede rommet tilgjengelig, ville det være lurt å tenke på å randomisere nivåene i spillet ditt. Den beste måten å opprettholde spillets høye replay-verdi på er å generere nivåene dine prosedyrisk, slik at i stedet for å ha ett eller to faste nivåer, kan du levere en annen opplevelse hver gang spillet spilles.

De beste eksemplene i den kategorien er roguelikes som bruker labyrinter og fangehuller for sine nivåer. Du kan generere en stor verden fra bare noen få små biter, og det kan være annerledes hver gang du starter spillet. Takket være denne tilnærmingen blir spillerne ikke kjedelige for fort.

Lydgenerering

Å legge til lyd i spillet øker den samlede opplevelsen, men med sanger som vanligvis veier inn på 5 MB eller mer, hvordan kan du passe noen i js13k-oppføringen din? Jsfxr til redning!

I stedet for å krympe en MP3, kan du generere din egen musikk og lydeffekter. Jsfxr er en JavaScript-port på sfxr-biblioteket, og ble mye brukt av deltakerne i fjorårets konkurranse, noe som betyr at det er kamptestet og gir gode resultater.

Bygg system

Ved siden av verktøyene som allerede er nevnt, kan du hjelpe deg selv ved å automatisere noen av oppgavene du har; bygge systemer som Grunt eller Gulp kan gjøre å forberede alle dine eiendeler mye lettere. 

Hvis du er fan av Gulp, er det en rekke byggeoppgaver å velge mellom: Jack Rugile foreslår en Gulp-kombinasjon av gulp-uglify + gulp-htmlmin + gulp-zip + gulp-filstørrelsen mens Csaba Csecskedi legger til jafs-imagemin til denne samlingen. Du trenger ikke å bruke den hvis du ikke føler deg komfortabel med Gulp eller bare ønsker å jobbe den gode gamle måten, men dette settet kan i stor grad forbedre din totale arbeidsflyt for js13kGames oppføring.

Boilerplate-kode

Det eneste strukturelle kravet ved siden av størrelsesgrensen er at du må ha index.html fil i hovedmappen til pakken - alt annet er valgfritt. Du kan strukturere koden din slik du vil, inkludere mapper for JavaScript, CSS og bildefiler separat, eller bare legg alt i HTML-filen og glem alt annet. Du kan gjøre alt for hånd, eller bruk browserify, forbedre CSS ved hjelp av LESS eller SASS, eller til og med lint koden din med ESLint. (Det var det som Florent Cailhol forberedte på sitt eksperimentelle js13k boilerplate depot på GitHub.) Igjen: dette kan alle hjelpe deg, men det er ikke nødvendig.

Velg riktig type spill

Dette kan være tydelig, men ikke glem å nøye velge en passende type spill som passer inn i 13 kilobytes, fordi noen av spillene er vanskeligere å bygge (og for å holde seg små) enn andre. Jeg sier ikke at du ikke kan lage en 3D-personspill, real-time strategi, bysimulator, 3D-racing spill, trafikklys manager eller jogge naken gul blokkspill som noen vanlige utviklere gjorde i de siste årene, men det store Flertallet av oppføringene handler om enkle spill med en kjernemekaniker som du pakker spillet rundt, noen genererte bilder, og noen ganger enkel lyd.

Husk at etterbehandling noe er bedre enn å ha et stort, uferdig prosjekt som folk aldri vil se. Følg initiativet One Game a Month, hold deg til fristen, og prøv å fullføre oppføringen din i tide. Hold den liten i omfang, så vel som størrelse; Hvis du er fornøyd med den fungerende prototypen og har litt ledig plass tilgjengelig, kan du alltid legge til nye funksjoner i spillet senere. Polsk prosjektet ditt så mye som mulig, og du vil kunne vinne konkurransen ved å bygge spill som SpacePi eller Radius Raid.

Lær av andre

Dette er de grunnleggende tips og teknikker som kan hjelpe deg med å kode spillet ditt for js13kGames-konkurransen, men du trenger ikke å bruke dem. Det er mange verktøy du kan bruke i spillet ditt for å holde det i størrelsesgrensen; det avhenger av dine preferanser. Hvis du ikke har noen erfaring, er det beste å lære av andre.

Du kan sjekke kildekoden til oppføringene fra de foregående årene, spille spillene og se hva som er mulig innenfor grensen, grave gjennom blogginnleggene som forklarer folks erfaringer, og les kildekoden og lær av det. Still spørsmål gjennom sosiale medier, diskutér dine ideer og problemer med andre. Det er skjønnheten i en konkurranse - du er ikke alene; Du kan samarbeide med andre, danne lag, og nivå opp dine ferdigheter på kort tid.

Sammendrag

Alle verktøyene og tjenestene som er oppført i denne artikkelen, bør hjelpe deg med å forberede js13kGames-konkurransen. Det er viktig å ikke rette oppmerksomheten på verktøyene alene; Du bør også se på hva andre gjør, lære av sine erfaringer, og være en del av samfunnet. 

Hvis du har forskjellige måter å forberede deg på konkurransen, vennligst del dem i kommentarene! La oss alle ha nytte, lære og hjelpe hverandre. Tross alt ble konkurransen begynt å være morsom og underholdende, med litt læring underveis.

ressurser

Sjekk ut disse ekstra ressursene for konkurransen:

  • 13 enkle trinn for å lage komposlides fra onGameStart 2012
  • Arcade Audio for js13kGames av Jack Rugile
  • Triskaidekaphobia, et spill laget for å fremme js13kGames
  • Offisielle regler og krav
  • Liste over årets dommere og premier
  • Oppføringer fra 2012 og 2013
  • Gamedev.js Ukentlig nyhetsbrev med kompo oppdateringer
  • Twitter hashtags: # js13k eller # js13kGames
  • Andre initiativer verdt å nevne: js1k, Ludum Dare, 1GAM
  • Finn syltetøy og konkurranser: compohub.net, indiegamejams.com