npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

phaser-manifest-loader

v3.1.0

Published

Easily load assets into your Phaser game using a simple manifest

Downloads

7

Readme

Phaser Manifest Loader for Webpack

PhaserManifestLoader

Phaser Manifest Loader means you can load assets that have been compressed and fingerprinted by webpack as easily as this!

const manifest = {
  spritesheets: [
    'creature1',
    'creature2'
  ],
  'bitmap_fonts': [
    'bitmapfont'
  ],
  'audio': [
    'blip'
  ],
  'images': [
    'phaser_logo',
    'webpack_logo'        
  ],
  fonts: {
    custom: {
      families: [
        'bebas_neuebold'
      ]
    },
    google: {
      families: [
        'Bangers'
      ]
    }
  }
}

The Problem

Webpack is great! Webpack loaders are great because they compress and fingerprint your assets for you. Without this you cannot change an image on production and guarantee your users will see the new image as it may be stuck in a user's browser cache. However, when you use webpack loaders your main state can end up looking like this:

import creature1Image from '../assets/spritesheets/creature1.png'
import creature1Json from '../assets/spritesheets/creature1.json'
import blipSound from '../assets/audio/blip.mp3'
...

preload() {
  this.game.load.atlasJSONArray('creature1', creature1Image, null, creature1Json)
  this.game.load.audio('blip', blipSound)
  ...
}

...and before you even start writing your game code you already have 100 lines of code! Also I always have to look up the Phaser docs to remember how to load assets...it takes time!

The Solution

Phaser Manifest Loader provides an easy way to load assets. Just drop a new image into the images folder and add it to the manifest, or a new png / json combo into the spritesheets folder and add it to the manifest and the assets will appear in the cache ready for use in your game.

Features

  • Supports scaling variants for multi resolutions. The suffix is the 2nd parameter of the loadManifest method. this.game.plugins.add(ManifestLoader).loadManifest(manifest, '@2x')
  • Supports these filetypes
    • images (jpg, png)
    • atlasJSONArray(png + json)
    • audio (mp3, ogg)
    • bitmapfonts(png + xml)
    • web fonts (custom and google fonts)
    • *send me a PR to add more file types
  • Supports lazy loading and on-demand loading (loadManifest accepts a manifest and returns a Promise)
  • Supports nested dependencies (v1 uses webpack aliases which doesn't support this)
  • Web fonts are built in so you don't have to mess around with logic like this!
render() {
  if (this.webfontsLoaded) {
    this.game.state.start('main')
  }
}

Install

npm install --save phaser-manifest-loader

OR

yarn add phaser-manifest-loader

Setup

Create an assets directory with subdirectories for the asset types that you will require:

/images (jpg, png)
/spritesheets (atlasJSONArray (png + json))
/audio (mp3, ogg)
/fonts (webfonts)
/bitmap_fonts (png + xml)

Webpack config

Expects all assets to be in the form of a url. The main gotcha is that webpack by default will bundle your spritesheet json files into the main bundle which is not what we want. So make sure you use file-loader for json files. Example config:

rules: [
  {
    test: /\.json$/,
    use: 'file-loader',
  },
  {
    test: /\.woff|\.woff2|\.svg|.eot|\.ttf/,
    use: 'url-loader?prefix=font/&limit=10000&name=[name]-[hash].[ext]',
  },
  {
    test: /\.mp3$/,
    use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
  },
  {
    test: /\.(png)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          hash: 'sha512',
          digest: 'hex',
          name: '[name]-[hash].[ext]',
        },
      },
      {
        loader: 'image-webpack-loader',
        options: {
          progressive: true,
          optipng: {
            optimizationLevel: 7,
          },
          gifsicle: {
            interlaced: false,
          },
        },
      },
    ],
  },
  {
    test: /\.jpg$/,
    use: [
      {
        loader: 'url-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
        options: {
          limit: 25000,
        },
      },
    ],
  },
  {
    test: /\.xml$/,
    use: 'file-loader?hash=sha512&digest=hex&name=[name]-[hash].[ext]',
  },
]

Usage

Basic

import ManifestLoader from 'phaser-manifest-loader'

import manifest from './manifest' // see manifest example below

// tell webpack where your assets directory is using require.context (https://webpack.github.io/docs/context.html)
// specify the filetypes so webpack doesn't try to load any other files inside the assets directory
const req = require.context('../assets', true, /.*\.png|json|ttf|woff|woff2|xml|mp3|jpg$/);

// no webfonts in this manifest so we can simply use the preload method
// you can also import the light-weight AssetLoader which doesn't include webfontloader in the build
// e.g. import { AssetLoader } from 'phaser-manifest-loader' (it has the same api as ManifestLoader)
preload() {  
  this.game.plugins.add(ManifestLoader, req).loadManifest(manifest)
}

Advanced (Webfonts)

import '../assets/fonts/bebas/stylesheet.css' // IMPORTANT remember to load your webfont stylesheet
import ManifestLoader from 'phaser-manifest-loader'
import manifest from './manifest' // see manifest example below

// specify the filetypes so webpack doesn't try to load any other files inside the assets directory
const req = require.context('../assets', true, /.*\.png|json|ttf|woff|woff2|xml|mp3|jpg$/);

// Load in a manifest of assets including web fonts
// because webfonts don't use the Phaser loader we can't take advantage of Phaser's
// preload method. So we performing loading in the create method and use the Promise
// returned from `loadManifest`.
create() {
  const loader = this.game.plugins.add(ManifestLoader, req)
  // load high dpi images with '@2x'
  loader.loadManifest(manifest, '@2x').then(() => {
    this.state.start('Main');
  })
}

Manifest Example

const manifest = {
  spritesheets: [
    'creature1',
    'creature2'
  ],
  'bitmap_fonts': [
    'bitmapfont'
  ],
  'audio': [
    'blip'
  ],
  'images': [
    'phaser_logo',
    'webpack_logo'        
  ],
  fonts: {
    custom: {
      families: [
        'bebas_neuebold'
      ]
    },
    google: {
      families: [
        'Bangers'
      ]
    }
  }
}
export default manifest

Loading Images

Drop your image into the images folder and provide the name of the file (without the filetype) in the images array of the manifest. It will auto-detect the filetype.

Loading Audio

Drop your audio into the audio folder and provide the name of the file (without the filetype) in the audio array of the manifest. It will auto-detect the filetype.

Loading Fonts

The font loader uses Web Font Loader. Use their standard config object in your manifest.

Loading Spritesheets and Texture Atlases

Sprites and atlases use atlasJSONArray type from Phaser. Make sure you name both the png and json file with the same name, then provide that name in the spritesheets array of the manifest.

Loading Bitmap fonts

Make sure you name both the png and xml file with the same name, then provide that name in the bitmap_fonts array of the manifest.

Who should use Phaser Manifest Loader?

Anyone that uses Phaser and webpack may benefit from this. I think it will be particularly useful for teams of developers as it provides convention and simplicity to asset loading. It will be very easy for example to explain to new junior developers how to load in assets.

1. Drop your asset into the appropriate folder.
2. Include it in the manifest.

Easy! Rather than explaining how webpack works and referring them to both the webpack and phaser docs.

API

loadManifest

[loadManifest loads a manifest of assets]

Parameters

Returns Promise

Run demo

npm start

Build demo

npm run build-demo

Credits

Built by Matt Colman Inspired by https://github.com/lean/phaser-es6-webpack