Over one year ago I was challenged to build technology and team able to deliver best slot games on the planet. During this time we proved that our architectural choices and general strategy was right - the company successfully launches one new game per month and we won "Software Rising Star" at prestigious EGR B2B Awards. I want to share important and practical facts about building specifically slot games as well as big gaming platforms in general (100k+ lines of code).

1. An Architecture of the Slot Games
Platform
Krzysztof Opałka
POZNAŃ, 17.10.2015

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

3. Slot Machine
Image: https://www.flickr.com/photos/kubina

4. Slot Machine
• 3 columns, 1 row
• One payline
• A few different different
symbols
Image: https://www.flickr.com/photos/kubina

5. Video Slot Machine
Image: https://www.flickr.com/photos/garryknight/

6. 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/

7. … + really rich multimedia experience
• High quality graphics
• 3D content
• Complex animations
• Videos
• Particles
• Sounds
Image: https://www.flickr.com/photos/garryknight/

8. Platform Requirements
• Web based
• Cross Platform
• Produce 1 new title every
month
• Deliver kick ass games

9. Event-based spinning loop

10. Spinning loop
Spinning
started
Spinning
Stopped
Win
Animation
Started
Win
Animation
Finished
Spinning
Ended

11. Event Dispatcher
function updateBalance() {
//update text field
}
function playAnimation() {
//explosion
}
msg.on("spinning/stopped", updateBalance);
msg.on("spinning/stopped", playAnimation);
msg.emit("spinning/stopped");

12. Event Priorities
function updateBalance() {
//update text field
}
function playAnimation() {
//explosion
}
msg.on("spinning/stopped", updateBalance);
msg.on("spinning/stopped", playAnimation, msg.PRIORITY.HIGH);
msg.emit("spinning/stopped");

13. Async events
function 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");

14. 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

15. Model View Controller

16. MVC
Model
ControllerView
Events
Fetch data,
Trigger data calculations

17. 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

18. Vanilla Slot

19. Vanilla Slot

20. My Magic Slot

21. Overriding assets
var image = new Image("background.jpg");
var sound = new Sound("click.mp3");
Vanilla Slot
assets
src
click.mp3
Symbol.js
Game.js
background.jpg

22. Overriding assets
var image = new Image("background.jpg");
var sound = new Sound("click.mp3");
Vanilla Slot
assets
src
background.jpg
click.mp3
Symbol.js
Game.js
My Magic Slot
assets
background.jpg

23. Overriding code
import Symbol from ”Symbol";
Vanilla Slot
assets
src
background.jpg
click.mp3
Game.js
src
Symbol.js
Vanilla Slot
assets
background.jpg
Symbol.js

24. 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

25. 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

26. Assets pipeline

27. Assets pipeline
spritesheet-js assets/*.png
image.jsonimage@0.5.pngimage.png
Build
spritesheet
Scale
down
Optimize

28. 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

29. Maitainability

30. e=mc2
errors = (more code)2

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

32. 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

33. Thank you!
Questions?