Deze post is gearchiveerd.
19 augustus 2013 - Story
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!"
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 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!
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):Kortom, in het spel kun je punten verdienen door zwevende sushis te verzamelen, en je kan extra punten verdienen door medespelers af te knallen.
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.
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.
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
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.
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
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.