Render Sumo (#3)

* Use corrected components

* Add renderable node

* Add render system

* Add sumo factory

* Add systems and entities to app

* Remove reference to weight / accel component

* Update dependencies, add pixi and babel-polyfill

* Use babel polyfill

* Add component to store pixi containers

* Add pixi container to the renderable support

* Update factories to produce renderables

* Update the renderable to use pixi

It also uses the new event emitters in serpentity 2.1.0

* Initialize pixi and pass it to renderable system

1 files changed, 99 insertions, 0 deletions

diff --git a/lib/systems/render.js b/lib/systems/render.js
new file mode 100644
index 0000000..8d3d446
--- /dev/null
+++ b/lib/systems/render.js
@@ -0,0 +1,99 @@
+import { System } from '@serpentity/serpentity';
+
+import RenderableNode from '../nodes/renderable';
+
+const internals = {
+  kNoPixiError: 'No pixi application passed to render system. Make sure you set the `application` key in the config object when initializing.'
+};
+
+/**
+ * Renders renderable objects to console
+ *
+ * @extends {external:Serpentity.System}
+ * @class RenderSystem
+ * @param {object} config a configuration object to extend.
+ */
+export default class RenderSystem extends System {
+
+  constructor(config = {}) {
+
+    super();
+
+    /**
+     * The node collection of renderable entities
+     *
+     * @property {external:Serpentity.NodeCollection} renderables
+     * @instance
+     * @memberof RenderSystem
+     */
+    this.renderables = null;
+
+    /**
+     * The pixi engine we will use to render
+     *
+     * @property {external:PixiJs.Application} renderables
+     * @instance
+     * @memberof RenderSystem
+     */
+    this._application = config.application;
+
+    if (!this._application) {
+      throw new Error(internals.kNoPixiError);
+    }
+  }
+
+  /**
+   * Initializes system when added. Requests renderable nodes and
+   * attaches to event listeners to add / remove them to pixi stage
+   *
+   * @function added
+   * @memberof RenderSystem
+   * @instance
+   * @param {external:Serpentity.Engine} engine the serpentity engine to
+   * which we are getting added
+   */
+  added(engine) {
+
+    this.renderables = engine.getNodes(RenderableNode);
+    this.renderables.on('nodeAdded', (event) => {
+
+      this._application.stage.addChild(event.node.container.container);
+    });
+    this.renderables.on('nodeRemoved', (event) => {
+
+      this._application.stage.removeChild(event.node.container.container);
+    });
+  }
+
+  /**
+   * Clears system resources when removed.
+   *
+   * @function removed
+   * @instance
+   * @memberof RenderSystem
+   */
+  removed() {
+
+    this.renderables.removeAllListeners('nodeAdded');
+    this.renderables.removeAllListeners('nodeRemoved');
+    this.renderables = null;
+  }
+
+  /**
+   * Runs on every update of the loop. Prints the location of every
+   * renderable
+   *
+   * @function update
+   * @instance
+   * @param {Number} currentFrameDuration the duration of the current
+   * frame
+   * @memberof RenderSystem
+   */
+  update(currentFrameDuration) {
+
+    for (const renderable of this.renderables) {
+      renderable.container.container.position.x = renderable.position.x;
+      renderable.container.container.position.y = renderable.position.y;
+    }
+  }
+};