NHB Intro Plugin for Phaser3 - Play any video and enable to skip with configurable key input.

README.md

NHB Intro Plugin for Phaser3

Scene plugin for Phaser3.
Play any video and enable to skip with configurable key input.

Configuration

1. Copy the NhbIntroPlugin.js anywhere you like. I like to put those in a plugins folder in my root directory.
2. Register scene plugin in your game config:

import NhbIntroPlugin from '@/plugins/NhbIntroPlugin'

const gameConfig = {
    plugins: {
        scene: {
            {
                key: 'NHBIntroPlugin',
                plugin: NhbIntroPlugin,
                mapping: 'introManager', // Can be anything you like
            },
        },
    },
}

3. Load your video in a scene and use the plugin:

import Phaser from 'phaser'

class MyScene extends Phaser.Scene {
    preload () {
        this.load.video('nhb_intro', 'assets/videos/nhb_intro.mp4', 'loadeddata', false, false)
    }
    
    async create () {
        // Use default settings (Skip via ENTER or SPACE)
        await this.introManager.playIntro('nhb_intro')
        
        // Or overwrite keys used to skip the video. For example: S
        await this.introManager.playIntro('nhb_intro', { skipKeys: ['S'] })
        
        // Start any scene after intro video finished
        this.scene.start('myStartScene')
    }
}

NhbIntroPlugin.js

import Phaser from 'phaser'

export default class NhbIntroPlugin extends Phaser.Plugins.ScenePlugin {
    constructor (scene, pluginManager) {
        super(scene, pluginManager)

        this.defaultConfig = {
            skipKeys: ['ENTER', 'SPACE'],
        }

        this.intro = null
        this.keyObjects = []
    }

    /**
     * @param {string} videoId
     * @param {object} config
     *
     * @returns {Promise<unknown>}
     */
    playIntro (videoId, config = {}) {
        // Overwrite config
        if (!config) {
            config = this.defaultConfig
        }

        return new Promise((resolve) => {
            this.intro = this.scene.add.video(0, 0, videoId)

            // Center video in canvas
            this.intro.setOrigin(0, 0)
            this.intro.setPosition(
                (this.game.canvas.width / 2) - (this.intro.width / 2),
                (this.game.canvas.height / 2) - (this.intro.height / 2),
            )

            // Start video once the audio context was triggered
            this.scene.sound.once(Phaser.Sound.Events.UNLOCKED, () => {
                this.intro.play(false)
                this.intro.setPaused(false)
            })

            // Check when to skip the video
            config.skipKeys.forEach((key, i) => {
                this.keyObjects[i] = this.scene.input.keyboard.addKey(key)
                this.keyObjects[i].once('down', () => {
                    // Skip video
                    this.intro.setPaused(true)
                    this.reset()
                    resolve()
                })
            })

            this.intro.once('complete', () => {
                resolve()
            })
        })
    }

    /**
     * Stop video and remove all listeners
     */
    reset () {
        this.intro.setPaused(true)
        this.intro.off('complete')
        this.intro = null

        this.keyObjects.forEach(keyObject => {
            keyObject.off('down')
        })
        this.keyObjects = []
    }
}