Add support for layer re-ordering in hot reloading

Don't show in changelog

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

@@ -193,3 +193,8 @@ gdjs.LayerCocosRenderer.prototype.removeEffect = function(effect) {
 gdjs.LayerCocosRenderer.prototype.isEffectEnabled = function(name) {
     return this.hasEffect(name);
 };
+
+
+gdjs.LayerCocosRenderer.prototype.setLayerIndex = function(layer, index) {
+    // Unimplemented
+};

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

@@ -25,6 +25,10 @@ gdjs.LayerPixiRenderer = function(layer, runtimeSceneRenderer) {
 
 gdjs.LayerRenderer = gdjs.LayerPixiRenderer; //Register the class to let the engine use it.
 
+gdjs.LayerPixiRenderer.prototype.getRendererObject = function() {
+  return this._pixiContainer;
+}
+
 /**
  * Update the position of the PIXI container. To be called after each change
  * made to position, zoom or rotation of the camera.

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

@@ -7,12 +7,13 @@
  * @param {gdjs.RuntimeScene} runtimeScene
  * @param {gdjs.RuntimeGamePixiRenderer} runtimeGameRenderer
  */
-gdjs.RuntimeScenePixiRenderer = function(runtimeScene, runtimeGameRenderer) {
+gdjs.RuntimeScenePixiRenderer = function (runtimeScene, runtimeGameRenderer) {
   this._pixiRenderer = runtimeGameRenderer
     ? runtimeGameRenderer.getPIXIRenderer()
     : null;
   this._runtimeScene = runtimeScene;
-  this._pixiContainer = new PIXI.Container(); //The Container meant to contains all pixi objects of the scene.
+  this._pixiContainer = new PIXI.Container(); // Contains the layers of the scene (and, optionally, debug PIXI objects).
+  this._pixiContainer.sortableChildren = true;
 
   /** @type {?PIXI.Graphics} */
   this._debugDraw = null;
@@ -23,7 +24,7 @@ gdjs.RuntimeScenePixiRenderer = function(runtimeScene, runtimeGameRenderer) {
 
 gdjs.RuntimeSceneRenderer = gdjs.RuntimeScenePixiRenderer; //Register the class to let the engine use it.
 
-gdjs.RuntimeScenePixiRenderer.prototype.onGameResolutionResized = function() {
+gdjs.RuntimeScenePixiRenderer.prototype.onGameResolutionResized = function () {
   if (!this._pixiRenderer) return;
 
   var runtimeGame = this._runtimeScene.getGame();
@@ -33,7 +34,7 @@ gdjs.RuntimeScenePixiRenderer.prototype.onGameResolutionResized = function() {
     this._pixiRenderer.height / runtimeGame.getGameResolutionHeight();
 };
 
-gdjs.RuntimeScenePixiRenderer.prototype.render = function() {
+gdjs.RuntimeScenePixiRenderer.prototype.render = function () {
   if (!this._pixiRenderer) return;
 
   // this._renderProfileText(); //Uncomment to display profiling times
@@ -43,32 +44,37 @@ gdjs.RuntimeScenePixiRenderer.prototype.render = function() {
   this._pixiRenderer.render(this._pixiContainer);
 };
 
-gdjs.RuntimeScenePixiRenderer.prototype._renderProfileText = function() {
+gdjs.RuntimeScenePixiRenderer.prototype._renderProfileText = function () {
   if (!this._runtimeScene.getProfiler()) return;
 
   if (!this._profilerText) {
-    this._profilerText = new PIXI.Text(" ", {
-      align: "left",
-      stroke: "#FFF",
-      strokeThickness: 1
+    this._profilerText = new PIXI.Text(' ', {
+      align: 'left',
+      stroke: '#FFF',
+      strokeThickness: 1,
     });
+    // Add on top of all layers:
     this._pixiContainer.addChild(this._profilerText);
   }
 
   var average = this._runtimeScene.getProfiler().getFramesAverageMeasures();
   var outputs = [];
-  gdjs.Profiler.getProfilerSectionTexts("All", average, outputs);
+  gdjs.Profiler.getProfilerSectionTexts('All', average, outputs);
 
-  this._profilerText.text = outputs.join("\n");
+  this._profilerText.text = outputs.join('\n');
 };
 
 /**
  * @param {gdjs.RuntimeObject[]} instances
  * @param {Object.<string, number[]>} layersCameraCoordinates
  */
-gdjs.RuntimeScenePixiRenderer.prototype.renderDebugDraw = function(instances, layersCameraCoordinates) {
+gdjs.RuntimeScenePixiRenderer.prototype.renderDebugDraw = function (
+  instances,
+  layersCameraCoordinates
+) {
   if (!this._debugDraw) {
     this._debugDraw = new PIXI.Graphics();
+    // Add on top of all layers:
     this._pixiContainer.addChild(this._debugDraw);
   }
   /** @type PIXI.Graphics */
@@ -80,7 +86,7 @@ gdjs.RuntimeScenePixiRenderer.prototype.renderDebugDraw = function(instances, la
   debugDraw.fill.alpha = 0.1;
   debugDraw.alpha = 0.8;
 
-  for(var i = 0;i < instances.length;i++) {
+  for (var i = 0; i < instances.length; i++) {
     var object = instances[i];
     var cameraCoords = layersCameraCoordinates[object.getLayer()];
     var rendererObject = object.getRendererObject();
@@ -88,21 +94,45 @@ gdjs.RuntimeScenePixiRenderer.prototype.renderDebugDraw = function(instances, la
     if (!cameraCoords || !rendererObject) continue;
 
     var aabb = object.getAABB();
-    debugDraw.drawRect(aabb.min[0], aabb.min[1], aabb.max[0] - aabb.min[0], aabb.max[1] - aabb.min[1]);
+    debugDraw.drawRect(
+      aabb.min[0],
+      aabb.min[1],
+      aabb.max[0] - aabb.min[0],
+      aabb.max[1] - aabb.min[1]
+    );
   }
   debugDraw.endFill();
 };
 
-gdjs.RuntimeScenePixiRenderer.prototype.hideCursor = function() {
+gdjs.RuntimeScenePixiRenderer.prototype.hideCursor = function () {
   if (!this._pixiRenderer) return;
-  this._pixiRenderer.view.style.cursor = "none";
+  this._pixiRenderer.view.style.cursor = 'none';
 };
 
-gdjs.RuntimeScenePixiRenderer.prototype.showCursor = function() {
+gdjs.RuntimeScenePixiRenderer.prototype.showCursor = function () {
   if (!this._pixiRenderer) return;
-  this._pixiRenderer.view.style.cursor = "";
+  this._pixiRenderer.view.style.cursor = '';
 };
 
-gdjs.RuntimeScenePixiRenderer.prototype.getPIXIContainer = function() {
+gdjs.RuntimeScenePixiRenderer.prototype.getPIXIContainer = function () {
   return this._pixiContainer;
 };
+
+/**
+ * @param {gdjs.Layer} layer
+ * @param {number} index
+ */
+gdjs.RuntimeScenePixiRenderer.prototype.setLayerIndex = function (
+  layer,
+  index
+) {
+  /** @type {gdjs.LayerPixiRenderer} */
+  // @ts-ignore - assume the renderer is the correct one
+  var layerPixiRenderer = layer.getRenderer();
+  var layerPixiObject = layerPixiRenderer.getRendererObject();
+
+  if (this._pixiContainer.children.indexOf(layerPixiObject) === index) return;
+
+  this._pixiContainer.removeChild(layerPixiObject);
+  this._pixiContainer.addChildAt(layerPixiObject, index);
+};

GDJS/Runtime/runtimescene.js

@@ -816,6 +816,20 @@ gdjs.RuntimeScene.prototype.removeLayer = function(layerName) {
     this._layers.remove(layerName);
 }
 
+/**
+ * Change the position of a layer.
+ *
+ * @param {string} layerName The name of the layer to reorder
+ * @param {number} index The new position in the list of layers
+ */
+gdjs.RuntimeScene.prototype.setLayerIndex = function(layerName, index) {
+    /** @type {gdjs.Layer} */
+    var layer = this._layers.get(layerName);
+    if (!layer) return;
+
+    this._renderer.setLayerIndex(layer, index);
+};
+
 /**
  * Fill the array passed as argument with the names of all layers
  * @param {string[]} result The array where to put the layer names

GDJS/Runtime/websocket-debugger-client/hot-reloader.js

@@ -968,8 +968,6 @@ gdjs.HotReloader.prototype._hotReloadRuntimeSceneLayers = function (
   newLayers,
   runtimeScene
 ) {
-  // TODO: layer re-ordering and ensure the added layer is at the right position
-
   oldLayers.forEach((oldLayerData) => {
     const name = oldLayerData.name;
     const newLayerData = newLayers.filter(
@@ -995,6 +993,9 @@ gdjs.HotReloader.prototype._hotReloadRuntimeSceneLayers = function (
       runtimeScene.addLayer(newLayerData);
     }
   });
+  newLayers.forEach((newLayerData, index) => {
+    runtimeScene.setLayerIndex(newLayerData.name, index);
+  })
 };
 
 /**