From b1e1ffb3d01084b1b250cd42b5668a6b901165b2 Mon Sep 17 00:00:00 2001
From: Javi <96269542+FemmDev@users.noreply.github.com>
Date: Wed, 5 Jul 2023 13:28:48 -0400
Subject: [PATCH] Add sortableChildren / zIndex example (#181)

* Add z-index example

This example will help others know how to use the zIndex property
sprites have, which was quite difficult to find out for myself.

* Fix ESLint error

Had 2 space tabs instead of 4 space tabs.
---
 public/examples/js/sprite/z-Index.js          | 51 +++++++++++++++++++
 .../js/textures/render-texture-basic.js       |  8 +--
 public/examples/manifest.json                 |  5 ++
 3 files changed, 60 insertions(+), 4 deletions(-)
 create mode 100644 public/examples/js/sprite/z-Index.js

diff --git a/public/examples/js/sprite/z-Index.js b/public/examples/js/sprite/z-Index.js
new file mode 100644
index 00000000..37631f55
--- /dev/null
+++ b/public/examples/js/sprite/z-Index.js
@@ -0,0 +1,51 @@
+const app = new PIXI.Application({ background: '#1099bb' });
+document.body.appendChild(app.view);
+
+// lets add our container
+const container = new PIXI.Container();
+
+
+// allows for container's children to have a z-Index
+// this is very important, without sortable children, Sprite.zIndex doesnt work!
+container.sortableChildren = true;
+app.stage.addChild(container);
+
+
+// Initiating our monsters/sprites
+const blue = PIXI.Sprite.from('examples/assets/helmlok.png');
+const green = PIXI.Sprite.from('examples/assets/flowerTop.png');
+const pink = PIXI.Sprite.from('examples/assets/eggHead.png');
+const skully = PIXI.Sprite.from('examples/assets/skully.png');
+
+// looping our sprites to put them in position
+const monsters = [blue, green, pink, skully];
+monsters.forEach((sprite, index) => {
+    sprite.anchor.set(0.5);
+    sprite.x = 250 + 50 * index + 1;
+    sprite.y = 250 + 50 * index + 1;
+
+    // allow for our sprites to be interactive (have events such as on mounse over)
+    sprite.interactive = true;
+
+    // when the mouse in on top of them, increase their z index
+    // so they come on top of other sprites
+    sprite.on('pointerover', () => {
+        this.isOver = true;
+        if (this.isdown) {
+            return;
+        }
+        sprite.zIndex = 10;
+        console.log(sprite.zIndex);
+    });
+
+    // when the mouse leaves them, reduce their z-index
+    // so they go back to their original position
+    sprite.on('pointerout', () => {
+        this.isOver = false;
+        if (this.isdown) {
+            return;
+        }
+        sprite.zIndex = 0;
+    });
+    container.addChild(sprite);
+});
diff --git a/public/examples/js/textures/render-texture-basic.js b/public/examples/js/textures/render-texture-basic.js
index 4f51ed59..a0e28322 100644
--- a/public/examples/js/textures/render-texture-basic.js
+++ b/public/examples/js/textures/render-texture-basic.js
@@ -15,10 +15,10 @@ for (let i = 0; i < 25; i++) {
 }
 
 const brt = new PIXI.BaseRenderTexture({
-  width: 300,
-  height: 300,
-  scaleMode: PIXI.SCALE_MODES.LINEAR,
-  resolution: 1,
+    width: 300,
+    height: 300,
+    scaleMode: PIXI.SCALE_MODES.LINEAR,
+    resolution: 1,
 });
 const rt = new PIXI.RenderTexture(brt);
 
diff --git a/public/examples/manifest.json b/public/examples/manifest.json
index 98a2ac09..acb5e2b1 100755
--- a/public/examples/manifest.json
+++ b/public/examples/manifest.json
@@ -39,6 +39,11 @@
 				"title": "Basic",
 				"entry": "basic.js"
 			},
+            {
+                "title": "Z-Index",
+                "entry": "z-index.js"
+            },
+
 			{
 				"title": "Texture Swap",
 				"entry": "texture-swap.js"