Move rendering of layers in gdjs.LayerPixiRenderer

Extensions/PanelSpriteObject/panelspriteruntimeobject.js

@@ -48,7 +48,8 @@ gdjs.PanelSpriteRuntimeObject = function(runtimeScene, objectData)
     for (var i = 0;i < this._borderSprites.length;++i) {
         this._spritesContainer.addChild(this._borderSprites[i]);
     }
-    runtimeScene.getLayer("").addChildToPIXIContainer(this._spritesContainer, this.zOrder);
+
+    runtimeScene.getLayer("").getRenderer().addChildToPIXIContainer(this._spritesContainer, this.zOrder);
 };
 
 gdjs.PanelSpriteRuntimeObject.prototype = Object.create( gdjs.RuntimeObject.prototype );

Extensions/PrimitiveDrawing/shapepainterruntimeobject.js

@@ -25,7 +25,7 @@ gdjs.ShapePainterRuntimeObject = function(runtimeScene, objectData)
     this._outlineSize = objectData.outlineSize;
     this._absoluteCoordinates = objectData.absoluteCoordinates;
 
-    runtimeScene.getLayer("").addChildToPIXIContainer(this._graphics, this.zOrder);
+    runtimeScene.getLayer("").getRenderer().addChildToPIXIContainer(this._graphics, this.zOrder);
 };
 
 gdjs.ShapePainterRuntimeObject.prototype = Object.create( gdjs.RuntimeObject.prototype );

Extensions/TextObject/textruntimeobject.js

@@ -30,7 +30,7 @@ gdjs.TextRuntimeObject = function(runtimeScene, objectData)
     if ( this._text === undefined ) this._text = new PIXI.Text(" ", {align:"left"});
     this._text.anchor.x = 0.5;
     this._text.anchor.y = 0.5;
-    runtimeScene.getLayer("").addChildToPIXIContainer(this._text, this.zOrder);
+    runtimeScene.getLayer("").getRenderer().addChildToPIXIContainer(this._text, this.zOrder);
 
     this._text.text = this._str.length === 0 ? " " : this._str;
     this._justCreated = true; //Work around a PIXI.js bug. See updateTime method.

Extensions/TiledSpriteObject/tiledspriteruntimeobject.js

@@ -26,7 +26,7 @@ gdjs.TiledSpriteRuntimeObject = function(runtimeScene, objectData)
     this._xOffset = 0;
     this._yOffset = 0;
 
-    runtimeScene.getLayer("").addChildToPIXIContainer(this._tiledSprite, this.zOrder);
+    runtimeScene.getLayer("").getRenderer().addChildToPIXIContainer(this._tiledSprite, this.zOrder);
 };
 
 gdjs.TiledSpriteRuntimeObject.prototype = Object.create( gdjs.RuntimeObject.prototype );

GDJS/GDJS/IDE/Exporter.cpp

@@ -222,6 +222,7 @@ bool Exporter::ExportEventsCode(gd::Project & project, gd::String outputDir, std
     InsertUnique(includesFiles, "gd.js");
     InsertUnique(includesFiles, "libs/hshg.js");
     InsertUnique(includesFiles, "pixi-renderers/runtimescene-pixi-renderer.js");
+    InsertUnique(includesFiles, "pixi-renderers/layer-pixi-renderer.js");
     InsertUnique(includesFiles, "commontools.js");
     InsertUnique(includesFiles, "inputmanager.js");
     InsertUnique(includesFiles, "timemanager.js");

GDJS/Runtime/layer.js

@@ -26,35 +26,17 @@ gdjs.Layer = function(layerData, runtimeScene)
     this._cameraRotation = 0;
     this._zoomFactor = 1;
     this._hidden = !layerData.visibility;
-    this._pixiRenderer = runtimeScene.getRenderer()._pixiRenderer; //TODO: Hardcoded PIXI
-    this._pixiContainer = new PIXI.Container(); //The container of the layer  //TODO: Hardcoded PIXI
     this._cameraX = runtimeScene.getGame().getDefaultWidth()/2;
     this._cameraY = runtimeScene.getGame().getDefaultHeight()/2;
-    this._defaultWidth = runtimeScene.getGame().getDefaultWidth();
-    this._defaultHeight = runtimeScene.getGame().getDefaultHeight();
+    this._width = runtimeScene.getGame().getDefaultWidth();
+    this._height = runtimeScene.getGame().getDefaultHeight();
 
-    runtimeScene.getRenderer()._pixiContainer.addChild(this._pixiContainer); //TODO: Hardcoded PIXI
+    this._renderer = new gdjs.LayerPixiRenderer(this, runtimeScene.getRenderer());
     this.show(!this._hidden);
 };
 
-/**
- * Update the position of the PIXI container. To be called after each change
- * made to position, zoom or rotation of the camera.
- * @private
- */
-gdjs.Layer.prototype._updatePixiContainerPosition = function() {
-	var angle = -gdjs.toRad(this._cameraRotation);
-	this._pixiContainer.rotation = angle;
-	this._pixiContainer.scale.x = this._zoomFactor;
-	this._pixiContainer.scale.y = this._zoomFactor;
-
-	var centerX = (this._cameraX*this._zoomFactor)*Math.cos(angle)-(this._cameraY*this._zoomFactor)*Math.sin(angle);
-	var centerY = (this._cameraX*this._zoomFactor)*Math.sin(angle)+(this._cameraY*this._zoomFactor)*Math.cos(angle);
-
-	this._pixiContainer.position.x = -centerX;
-	this._pixiContainer.position.y = -centerY;
-	this._pixiContainer.position.x += this._defaultWidth/2;
-	this._pixiContainer.position.y += this._defaultHeight/2;
+gdjs.Layer.prototype.getRenderer = function() {
+   return this._renderer;
 };
 
 /**
@@ -67,58 +49,7 @@ gdjs.Layer.prototype.getName = function() {
 };
 
 /**
- * Get the PIXI.Container associated to the layer
- * @method getPIXIContainer
- */
-gdjs.Layer.prototype.getPIXIContainer = function() {
-	return this._pixiContainer;
-};
-
-/**
- * Add a child to the pixi container associated to the layer.<br>
- * All objects which are on this layer must be children of this container.<br>
- *
- * @method addChildToPIXIContainer
- * @param child The child ( PIXI object ) to be added.
- * @param zOrder The z order of the associated object.
- */
-gdjs.Layer.prototype.addChildToPIXIContainer = function(child, zOrder) {
-	child.zOrder = zOrder; //Extend the pixi object with a z order.
-
-	for( var i = 0, len = this._pixiContainer.children.length; i < len;++i) {
-		if ( this._pixiContainer.children[i].zOrder >= zOrder ) { //TODO : Dichotomic search
-			this._pixiContainer.addChildAt(child, i);
-			return;
-		}
-	}
-	this._pixiContainer.addChild(child);
-};
-
-/**
- * Change the z order of a child associated to an object.
- *
- * @method changePIXIContainerChildZOrder
- * @param child The child ( PIXI object ) to be modified.
- * @param newZOrder The z order of the associated object.
- */
-gdjs.Layer.prototype.changePIXIContainerChildZOrder = function(child, newZOrder) {
-	this._pixiContainer.removeChild(child);
-	this.addChildToPIXIContainer(child, newZOrder);
-};
-
-/**
- * Remove a child from the internal pixi container.<br>
- * Should be called when an object is deleted or removed from the layer.
- *
- * @method removePIXIContainerChild
- * @param child The child ( PIXI object ) to be removed.
- */
-gdjs.Layer.prototype.removePIXIContainerChild = function(child) {
-	this._pixiContainer.removeChild(child);
-};
-
-/**
- * Change the camera center X position.<br>
+ * Change the camera center X position.
  *
  * @method getCameraX
  * @param cameraId The camera number. Currently ignored.
@@ -129,7 +60,7 @@ gdjs.Layer.prototype.getCameraX = function(cameraId) {
 };
 
 /**
- * Change the camera center Y position.<br>
+ * Change the camera center Y position.
  *
  * @method getCameraY
  * @param cameraId The camera number. Currently ignored.
@@ -140,7 +71,7 @@ gdjs.Layer.prototype.getCameraY = function(cameraId) {
 };
 
 /**
- * Set the camera center X position.<br>
+ * Set the camera center X position.
  *
  * @method setCameraX
  * @param x {Number} The new x position
@@ -148,11 +79,11 @@ gdjs.Layer.prototype.getCameraY = function(cameraId) {
  */
 gdjs.Layer.prototype.setCameraX = function(x, cameraId) {
 	this._cameraX = x;
-	this._updatePixiContainerPosition();
+	this._renderer.updatePosition();
 };
 
 /**
- * Set the camera center Y position.<br>
+ * Set the camera center Y position.
  *
  * @method setCameraY
  * @param y {Number} The new y position
@@ -160,24 +91,24 @@ gdjs.Layer.prototype.setCameraX = function(x, cameraId) {
  */
 gdjs.Layer.prototype.setCameraY = function(y, cameraId) {
 	this._cameraY = y;
-	this._updatePixiContainerPosition();
+	this._renderer.updatePosition();
 };
 
 gdjs.Layer.prototype.getCameraWidth = function(cameraId) {
-	return (+this._defaultWidth)*1/this._pixiContainer.scale.x;
+	return (+this._width)*1/this._zoomFactor;
 };
 
 gdjs.Layer.prototype.getCameraHeight = function(cameraId) {
-	return (+this._defaultHeight)*1/this._pixiContainer.scale.y;
+	return (+this._height)*1/this._zoomFactor;
 };
 
 gdjs.Layer.prototype.show = function(enable) {
 	this._hidden = !enable;
-	this._pixiContainer.visible = !!enable;
+    this._renderer.updateVisibility(enable);
 };
 
 /**
- * Check if the layer is visible.<br>
+ * Check if the layer is visible.
  *
  * @method isVisible
  * @return true if the layer is visible.
@@ -187,20 +118,19 @@ gdjs.Layer.prototype.isVisible = function() {
 };
 
 /**
- * Set the zoom of a camera.<br>
+ * Set the zoom of a camera.
  *
  * @method setCameraZoom
  * @param The new zoom. Must be superior to 0. 1 is the default zoom.
  * @param cameraId The camera number. Currently ignored.
  */
 gdjs.Layer.prototype.setCameraZoom = function(newZoom, cameraId) {
-
 	this._zoomFactor = newZoom;
-	this._updatePixiContainerPosition();
+	this._renderer.updatePosition();
 };
 
 /**
- * Get the zoom of a camera.<br>
+ * Get the zoom of a camera.
  *
  * @method getZoom
  * @param cameraId The camera number. Currently ignored.
@@ -211,7 +141,7 @@ gdjs.Layer.prototype.getCameraZoom = function(cameraId) {
 };
 
 /**
- * Get the rotation of the camera, expressed in degrees.<br>
+ * Get the rotation of the camera, expressed in degrees.
  *
  * @method getCameraRotation
  * @param cameraId The camera number. Currently ignored.
@@ -222,7 +152,7 @@ gdjs.Layer.prototype.getCameraRotation = function(cameraId) {
 };
 
 /**
- * Set the rotation of the camera, expressed in degrees.<br>
+ * Set the rotation of the camera, expressed in degrees.
  * The rotation is made around the camera center.
  *
  * @method setCameraRotation
@@ -231,7 +161,7 @@ gdjs.Layer.prototype.getCameraRotation = function(cameraId) {
  */
 gdjs.Layer.prototype.setCameraRotation = function(rotation, cameraId) {
 	this._cameraRotation = rotation;
-	this._updatePixiContainerPosition();
+	this._renderer.updatePosition();
 };
 
 /**
@@ -244,11 +174,10 @@ gdjs.Layer.prototype.setCameraRotation = function(rotation, cameraId) {
  * @param cameraId The camera number. Currently ignored.
  */
 gdjs.Layer.prototype.convertCoords = function(x,y, cameraId) {
-
-	x -= this._defaultWidth/2;
-	y -= this._defaultHeight/2;
-	x /= Math.abs(this._pixiContainer.scale.x);
-	y /= Math.abs(this._pixiContainer.scale.y);
+	x -= this._width/2;
+	y -= this._height/2;
+	x /= Math.abs(this._zoomFactor);
+	y /= Math.abs(this._zoomFactor);
 
 	var tmp = x;
 	x = Math.cos(this._cameraRotation/180*3.14159)*x - Math.sin(this._cameraRotation/180*3.14159)*y;
@@ -256,3 +185,11 @@ gdjs.Layer.prototype.convertCoords = function(x,y, cameraId) {
 
 	return [x+this.getCameraX(cameraId), y+this.getCameraY(cameraId)];
 };
+
+gdjs.Layer.prototype.getWidth = function() {
+    return this._width;
+};
+
+gdjs.Layer.prototype.getHeight = function() {
+    return this._height;
+};

GDJS/Runtime/pixi-renderers/layer-pixi-renderer.js

@@ -0,0 +1,79 @@
+/* @flow weak */
+
+gdjs.LayerPixiRenderer = function(layer, runtimeSceneRenderer)
+{
+    this._pixiContainer = new PIXI.Container();
+    this._layer = layer;
+    runtimeSceneRenderer.getPIXIContainer().addChild(this._pixiContainer);
+}
+
+/**
+ * Update the position of the PIXI container. To be called after each change
+ * made to position, zoom or rotation of the camera.
+ * @private
+ */
+gdjs.LayerPixiRenderer.prototype.updatePosition = function() {
+	var angle = -gdjs.toRad(this._layer.getCameraRotation());
+    var zoomFactor = this._layer.getCameraZoom();
+
+	this._pixiContainer.rotation = angle;
+	this._pixiContainer.scale.x = zoomFactor;
+	this._pixiContainer.scale.y = zoomFactor;
+
+	var centerX = (this._layer.getCameraX()*zoomFactor)*Math.cos(angle)
+        - (this._layer.getCameraY()*zoomFactor)*Math.sin(angle);
+	var centerY = (this._layer.getCameraX()*zoomFactor)*Math.sin(angle)
+        + (this._layer.getCameraY()*zoomFactor)*Math.cos(angle);
+
+	this._pixiContainer.position.x = -centerX;
+	this._pixiContainer.position.y = -centerY;
+	this._pixiContainer.position.x += this._layer.getWidth()/2;
+	this._pixiContainer.position.y += this._layer.getHeight()/2;
+};
+
+gdjs.LayerPixiRenderer.prototype.updateVisibility = function(visible) {
+    this._pixiContainer.visible = !!visible;
+}
+
+/**
+ * Add a child to the pixi container associated to the layer.
+ * All objects which are on this layer must be children of this container.
+ *
+ * @method addChildToPIXIContainer
+ * @param child The child ( PIXI object ) to be added.
+ * @param zOrder The z order of the associated object.
+ */
+gdjs.LayerPixiRenderer.prototype.addChildToPIXIContainer = function(child, zOrder) {
+	child.zOrder = zOrder; //Extend the pixi object with a z order.
+
+	for( var i = 0, len = this._pixiContainer.children.length; i < len;++i) {
+		if ( this._pixiContainer.children[i].zOrder >= zOrder ) { //TODO : Dichotomic search
+			this._pixiContainer.addChildAt(child, i);
+			return;
+		}
+	}
+	this._pixiContainer.addChild(child);
+};
+
+/**
+ * Change the z order of a child associated to an object.
+ *
+ * @method changePIXIContainerChildZOrder
+ * @param child The child ( PIXI object ) to be modified.
+ * @param newZOrder The z order of the associated object.
+ */
+gdjs.LayerPixiRenderer.prototype.changePIXIContainerChildZOrder = function(child, newZOrder) {
+	this._pixiContainer.removeChild(child);
+	this.addChildToPIXIContainer(child, newZOrder);
+};
+
+/**
+ * Remove a child from the internal pixi container.
+ * Should be called when an object is deleted or removed from the layer.
+ *
+ * @method removePIXIContainerChild
+ * @param child The child ( PIXI object ) to be removed.
+ */
+gdjs.LayerPixiRenderer.prototype.removePIXIContainerChild = function(child) {
+	this._pixiContainer.removeChild(child);
+};

GDJS/Runtime/pixi-renderers/runtimescene-pixi-renderer.js

@@ -1,9 +1,9 @@
 
 gdjs.RuntimeScenePixiRenderer = function(runtimeScene, pixiRenderer)
 {
-   this._pixiRenderer = pixiRenderer;
-   this._runtimeScene = runtimeScene;
-   this._pixiContainer = new PIXI.Container(); //The Container meant to contains all pixi objects of the scene.
+    this._pixiRenderer = pixiRenderer;
+    this._runtimeScene = runtimeScene;
+    this._pixiContainer = new PIXI.Container(); //The Container meant to contains all pixi objects of the scene.
 }
 
 gdjs.RuntimeScenePixiRenderer.prototype.onCanvasResized = function() {
@@ -15,14 +15,13 @@ gdjs.RuntimeScenePixiRenderer.prototype.onCanvasResized = function() {
 };
 
 gdjs.RuntimeScenePixiRenderer.prototype.render = function() {
-   if (!this._pixiRenderer) return;
+    if (!this._pixiRenderer) return;
 
-   // render the PIXI container of the scene
-   this._pixiRenderer.backgroundColor = this._runtimeScene.getBackgroundColor();
-   this._pixiRenderer.render(this._pixiContainer);
+    // render the PIXI container of the scene
+    this._pixiRenderer.backgroundColor = this._runtimeScene.getBackgroundColor();
+    this._pixiRenderer.render(this._pixiContainer);
 };
 
-
 gdjs.RuntimeScenePixiRenderer.prototype.hideCursor = function() {
     this._pixiRenderer.view.style.cursor = 'none';
 }
@@ -30,3 +29,7 @@ gdjs.RuntimeScenePixiRenderer.prototype.hideCursor = function() {
 gdjs.RuntimeScenePixiRenderer.prototype.showCursor = function() {
     this._pixiRenderer.view.style.cursor = '';
 }
+
+gdjs.RuntimeScenePixiRenderer.prototype.getPIXIContainer = function() {
+    return this._pixiContainer;
+}

GDJS/Runtime/runtimeobject.js

@@ -141,7 +141,7 @@ gdjs.RuntimeObject.prototype.deleteFromScene = function(runtimeScene) {
 gdjs.RuntimeObject.prototype.onDeletedFromScene = function(runtimeScene) {
     var theLayer = runtimeScene.getLayer(this.layer);
     this.exposePIXIDisplayObject(function(displayObject) {
-        theLayer.removePIXIContainerChild(displayObject);
+        theLayer.getRenderer().removePIXIContainerChild(displayObject);
     });
 };
 
@@ -340,8 +340,8 @@ gdjs.RuntimeObject.prototype.setLayer = function(layer) {
     var theLayer = this._runtimeScene.getLayer(this.layer);
     var that = this;
     this.exposePIXIDisplayObject(function (displayObject) {
-        theLayer.removePIXIContainerChild(displayObject);
-        theLayer.addChildToPIXIContainer(displayObject, that.zOrder);
+        theLayer.getRenderer().removePIXIContainerChild(displayObject);
+        theLayer.getRenderer().addChildToPIXIContainer(displayObject, that.zOrder);
     });
 };
 
@@ -379,7 +379,7 @@ gdjs.RuntimeObject.prototype.setZOrder = function(z) {
 
     var theLayer = this._runtimeScene.getLayer(this.layer);
     this.exposePIXIDisplayObject(function(displayObject) {
-        theLayer.changePIXIContainerChildZOrder(displayObject, z);
+        theLayer.getRenderer().changePIXIContainerChildZOrder(displayObject, z);
     });
 };
 

GDJS/Runtime/spriteruntimeobject.js

@@ -185,7 +185,7 @@ gdjs.SpriteRuntimeObject = function(runtimeScene, objectData)
         this._sprite = new PIXI.Sprite(runtimeScene.getGame().getImageManager().getInvalidPIXITexture());
 
     var layer = runtimeScene.getLayer("");
-    if (layer) layer.addChildToPIXIContainer(this._sprite, this.zOrder);
+    if (layer) layer.getRenderer().addChildToPIXIContainer(this._sprite, this.zOrder);
 
 	this._updatePIXITexture();
 	this._updatePIXISprite();