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, 33 insertions, 0 deletions

diff --git a/lib/sumo.js b/lib/sumo.js
index da72991..81f948f 100644
--- a/lib/sumo.js
+++ b/lib/sumo.js
@@ -1,8 +1,12 @@
+import RenderSystem from './systems/render';
+import SumoFactory from './factories/sumo';
 import Serpentity from '@serpentity/serpentity';
+import { Application } from 'pixi.js';
 
 /* global window document */
 
 const internals = {
+  kBackgroundColor: 0xd8c590,
   kNoElementError: 'No element found. Cannot render.',
 
   // Handler for the window load event. Initializes and runs the app.
@@ -56,6 +60,7 @@ internals.Sumo = class Sumo {
 
     // Initialization functions
     this._initializeCanvas();
+    this._initializePixi();
     this._initializeSystems();
     this._initializeEntities();
   }
@@ -119,6 +124,18 @@ internals.Sumo = class Sumo {
     window.addEventListener('resize', this._resizeCanvas.bind(this));
   }
 
+  // Initialize Pixi
+
+  _initializePixi() {
+
+    this._pixi = new Application({
+      backgroundColor: internals.kBackgroundColor,
+      view: this._canvas,
+      width: this._canvas.width,
+      height: this._canvas.height
+    });
+  }
+
   // Resizes the canvas to a square the size of the smallest magnitude
   // of the window.
 
@@ -143,12 +160,28 @@ internals.Sumo = class Sumo {
 
   _initializeSystems() {
 
+    this._engine.addSystem(new RenderSystem({
+      application: this._pixi
+    }));
   }
 
   // Initializes the serpentity entities
 
   _initializeEntities() {
 
+    SumoFactory.createSumo(this._engine, {
+      position: {
+        x: 50,
+        y: 50
+      }
+    });
+
+    SumoFactory.createSumo(this._engine, {
+      position: {
+        x: 309,
+        y: 112
+      }
+    });
   }
 };