part-shop v0.0.3

part-shop

A DIY Custom WebWorker Game Library

The goal of part-shop is to create your own perfromant Game components called Middlewares, and data silos called Parts that manage game objects.

For now, it requires the use of webpack or browserify to create bundles that run in both a browser and inside a web worker.

For example, using webpack, bundle your application, and in part-shop's Game configuration, point it at itself. Using path/to/bundle.js...

//Only one js file means faster loading and it runs in both the worker/browser

let g = new Game({
  middleware: require.context('./middlware', false, /\.js$/i),
  parts: require.context('./parts', false, /\.js$/i),
  game: {
    index: {
      parts: ['hello-world'],
      middleware: ['simple-physics']
    }
  },
  initialState: 'index',
  worker: 'path/to/bundle.js'
});

Middlware

Middleware ask Parts for data and control when the application draws things.

For example a canvas middleware might look something like this:

//File: ./middleware/canvas.js
import { Middleware } from 'part-shop';

let c = document.createElement('canvas');
let parent = document.createElement('div');
let context = c.getContext('2d');
parent.appendChild(c);
parent.style.margin = '0 auto';

let mousePosition = { x: 0, y: 0 };
let updateMousePosition = (e) => {
  let rect = c.getBoundingClientRect();
  mousePosition.x = e.clientX - rect.left;
  mousePosition.y = e.clientY - rect.top;
};
c.addEventListener('mousemove', updateMousePosition, true);

export default class CanvasMiddleware extends Middleware {
  static onRegister(game, config) {
    let tick = () => {
      requestAnimationFrame(tick);
      game.tick();
    };
    document.body.appendChild(parent);
    c.width = config.canvas.width;
    c.height = config.canvas.height;
  }
  constructor() {
    super();
  }
  onPretick(data) {
    data.mousePosition = mousePosition;
  }
  onBrowserTick(data) {
    for(let i = 0; i < this.parts.length; i++) {
      this.parts[i].onDraw(data);
    }
  }
}