Outremer: Knights of Light and Shadow

2026

Een strategiespel in de browser: twee ridderorden op een bord van 15 × 15 vakken. Wie een vijand aanvalt, vecht het in een arena uit, in realtime.

Outremer leent het spelprincipe van Archon uit 1983: een bord waarop je om de beurt stukken zet, en een arena waarin twee stukken het in realtime uitvechten zodra het ene op het veld van het andere stapt. De winnaar krijgt het veld en houdt zijn wonden. Namen, stukken, spreuken, beelden en muziek zijn nieuw. Het spel speelt in een verzonnen kruisvaardersland rond de woestijnburcht Kerak-al-Sahr, waar de Orde van de Dageraad (wit, rood en goud) vecht tegen de Orde van de Schaduw (zwart, karmijn en zilver).

Het bord is 15 × 15 vakken. De drie kolommen aan de kant van de Dageraad zijn altijd licht, de drie aan de kant van de Schaduw altijd donker. De negen kolommen ertussen worden na elke ronde een stap lichter of donkerder, van nacht naar dag en terug in tien stappen. Licht helpt de Dageraad, donker de Schaduw: een stuk op zijn eigen kleur heeft in het duel tot 25 procent meer levenspunten, op de kleur van de vijand tot 10 procent minder. Zeven gouden sterren zijn plaatsen van macht. Een stuk daarop geneest elke beurt 20 procent en geen spreuk kan het raken. Wie alle zeven tegelijk bezet, wint. Je wint ook als er geen vijand meer staat of als de vijand geen zet meer heeft.

Elke orde heeft 22 stukken in zes soorten: een leider, twee kampioenen, vier ridders te paard, vier schutters, negen sergeanten en twee vliegende wezens, een griffioen bij de Dageraad en een wyvern bij de Schaduw. De soorten verschillen per orde. De kruisboog schiet traag en zwaar, de boog van de Schaduw snel en licht met vuurpijlen. De sergeant van de Dageraad heeft een schild dat slagen van voren deels tegenhoudt, die van de Schaduw een morgenster met meer bereik. Alleen de leider kan toveren, met vijf spreuken die elk één keer per spel bruikbaar zijn: genezen, een stuk wegsturen naar een leeg veld, een vijand drie beurten vastzetten, het licht naar de eigen kleur draaien, en een gevallen stuk terughalen. Elke spreuk kost de leider 10 levenspunten.

In de arena bestuur je je stuk met WASD of de pijltjestoetsen en sla je toe met F, spatie of Enter, ook met een gamepad. Zuilen rijzen en zakken in een vast ritme. Ze houden pijlen en lopers tegen, maar vliegers gaan eroverheen. Een zware slag breekt een uithaal die nog wordt ingezet, dus timing telt meer dan snelheid. De computer speelt via dezelfde invoer als een mens, op drie niveaus. Met 40 duels per paar en per lichtstand is gemeten dat geen spiegelduel buiten 30 tot 70 procent valt en dat de Dageraad over alle paren 49 procent wint. Op het bord kiest de computer zijn zet op basis van die gemeten winstkansen, in een Web Worker, zodat het beeld niet hapert terwijl hij nadenkt.

De beelden zijn getekend in de klare lijn van de Frans-Belgische strip uit de jaren vijftig: overal even dikke zwarte lijnen, egale kleuren, geen arcering. Ze zijn gemaakt met een beeldmodel van OpenAI: 24 beelden plus 3 herkansingen, voor 5,97 dollar. Elk stuk heeft een vel met vier houdingen: staan, lopen, aanvallen en geraakt worden. Een script haalt het groene scherm weg, knipt de figuren uit, ook als ze elkaar op het vel raken, en zet ze op één schaal en één grondpunt. De muziek is eigen werk, als notendata in de code: een klaagzang in D-klein voor cello, strijkers, orgel en een laag mannenkoor op het titelscherm, twee rustige thema's voor het bord die per orde van toonsoort wisselen, en een frygisch strijdstuk voor de arena. Alles wordt live gesynthetiseerd met de Web Audio API.

Gebouwd met Phaser 3 en TypeScript. Regels, duel en computer zijn losse modules zonder Phaser, getest met 108 unit-tests in Vitest. Zestien end-to-end-tests draaien het gebouwde spel onder het beveiligingsbeleid van deze site in Chromium, Firefox, WebKit en op een telefoon, tot en met een volledige partij tussen twee computers. Spelen kan op een computer met toetsenbord en muis, of met een gamepad.

Technologieën

Phaser 3 TypeScript Vite Web Audio Web Workers OpenAI Images API Vitest Playwright

Meer van mijn werk

Bekijk het hele portfolio of lees het blog.

Meer werk