Cum de a minimiza jocul HTML5 pentru competiția Js13kGames

Ce veți crea

După cum probabil știți, cea de-a treia ediție a concursului js13kGames este aici: startul oficial este stabilit pentru 13 august, 13:00 CEST. Js13kGames este o competiție pentru dezvoltatorii de jocuri HTML5 unde partea distractivă și provocatoare a compo-ului este păstrarea întregului dvs. joc sub 13KB.

Acest articol ar trebui să fie un bun punct de plecare dacă doriți să învățați cum să generați activele, să micșorați și să comprimați codul, astfel încât să puteți îndeplini cerințele pentru concurs. De asemenea, vă ofer instrumentele care vă pot ajuta în proiectele zilnice, dacă aveți nevoie să vă păstrați resursele luminoase.

Ce este exact concursul js13kGames??

Concursul js13kGames este dedicat dezvoltatorilor de jocuri HTML5 și programatorilor JavaScript care doresc să testeze abilitățile lor în lupta cu alți dezvoltatori, să respecte regulile, să respecte termenul limită și să câștige niște premii. Concursul se desfășoară între 13 august și 13 septembrie - aveți întreaga lună pentru a vă codifica și a vă înscrie. Nu sunt permise nici biblioteci externe sau resurse precum Google Fonts; tot ce doriți să utilizați în joc trebuie să se încadreze în 13 kilobytes dintr-un pachet ZIP. Competiția este gratuită pentru toți, însă codul sursă trebuie să fie găzduit pe GitHub, astfel încât alții să poată învăța din ea în viitor. 

Limita de 13 kilobyte este foarte restrictivă, însă limitările adesea produc creativitatea: trebuie să te gândești cu grijă la modul în care îți poți implementa ideile, așa cum contează în mod efectiv fiecare octet.

De ce participați?

Scopul principal al compo este distractiv. Termenul limită vă ajută să îl păstrați distractiv, deoarece trebuie să încheiați proiectul într-un anumit moment și nu puteți continua să vă întrebați pentru totdeauna. 

Participarea la competiție vă îmbunătățește abilitățile, vă ajută să vă gestionați timpul petrecut pe proiect și vă oferă posibilitatea de a coopera cu comunitatea. În plus, există o șansă să câștigi o mulțime de premii interesante, să devii bine cunoscut și, în cele din urmă, să câștigi o încărcătură de bani ca fiind un dezvoltator de jocuri. De ce mai ai nevoie?

Sfaturi și trucuri

Să trecem prin sfaturile și trucurile specifice pe care le puteți folosi pentru a minimaliza codul sursă al jocului și toate activele folosite, de la miniprocesarea JavaScript, prin tăierea dimensiunilor imaginilor, la nivelul procedural și generarea de sunet.

Sfaturi generale

Aveți o lună întreagă pentru a vă codifica jocul, astfel încât nu trebuie să petreceți nopți nedormite prin weekend, beți cafea și băuturi energizante pentru a concura cu alții. Puteți lucra în ritm propriu, ori de câte ori aveți timp și ori de câte ori vă simțiți.

Datorită restricțiilor stricte privind dimensiunea pachetului final, este aproape imposibil să se utilizeze orice cadru. Desigur, dacă puteți pregăti un set mic de funcții de ajutor care să se încadreze în limita de 13 kilobyte, sunteți mai mult decât bineveniți să faceți asta. 

Același lucru se întâmplă și cu imaginile - capturile de ecran ale jocurilor sunt adesea mai mari decât jocurile în sine, deci trebuie să fii inteligent. Veți genera, probabil, totul pe cont propriu, sau folosiți active foarte mici, comprimate; aceasta este cea mai bună modalitate de a potrivi întregul joc în limita de mărime.

JavaScript de codificare minime

Miezul principal al jocului dvs. JavaScript este codul sursă - este posibil să puteți genera absolut totul, fără a utiliza alte resurse, cum ar fi imagini sau sunete, optimizând astfel acest cod este foarte important. 

Cel mai simplu lucru este să minifonezi codul, ceea ce înseamnă că va fi dezbrăcat de spații albe (file, spații, linii noi și altele), fără ca codul să fie schimbat.

Puteți lua acest lucru în continuare prin utilizarea altor instrumente care vor modifica codul sursă original pentru a-și comprima dimensiunea cât mai mult posibil, folosind nume de variabile mai scurte și alte astfel de trucuri. Ca efect secundar, aceste instrumente vor ascunde și codul sursă și îl vor face nerecunoscute confuzie. Una dintre principalele reguli de concurență este că trebuie să aveți oricum o versiune lizibilă a mesajului dvs. pe GitHub, astfel încât să stoarceți fiecare octet făcând codul din pachetul zip necitit este total.

Instrumente cum ar fi Google Closure Compiler, Compresor YUI sau UglifyJS, precum și servicii online cum ar fi Compressor Rater, JSMini sau JSObfuscate, vă pot ajuta să vă comprimați codul cât mai mult posibil. Utilizați-le în avantajul dvs..

Comprimarea imaginilor

Nu veți mai avea multe fișiere imagine în joc dacă doriți să o potriviți în 13 kilobați, dar totuși, dacă doriți să utilizați o imagine, va trebui să o comprimați cât mai mult posibil. Există instrumente online precum TinyPNG și Optimizilla, aplicații instalabile cum ar fi ImageOptim, instrumente de linie de comandă și construirea de scripturi pentru a face acest lucru, astfel încât veți putea găsi ceva care să se potrivească fluxului dvs. de lucru. 

De asemenea, puteți codifica jocul în rezoluție mică cu imagini mici și apoi scalați totul, sau aruncați toate imaginile și generați totul pe panza de la zero.

Generarea de nivel procedural

Având în vedere spațiul limitat disponibil, ar fi bine să vă gândiți la randomizarea nivelurilor din joc. Cea mai bună modalitate de a păstra valoarea reluării ridicată a jocului dvs. este de a genera nivelurile dvs. procedural, astfel încât, în loc să aveți unul sau două nivele fixe, puteți oferi o experiență diferită de fiecare dată când se joacă jocul.

Cele mai bune exemple din această categorie sunt roguelikes care folosesc labirinturi și temnițe pentru nivelurile lor. Puteți genera o lume vastă din doar câteva bucăți mici și poate fi diferită de fiecare dată când începeți jocul. Datorită acestei abordări, jucătorii dvs. nu se vor plictisi prea repede.

Generarea de audio

Adăugarea de audio în jocul dvs. mărește experiența de ansamblu, dar cu cântece care cântăresc de obicei la 5MB sau mai mult, cum puteți să vă potriviți în intrarea dvs. js13k? Jsfxr la salvare!

În loc de a micșora un MP3, vă puteți genera propriile muzică și efecte sonore. Jsfxr este un port de JavaScript al bibliotecii sfxr și a fost utilizat pe scară largă de participanții la concursul de anul trecut, ceea ce înseamnă că este testat de luptă și oferă rezultate excelente.

Construiți sistemul

Pe lângă instrumentele deja menționate, vă puteți ajuta prin automatizarea unor sarcini pe care le aveți; construiți sisteme cum ar fi Grunt sau Gulp pot face pregătirea tuturor activelor mult mai ușor. 

Dacă sunteți un fan al lui Gulp, există o întreagă varietate de sarcini de construit pentru a alege de la: Jack Rugile sugerează un combo Gulp de gulp-uglify + gulp-htmlmin + gulp-zip + gulp-file size în timp ce Csaba Csecskedi adaugă înghițitură-imagemin la această colecție. Nu trebuie să-l utilizați dacă nu vă simțiți confortabil cu Gulp sau doriți doar să lucrați într-un mod bun, dar acest set vă poate îmbunătăți considerabil fluxul de lucru global pentru intrarea dvs. js13kGames.

Codul codului de bare

Singura cerință structurală alături de limita de mărime este că trebuie să aveți index.html fișier în directorul principal al pachetului - orice altceva este opțional. Puteți să vă structurați codul cum vă place, să includeți în mod separat folderele pentru JavaScript, CSS și fișierele imagine sau pur și simplu să puneți totul în fișierul HTML și să uitați de orice altceva. Poți să faci totul manual, sau să folosești browser-ul, să-ți îmbunătățești CSS-ul folosind LESS sau SASS sau chiar să-ți scoti codul cu ESLint. (Asta a pregătit Florent Cailhol în depozitul său experimental js13k pe GitHub.) Din nou: toate acestea ar putea să vă ajute, dar nici unul dintre ele nu este necesar.

Alegeți tipul corect de joc

Acest lucru ar putea fi evident, dar nu uitați să alegeți cu atenție un tip adecvat de joc pentru a se potrivi în 13 kilobytes, deoarece unele jocuri sunt mai greu de construit (și menținând mici) decât altele. Nu spun că nu poți crea un shooter 3D de prima persoană, strategie în timp real, simulator de oraș, joc de curse 3D, manager de lumini de trafic sau chiar jogging gol joc de bloc galben ca niște dezvoltatori nebuni făcuți în ultimii ani, majoritatea intrărilor sunt despre jocuri simple cu un mecanic de bază pe care îl înfășurați în jurul jocului, unele imagini generate și, uneori, un sunet simplu.

Amintiți-vă că finisarea a ceva este mai bună decât a avea un proiect imens, neterminat, pe care oamenii nu îl vor vedea niciodată. Urmați inițiativa One Game a Month, respectați termenul limită și încercați să finalizați înregistrarea la timp. Păstrați-i puțin în domeniul de aplicare, precum și dimensiunea; dacă sunteți mulțumit de prototipul de lucru și aveți puțin spațiu disponibil, puteți adăuga mereu noi caracteristici jocului mai târziu. Finalizați proiectul cât mai mult posibil și veți putea câștiga competiția construind jocuri precum SpacePi sau Radius Raid.

Aflați de la alții

Acestea sunt sfaturile și tehnicile de bază care vă pot ajuta să codificați jocul pentru concursul js13kGames, dar nu trebuie să le utilizați. Există multe instrumente pe care le puteți utiliza în joc pentru a le păstra în limita de dimensiune; depinde de preferințele dvs. Dacă nu aveți nicio experiență, totuși, cel mai bun lucru este să învățați de la alții.

Puteți să verificați codul sursă al înregistrărilor din anii precedenți, să jucați jocurile și să vedeți ce este posibil în cadrul limitei, să explorați postările din blog care explică experiențele oamenilor și să citiți codul sursă și să învățați de la el. Puneți întrebări prin intermediul rețelelor sociale, discutați ideile și problemele cu ceilalți. Aceasta este frumusețea unui concurs - nu ești singur; puteți coopera cu ceilalți, puteți forma echipe și vă puteți ridica abilitățile în cel mai scurt timp.

rezumat

Toate instrumentele și serviciile enumerate în acest articol vă vor ajuta să vă pregătiți pentru concursul js13kGames. Este important să nu vă îndreptați atenția numai asupra instrumentelor; ar trebui să te uiți la ceea ce fac alții, să înveți din experiențele lor și să faci parte din comunitate. 

Dacă aveți modalități diferite de a vă pregăti pentru concurs, vă rugăm să le împărtășiți în comentarii! Să profităm toți, să ne învățăm și să ne ajutăm reciproc. La urma urmei, concursul a început să fie distractiv și distractiv, cu puțină învățare de-a lungul drumului.

Resurse

Verificați aceste resurse suplimentare pentru concurs:

  • 13 pași simpli pentru a crea o diapoziție compo din onGameStart 2012
  • Arcade Audio pentru js13kGames de Jack Rugile
  • Triskaidekaphobia, un joc creat pentru promovarea jocurilor js13kGames
  • Reguli și cerințe oficiale
  • Lista judecătorilor și a premiilor din acest an
  • Intrările din 2012 și 2013
  • Gamedev.js Buletin informativ săptămânal cu actualizări compo
  • Twitter hashtags: # js13k sau # js13kGames
  • Alte inițiative demne de menționat: js1k, Ludum Dare, 1GAM
  • Găsește gemuri și concursuri: compohub.net, indiegamejams.com