Skip to content

Instantly share code, notes, and snippets.

@fkrauthan
Created Jun 26, 2017
Embed
What would you like to do?
Simple quick and dirty hot reloading for phaser 2 games with webpack
import "pixi";
import Phaser from "phaser";
import hotReloadPatcher from "./utils/hotReloadPatcher";
import hotReloadState from "./utils/hotReloadState";
import BootState from "./states/Boot";
import PreloadState from "./states/Preload";
import GameState from "./states/Game";
export default class Game extends Phaser.Game {
constructor() {
const el = document.getElementById("game");
super(650, 680, Phaser.AUTO, el);
hotReloadPatcher(this.state);
this.state.add("Boot", BootState);
this.state.add("Preload", PreloadState);
this.state.add("Game", GameState);
if (module.hot) {
module.hot.accept("./states/Boot", () => hotReloadState(this.state, "Boot", () => require("./states/Boot").default)); // eslint-disable-line global-require
module.hot.accept("./states/Preload", () => hotReloadState(this.state, "Preload", () => require("./states/Preload").default)); // eslint-disable-line global-require
module.hot.accept("./states/Game", () => hotReloadState(this.state, "Game", () => require("./states/Game").default)); // eslint-disable-line global-require
}
this.state.start("Boot");
}
}
/* eslint-disable no-param-reassign */
export default function hotReloadPatcher(stateManager) {
if (module.hot) {
const stateStart = stateManager.start.bind(stateManager);
stateManager.hotReloadStartedStates = [];
stateManager.hotReloadLastUsedParameters = [];
stateManager.start = function hotReloadStart(key, clearWorld, clearCache, ...parameters) {
const indexOfKey = this.hotReloadStartedStates.indexOf(key);
if (indexOfKey !== -1) {
this.hotReloadStartedStates.splice(indexOfKey, 1);
}
this.hotReloadStartedStates.push(key);
stateManager.hotReloadLastUsedParameters = [clearWorld, clearCache, ...parameters];
stateStart(key, clearWorld, clearCache, ...parameters);
};
}
}
export default function hotReloadState(stateManager, key, newStateFactory) {
if (module.hot) {
const newState = newStateFactory();
if (stateManager.hotReloadStartedStates.indexOf(key) === -1) {
console.log(`Successful replaced state "${key}"`); // eslint-disable-line no-console
stateManager.remove(key);
stateManager.add(key, newState);
} else if (stateManager.getCurrentState() && stateManager.getCurrentState().key === key) {
console.log(`Successful replaced state "${key}" and restarted current state`); // eslint-disable-line no-console
stateManager.clearCurrentState();
stateManager.remove(key);
stateManager.add(key, newState);
stateManager.start(key, ...stateManager.hotReloadLastUsedParameters);
} else {
console.warn(`The state "${key}" was already called. A page refresh is required!`); // eslint-disable-line no-console
window.location.reload();
}
}
}
{
"...": "...",
"scripts": {
"dev:web": "webpack-dev-server --config ./webpack/webpack.web.config.js --content-base assets --hot --inline --port 3002"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment