Skip to main content

Xgenia Slot Template Components

This section explains how each component works in the Xgenia Slot Template, their purpose, and how they connect to create the complete slot game experience.

1. Main Container​

Purpose: The foundation layer that holds all game elements and provides the main game viewport.

Connections Flow:

  1. From Game Init → Receives viewport dimensions and positioning data
  2. To All Child Components → Provides container bounds and coordinate system
  3. To Background Image → Provides sizing constraints for proper scaling

How it Works: The Main Container initializes when the game loads, setting up a full-screen viewport that adapts to different device sizes. It establishes the coordinate system that all other components use for positioning, ensuring consistent layout across desktop and mobile devices.

2. Background Image​

Purpose: Sets the visual theme and atmosphere by displaying the game's background artwork behind all other elements.

Connections Flow:

  1. From Get Config JSON → Receives BackgroundURL (example: https://storage.googleapis.com/.../background.png)
  2. From Main Container → Gets sizing and positioning constraints
  3. To Image Component → Loads and displays the background image with proper scaling

How it Works: When the game starts, the Background Image component fetches the theme-specific background from cloud storage based on the GameID. It automatically scales the image to fill the entire game area while maintaining aspect ratio, creating an immersive visual foundation for the slot game interface.

3. Header Group​

Purpose: Displays critical game information including player balance, current bet amount, and recent winnings.

Connections Flow:

  1. From Get Session → Receives player Balance (example: 1000 credits)
  2. From Bet Transactions → Receives current Bet Amount (example: 10 credits)
  3. From Bet Transactions → Receives Total Win amount (example: 50 credits)
  4. From Exchange Rate API → Receives currency conversion rates for multi-currency display
  5. From Currency Converter → Receives formatted currency values in player's preferred currency
  6. To Header Text Components → Updates display values in real-time

How it Works: The Header Group continuously monitors game state and updates displays in real-time. When a player spins, it immediately shows the new balance and win amounts. The system supports multi-currency display by converting USD-based values to the player's preferred currency (IDR, EUR, etc.) using real-time exchange rates. The information is always visible at the top of the screen, allowing players to track their game progress without interrupting gameplay.

3.1 Header Text Group​

Purpose: Contains and organizes all text displays for game information.

Child Components:

  • CREDIT Text → Shows "CREDIT" label
  • Balance Text → Displays current player balance
  • BET Text → Shows "BET" label
  • Bet Amount Text → Displays current bet amount
  • WIN Text → Shows "WIN" label
  • Total Win Text → Displays last spin winnings

Connections Flow:

  1. From Get Session → Balance Text receives updated balance
  2. From Bet Transactions → Bet Amount Text receives bet value
  3. From Bet Transactions → Total Win Text receives win amount

3.2 Header Button Group​

Purpose: Provides access to game controls and settings without interfering with main gameplay.

Child Components:

  • Sound Button → Controls audio on/off
  • Info Button → Opens game rules and paytable
  • Settings Button → Opens game configuration menu

Connections Flow:

  1. From Audio Manager → Sound Button receives current audio state
  2. To Audio Manager → Sound Button sends mute/unmute commands
  3. To Popup System → Info/Settings buttons trigger modal displays

4. Right Button Group​

Purpose: Contains the main gameplay action buttons positioned for easy player access.

Connections Flow:

  1. From Get Session → Receives player authentication and balance status
  2. To Game Logic Functions → Sends player actions and bet requests
  3. To UI State Manager → Updates button states during gameplay

4.1 BET Button​

Purpose: Allows players to adjust their wager amount before spinning.

Connections Flow:

  1. From Get Session → Receives available balance for bet validation
  2. To Bet Amount Variable → Updates current bet value
  3. To Header Group → Triggers bet amount display update
  4. To Spin Button → Enables/disables based on valid bet amount

4.2 SPIN Button​

Purpose: The primary action button that initiates the slot machine spin and game logic.

Connections Flow:

  1. From BET Button → Receives current bet amount (example: 10 credits)
  2. From Get Session → Receives SessionID and UserID for authentication
  3. To Bet Transactions → Sends bet request with GameID and amount
  4. From Bet Transactions → Receives spin results and new balance
  5. To Slot Frame Group → Sends result data for symbol display
  6. To Header Group → Sends updated balance and win amounts
  7. To Audio Manager → Triggers spin sound effects

How it Works: When pressed, the SPIN Button validates the player has sufficient balance, then sends a secure request to the server with the current bet amount. The server processes the spin using random number generation and returns results. The button orchestrates updating all game components with the new data, including animating the reels and playing sound effects.

4.3 BONUS Button​

Purpose: Activates special bonus features and free spin rounds when available.

Connections Flow:

  1. From Get Session → Receives FreeRound status data
  2. From Bet Transactions → Receives bonus trigger conditions
  3. To Bonus Logic → Initiates bonus game sequences
  4. To Slot Frame Group → Updates display for bonus mode

5. Spin Mode Selection Component​

5.1 Spin Options Controller​

Purpose: Allows users to choose between local TRNG (True Random Number Generator) or server-side API for spin generation.

Connections Flow:

  1. From User Interface → Receives LocalSpin boolean setting (true = local, false = API)
  2. To Local Path → Sends SendSpinLocal signal when local mode is selected
  3. To API Path → Sends SendSpinAPI signal when API mode is selected
  4. From Game Settings → Maintains user preference for spin method
  5. To Spin Controllers → Routes spin requests to appropriate generation method

How it Works: The Spin Options Controller acts as a smart router that checks the LocalSpin boolean value. When set to true, it activates local TRNG generation using client-side algorithms. When set to false, it routes spin requests to the server API for server-side random generation. This provides flexibility for different gaming requirements, regulations, or user preferences.

5.2 Local True Random Number Generator (Slot Spin Component)​

Purpose: Generates slot results locally using True Random Number Generation algorithms on the client side.

Connections Flow:

  1. From Spin Options Controller → Receives SendSpinLocal trigger signal
  2. From Game Configuration → Receives slotRows and slotColumns (example: 5×3 grid)
  3. From Bet Settings → Receives betAmount for payout calculations
  4. From Symbol Configuration → Receives reelStrips with symbol arrangements
  5. From Random Seed → Receives seed value for randomization
  6. To Result Processor → Provides locally generated spin results
  7. To Icon Setter → Sends result data for symbol display

How it Works: The Local True Random Number Generator uses client-side randomization algorithms with configurable seed values to create slot results. It applies payout formulas (example: "8.5 * x") to calculate winnings based on symbol combinations. The system uses reel strips to ensure proper symbol distribution and maintains fairness through cryptographically secure random number generation. Results are processed immediately without server communication.

Data Processing Example:

Input: LocalSpin = true, betAmount = 10, seed = 123456
Process: TRNG Algorithm + Reel Strips + Payout Formula
Output: Local Result = {symbols: [1,2,3,4,5,...], payout: 25, balance: updated}

5.3 API Spin Controller​

Purpose: Routes spin requests to the server-side API when remote generation is selected.

Connections Flow:

  1. From Spin Options Controller → Receives SendSpinAPI trigger signal
  2. To Bet Transactions Function → Forwards spin request to server API
  3. From Server Response → Receives verified random results
  4. To Result Processor → Provides server-generated spin results

How it Works: When API mode is selected, the controller forwards all spin requests to the server-side Bet Transactions function. The server uses certified random number generators and applies server-side validation for regulatory compliance. This mode ensures maximum security and fairness for regulated gaming environments.

5. Slot Frame Group​

Purpose: The main game display area where slot symbols appear and spin animations occur.

Connections Flow:

  1. From Get Config JSON → Receives FrameURL for decorative border
  2. From Get Game → Receives Icons array with symbol URLs
  3. From Bet Transactions → Receives ResultArrayOne for symbol positioning
  4. To Icon Group → Provides symbol data and positioning
  5. To Frame Group → Applies decorative overlay

How it Works: The Slot Frame Group manages the central game display area. When a spin occurs, it receives result data and orchestrates the symbol animation. The icons animate from top to bottom in a realistic slot machine motion, while the decorative frame provides visual context. The component ensures smooth animations and accurate result display across all device types.

5.1 Icon Group​

Purpose: Manages the dynamic display and animation of slot symbols in a 5x3 grid.

Connections Flow:

  1. From Get Game → Receives Icons array (example: [Icon1.png, Icon2.png, ...])
  2. From Slice Image → Receives processed symbol sprites
  3. From Bet Transactions → Receives ResultArrayOne (example: 1234567890123456)
  4. To Icon Setter → Maps results to specific symbol positions
  5. To Repeater Component → Generates 15 symbol positions (5 columns × 3 rows)

Data Processing Example:

ResultArrayOne: 1234567890123456
↓
Position 1: Symbol 1, Position 2: Symbol 2, etc.
↓
Grid Layout:
[1][2][3][4][5]
[6][7][8][9][0]
[1][2][3][4][5]

How it Works: The Icon Group takes the numeric result from the server and converts it into a visual 5x3 grid of symbols. Each digit in the result corresponds to a specific symbol position. The component uses a repeater to generate 15 symbol positions, then maps the result data to display the correct symbols with smooth animations.

5.2 Frame Group​

Purpose: Provides the decorative slot machine frame overlay that sits above the spinning symbols.

Connections Flow:

  1. From Get Config JSON → Receives FrameURL (example: frame.png)
  2. From Download Frame → Receives processed frame image
  3. To Frame Image Component → Displays the decorative border

6. Audio Components​

Purpose: Manages background music and sound effects throughout the game experience.

6.1 Audio Manager​

Connections Flow:

  1. From Get Game → Receives Music URL (example: background.mp3)
  2. From Download Audio → Receives processed audio file
  3. From Header Button Group → Receives mute/unmute commands
  4. To AutoplayAndLoop → Controls music playback state

6.2 Download Audio​

Purpose: Fetches and processes audio files for the current game theme.

Connections Flow:

  1. From Get Game → Receives Music URL based on GameID
  2. To Audio Manager → Provides processed audio data
  3. To AudioControls → Enables audio control functionality

Prefab Integration​

Core Prefabs Used:​

  1. Button Prefab → Used for BET, SPIN, BONUS, and header buttons
  2. Text Display Prefab → Used for balance, bet amount, and win displays
  3. Image Container Prefab → Used for background and frame images
  4. Grid Repeater Prefab → Used for the 5x3 slot symbol layout
  5. Audio Player Prefab → Used for music and sound effect management

Prefab Connections:​

  • Button Prefabs → Connect to game logic functions via event signals
  • Text Prefabs → Connect to data sources via string binding
  • Image Prefabs → Connect to asset URLs via image source binding
  • Repeater Prefabs → Connect to arrays for dynamic content generation

Component Hierarchy Summary​

Main Container
├── Background Image
├── Header Group
│   ├── Header Text Group (6 text components)
│   └── Header Button Group (3 button components)
├── Right Button Group
│   ├── BET Button → Bet Logic
│   ├── SPIN Button → Main Game Logic
│   └── BONUS Button → Bonus Logic
└── Slot Frame Group
    ├── Icon Group → Symbol Display Logic
    └── Frame Group → Decorative Overlay

Data Flow Overview​

  1. Game Initialization: GameID → Get Session → Get Game → Asset Loading
  2. Asset Loading: URLs → Download Functions → Component Display
  3. Player Action: Button Press → Bet Transactions → Result Processing
  4. Result Display: Server Response → Icon Setter → Symbol Animation
  5. State Update: New Balance → Header Update → Ready for Next Spin