graphics runtimes

src/game-lib-a-component-a.js

@@ -295,11 +295,11 @@ GameLib.Component.CLOCK 	                    = 0x37;
 GameLib.Component.ANIMATION 	                = 0x38;
 GameLib.Component.CONTROLS_KEYBOARD   		    = 0x39;
 GameLib.Component.CONTROLS_MOUSE				= 0x3a;
-//GameLib.Component.MESH_TEXT				        = 0x3b;
+GameLib.Component.GRAPHICS_THREE                = 0x3b;
 GameLib.Component.FONT                          = 0x3c;
 GameLib.Component.CANVAS                        = 0x3d;
 GameLib.Component.BONE                          = 0x3e;
-//GameLib.Component.MESH_BOX         		        = 0x3f;
+GameLib.Component.GRAPHICS_IMPACT  		        = 0x3f;
 //GameLib.Component.MESH_CYLINDER      		    = 0x40;
 GameLib.Component.SYSTEM_ANIMATION  		    = 0x41;
 GameLib.Component.SYSTEM_CUSTOM_CODE    		= 0x42;
@@ -446,7 +446,7 @@ GameLib.Component.GetComponentInfo = function(number) {
         };
         case 0x3 : return {
             name : 'GameLib.Renderer',
-            runtime : GameLib.Component.DEFAULT_RUNTIME,
+            runtime : GameLib.Component.GRAPHICS_RUNTIME,
             constructor : GameLib.Renderer,
             apiConstructor : GameLib.API.Renderer
         };
@@ -628,7 +628,7 @@ GameLib.Component.GetComponentInfo = function(number) {
         };
         case 0x22 : return {
             name : 'GameLib.Renderer.D2',
-            runtime : GameLib.Component.DEFAULT_RUNTIME,
+            runtime : GameLib.Component.GRAPHICS_RUNTIME,
             constructor : GameLib.Renderer.D2,
             apiConstructor : GameLib.API.Renderer.D2
         };
@@ -776,12 +776,12 @@ GameLib.Component.GetComponentInfo = function(number) {
             constructor : GameLib.Controls.Mouse,
             apiConstructor : GameLib.API.Controls
         };
-        case 0x3b : return null;/*{
+        case 0x3b : return {
-            name : 'GameLib.D3.Mesh.Text',
+            name : 'GameLib.GraphicsRuntime.Three',
-            runtime : GameLib.Component.GRAPHICS_RUNTIME,
+            runtime : GameLib.Component.DEFAULT_RUNTIME,
-            constructor : GameLib.D3.Mesh.Text,
+            constructor : GameLib.GraphicsRuntime.Three,
-            apiConstructor : GameLib.D3.API.Mesh
+            apiConstructor : GameLib.API.GraphicsRuntime.Three
-        };*/
+        };
         case 0x3c : return {
             name : 'GameLib.D3.Font',
             runtime : GameLib.Component.GRAPHICS_RUNTIME,
@@ -790,7 +790,7 @@ GameLib.Component.GetComponentInfo = function(number) {
         };
         case 0x3d : return {
             name : 'GameLib.Canvas',
-            runtime : GameLib.Component.DEFAULT_RUNTIME,
+            runtime : GameLib.Component.GRAPHICS_RUNTIME,
             constructor : GameLib.Canvas,
             apiConstructor : GameLib.API.Canvas
         };
@@ -800,12 +800,12 @@ GameLib.Component.GetComponentInfo = function(number) {
             constructor : GameLib.D3.Bone,
             apiConstructor : GameLib.D3.API.Bone
         };
-        case 0x3f : return null;/*{
+        case 0x3f :  return {
-            name : 'GameLib.D3.Mesh.Box',
+            name : 'GameLib.GraphicsRuntime.Impact',
-            runtime : GameLib.Component.GRAPHICS_RUNTIME,
+            runtime : GameLib.Component.DEFAULT_RUNTIME,
-            constructor : GameLib.D3.Mesh.Box,
+            constructor : GameLib.GraphicsRuntime.Impact,
-            apiConstructor : GameLib.D3.API.Mesh
+            apiConstructor : GameLib.API.GraphicsRuntime.Impact
-        };*/
+        };
         case 0x40 : return null;/*{
             name : 'GameLib.D3.Mesh.Cylinder',
             runtime : GameLib.Component.GRAPHICS_RUNTIME,

src/game-lib-api-canvas.js

@@ -7,6 +7,8 @@
  * @param autoUpdateSize
  * @param width
  * @param height
+ * @param offset
+ * @param tabIndex
  * @param texts
  * @constructor
  */
@@ -18,6 +20,8 @@ GameLib.API.Canvas = function(
     autoUpdateSize,
     width,
     height,
+    offset,
+    tabIndex,
     texts
 ) {
     if (GameLib.Utils.UndefinedOrNull(id)) {
@@ -50,6 +54,16 @@ GameLib.API.Canvas = function(
     }
     this.height = height;
 
+    if (GameLib.Utils.UndefinedOrNull(offset)) {
+        offset = new GameLib.API.Vector2(0,0);
+    }
+    this.offset = offset;
+
+    if (GameLib.Utils.UndefinedOrNull(tabIndex)) {
+        tabIndex = 1;
+    }
+    this.tabIndex = tabIndex;
+
     if (GameLib.Utils.UndefinedOrNull(texts)) {
         texts = [];
     }

src/game-lib-api-graphics-runtime-a.js

@@ -0,0 +1,64 @@
+/**
+ * GameLib.API.GraphicsRuntime
+ * @param id
+ * @param name
+ * @param graphicsType
+ * @param parentEntity
+ * @constructor
+ */
+GameLib.API.GraphicsRuntime = function(
+    id,
+    name,
+    graphicsType,
+    parentEntity
+) {
+    if (GameLib.Utils.UndefinedOrNull(id)) {
+        id = GameLib.Utils.RandomId();
+    }
+    this.id = id;
+
+    if (GameLib.Utils.UndefinedOrNull(name)) {
+        name = 'Graphics Runtime (' + id + ')';
+    }
+    this.name = name;
+
+    if (GameLib.Utils.UndefinedOrNull(graphicsType)) {
+        graphicsType = null;
+    }
+    this.graphicsType = graphicsType;
+
+    GameLib.API.Component.call(
+        this,
+        GameLib.API.GraphicsRuntime.GetComponentType(this.graphicsType),
+        parentEntity
+    );
+};
+
+GameLib.API.GraphicsRuntime.prototype = Object.create(GameLib.API.Component.prototype);
+GameLib.API.GraphicsRuntime.prototype.constructor = GameLib.API.GraphicsRuntime;
+
+GameLib.API.GraphicsRuntime.GetComponentType = function(graphicsType) {
+
+    var componentType = null;
+
+    switch (graphicsType) {
+        case GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_NONE :
+            componentType = GameLib.Component.GRAPHICS;
+            break;
+        case GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_THREE_JS :
+            componentType = GameLib.Component.GRAPHICS_THREE;
+            break;
+        case GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_IMPACT_JS :
+            componentType = GameLib.Component.GRAPHICS_IMPACT;
+            break;
+        default:
+            throw new Error('Invalid graphics type');
+
+    }
+
+    return componentType;
+};
+
+GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_NONE      =   0x0;
+GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_THREE_JS  =   0x1;
+GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_IMPACT_JS =   0x2;

src/game-lib-api-graphics-runtime-impact.js

@@ -0,0 +1,30 @@
+/**
+ * GameLib.API.GraphicsRuntime.Impact
+ * @constructor
+ * @param apiGraphicsRuntime
+ */
+GameLib.API.GraphicsRuntime.Impact = function(
+    apiGraphicsRuntime
+) {
+    if (GameLib.Utils.UndefinedOrNull(apiGraphicsRuntime)) {
+        apiGraphicsRuntime = {
+            graphicsType : GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_IMPACT_JS
+        };
+    }
+
+    if (GameLib.Utils.UndefinedOrNull(apiGraphicsRuntime.graphicsType)) {
+        apiGraphicsRuntime.graphicsType = GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_IMPACT_JS;
+    }
+
+    GameLib.API.GraphicsRuntime.call(
+        this,
+        apiGraphicsRuntime.id,
+        apiGraphicsRuntime.name,
+        apiGraphicsRuntime.graphicsType,
+        apiGraphicsRuntime.parentEntity
+    );
+
+};
+
+GameLib.API.GraphicsRuntime.Impact.prototype = Object.create(GameLib.API.GraphicsRuntime.prototype);
+GameLib.API.GraphicsRuntime.Impact.prototype.constructor = GameLib.API.GraphicsRuntime.Impact;

src/game-lib-api-graphics-runtime-three.js

@@ -0,0 +1,30 @@
+/**
+ * GameLib.API.GraphicsRuntime.Three
+ * @constructor
+ * @param apiGraphicsRuntime
+ */
+GameLib.API.GraphicsRuntime.Three = function(
+    apiGraphicsRuntime
+) {
+    if (GameLib.Utils.UndefinedOrNull(apiGraphicsRuntime)) {
+        apiGraphicsRuntime = {
+            graphicsType : GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_THREE_JS
+        };
+    }
+
+    if (GameLib.Utils.UndefinedOrNull(apiGraphicsRuntime.graphicsType)) {
+        apiGraphicsRuntime.graphicsType = GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_THREE_JS;
+    }
+
+    GameLib.API.GraphicsRuntime.call(
+        this,
+        apiGraphicsRuntime.id,
+        apiGraphicsRuntime.name,
+        apiGraphicsRuntime.graphicsType,
+        apiGraphicsRuntime.parentEntity
+    );
+
+};
+
+GameLib.API.GraphicsRuntime.Three.prototype = Object.create(GameLib.API.GraphicsRuntime.prototype);
+GameLib.API.GraphicsRuntime.Three.prototype.constructor = GameLib.API.GraphicsRuntime.Three;

src/game-lib-api-renderer-a.js

@@ -6,6 +6,7 @@
  * @param parentEntity
  * @param width
  * @param height
+ * @param offset
  * @param canvas
  * @constructor
  */
@@ -16,6 +17,7 @@ GameLib.API.Renderer = function (
     parentEntity,
     width,
     height,
+    offset,
     canvas
 ) {
     if (GameLib.Utils.UndefinedOrNull(id)) {
@@ -59,13 +61,13 @@ GameLib.API.Renderer = function (
     }
     this.height = height;
 
+    if (GameLib.Utils.UndefinedOrNull(offset)) {
+        offset = new GameLib.API.Vector2(0,0);
+    }
+    this.offset = offset;
+
     if (GameLib.Utils.UndefinedOrNull(canvas)) {
-        canvas = new GameLib.API.Canvas(
+        canvas = new GameLib.API.Canvas();
-            null,
-            null,
-            512,
-            512
-        );
     }
     this.canvas = canvas;
 

src/game-lib-api-renderer-d2.js

@@ -25,6 +25,7 @@ GameLib.API.Renderer.D2 = function (
         apiRenderer.parentEntity,
         apiRenderer.width,
         apiRenderer.height,
+        apiRenderer.offset,
         apiRenderer.canvas
     );
 

src/game-lib-api-renderer-d3.js

@@ -29,7 +29,6 @@
  * @param depth
  * @param logarithmicDepthBuffer
  * @param localClippingEnabled
- * @param offset
  * @param renderTarget
  * @param clippingPlanes
  * @param clearColor
@@ -66,7 +65,6 @@ GameLib.API.Renderer.D3 = function (
     depth,
     logarithmicDepthBuffer,
     localClippingEnabled,
-    offset,
     renderTarget,
     clippingPlanes,
     clearColor,
@@ -223,11 +221,6 @@ GameLib.API.Renderer.D3 = function (
     }
     this.localClippingEnabled = localClippingEnabled;
 
-    if (GameLib.Utils.UndefinedOrNull(offset)) {
-        offset = new GameLib.API.Vector2(0,0);
-    }
-    this.offset = offset;
-
     if (GameLib.Utils.UndefinedOrNull(renderTarget)) {
         renderTarget = null;
     }
@@ -263,6 +256,7 @@ GameLib.API.Renderer.D3 = function (
         apiRenderer.parentEntity,
         apiRenderer.width,
         apiRenderer.height,
+        apiRenderer.offset,
         apiRenderer.canvas
     );
 

src/game-lib-canvas.js

@@ -1,12 +1,16 @@
 /**
  * Canvas object
+ * @param graphics
  * @param apiCanvas
  * @returns {GameLib.Canvas}
  * @constructor
  */
 GameLib.Canvas = function(
+    graphics,
 	apiCanvas
 ) {
+    this.graphics = graphics;
+
     if (GameLib.Utils.UndefinedOrNull(apiCanvas)) {
 		apiCanvas = {};
 	}
@@ -20,9 +24,17 @@ GameLib.Canvas = function(
 		apiCanvas.autoUpdateSize,
 		apiCanvas.width,
 		apiCanvas.height,
+		apiCanvas.offset,
+		apiCanvas.tabIndex,
 		apiCanvas.texts
 	);
 
+    this.offset = new GameLib.Vector2(
+        this.graphics,
+        this.offset,
+        this
+    );
+
     GameLib.Component.call(
         this,
         {
@@ -45,7 +57,11 @@ GameLib.Canvas.prototype.createInstance = function() {
 
     this.instance.setAttribute('id', this.id);
 
-    this.instance.setAttribute('tabindex', '1');
+    this.instance.setAttribute('tabindex', this.tabIndex);
+
+    this.instance.setAttribute('style', 'left: ' + this.offset.x + 'px;top: ' + this.offset.y + 'px');
+
+    //this.instance.style.visibility = 'hidden';
 
     if (this.autoUpdateSize) {
         /**
@@ -63,6 +79,8 @@ GameLib.Canvas.prototype.createInstance = function() {
 
     this.writeText();
 
+    //document.body.appendChild(this.instance);
+
     GameLib.Component.prototype.createInstance.call(this);
 };
 
@@ -80,6 +98,17 @@ GameLib.Canvas.prototype.updateInstance = function(property) {
         return;
     }
 
+    if (property === 'offset') {
+        this.instance.style.left    = this.offset.x + 'px';
+        this.instance.style.top     = this.offset.y + 'px';
+        return;
+    }
+
+    if (property === 'tabIndex') {
+        this.instance.setAttribute('tabIndex', this.tabIndex);
+        return;
+    }
+
     if (
         property === 'autoUpdateSize' ||
         property === 'width' ||
@@ -125,14 +154,17 @@ GameLib.Canvas.prototype.updateInstance = function(property) {
  * @returns {GameLib.API.Canvas}
  */
 GameLib.Canvas.prototype.toApiObject = function() {
+
 	return new GameLib.API.Canvas(
-		this.id,
+        this.id,
-		this.name,
+        this.name,
-		GameLib.Utils.IdOrNull(this.parentTexture),
+        GameLib.Utils.IdOrNull(this.parentEntity),
-		GameLib.Utils.IdOrNull(this.parentEntity),
+        GameLib.Utils.IdOrNull(this.parentTexture),
-		this.autoUpdateSize,
+        this.autoUpdateSize,
-		this.width,
+        this.width,
-		this.height,
+        this.height,
+        this.offset.toApiObject(),
+        this.tabIndex,
 		this.texts.map(function(text){
 		    return GameLib.Utils.IdOrNull(text)
         })

src/game-lib-d3-texture-canvas.js

@@ -25,6 +25,7 @@ GameLib.D3.Texture.Canvas = function(
 
     if (this.canvas instanceof GameLib.API.Canvas) {
         this.canvas = new GameLib.Canvas(
+            this.graphics,
             this.canvas
         );
     }

src/game-lib-entity.js

@@ -107,6 +107,14 @@ GameLib.Entity.prototype.addComponent = function(component) {
 
     component.parentEntity = this;
 
+    /**
+     * Could be that this entity is not loaded and needs to be linked still
+     */
+    if (this.components.indexOf(component.id) !== -1) {
+        console.log('the entity still has to load');
+        return;
+    }
+
     GameLib.Utils.PushUnique(this.components, component);
 
     if (GameLib.Utils.UndefinedOrNull(this.idRegister[component.componentType])) {

src/game-lib-graphics-runtime-a.js

@@ -0,0 +1,71 @@
+/**
+ * Graphics
+ * @constructor
+ * @param apiGraphics
+ */
+GameLib.GraphicsRuntime = function(
+    apiGraphics
+) {
+
+    if (GameLib.Utils.UndefinedOrNull(apiGraphics)) {
+        apiGraphics = {
+            graphicsType : GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_NONE
+        };
+    }
+
+    GameLib.API.GraphicsRuntime.call(
+        this,
+        apiGraphics.id,
+        apiGraphics.name,
+        apiGraphics.graphicsType,
+        apiGraphics.parentEntity
+    );
+
+    GameLib.Component.call(this);
+};
+
+GameLib.GraphicsRuntime.prototype = Object.create(GameLib.Component.prototype);
+GameLib.GraphicsRuntime.prototype.constructor = GameLib.GraphicsRuntime;
+
+GameLib.GraphicsRuntime.prototype.createInstance = function() {
+    console.log(this.graphicsType + ' graphics runtime created');
+    GameLib.Component.prototype.createInstance.call(this);
+};
+
+GameLib.GraphicsRuntime.prototype.updateInstance = function(property) {
+
+    if (property === 'graphicsType') {
+        var componentType = GameLib.API.Renderer.GetComponentType(this.graphicsType);
+
+        this.replace(componentType);
+
+        return;
+    }
+
+    GameLib.Component.prototype.updateInstance.call(this, property);
+};
+
+GameLib.GraphicsRuntime.prototype.toApiObject = function(property) {
+
+    return new GameLib.API.GraphicsRuntime(
+        this.id,
+        this.name,
+        this.graphicsType,
+        GameLib.Utils.IdOrNull(this.parentEntity)
+    );
+
+};
+
+/**
+ * Logs a warning and throws an error if not cannon
+ */
+GameLib.GraphicsRuntime.prototype.isNotThreeThrow = function() {
+    if (this.instance !== THREE) {
+        console.error('Only THREE supported');
+        throw new Error('Only THREE supported');
+    }
+};
+
+GameLib.GraphicsRuntime.prototype.isThree = function() {
+    return (this.instance === THREE);
+};

src/game-lib-graphics-runtime-impact.js

@@ -0,0 +1,116 @@
+/**
+ * GameLib.GraphicsRuntime.Impact
+ * @param apiGraphicsRuntimeImpact
+ * @constructor
+ */
+GameLib.GraphicsRuntime.Impact = function (
+    apiGraphicsRuntimeImpact
+) {
+
+    if (GameLib.Utils.UndefinedOrNull(apiGraphicsRuntimeImpact)) {
+        apiGraphicsRuntimeImpact = {
+            graphicsType : GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_IMPACT_JS
+        };
+    }
+
+    GameLib.API.GraphicsRuntime.Impact.call(
+        this,
+        apiGraphicsRuntimeImpact
+    );
+
+    GameLib.GraphicsRuntime.call(
+        this,
+        this
+    );
+
+};
+
+GameLib.GraphicsRuntime.Impact.prototype = Object.create(GameLib.GraphicsRuntime.prototype);
+GameLib.GraphicsRuntime.Impact.prototype.constructor = GameLib.GraphicsRuntime.Impact;
+
+/**
+ * Create GameLib.GraphicsRuntime.Impact Instance
+ * @returns {*}
+ */
+GameLib.GraphicsRuntime.Impact.prototype.createInstance = function() {
+
+    this.instance = ig;
+
+    /**
+     * We override the game load to lookup the canvas from our game-lib and not the DOM, since our canvas
+     * does not necessarily live inside the DOM
+     */
+    ig.System.inject({
+        init : function( canvasId, fps, width, height, scale ) {
+            this.fps = fps;
+
+            this.clock = new ig.Timer();
+            this.canvas = GameLib.EntityManager.Instance.findComponentById(canvasId).instance;
+            this.resize( width, height, scale );
+            this.context = this.canvas.getContext('2d');
+
+            this.getDrawPos = ig.System.drawMode;
+
+            // Automatically switch to crisp scaling when using a scale
+            // other than 1
+            if( this.scale !== 1 ) {
+                ig.System.scaleMode = ig.System.SCALE.CRISP;
+            }
+
+            ig.System.scaleMode( this.canvas, this.context );
+        }
+    });
+
+    /**
+     * We override image loading to specify that it loads from cross-origins
+     */
+    ig.Image.inject({
+        load: function( loadCallback ) {
+            if( this.loaded ) {
+                if( loadCallback ) {
+                    loadCallback( this.path, true );
+                }
+                return;
+            }
+            else if( !this.loaded && ig.ready ) {
+                this.loadCallback = loadCallback || null;
+
+                this.data = new Image();
+                this.data.crossOrigin = 'anonymous';
+                this.data.onload = this.onload.bind(this);
+                this.data.onerror = this.onerror.bind(this);
+                this.data.src = ig.prefix + this.path + ig.nocache;
+            }
+            else {
+                ig.addResource( this );
+            }
+
+            ig.Image.cache[this.path] = this;
+        }
+    });
+
+    GameLib.GraphicsRuntime.prototype.createInstance.call(this);
+};
+
+/**
+ * Update GraphicsRuntime.Impact Instance
+ */
+GameLib.GraphicsRuntime.Impact.prototype.updateInstance = function(property) {
+
+    GameLib.GraphicsRuntime.prototype.updateInstance.call(this, property);
+};
+
+/**
+ *
+ * @returns {GameLib.API.GraphicsRuntime.Impact}
+ */
+GameLib.GraphicsRuntime.Impact.prototype.toApiObject = function() {
+
+    var apiGraphicsRuntime = GameLib.GraphicsRuntime.prototype.toApiObject.call(this);
+
+    var apiGraphicsRuntimeImpact = new GameLib.API.GraphicsRuntime.Impact(
+        apiGraphicsRuntime
+    );
+
+    return apiGraphicsRuntimeImpact;
+};

src/game-lib-graphics-runtime-three.js

@@ -0,0 +1,63 @@
+/**
+ * GameLib.GraphicsRuntime.Three
+ * @param apiGraphicsRuntimeThree
+ * @constructor
+ */
+GameLib.GraphicsRuntime.Three = function (
+    apiGraphicsRuntimeThree
+) {
+
+    if (GameLib.Utils.UndefinedOrNull(apiGraphicsRuntimeThree)) {
+        apiGraphicsRuntimeThree = {
+            graphicsType : GameLib.API.GraphicsRuntime.GRAPHICS_TYPE_THREE_JS
+        };
+    }
+
+    GameLib.API.GraphicsRuntime.Three.call(
+        this,
+        apiGraphicsRuntimeThree
+    );
+
+    GameLib.GraphicsRuntime.call(
+        this,
+        this
+    );
+
+};
+
+GameLib.GraphicsRuntime.Three.prototype = Object.create(GameLib.GraphicsRuntime.prototype);
+GameLib.GraphicsRuntime.Three.prototype.constructor = GameLib.GraphicsRuntime.Three;
+
+/**
+ * Create GameLib.GraphicsRuntime.Three Instance
+ * @returns {*}
+ */
+GameLib.GraphicsRuntime.Three.prototype.createInstance = function() {
+
+    this.instance = THREE;
+
+    GameLib.GraphicsRuntime.prototype.createInstance.call(this);
+};
+
+/**
+ * Update GraphicsRuntime.Three Instance
+ */
+GameLib.GraphicsRuntime.Three.prototype.updateInstance = function(property) {
+
+    GameLib.GraphicsRuntime.prototype.updateInstance.call(this, property);
+};
+
+/**
+ *
+ * @returns {GameLib.API.GraphicsRuntime.Three}
+ */
+GameLib.GraphicsRuntime.Three.prototype.toApiObject = function() {
+
+    var apiGraphicsRuntime = GameLib.GraphicsRuntime.prototype.toApiObject.call(this);
+
+    var apiGraphicsRuntimeThree = new GameLib.API.GraphicsRuntime.Three(
+        apiGraphicsRuntime
+    );
+
+    return apiGraphicsRuntimeThree;
+};

src/game-lib-graphics-runtime.js

@@ -1,59 +0,0 @@
-/**
- * Graphics
- * @param id
- * @param name
- * @param graphicsType
- * @constructor
- */
-GameLib.GraphicsRuntime = function(
-    id,
-    name,
-    graphicsType
-) {
-    if (GameLib.Utils.UndefinedOrNull(id)) {
-        id = GameLib.Utils.RandomId();
-    }
-    this.id = id;
-
-    if (GameLib.Utils.UndefinedOrNull(name)) {
-        name = 'Graphics (' + id + ')';
-    }
-    this.name = name;
-
-    if (GameLib.Utils.UndefinedOrNull(graphicsType)) {
-        graphicsType = GameLib.GraphicsRuntime.TYPE_THREE_JS;
-    }
-    this.graphicsType = graphicsType;
-
-    this.createInstance();
-};
-
-/**
- * GameLib.GraphicsRuntime Types
- * @type {number}
- */
-GameLib.GraphicsRuntime.TYPE_THREE_JS = 0x1;
-
-GameLib.GraphicsRuntime.prototype.createInstance = function() {
-    if (this.graphicsType === GameLib.GraphicsRuntime.TYPE_THREE_JS) {
-        this.instance = THREE;
-    } else {
-        this.instance = null;
-    }
-};
-
-GameLib.GraphicsRuntime.prototype.updateInstance = function(property) {
-    if (property === 'graphicsType') {
-        this.createInstance();
-    }
-};
-
-/**
- * Logs a warning and throws an error if not cannon
- */
-GameLib.GraphicsRuntime.prototype.isNotThreeThrow = function() {
-    if (this.instance !== THREE) {
-        console.error('Only THREE supported');
-        throw new Error('Only THREE supported');
-    }
-};

src/game-lib-renderer-a.js

@@ -1,13 +1,20 @@
 /**
  * GameLib.Renderer
+ * @param graphics
  * @param apiRenderer GameLib.API.Renderer
  * @property rendererType
  * @constructor
  */
 GameLib.Renderer = function (
+    graphics,
     apiRenderer
 ) {
 
+    if (GameLib.Utils.UndefinedOrNull(graphics)) {
+        graphics = null;
+    }
+    this.graphics = graphics;
+
     if (GameLib.Utils.UndefinedOrNull(apiRenderer)) {
         apiRenderer = {
             rendererType : GameLib.API.Renderer.RENDERER_TYPE_NONE
@@ -22,11 +29,19 @@ GameLib.Renderer = function (
         apiRenderer.parentEntity,
         apiRenderer.width,
         apiRenderer.height,
+        apiRenderer.offset,
         apiRenderer.canvas
     );
 
+    this.offset = new GameLib.Vector2(
+        this.graphics,
+        this.offset,
+        this
+    );
+
     if (this.canvas instanceof GameLib.API.Canvas) {
         this.canvas = new GameLib.Canvas(
+            this.graphics,
             this.canvas
         );
     }
@@ -97,6 +112,17 @@ GameLib.Renderer.prototype.updateInstance = function(property) {
         return;
     }
 
+    if (property === 'offset') {
+
+        var size = GameLib.Utils.GetWindowSize();
+
+        this.canvas.offset.x = this.offset.x * size.width;
+        this.canvas.offset.y = this.offset.y * size.height;
+
+        this.canvas.updateInstance('offset');
+        return;
+    }
+
     if (property === 'canvas') {
         console.log('todo: canvas update');
         return;
@@ -118,6 +144,7 @@ GameLib.Renderer.prototype.toApiObject = function() {
         GameLib.Utils.IdOrNull(this.parentEntity),
         this.width,
         this.height,
+        this.offset.toApiObject(),
         GameLib.Utils.IdOrNull(this.canvas)
     );
 

src/game-lib-renderer-d2.js

@@ -1,12 +1,19 @@
 /**
  * GameLib.Renderer.D2
+ * @param graphics
  * @param apiRendererD2 GameLib.API.Renderer.D2
  * @constructor
  */
 GameLib.Renderer.D2 = function (
+    graphics,
     apiRendererD2
 ) {
 
+    if (GameLib.Utils.UndefinedOrNull(graphics)) {
+        graphics = GameLib.GraphicsRuntime(null, null, GameLib.GraphicsRuntime.GRAPHICS_RUNTIME_IMPACT);
+    }
+    this.graphics = graphics;
+
     if (GameLib.Utils.UndefinedOrNull(apiRendererD2)) {
         apiRendererD2 = {
             rendererType : GameLib.API.Renderer.RENDERER_TYPE_2D
@@ -20,6 +27,7 @@ GameLib.Renderer.D2 = function (
 
     GameLib.Renderer.call(
         this,
+        this.graphics,
         this
     );
 

src/game-lib-renderer-d3.js

@@ -8,7 +8,6 @@ GameLib.Renderer.D3 = function (
     graphics,
     apiRendererD3
 ) {
-
     this.graphics = graphics;
     this.graphics.isNotThreeThrow();
 
@@ -49,19 +48,12 @@ GameLib.Renderer.D3 = function (
         apiRendererD3.depth,
         apiRendererD3.logarithmicDepthBuffer,
         apiRendererD3.localClippingEnabled,
-        apiRendererD3.offset,
         apiRendererD3.renderTarget,
         apiRendererD3.clippingPlanes,
         apiRendererD3.clearColor,
         apiRendererD3.viewports
     );
 
-    this.offset = new GameLib.Vector2(
-        this.graphics,
-        this.offset,
-        this
-    );
-
     if (this.renderTarget instanceof GameLib.D3.API.RenderTarget) {
         this.renderTarget = new GameLib.D3.RenderTarget(
             this.graphics,
@@ -99,6 +91,7 @@ GameLib.Renderer.D3 = function (
 
     GameLib.Renderer.call(
         this,
+        this.graphics,
         this
     );
 
@@ -136,13 +129,7 @@ GameLib.Renderer.D3.prototype.createInstance = function() {
 
     this.instance.setPixelRatio(window.devicePixelRatio);
 
-    GameLib.Event.Emit(
+    this.updateInstance('width');
-        GameLib.Event.GET_WINDOW_SIZE,
-        {},
-        function(data) {
-            this.setSize(data.width, data.height);
-        }.bind(this)
-    );
 
     this.instance.autoClear = this.autoClear;
     this.instance.autoClearColor = this.autoClearColor;
@@ -214,20 +201,10 @@ GameLib.Renderer.D3.prototype.updateInstance = function(property) {
 
     if (
         property === 'width'    ||
-        property === 'height'   ||
+        property === 'height'
-        property === 'offset'
     ) {
-
+        var size = GameLib.Utils.GetWindowSize();
-        GameLib.Event.Emit(
+        this.instance.setSize(size.width, size.height);
-            GameLib.Event.GET_WINDOW_SIZE,
-            {},
-            function(data) {
-
-                this.setSize(data.width, data.height);
-
-            }.bind(this)
-        );
-
         return;
     }
 
@@ -440,15 +417,11 @@ GameLib.Renderer.D3.prototype.clear = function() {
  * @param height
  */
 GameLib.Renderer.D3.prototype.setSize = function(width, height) {
-
     this.instance.setSize(
-        this.width * width,
+        this.width * data.width,
-        this.height * height,
+        this.height * data.height,
         false
     );
-
-    this.canvas.instance.style.left = (this.offset.x * width)  + 'px';
-    this.canvas.instance.style.top  = (this.offset.y * height) + 'px';
 };
 
 /**
@@ -546,7 +519,6 @@ GameLib.Renderer.D3.prototype.toApiObject = function() {
         this.depth,
         this.logarithmicDepthBuffer,
         this.localClippingEnabled,
-        this.offset.toApiObject(),
         GameLib.Utils.IdOrNull(this.renderTarget),
         this.clippingPlanes.map(
             function(clippingPlane){

src/game-lib-system-linking.js

@@ -32,6 +32,7 @@ GameLib.System.Linking = function(
     this.registerDependenciesSubscription = null;
     this.componentRemoveSubscription = null;
     this.resolveDependenciesSubscription = null;
+    // this.replaceComponentSubscription = null; //render system does this
 
     /**
      * Parents
@@ -102,6 +103,11 @@ GameLib.System.Linking.prototype.start = function() {
         this.resolveDependencies
     );
 
+    // this.replaceComponentSubscription = this.subscribe(
+    //     GameLib.Event.REPLACE_COMPONENT,
+    //     this.replaceComponent
+    // );
+
     /**
      * Parents
      */
@@ -491,6 +497,29 @@ GameLib.System.Linking.prototype.registerDependenciesDirect = function(data) {
     this.registerDependencies(data.component);
 };
 
+// Render system does this
+// GameLib.System.Linking.prototype.replaceComponent = function(data) {
+//
+//     /**
+//      * Link canvases
+//      */
+//     if (
+//         data.current instanceof GameLib.Renderer &&
+//         data.replacement instanceof GameLib.Renderer
+//     ) {
+//         /**
+//          * Link the canvas to the replacement
+//          */
+//         data.replacement.canvas = data.current.canvas;
+//
+//         /**
+//          * Unlink the current canvas so it doesn't get removed
+//          */
+//         data.current.canvas = null;
+//     }
+//
+// };
+
 GameLib.System.Linking.prototype.removeComponent = function(data) {
 
     if (!data.component) {
@@ -862,6 +891,7 @@ GameLib.System.Linking.prototype.stop = function() {
     this.registerDependenciesSubscription.remove();
     this.componentRemoveSubscription.remove();
     this.resolveDependenciesSubscription.remove();
+    //this.replaceComponentSubscription.remove();
 
     /**
      * Parents

src/game-lib-system-render.js

@@ -485,6 +485,27 @@ GameLib.System.Render.prototype.replaceComponent = function(data) {
         data.replacement.canvas.remove();
         data.replacement.canvas = data.current.canvas;
         data.current.canvas = null;
+
+        if (this.activeRenderConfiguration.activeRenderer === data.current) {
+            this.activeRenderConfiguration.activeRenderer = data.replacement;
+        }
+
+        if (this.activeRenderConfiguration.activeRenderer instanceof GameLib.Renderer.D2) {
+
+            if (this.activeRenderConfiguration.activeCamera) {
+                this.activeRenderConfiguration.activeCamera.remove();
+                this.activeRenderConfiguration.activeCamera = null;
+            }
+
+            this.activeRenderConfiguration.activeScenes.map(
+                function(scene) {
+                    scene.remove();
+                }
+            );
+
+            this.activeRenderConfiguration.activeScenes = [];
+        }
+
     }
 };
 

src/game-lib-vector2.js

@@ -13,11 +13,9 @@ GameLib.Vector2 = function (
     grain
 ) {
     this.graphics = graphics;
-    this.graphics.isNotThreeThrow();
 
     if (GameLib.Utils.UndefinedOrNull(apiVector2)) {
         apiVector2 = {};
-        apiVector2 = {};
     }
 
 	GameLib.API.Vector2.call(
@@ -48,7 +46,13 @@ GameLib.Vector2.prototype.constructor = GameLib.Vector2;
  * @returns {*}
  */
 GameLib.Vector2.prototype.createInstance = function() {
-    this.instance = new THREE.Vector2(this.x, this.y);
+
+    if (this.graphics && this.graphics.isThree()) {
+        this.instance = new THREE.Vector2(this.x, this.y);
+    } else {
+        this.instance = this;
+    }
+
 };
 
 /**