An Architecture of the Slot Games PlatformKrzysztof Opałka

POZNAŃ, 17.10.2015

Introduction• Front-End Architect at Yggdrasil Gaming• Previously King, Ganymede• 5 years in Game Dev• 10 years in IT

@krzysztof@krzysztof-o

Slot MachineImage: https://www.flickr.com/photos/kubina

Slot Machine• 3 columns, 1 row• One payline• A few different different

symbols

Image: https://www.flickr.com/photos/kubina

Video Slot MachineImage: https://www.flickr.com/photos/garryknight/

Video Slot Machine• X columns, Y rows• 1-243 lines, different direction• Wild symbol• Scatter symbol• Free Spins• Respin• Sticky symbols• Bonus Game• Collectibles• Jackpots• And much, much more…

Image: https://www.flickr.com/photos/garryknight/

… + really rich multimedia experience

• High quality graphics • 3D content• Complex animations• Videos• Particles• Sounds

Image: https://www.flickr.com/photos/garryknight/

Platform Requirements• Web based• Cross Platform• Produce 1 new title

every month• Deliver kick ass games

Event-based spinning loop

Spinning loopSpinnin

g started

Spinning

Stopped

Win Animati

on Started

Win Animati

on Finished

Spinning Ended

Event Dispatcherfunction updateBalance() { //update text field}

function playAnimation() { //explosion}

msg.on("spinning/stopped", updateBalance);msg.on("spinning/stopped", playAnimation);

msg.emit("spinning/stopped");

Event Prioritiesfunction updateBalance() { //update text field}

function playAnimation() { //explosion}

msg.on("spinning/stopped", updateBalance);msg.on("spinning/stopped", playAnimation, msg.PRIORITY.HIGH);

msg.emit("spinning/stopped");

Async eventsfunction updateBalance() { //update text field}

function playAnimation(done) { //explosion setTimeout(done, 1000);}

msg.on("spinning/stopped", updateBalance);msg.on("spinning/stopped", playAnimation, msg.PRIORITY.HIGH, true);

msg.emit("spinning/stopped");

Pros and dos• Easy to plug in new behavior• Independent, separated components• Encourages proper code encapsulation

Cons and don’ts• Priorities hell• Hard to follow non-linear code

Model View Controller

MVCModel

ControllerView

Fetch data

Events

Fetch data,Trigger data calculations

Pros and dos• Clear separation of concerns• Model is easily testable• Easy to have multi-views

Cons and don’ts• Hard to debug when a view gets out of sync with data

Vanilla Slot

Vanilla Slot

My Magic Slot

Overriding assetsvar image = new Image("background.jpg");var sound = new Sound("click.mp3");

Vanilla Slot

assets

src

click.mp3

Symbol.jsGame.js

background.jpg

Overriding assetsvar image = new Image("background.jpg");var sound = new Sound("click.mp3");

Vanilla Slot

assets

src

background.jpg

click.mp3

Symbol.jsGame.js

My Magic Slot

assetsbackground.jp

g

Overriding codeimport Symbol from ”Symbol";

Vanilla Slot

assets

src

background.jpg

click.mp3

Game.js

srcSymbol.js

Vanilla Slot

assetsbackground.jp

g

Symbol.js

export default class Symbol { play() { //explosion animation }}

import VanillaSymbol from "vanilla/Symbol";

export default class Symbol extends VanillaSymbol { play() { //explote animation }

Symbol.jssrcVanilla Slot Symbol.jssrcMy Magic Slot

Pros and dos• Easier to maintain multiple games at once• Start new game in no time• Quick to implement new game with custom features• Write once, benefit in all games• Convention over configuration

Cons and don’ts• Easy to break all games at once

Assets pipeline

Assets pipelinespritesheet-js assets/*.png

image.jsonimage@0.5.pngimage.png

Build spriteshe

et

Scale down

Optimize

Pros and dos• Fully automated process of scaling assets• Use smaller assets on mobile• Optimization saves 75% of asset size (!)

Cons and don’ts• Automatically scaled assets can be a bit blurred

sometime

Maitainability

e=mc2

errors = (more code)2

It all worked out• EGR award• Fastest loading slots• Best mobile UI • Best Slot Provider in

2016

Pros and dos• Invest time in automated testing• Follow good engineering practices• Keep it simple – ability to say „no”• Standardize everything

Cons and don’ts• Avoid freestyle/last minute/ad hoc changes

Thank you!Questions?