Making of: virtueel roulettespel
Sluit Logo DX Solutions

Making of: virtueel roulettespel

7 december 2015 - Xavier
Making of: virtueel roulettespel

Hoe zie jij het café van de toekomst? Samen met Bryo hebben wij hier onze eigen invulling aan gegeven. Het resultaat kan je op 9 en 10 december komen bekijken op de Bedrijven Contact Dagen. Daar zal je namelijk de kans krijgen om met onze zelf ontwikkelde, virtuele roulette mee te spelen. Via je smartphone zal je deze kunnen bedienen en kans maken op de hoofdprijs: een golden ticket voor een pint, getapt door een robot.

 

Blik achter de schermen

Het ontwikkelen van de virtuele roulette gebeurde niet in enkele dagen. De voorbereidingen begonnen al in augustus.  Onze medewerker, Glenn, nam de programmatie voor zijn rekening en legt je uit hoe dit in zijn werk ging:

 

Glenn

 

Node.js

Voor de ontwikkeling van het virtuele roulette spel gebruikte ik het software platform node.js (in Javascript) en het framework socket.io. Door deze combinatie werd het mogelijk om een realtime applicatie te schrijven. Socket.io wordt gebruikt aan de node.js kant, maar bijvoorbeeld ook aan de kant van de croupier, speler en tafel om onderling te communiceren. Waarom realtime? Als je bijvoorbeeld wilt dat men niet meer kan inzetten, moet de speler daar direct van op de hoogte zijn. Of als een speler inzet, dan moet je dat direct weten.

 

Meer specifiek gebruikte ik het voor:

  • Het virtueel draaien van de roulette
  • Bijhouden van de timing (hoeveel seconden kunnen er nog worden ingezet)
  • Aansturen van de table view
  • Onderlinge communicatie tussen de verschilende “actoren” (tafel, croupier, speler...)
  • Reageren op acties van de croupier (start ronde, herstart de server...)
  • De croupier van data voorzien (wie speelt er, hoeveel chips heeft hij/zij...)
  • Player management (wie speelt er, hoeveel chips heeft hij/zij, wat heeft hij/zij ingezet...)

 

Phaser.js

Ik heb eerst het wiel getekend in Inkscape. Het proces hiervan kan je volgen op de onderstaande afbeeldingen.

 

roulette1

roulette2

roulette3

roulette4

roulette5

roulette6

roulette7

roulette8

 

Om de table view te genereren gebruikte ik phaser.js omdat dit framework 2D goed ondersteunt. In de grond is dit wel een 3D framework, maar eigenlijk emuleert het als ware 2D. Met het grote voordeel dat die 2D graphics dan ook hardware geacceleerd zijn. Phaser.js wordt ook gebruikt door onder andere BBC, National Geographic Channel, History Channel... wat een aanwijzing is over de kwaliteit van het framework. Phaser.js gebruikte ik enkel en alleen om de table view te genereren. Het is de roulette server (op basis van node.js) die roulette virtueel draait, deze op basis daarvan aanstuurt, zegt wie er gewonnen is en welke secties opgelicht moeten worden...

 

Grunt.js

Ik maak intensief gebruik van de grunt.js tool. Grunt is een taskrunner die in 1 woord dingen automatiseert en dan voornamelijk zaken die repetitief zijn.

Het is zo geconfigureerd dat het in de gaten houdt wanneer ik bepaalde wijzingen aanbreng en dan voert het een lijst van taken uit. Taken zoals bijvoorbeeld het combineren van meerdere javascript files, kijken of de stijl van mijn (JS) code goed is, verkleinen van de javascript, kopiëren van zaken naar de correcte folders enzovoort...

 

Jquery Mobile

Een van de constraints was dat de gebruiker niets zou moeten installeren. De bedoeling van het virtuele roulette spel is dat mensen die op de beurs uitgenodigd worden om het spel te spelen geen app moeten gaan installeren.

 

Een website leek mij dus de volgende logische keuze. Om toch een beetje de 'app feel' te creëren maakte ik gebruik van jQuery Mobile, een framework waarmee je 'app-like' online websites kan maken.

 

Opzet

Ik heb ervoor gekozen om modulair te werken in de zin dat een speler, croupier, de tafel en de node.js server op zichzelf staan. Iedereen houd zich bezig met zijn eigen taken en communiceert enkel met de roulette server (node.js).

 

Het voordeel daarvan is dat ik zo makkelijker kan focussen op een onderdeel, anderen simultaan aan een bepaald onderdeel kunnen werken en ook dat het enorm flexibel is.

 

Zo werkt de roulette server ook als er geen table view geconnecteerd is en kun je op papier communiceren met niet-specifieke hardware of electronica of kun je praten met native mobiele apps, etc.

 

Besluit

Games ontwerpen is zeer ingewikkeld en tijdsintensief, wat vaak onderschat wordt. Het is belangrijk om een goede kennis van fysica en wiskunde te hebben. Daarbij vraagt onderzoek, testen en schrijven enorm veel tijd. Ik hoop dan ook dat mensen zullen genieten van het virtuele roulettespel!

 

Virtueel roulette spel

 

Heb je zin om mee te gaan in onze verbeelding? Kom ons dan zeker bezoeken op de VOKA BRYO stand nummer 223.

Tot dan!