Phaser Unified Playable Ads Template

This is a sample Phaser 3 project that includes our Unified Playable Ads Network Plugin. This plugin allows you to easily integrate and test your playable ads across multiple ad networks.

If you look in main.js and config.js you'll see the way the plugin has been included. This isn't a standard Phaser plugin, so you can just import it like a regular ESM module and hook into it directly from your Phaser code.

config.js contains the configuration for the plugin. You can set the ad network type and store links here. The type of the ad network can be any one of the following:

• 'google'
• 'meta'
• 'mintegral'
• 'tiktok'
• 'ironsource'
• 'vungle'
• 'unityads'
• 'applovin'
• 'adcolony'
• 'kayzen'

Inside your Phaser Scenes, import the networkPlugin:

import { networkPlugin } from "../networkPlugin.js";

Then you can use the plugin to call the ad network API:

networkPlugin.ctaPressed();

For Unity Ads, Applovin, Ad Colony and Kayzen we need to specify store links to our call:

import { config } from "../config.js";

networkPlugin.ctaPressed(config.googlePlayStoreLink, config.appleStoreLink);

The rest of this document details how to use the template:

Available Commands

Command	Description
npm install	Install project dependencies
npm run dev	Launch a development web server
npm run build	Create a production build in the dist folder

Template Project Structure

We have provided a default project structure to get you started. This is as follows:

• index.html - A basic HTML page to contain the game.
• src - Contains the game source code.
• src/main.js - The main entry point. This contains the game configuration and starts the game.
• src/scenes/ - The Phaser Scenes are in this folder.
• src/lib/ - Contains ad network API libraries.
• public/assets - Contains the static assets used by the game.

Testing on Ad Networks

• Facebook: Facebook Playable Ad tester is not working in case you try with it. You should upload your playable directly to Facebook Ads Manager to test.
• Unity Ads:
  • Android
  • iOS
• AppLovin
• Mintegral
• IronSource: Testing tool is deprecated. You can only test it directly on IronSource dashboard
• Google: Testing tool is not available. You can only test it directly on Google Ads Manager.
• TikTok
• Vungle
• Ad Colony
• Kayzen: They don't have testing tool. You need to test through their dashboard.

Handling Assets

Vite supports loading assets via JavaScript module import statements.

This template provides support for both embedding assets and also loading them from a static folder. To embed an asset, you can import it at the top of the JavaScript file you are using it in:

import logoImg from "./assets/logo.png";

To load static files such as audio files, videos, etc place them into the public/assets folder. Then you can use this path in the Loader calls within Phaser:

preload();
{
  //  This is an example of an imported bundled image.
  //  Remember to import it at the top of this file
  this.load.image("logo", logoImg);

  //  This is an example of loading a static image
  //  from the public/assets folder:
  this.load.image("background", "assets/bg.png");
}

When you issue the npm run build command, all static assets are automatically copied to the dist/assets folder.

Deploying to Production

After you run the npm run build command, your code will be built into a single bundle and saved to the dist folder, along with any other assets your project imported, or stored in the public assets folder.

In order to deploy your playable ad, you will need to upload all of the contents of the dist or dist-zip folder to ad network.

Customizing the Template

Vite

If you want to customize your build, such as adding plugin (i.e. for loading CSS or fonts), you can modify the vite.config.js file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of package.json. Please see the Vite documentation for more information.

Join the Phaser Community!

We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show-off your work 😄

Visit: The Phaser website and follow on Phaser Twitter
Play: Some of the amazing games #madewithphaser
Learn: API Docs, Support Forum and StackOverflow
Discord: Join us on Discord
Code: 2000+ Examples
Read: The Phaser World Newsletter

Created by Phaser Studio. Powered by coffee, anime, pixels and love.

The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc.

All rights reserved.