Splash Screen

The splash screen is the first thing a user sees when your game loads. You can create a custom splash screen to show loading progress or display your branding.

Custom Splash Screen

1. Create a Splash.ts file in the src/scenes folder. This will be displayed when the game starts. Similar to a Scene, there are initialize(), added(), enter() and exit() methods to control how the screen is revealed and hidden. It also contains a update() method that runs every tick, and a handleLoadProgress() method that can be used to update the progress of the loading screen. For simplicity’s sake we’re just creating a green background and adding a title that can be clicked to take us to the next screen:

   src/Splash.ts

   import { FlexContainer, SceneTransition } from 'dill-pixel';
   import { gsap } from 'gsap';
   import { Sprite, Text } from 'pixi.js';
   
   export class Splash extends SceneTransition {
     private _labelPercent: Text;
     private _textContainer: FlexContainer;
     private _bg: Sprite;
     private _percent: number = 0;
   
     constructor() {
       super(true);
     }
   
     initialize() {
       this._bg = this.addColoredBackground({
         color: 0x00ff00, // green,
       });
       this._textContainer = this.add.flexContainer({
         bindToAppSize: true,
         layout: {
           gap: 10,
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
         },
       });
       this._textContainer.add.text({
         text: 'Loading...',
         style: {
           fontWeight: 'bold',
           fontSize: 36,
           fill: 'white',
           dropShadow: true,
         },
       });
       this._labelPercent = this._textContainer.add.text({
         style: {
           fontWeight: 'bold',
           fontSize: 72,
           fill: 'white',
           dropShadow: true,
         },
       });
     }
   
     update() {
       this._labelPercent.text = `${Math.round(this._percent)}%`;
       this._textContainer.updateLayout(); // update the flex layout
     }
   
     resize() {
       this._textContainer.position.set(-this.app.size.width / 2, -this.app.size.height / 2);
     }
   
     handleLoadProgress(progress: number) {
       super.handleLoadProgress(progress);
       gsap.to(this, { _percent: Math.ceil(this.progress * 100), duration: 1, ease: 'sine.out' });
     }
   
     async exit() {
       // ensure percentage completes
       await gsap.to(this, { _percent: 100, duration: 1, ease: 'sine.out' });
       return gsap.to(this, { alpha: 0, duration: 1, ease: 'sine.in' });
     }
   }

2. In ./dill-pixel-config.ts, import your Splash class:

   import Splash from '@/Splash';

   and set the set the splash property to

   { ... // other config
     splash: {
       view: Splash
     }
     ...
   }

   your dill-pixel.config.ts should now look like this:

   dill-pixel.config.ts

   import { defineActions, defineButtons, defineConfig, defineContexts, defineControls, defineData } from 'dill-pixel';
   import { MyApplication } from './src/MyApplication';
   
   /** Default template */
   export const contexts = defineContexts(['default', 'game', 'menu', 'popup']);
   
   export const actions = defineActions(contexts, {
     // keyboard down actions
     stop_move_left: { context: ['game'] },
     stop_move_right: { context: ['game'] },
     move_left: { context: ['game'] },
     move_right: { context: ['game'] },
     move_down: { context: ['game'] },
     warp: { context: ['game'] },
     jump: { context: ['game'] },
     combo: { context: '*' },
     // keyboard up actions
     toggle_pause: { context: '*' },
     close: { context: ['menu', 'popup'] },
     back: { context: ['menu'] },
     next: { context: ['menu'] },
     select: { context: ['menu', 'default'] },
     show_popup: { context: '*' },
     // firebase
     save_to_firebase: { context: '*' },
     load_from_firebase: { context: '*' },
     clear_firebase: { context: '*' },
     delete_from_firebase: { context: '*' },
     // physics
     drop: { context: ['game'] },
     // audio
     music: { context: '*' },
     sfx: { context: '*' },
     // voiceover
     vo: { context: '*' },
     pause_vo: { context: '*' },
     stop_vo: { context: '*' },
     caption_theme: { context: '*' },
   });
   
   /** Don't touch */
   /** Don't touch */
   
   const buttons = defineButtons(['A', 'B']);
   
   export const controls = defineControls(actions, buttons, {
     keyboard: {
       down: {
         move_left: ['ArrowLeft', 'A'],
         move_right: ['ArrowRight', 'D'],
         move_down: ['ArrowDown', 'S'],
         jump: ['ArrowUp', 'Space', 'W'],
         warp: 'Q',
         combo: 'Shift+L',
       },
       up: {
         toggle_pause: 'P',
         close: 'Escape',
         stop_move_left: ['ArrowLeft', 'A'],
         stop_move_right: ['ArrowRight', 'D'],
         select: ['Enter', 'Space'],
       },
     },
     touch: {
       down: {
         jump: 'A',
         warp: 'B',
       },
       joystick: {
         move_left: ['left', 'bottom_left', 'top_left'],
         move_right: ['right', 'bottom_right', 'top_right'],
       },
     },
   });
   /** End of Default Template */
   
   export type AnalyticsEvents = {
     foo: { bar: string; baz: number; qux: boolean };
   };
   
   export const dataSchema = defineData({
     foo: '',
     bar: 0,
     num: 0,
     saved: '',
     list: [] as string[],
     list2: [] as number[],
     baz: {
       qux: false,
       quux: [] as string[],
     },
   });
   
   export default defineConfig({
     id: 'V8Application',
     application: MyApplication,
     useSpine: true,
     defaultScene: 'start',
     defaultTextStyle: {
       fontFamily: 'KumbhSans',
       fontSize: 24,
       fill: 0xffffff,
     },
     data: {
       initial: {
         bar: 5,
         saved: 'QUX',
         list: ['hello', 'world'],
         list2: [0, 1],
       },
       backupKeys: [],
     },
     actions,
     input: {
       controls,
     },
     assets: {
       preload: {
         bundles: ['splash', 'required', 'game'],
       },
       background: {
         bundles: ['audio', 'spine'],
       },
     },
     plugins: [
       'test',
       'google-analytics',
       'springroll',
       [
         'snap-physics',
         {
           autoLoad: false,
           options: {
             debug: true,
             useSpatialHashGrid: false,
             gridCellSize: 300,
           },
         },
       ],
       [
         'crunch-physics',
         {
           autoLoad: false,
         },
       ],
       [
         'matter-physics',
         {
           autoLoad: false,
           options: {
             debug: true,
           },
         },
       ],
       [
         'rive',
         {
           autoLoad: false,
         },
       ],
       [
         'rollbar',
         {
           options: {
             isDev: import.meta.env.MODE === 'development',
             environment: import.meta.env.MODE,
           },
         },
       ],
     ],
     storageAdapters: ['firebase'],
     resizer: {
       minWidth: 500,
       minHeight: 768,
       letterbox: false,
       center: false,
     },
   });
   
   /** End of User config */

3. in index.html, you can remove the loader.css import, as we’re no longer using it.