goldfire / phaser-webpack-loader

Asset loader for Phaser + Webpack.

Phaser 3 Webpack Loader

Instead of manually calling scene.load.image, scene.load.audio, etc for every asset in your game (and then dealing with caching issues), phaser-webpack-loader lets you define all assets in a simple manifest file and handles the rest for you.

NOTE: This plugin now only supports Phaser 3 and later. If you need support for Phaser 2, use v1.1.0.

Features

• Load all game assets in parallel.
• Load images, spritesheets, atlases, audio, bitmap fonts and web fonts.
• Integrated with Webpack for automatic cache-busting.
• Supports all filetypes.
• Supports asset postfix for retina support ('@2x', '@3x', etc).
• Custom event to track each file load (including fonts).

Install

Install the plugin through NPM (or Yarn):

npm install phaser-webpack-loader --save

Then create your manifest file and add the plugin as outlined below.

Manifest File (AssetManifest.js)

const AssetManifest = {
  images: [
    'image001.png',
    'image002.jpg',
    '...',
  ],
  sprites: [
    'sprite001.png',
    'sprite002.png',
    '...',
  ],
  audio: [
    'audio001.webm',
    'audio002.mp3',
    '...',
  ],
  bitmapFonts: [
    'font001.png',
    'font002.png',
    '...',
  ],
  fonts: {
    google: {
      families: [
        'Open Sans:300,700',
      ],
    },
  },
};

export default AssetManifest;

Running Plugin (Preload.js)

In your preload state, add the plugin. It uses promises, which makes it flexible to move to the next step when ready.

import WebpackLoader from 'phaser-webpack-loader';
import AssetManifest from '../AssetManifest';

export default class Preload extends Phaser.Scene {
  preload() {
    this.load.scenePlugin('WebpackLoader', WebpackLoader, 'loader', 'loader');
  }

  create() {
    this.loader.start(AssetManifest);
    this.loader.load().then(() => {
      // Done loading!
    });
  }
}

If you want to load high DPI assets, you can pass an optional postfix string:

this.loader.start(AssetManifest, '@2x');

If you want to know when each file is loaded, use the optional callback:

this.loader.systems.events.on('load', (file) => {
  console.log('File loaded!', file);
});

Loading Fonts

The font loader uses Web Font Loader, which supports loading web fonts from all major providers. Simply provide their standard configuration object in your manifest.

Loading Sprites/Atlases

All sprite/atlas files are loaded as JSON hashes (which can be output using TexturePacker, Shoebox and others). All you have to specify in the manifest is the image filename, but you'll also need to include the JSON hash file alongside it, which will automatically get loaded and used.

Directory Structure

Specify the base directory in your Webpack config:

resolve: {
  alias: {
    assets: path.join(__dirname, '../src/assets'),
  },
},

Then, place your assets in the following sub-directories:

assets/
├── images/
├── sprites/
├── audio/
└── fonts/

ES6 Building

This plugin is not pre-compiled to ES5, so you'll want to make sure your Webpack config rules are setup to not exclude it:

module: {
  rules: [
    {
      test: /\.js$/,
      loader: '...',
      exclude: /node_modules\/(?!phaser-webpack-loader)/,
    },
  ],
  ...
},

License

Copyright (c) 2018 James Simpson and GoldFire Studios, Inc.

Released under the MIT License.

phaser-webpack-loader's Issues

Local data URIs are not supported: atlas

I'm currently trying to load an atlas.png and atlas.json. However both without using this package and with using it, phaser breaks and gives the error: 'Local data URIs are not supported: atlas'.

Webpack requires the files, which is necessary, but it somehow breaks phaser. Does anyone have a clue on how to fix this?

Credits

Hi, I'd appreciate being credited for https://github.com/mattcolman/phaser-manifest-loader

Loading TexturePacker sprite atlas

I can't seem to load a sprite atlas created by TexturePacker using JSON(Hash) data format with the Trim sprite names option activated. I choose this format because is the most similar to the texture atlas found in the phaser-boilerplate demo (https://github.com/goldfire/phaser-boilerplate/blob/master/src/assets/sprites/textures.json).

Following the phaser-boilerplate demo I have mi atlas.png and atlas.json files in the assets/sprites folder and the string "atlas.png" in the sprites array of the AssetManifest object.

The errors I get are:
Phaser.AnimationParser.JSONDataHash: Invalid Texture Atlas JSON given, missing 'frames' object
./dist/95cfb517fde6e8c353c4115beda802af.json

And in my webpack file I have the rules:
rules: [ ..., { test: /\.json$/, use: 'file-loader', }, ... ]

I can get to load images just fine.

Support phaser-ce

The current require statement references phaser. Would it be possible to support both phaser and phaser-ce?

minimal complete implementation example

Hi!
I am trying to get this to work but I cant.
(Getting phaser to work with webpack mainly(

A small, simple but Complete example repository / starter Project would help very much )

Thank!

Infinite loading time if no font is specified

_loadFonts() is never be resolved under following conditions

• font field does not exist in the manifest file
• font field is empty (like this -> fonts: { })

However, since the load() function is waiting for both _loadAssets() and _loadFonts(),
it won't return...

I guess if fonts are not specified, _loadFonts() should be excluded
from Promise.all in the _loadFonts().

.then() never fires

Hello,

Thanks for the great package albeit not seeing the then() fire once complete:

    this.game.plugins.add(WebpackLoader, AssetManifest)
      .load()
      .then(() => {
        console.log('loaded assets...')
        this.game.state.start('Start');
      })
      .catch(err => {
        console.error(err);
      });

My AppManifest looks like this:

  sprites: [
    'buttons/btn_blank_small.png',
    'buttons/btn_blank_big.png',
    'buttons/btn_blank_square.png',

   ...
    
  ],
  fonts: [
    'gooddog.ttf',
    'gooddog.woff',
    'gooddog.woff2',
  ]
};

I added the below to the webpack.config.js:

      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        loader: 'file-loader?name=assets/fonts/[name].[ext]?[hash]'
      },

It moves the files ok.. the font works and is referenced in the css ok. I don't know why the then() doesn't fire - seems the promise is never returned.

Any help much appreciated.