What to deliver so engineering only has to code
Every asset, screen, state and file the design and animation team hands off to Rivvale. When each block is complete, development is pure integration with no guesswork left.
Handoff standards
Cross-cutting rules for every deliverable below. They exist so assets drop straight into the runtime.
Both orientations
- Portrait and Landscape for every asset and screen
- Production-ready and visually matched
All states defined
- No implicit behavior
- Every interactive element ships with each state designed
Export formats
- PNG + WebP for static art
- Spine (JSON + atlas + PNG) or sprite sheets for animation
- Video for timing reference
Naming + folders
- Lowercase, no spaces, consistent
- One predictable structure per category
Transparent + anchored
- Transparent backgrounds
- Defined pivots and anchor points
- Exported at @1x and @2x
Figma as source
- Final Figma file is the single source of truth
- Layout, spacing and measurements live there
Game Direction
Deliver a short, written direction so mechanics, copy and audio build against one shared intent.
Theme
- Core theme defined (cyberpunk, dark, satirical, premium, cartoon)
- Optional narrative context
Tone
- Satirical, serious, dark, premium or playful
- Consistent across UI, animation, audio and copy
Game Feel
- Fast, explosive, smooth, heavy or reactive
- Spin speed, feedback intensity and win pacing
Differentiation
- What is unique in mechanics and identity
- UX behavior and feature design
Platform Restrictions
- No currency symbols in Stake / Social mode
- Restricted terms replaced
- UI compliant in visuals and text
Core Mechanics
Deliver the full logic so engineering implements math and behavior directly.
Definition & Objective
- Mechanic name and description
- Why it exists and the player benefit
Rules
- Full logic
- Edge cases documented
Triggers
- Entry condition
- Activation condition
- Exit condition
Dependencies
- Required symbols and states
- UI dependencies
Visual System
Deliver the visual rules and tokens so every asset stays coherent and colors map to code.
Art Style
- Flat, painterly, 3D-like, cartoon or realistic
Render Rules
- Outline (yes/no), shadow (hard/soft)
- Texture level, glow / bloom usage
Color System
- 3 to 6 primary colors plus accents, as hex
- Functional: win, loss, highlight, alert
References
- Visual benchmarks
- Moodboard required
Board & Layout
Deliver exact measurements so board and panels anchor in code without eyeballing.
Board Structure & Position
- Grid format (e.g. 6x5)
- Vertical / horizontal alignment
- Proportional base size of symbols
Screen Occupation
- % of screen used
- Overall alignment
Safe Areas
- Mobile safe zones
- UI overlap protection
Margins & Spacing
- Outer margins
- Internal spacing
Side Panels
- Free spins counter
- Multiplier / feature panels
Core Assets
Deliver artwork and animation files, cut and named so the runtime loads them as is.
Symbols (base)
- Full list: Low, High, Wild, Scatter, Feature
Symbol Animations
- Idle, Win, Highlight, optional Anticipation
- Timing and loop definition
- Upgrade behavior where applicable
Mascot (if any)
- Visual or reactive role and placement
- States: Idle, Win, Bonus, Lose
- Must not overpower the board
Backgrounds (base + bonus)
- Concept, depth layers, board integration
- Bonus escalates over base game
- Lighting and mood differentiation
Logo
- Main, horizontal and vertical versions
- In-game application rules
Bitmap Fonts
- Character set: numbers and UI text
- Styles for UI and for wins
UI / HUD System
Deliver each control with all of its states, so wiring interactions is a direct mapping.
HUD Layout
- Balance, Bet / Play value and bet control (+/-)
- Spin, Autoplay and Buy Bonus
- Speed control
Spin Button
- Idle, Hover, Pressed
- Spinning, Disabled, Autoplay Active
Autoplay Modal
- Number of spins
- Stop: on win, on loss, on bonus
Settings Modal
- Sound toggle, music and SFX volume
- Turbo mode, access to game info
Speed Control
- Normal, Fast and Turbo
Buy Bonus Interface
- Card-based or selectable options
- Price clearly displayed
- Selection feedback
Game Info Modal
- Rules, RTP and paytable
- Mechanics explanation
Screens & Flows
Deliver each screen in both orientations, static and animated where noted.
Loading Screen
- Background, logo, progress bar
- Portrait and Landscape
- Static and animated
Initial Screen
- Tips / tutorial, volatility indicator
- CTA: click / tap to continue
- Optional mascot
Transition Screen
- Visual transition design
- Gameplay integration
- Reference video required
In-Game Screen
- Final composition: board, HUD, background
- Panels and mascot integrated
Additional In-Game Assets
- Feature overlays
- Panels: free spins, multiplier / totem, history
Buy Bonus Screen
- Symbols / cards, selection states
- Feedback animations and bet value
Win Screens
- Types: Big, Mega and Epic
- Intro and loop animations
Congratulations & Game Info
- Post-feature summary, result highlight
- Rules layout with scroll behavior
VFX System
Deliver effects as reusable layers so they trigger on game events in code.
Highlight Effects
- Symbol highlight
- Win emphasis
Tumble Effects
- Movement clarity
- Transition smoothness
Explosion Effects
- Symbol destruction visuals
- Layer integration
Audio System
Deliver audio files with an event map so each sound binds to an action.
Categories
- UI, Gameplay, Wins and Bonus
Audio Direction
- Matches theme and tone
Event Mapping
- Every action has a matching sound
State-Based Design
The rule that removes guesswork from development. Nothing enters handoff with an undefined state.
Every element defines all of its states
No element relies on assumed behavior. Applies to buttons, symbols, HUD elements, panels, modals and interactive components.
- Each state: visual definition, animation behavior, transition logic
- Spin example: Idle, Hover, Pressed, Spinning, Disabled, Autoplay Active
- Symbol example: Idle, Highlight, Win, Destruction / Exit
Export & Delivery
Deliver the final package in the formats the runtime consumes directly.
Figma File
- Final file for reference
Asset Folders
- PNG and WebP
Animation
- Spine files, sprites or reference videos
Handoff checklist
Track every deliverable to the definition of ready. Development starts when this reaches 100%. Progress is saved on this device.