Animation Driver
ThrillTech supplies a default set of Jackpot win animations to enrich the player experience during a Jackpot win. The animations driver is a JS library that takes care of win animations loading and playback. Animations are easily customizable and the driver allows for flexible cusomizations of the playback.
Source
Source code is avaiable for review & fork for all ThrilTech customers. You can find the driver at https://github.com/thrilltech-io/animations-driver.
Overview
The JS driver exposes two functions:
preload(config, tier, muted)- loads the required assets per pased configuration object. When muted, sounds will not be loaded.run(config, tier, amount, muted)- starts the animation sequence defined in the configuration. Run will do load if assets are not already loaded.
The preload function is intended to provide separation of the loading phase, so that in case of unreasonably slow connection, stale loading can be detected and acted upon (for example using a fallback alert / win message if assets load didnt complete in a certain period).
Mute state cannot be controlled after the animation is run. The current sound preference should be passed to the run ( and optionally preload ) and based on that the defined in configuration sfx are either loaded or not.
Usage
import { preload, run } from "./main.js"
const config = "/configs/example.json"
const tier = "super"
const amount = 10000
const muted = false
preload(config, tier, muted).then(()=>{
run(config, tier, amount, muted)
})
Configuration
See example configurations in ./public/configs in the driver repository.
Following is a full possible configuration with all settings commented inline.
{
"dom": {
// optional - skip "top" section if no header is required
"top": {
// id of top container
"id": "top-container",
// messages to display during presentation phase
"message": {
"id":"top-message",
// message during wheel spin
"wheel": "Stop the wheel and win BIG! BIG!",
// message during tickup
"tickup": "Congratulations!"
}
},
// optional - skip "bottom" section if no footer is required
"bottom": {
// id of bottom container
"id": "bottom-container",
// action button
"button": {
// id of the action button
"id": "action-button",
// actions during wheel phase
"wheel": {
"stop": "STOP THE WHEEL",
"skip": "SKIP THE WHEEL"
},
// actions during tickup phase
"tickup": {
"skip": "SKIP TICKUP"
},
// actions after tickup
"end": {
"close": "CLOSE"
}
}
},
// enable touch controls during phase
"touch": {
// touch during wheel acts as stop / skip
"wheel": {
"stop": true,
"skip": true
},
// touch during tickup acts as skip
"tickup": true
}
},
// ticker skin and font settings -
// skin provided and customised by thrilltech
"ticker": {
"skin": "/ticker/Win_BG.skel",
"font": "/fonts/rubik.woff",
"fontFamily": "rubik",
// maximum font size for the tickup
"maxFontSize": 80,
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat
// the currency for the win amount as per ISO 4217 currency codes
// optional, leave empty for no currency or monetary amount format
"currency":"JPY",
// A string with a BCP 47 language tag, optional
"currencyFormat":"en-US"
},
// wheel skin and segments settings -
// skin provided and customised by thrilltech
"wheel": {
"rotate": 0,
"base": "/wheel/Wheel_of_Fortune.skel",
// wheel has 8 segments, following is the order of tiers per segments
"segments": [
"mini",
"super",
"mini",
"epic",
"mini",
"super",
"epic",
"super"
],
// map of segment textures
"skins": {
"mini": "/skins/demo/mini.png",
"super": "/skins/demo/super.png",
"epic": "/skins/demo/epic.png"
}
},
// jackpot animation skin -
// skin provided and customised by thrilltech
"pots": {
"mini": {
// path of the spine export containing the mini tier animation
"source": "/pots/mini/Thrillpot.skel",
// prefix of the animation for this tier
"prefix": "",
// sound clips for all animation phases
"sfx": {
"intro": ["/sfx/base/mini/intro.mp3"],
"particles": ["/sfx/base/mini/confetti.mp3"],
"tickup_start": ["/sfx/base/mini/tickup-start.mp3"],
"tickup_loop": ["/sfx/base/mini/tickup-loop.mp3"],
"outro": ["/sfx/base/mini/outro.mp3]"
}
},
"super": {
// path of the spine export containing the mini tier animation
"source": "/pots/super/Thrillpot.skel",
// prefix of the animation for this tier
"prefix": "",
// sound clips for all animation phases
"sfx": {
"intro": ["/sfx/base/super/intro.mp3"],
"particles": ["/sfx/base/super/confetti.mp3"],
"tickup_start": ["/sfx/base/super/tickup-start.mp3"],
"tickup_loop": ["/sfx/base/super/tickup-loop.mp3"],
"outro": ["/sfx/base/super/outro.mp3]"
}
},
"epic": {
// path of the spine export containing the mini tier animation
"source": "/pots/epic/Thrillpot.skel",
// prefix of the animation for this tier
"prefix": "",
// sound clips for all animation phases
"sfx": {
"intro": ["/sfx/base/epic/intro.mp3"],
"particles": ["/sfx/base/epic/confetti.mp3"],
"tickup_start": ["/sfx/base/epic/tickup-start.mp3"],
"tickup_loop": ["/sfx/base/epic/tickup-loop.mp3"],
"outro": ["/sfx/base/epic/outro.mp3]"
}
},
},
// particles animation skin -
// skin provided and customised by thrilltech
"particles": {
"mini": {
"source": "/particles/confetti/Thrillpot.skel",
"prefix": ""
},
"super": {
"source": "/particles/confetti/Thrillpot.skel",
"prefix": ""
},
"epic": {
"source": "/particles/confetti/Thrillpot.skel",
"prefix": ""
}
}
}
SFX
Config contains sound definitions for various phases of the animation. All sounds are optional.
Sounds per animation phase are defined as an array. All elements of the phase array refer to the same sound effect. The intention is to provide multiple sfx formats and the runtime will automatically pick the one supported on the client system. Recommended formats to use are webm, wav and mp3. wav has the widest support accross devices, but is not as optimal as webm and mp3 in terms of filesize.
"sfx": {
"intro": ["/sfx/base/epic/intro.webm", "/sfx/base/epic/intro.wav"],
"particles": ["/sfx/base/epic/confetti.webm", "/sfx/base/epic/confetti.wav"],
"tickup_start": ["/sfx/base/epic/tickup-start.webm", "/sfx/base/epic/tickup-start.wav"],
"tickup_loop": ["/sfx/base/epic/tickup-loop.webm", "/sfx/base/epic/tickup-loop.wav"],
"outro": ["/sfx/base/epic/outro.webm", "/sfx/base/epic/outro.wav"]
}