Skip to content

Instantly share code, notes, and snippets.

@NickHatBoecker
Last active August 7, 2021 21:19
Show Gist options
  • Save NickHatBoecker/0f76e6f2a4e87d509e0e4946721c07d5 to your computer and use it in GitHub Desktop.
Save NickHatBoecker/0f76e6f2a4e87d509e0e4946721c07d5 to your computer and use it in GitHub Desktop.
NHB Intro Plugin for Phaser3 - Play any video and enable to skip with configurable key input.

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
            },
        },
    },
}
  1. 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')
    }
}
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 = []
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment