Upload
krzysztof-opalka
View
503
Download
1
Embed Size (px)
Citation preview
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
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?