Hackathon: The Game

Deze week wijden we elke dag 1 blogpost aan de resultaten van de hackathon 2013. Eerste  project aan de beurt: The Game.

Voor ons hackathonproject dit jaar wilden we als developers uit onze comfort-zone treden: ons niet beperken tot “gewoon” een vette website maken, zoals we al dagelijks doen.

Na lang nadenken kwam het idee naar boven iets te doen waar we op voorhand al van weten dat het bijna onmogelijk is om op 48 uur volledig af te werken, én waarbij we ook gretig gebruik maken van nieuwe technologieën waar we extra ervaring willen mee op doen: "Laten we een spel maken!"

Show the awesomeness to the world!

De bedoeling was voornamelijk om bij te leren en tegelijkertijd te bewijzen wat we op korte tijd kunnen. We wilden er natuurlijk ook mee kunnen naar buiten komen. Om klanten in spé te overtuigen van onze skills. En om developers, die interesse tonen om ons team te komen versterken, te laten zien dat we niet het zoveelste bedrijf zijn dat gewoon maar wat websites maakt.

De brainstorm

De keuze viel op een spel in puur HTML5, CSS3 en JavaScript. Erg moeilijk was het niet om een heel team van geïnteresseerden mee te krijgen om het voorstel vorm te geven. De eerste stappen voor thegame.wijs.be waren gezet!

Het concept

Uiteindelijk gingen we voor een multiplayer platformgame waar een mobiel apparaat als controller kan gebruikt worden. Yep, we gingen het ons zelf niet té makkelijk maken.

Wat we uiteindelijk wilden (we lijsten hier enkel de belangrijkste features op):

1. iedereen kan joinen op het speelveld, ook als het spel al bezig is. Zelfs alleen moet je nog steeds kunnen spelen
2. je moet elkaar kunnen uitdagen / afknallen
3. de iPhone als controller kunnen gebruiken (of gewoon met het toetsenbord)
4. registratie om te kunnen gamen, voor de highscores en om de controller automatisch aan je speler te koppelen zonder al te veel rompslomp
5. punten eventueel opdelen tussen verzilverde en niet-verzilverde. De niet-verzilverde punten kan een tegenspeler van jou afnemen.
6. missies zijn een meerwaarde
7. een “capture the flag”-achtig speltype integreren, op die manier kun je de verzamelde punten verzilveren
8. vijanden voorzien. Hier hadden we al snel enkele persoonlijkheden uitgedacht met elk zijn eigen specifieke manier om je als speler tegen te werken, of misschien zelfs in je voordeel werken
9. een mogelijkheid om gemakkelijk speelvelden te creëren. Elk speelveld kan er compleet anders uitzien. We beginnen met 1 vast speelveld.

Kortom, in het spel kun je punten verdienen door zwevende sushis te verzamelen, en je kan extra punten verdienen door medespelers af te knallen.

Technische aanpak

Zoals bij elk project begonnen we met een lege repository op GitHub, zodat we achteraf een historiek en versiebeheer hebben en samenwerken geen probleem vormt.

De backend is Symfony. Deze voorziet de opslag van de scores, en later kan hier een level editor bij zodat je met enkele muisklikken een speelveld kan maken. Uiteraard wordt ook het userbeheer en de registratie hier afgehandeld.

Op de frontend wilden we AngularJS gebruiken. Dit framework kan statische documenten gemakkelijk omzetten naar dynamische content. Het scorebord is bijvoorbeeld 1 lijntje HTML met een specifiek attribuut en AngularJS doet de rest om hier de spelerslijst te tonen.
Ook de knoppen van de controller worden op een soortgelijke manier herkend en omgezet naar de juiste triggers.
Uiteraard ontbreekt ook jQuery niet op de frontend. In de game engine bewijst die op veel plaatsen zijn nut.
De game engine ontwikkelden we doelbewust zelf. Er bestaan al frameworks voor, maar op deze manier konden we veel meer bijleren over hoe alles in elkaar zit.

De mobiele controller

De game server zelf maakt gebruik van node.js als platform voor onze netwerk applicatie en socket.io voor de realtime connectie en het verbinden van de verschillende spelers en de controllers.
Kort gezegd, je start je node server, per gebruiker wordt een socket connectie gelegd en je hebt een multiplayer platform. Dit systeem is analoog aan bijvoorbeeld zelf een chat servertje schrijven om chat functionaliteit aan te bieden op een site.
Het grote nadeel is dat dit niet zo maar op een standaard webserver kan, en je door de vele gelijktijdige verbindingen met je hosting provider best afcheckt of dit wel kan/mag op je webserver.

De afbeeldingen werden opgeslagen en geïmplementeerd als svg’s. Dit heeft verschillende voordelen: ten eerste zijn dit vector-bestanden en worden deze dus op alle schermresoluties scherp weergegeven. Een tweede groot voordeel is dat dit xml-data is die kan gestijld worden door middel van CSS. Een voorbeeld hiervan zijn de ninja's in het spel. Iedere speler heeft zijn eigen kleur, maar voor iedere speler wordt dezelfde svg gebruikt en per speler wordt de kleur van de band aangepast door middel van CSS.

Alle animaties in de website en het spel, zoals de drijvende wolken, de draaiende ninja-sterren, en de sushi's, werden door middel van CSS gedaan.

Voor de duidelijkheid, door de beperkte tijd hebben we geen rekening gehouden met oudere browsers en dus geen fallbacks voor oudere Internet Explorers voorzien.

Voor de hackathon zelf deden we beroep op een provider die ons een VDS voorzag met een basis linux installatie. We zorgden dus helemaal zelf voor een werkende MySQL, Apache en node.js server die aan al onze specs voldeden. Belangrijk voor de node.js is dat er genoeg geheugen voorzien is. We rekenden 2GB als minimum. Na afloop van de hackathon schakelden we onze trouwe leverancier Openminds in voor de hosting zodat we zeker zijn van een goed onderhouden en beveiligde server.

De kleur van de band wordt per speler aangepast door middel van CSS

Het resultaat

We zijn blij dat we, na 48 uur, een werkend resultaat kunnen tonen. Helaas, en dat wisten we op voorhand, hebben we niet alle features kunnen voorzien. Maar wie weet komen die er alsnog in!

We weten ook dat het bij meer actie op het speelveld, of bij een tragere verbinding, wat trager kan lopen. Hierdoor kunnen de bewegingen door de mobiele controller wel soms eens achter komen.
Hou er dan ook rekening mee dat er nog wel wat bugs kunnen zitten in deze pre-alpha versie.
Momenteel zijn enkel de eerste 4 punten op onze oorspronkelijke wishlist afgecheckt.

Zelf spelen?

Dat kan! Maak een account aan op thegame.wijs.be als je die nog niet hebt, log in en je kan beginnen spelen!
De standaard controls zijn spatie om te springen, de linkse en rechtse pijl om naar links en rechts te bewegen, en de pijl omhoog om te springen.
Om je mobiel toestel als controller te gebruiken surf je naar de zelfde url, log je in en je neemt de controle van je speler over.

Feedback is steeds welkom in de comments, via sociale media of via thegame@wijs.be

Credits

Developers
Davy - interim pm; game server development; system administrator
Jonas G - backend development; static site frontend
Lowie - development game server with AngularJS, node.js, socket.io
Wouter - development game server & game engine; game frontend

Frontenders/Designers
Ad - design & frontend site, game objects, characters, overall
Jonas - design & frontend playgrid, game objects
Tom - design/concept brainstorm participant

Other
Ineke - information architect; tester
Joke - tester; moral supporter ;-)
... en uiteraard alle collega's die van de hackathon in het algemeen een succes hebben gemaakt.