Start van ‘A Dark Room’

Een tijdje geleden kwam ik A Dark Room tegen: ‘a minimalist text adventure’. En dat was het: vrijwel uitsluitend tekst én bijzonder intrigerend. Dat deed bij mij een lampje branden: dat kan ik toch ook? 🙂 En zo begon BLUE5.

Eerste prototype

In de eerste versie van het spel liet ik de speler ontwaken, zonder enige verklaring waarom de speler had liggen slapen of wat de speler zou moeten doen, behalve verkennen van de spelwereld. Voor extra spanning stopte ik er de dreiging van onbekende ‘monsters’ in. Mijn gezin had er veel plezier om te ontdekken welke keuzes leidden tot welke uitkomsten.

Flow

Het prototype leverde me heel veel op:

  • Ze vonden het leuk! Ik was op de goede weg.
  • Mijn zoon wierp zich op als music producer voor het spel 🙂
  • ‘Verkeerde’ keuzes kunnen maken was spannend, maar niet bevredigend.
  • Verdere ontwikkeling in Vanilla JS bleek een slecht idee. React, here I come!

Iets bouwen erbij?

Met alles wat ik had geleerd, begon ik vol frisse moed alles opnieuw te maken, maar dan in React. Als nieuw element voegde ik het verzamelen van materialen, het fabriceren van gereedschap en het bouwen van dingen toe. Na veel bloed, zweet en tranen had ik dit werkend en liet ik mijn gezin spelen met deze nieuwe versie van het spel. Ze vonden het ‘wel leuk’, maar lang niet zo enthousiast als over de de eerste versie.

Hm…

Monsters eruit, puzzels erin

Nog voor ik het onderdeel ‘bouwen’ af had, speelde ik met de gedachte om puzzels toe te voegen aan het spel. Puzzels die de speler op zou kunnen lossen door hints in het spel te verzamelen, deze te interpreteren door middel van logisch denken (ik ben een groot fan van spellen als Monkey Island, Myst/Riven en Outer Wilds).

Ik liet een eerste versie hiervan met maar één puzzel zien aan mijn gezin, maar de reacties hierop waren wat gemengd. “Waar zijn de monsters gebleven?”. Tjsa, die had ik weggehaald. “En hoe gaat het verhaal verder dan?”. Tjsa, dat wist ik zelf ook nog niet. Maar wacht eens even: dat betekende dat ze heel nieuwsgierig waren naar hoe het verhaal verder zou lopen. Ik had beet!

Eindelijk had ik de opzet van mijn spel helder:

  • Een onbekende spelwereld die je kunt ondekken
  • Monsters o.i.d. als bedreigen en daardoor verkeerde keuzes kunnen maken
  • Verzamelen van materialen en bouwen
  • Een verhaal dat zich verteld door middel van hints en puzzels in de spelwereld.

Designen doe je zo

Nu ik het gevoel had dat ik de opzet van het spel te pakken had, werd het tijd voor een fatsoenlijk uiterlijk.

Mijn design kunsten. Doosjes tekenen kan iedereen, toch? 🙂

En gelijk responsive maar natuurlijk, zodat het zowel op smartphone als in de browser lekker zou gaan werken. Geheel in de stijl van A Dark Room, hield ik het supersimpel met een old-school feeling: geen enkel grafische pracht, maar een monospace font en alles in grijstinten, met uitzondering van één kleur blauw.

De spelwereld groeit

Nog iets dat een goed design nodig had: de spelwereld. Elke locatie moest logische aanvoelen. Elke hint op een passende plek, net als elke puzzel. Met vrijheid voor de speler om de wereld te verkennen, zonder er in te verdwalen.

Eerste poging tot de speelwereld, inclusief hints en puzzels

Dit bleek iets te veel van het goede om allemaal tegelijk te doen. Ik besloot om eerst alle hints en puzzels uit te werken en te programmeren. Deze hoefde ik ‘alleen nog maar’ te plotten in een wereld. Daarvoor sorteerde ik de puzzels op moeilijkheidsgraad.

Alle hints & puzzels op een rij, van moeilijk naar makkelijk

Nu had ik in feite een ‘route’ die ik de speler wilde laten afleggen. Voor een goed evenwicht tussen verkennen en verdwalen, wilde ik de eerste paar puzzels elkaar lineair laten opvolgen, waarna de wereld zich steeds meer kon vertakken en hints en puzzels steeds verder van elkaar af zouden liggen.

De complete wereld, met alle hints en puzzels

Met de locaties die ik had had van de eerste poging en de route bleek dit verrassend gemakkelijk!

Hints

Niet elke puzzel ging mijn gezinsleden even makkelijk af. De een had af en toe een hint nodig, de ander meerdere. Toen ik dit een paar keer had gedaan, viel ineens het kwartje: “Hoe gaan mensen hier online uitkomen?”. Ik had een paar opties:

  • Niets doen
  • Walkthrough schrijven
  • Hints inbouwen

Mijn favoriete optie is altijd om niets te doen, maar dat zou hier niet goedkomen. Zelf vind ik walkthroughs nooit leuk om te gebruiken voor een puzzelspel, omdat je vaak te veel informatie krijgt. Veel leuker is het als je een licht duwtje krijgt in de juiste richting, zodat je toch nog het gevoel hebt dat je de puzzel (voor het grootste gedeelte dan) zelf hebt opgelost. UHS-hints.com doet dit bijvoorbeeld heel goed.

UHS-hints.com

Technisch bleek het heel makkelijk om in te bouwen. Maar de hints zo opstellen dat ze je in babystapjes leiden naar de oplossing, bleek nog een hele kluif.

Mobile

Dat responsive design van eerder, bleek in de praktijk op de telefoon niet zo lekker te werken. Ik had twee mogelijkheden:

  • Het responsive design zo aanpassen dat dit op mobile ook goed zou gaan werken
  • De game omzetten naar een native app

Say hello to React Native: een manier om op een React manier een native app te maken voor zowel Android als Apple.

Ik hoopte een boel React code te kunnen hergebruiken, maar dat viel wat tegen. Het is ook niet voor niets ‘Learn once, write anywhere’ i.p.v. ‘Write once, use anywhere’ :).

Veel bloed, zweet en tranen later, had ik mijn webapp omgebouwd naar een native app. De app in de Google Play Store zetten, kostte mij eenmalig een paar tientjes en een hoop gedoe, maar ook dat lukte.

Mijn eigen game in de Play Store. Supervet toch?!

Apple wil dat ik 100,- per jaar betaal om iets in de Apple Store te publiceren. Nee, dank u. Jammer, maar helaas voor de Apple fans onder ons. Die moeten het maar doen met de webversie.

The end?

Geen idee. We gaan het zien. Het was een fantastisch project. Misschien komt er ooit nog een vervolg. In de style van Myst & Riven:

The ending can never truly be written.