phaser-plugin

Poki Phaser 3 Plugin

Hi! 👋 This is the official Poki Phaser Plugin for Phaser 3. This plugin will automate most of implementing the Poki SDK when making a game with Phaser.

Features

• Inject & load the Poki SDK for you (asynchronously)
• Trigger loadingStart/loadingFinished event when loading
• gameplayStart/gameplayStop events fire automatically when your game scene starts and stops
  • commercialBreak is requested before gameplayStart is fired
• Disable input and audio during video ads
• Give you easy/global access to the SDK using scene.plugins.get('poki') so you can:
  • check if users have any adblock enabled;
  • request a rewardedBreak

How to use/install

This is a quick step by step tutorial on how to use our plugin. You can also always check the example in the /example directory.

Add the dependency

First, you have to make sure to add the poki-phaser-3 plugin as a dependency to your project:

$ npm install --save-dev poki-phaser-3
# or
$ yarn add --dev poki-phaser-3

(note: at the time of writing, not yet published to npm)

Install plugin to Phaser's configuration

Step two is to add the plugin to the plugins section of your Phaser configuration, for example:

import { PokiPlugin } from 'poki-phaser-3'
// ...
const config = {
  // ...
  plugins: {
    global: [
      {
        plugin: PokiPlugin,
        key: 'poki',
        start: true, // must be true, in order to load
        data: {
          // This must be the key/name of your loading scene
          loadingSceneKey: 'LoadingScene',

          // This must be the key/name of your game (gameplay) scene
          gameplaySceneKey: 'PlayScene',

          // This will always request a commercialBreak when gameplay starts,
          // set to false to disable this behaviour (recommended to have true,
          // see Poki SDK docs for more details).
          autoCommercialBreak: true
        }
      }
    ]
  }
}
// ...
var game = new Phaser.Game(config)

(more info on Phaser's configuration here)

Usage

Loading & Gameplay Events

The Poki Phaser plugin will automatically call PokiSDK.gameLoadingStart() and PokiSDK.gameLoadingStop(); if the loadingSceneKey is configured. The same is true for the set gameplaySceneKey.

If your game doesn't use multiple scenes for gameplay you can manually call the events like so:

const poki = scene.plugins.get('poki') // get the plugin from the Phaser PluginManager
poki.gameplayStart()
// ... start gameplay ...
scene.on('player_died', () => {
  poki.gameplayStop()
})

On Initialized

To run code only when the PokiSDK is initialized you can use the following interface:

const poki = scene.plugins.get('poki') // get the plugin from the Phaser PluginManager
poki.runWhenInitialized((poki) => {
  // This is called after the PokiSDK is fully initialized, or immediately if
  // the PokiSDK has already been initialized.
  if (poki.hasAdblock) {
    console.log('😢')
  }
})

Example

This repository contains an example on how to use the Poki Phaser 3 plugin in the /example directory. The main configuration/setup is done in the example/game.js file.

The example game consist of a Loading-, Menu-, and Playscene to show the way the plugin works with the Poki 'gameplayStart' event etc.

Checkout the MenuScene for an extensive example of using this library where we wait for the Poki SDK to be completely initialized, check if an adblock is detected and allows players to watch a rewarded adbreak. You can find this code here.

To run the example use the following command:

$ yarn watch
Server running at http://localhost:1234

And point your browser to http://localhost:1234

TODO

This project is currently in an early development phase. These steps are still left before we can publish it for general use:

• Get it to work localhost
• Auto mute & Disable keyboard input
• Extend example with buttons to show off all plugin features (e.g. rewarded ad)
• Write readme & instructions
• Go over all exposed function/variable names
• Package into downloadable .js and publish to npm
• Test it in an existing game

Asset Credits

Background music credits: https://github.com/photonstorm/phaser-examples/blob/master/examples/assets/audio/bodenstaendig_2000_in_rock_4bit.mp3