part-shop
v0.0.3 WebWorker game DIY
part-shop
A DIY Custom WebWorker Game Library
The goal of part-shop
is to create your own perfromant Game
components called Middleware
s, and data silos called Part
s 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);
}
}
}