Add examples

pixijs-userland · Nov 2, 2022 · 09f4054 · 09f4054
1 parent c481cb4
commit 09f4054
Show file tree

Hide file tree

Showing 12 changed files with 915 additions and 8 deletions.
diff --git a/examples/assets/bunny.png b/examples/assets/bunny.png
diff --git a/examples/assets/bunny_blue.png b/examples/assets/bunny_blue.png
diff --git a/examples/assets/bunny_green.png b/examples/assets/bunny_green.png
diff --git a/examples/assets/p2.jpg b/examples/assets/p2.jpg
diff --git a/examples/blend-modes.html b/examples/blend-modes.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Blend Modes | PixiJS Lights Examples</title>
+    <script src="https://pixijs.download/dev/pixi.min.js"></script>
+    <script src="../dist/pixi-layers.js"></script>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>Blend Modes</h1>
+    <script>
+        const W = 800;
+        const H = 600;
+        const PAD = 80;
+        const resolution = 1;
+        const WIDTH = W / resolution;
+        const HEIGHT = H / resolution;
+
+        const app = new PIXI.Application({
+            width: WIDTH,
+            height: HEIGHT,
+            resolution,
+        });
+        document.body.appendChild(app.view);
+
+        // create the stage instead of container
+        app.stage = new PIXI.layers.Stage();
+
+        const background = new PIXI.TilingSprite(
+            PIXI.Texture.from('assets/p2.jpg'),
+            WIDTH,
+            HEIGHT,
+        );
+        app.stage.addChild(background);
+        // make container for bunnies
+        const bunnyWorld = new PIXI.Container();
+        app.stage.addChild(bunnyWorld);
+
+        const lighting = new PIXI.layers.Layer();
+        lighting.on('display', (element) => {
+            element.blendMode = PIXI.BLEND_MODES.ADD;
+        });
+        lighting.useRenderTexture = true;
+        lighting.clearColor = [0.5, 0.5, 0.5, 1]; // ambient gray
+
+        app.stage.addChild(lighting);
+
+        const lightingSprite = new PIXI.Sprite(lighting.getRenderTexture());
+        lightingSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
+
+        app.stage.addChild(lightingSprite);
+
+        const bunnyTexture = PIXI.Texture.from('assets/bunny.png');
+        function updateBunny(bunny) {
+            bunny.x += bunny.vx;
+            bunny.y += bunny.vy;
+            if (bunny.x > WIDTH + PAD) {
+                bunny.x -= WIDTH + 2 * PAD;
+            }
+            if (bunny.x < -PAD) {
+                bunny.x += WIDTH + 2 * PAD;
+            }
+            if (bunny.y > HEIGHT + PAD) {
+                bunny.y -= HEIGHT + 2 * PAD;
+            }
+            if (bunny.y < -PAD) {
+                bunny.y += HEIGHT + 2 * PAD;
+            }
+        }
+
+        function createBunny() {
+            const bunny = new PIXI.Sprite(bunnyTexture);
+            bunny.update = updateBunny;
+
+            const angle = Math.random() * Math.PI * 2;
+            const speed = 200.0; // px per second
+            bunny.vx = Math.cos(angle) * speed / 60.0;
+            bunny.vy = Math.sin(angle) * speed / 60.0;
+            bunny.position.set(Math.random() * WIDTH, Math.random() * HEIGHT);
+            bunny.anchor.set(0.5, 0.5);
+
+            const lightbulb = new PIXI.Graphics();
+            const rr = Math.random() * 0x80 | 0;
+            const rg = Math.random() * 0x80 | 0;
+            const rb = Math.random() * 0x80 | 0;
+            const rad = 50 + Math.random() * 20;
+            lightbulb.beginFill((rr << 16) + (rg << 8) + rb, 1.0);
+            lightbulb.drawCircle(0, 0, rad);
+            lightbulb.endFill();
+            lightbulb.parentLayer = lighting;// <-- try comment it
+
+            bunny.addChild(lightbulb);
+
+            return bunny;
+        }
+
+        for (let i = 0; i < 40; i++) {
+            bunnyWorld.addChild(createBunny());
+        }
+
+        app.ticker.add(() => {
+            bunnyWorld.children.forEach(updateBunny);
+        });
+    </script>
+  </html>
diff --git a/examples/bring-to-top.html b/examples/bring-to-top.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Bring To Top | PixiJS Lights Examples</title>
+    <script src="https://pixijs.download/dev/pixi.min.js"></script>
+    <script src="../dist/pixi-layers.js"></script>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>Bring To Top</h1>
+    <script>
+        const app = new PIXI.Application({ backgroundColor: 0x1099bb });
+        document.body.appendChild(app.view);
+
+        const textureGreen = PIXI.Texture.from('assets/bunny_green.png');
+        const textureBlue = PIXI.Texture.from('assets/bunny_blue.png');
+
+        const blue = new PIXI.Container();
+        const green = new PIXI.Container();
+
+        app.stage = new PIXI.layers.Stage();
+
+        const topLayer = new PIXI.layers.Layer();
+        app.stage.addChild(blue, green, topLayer);
+
+        for (let i = 0; i < 15; i++) {
+            const bunny = new PIXI.Sprite(textureGreen);
+            bunny.width = 50;
+            bunny.height = 50;
+            bunny.position.set(100 + 20 * i, 100 + 20 * i);
+            bunny.anchor.set(0.5);
+            green.addChild(bunny);
+        }
+
+        for (let i = 9; i >= 0; i--) {
+            const bunny = new PIXI.Sprite(textureBlue);
+            bunny.width = 50;
+            bunny.height = 50;
+            bunny.position.set(100 + 20 * i, 150 + 20 * i);
+            bunny.anchor.set(0.5);
+
+            if (i === 9) {
+                bunny.tint = 0xFF0000;
+                bunny.parentLayer = topLayer;
+            }
+            blue.addChild(bunny);
+        }
+
+    </script>
+  </html>
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>PixiJS Lights Examples</title>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>PixiJS Lights Examples</h1>
+    <ul>
+        <li><a href="blend-modes.html">Blend Modes</a></li>
+        <li><a href="bring-to-top.html">Bring To Top</a></li>
+        <li><a href="trail.html">Trail</a></li>
+        <li><a href="z-order.html">Z-Order</a></li>
+    </ul>
+  </html>
diff --git a/examples/style.css b/examples/style.css
@@ -0,0 +1,30 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+body {
+    color: #fff;
+    background-color: #272d37;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-family: 'Roboto', sans-serif;
+}
+
+h1 {
+    font-family: 'Roboto', sans-serif;
+    color: #fff;
+}
+
+a {
+    color: #fff;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    line-height: 1.6;
+}
+
+canvas {
+    max-width: 100%;
+}
diff --git a/examples/trail.html b/examples/trail.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Trail | PixiJS Lights Examples</title>
+    <script src="https://pixijs.download/dev/pixi.min.js"></script>
+    <script src="../dist/pixi-layers.js"></script>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>Trail</h1>
+    <script>
+        const app = new PIXI.Application({ backgroundColor: 0x1099bb });
+        document.body.appendChild(app.view);
+
+        app.stage = new PIXI.layers.Stage();
+
+        const layer = new PIXI.layers.Layer();
+        layer.useRenderTexture = true;
+        // this flag is required, or you'll get
+        // "glDrawElements: Source and destination textures of the draw are the same."
+        layer.useDoubleBuffer = true;
+
+        const trailSprite = new PIXI.Sprite(layer.getRenderTexture());
+        trailSprite.alpha = 0.6;
+
+        layer.addChild(trailSprite);
+
+        app.stage.addChild(layer);
+        const showLayer = new PIXI.Sprite(layer.getRenderTexture());
+        app.stage.addChild(showLayer);
+
+        const bunnyTex = PIXI.Texture.from('assets/bunny.png');
+        const bunnies = [];
+        for (let i = 0; i < 5; i++) {
+            bunnies[i] = new PIXI.Container();
+            bunnies[i].position.set(app.screen.width / 2, app.screen.height / 2);
+            bunnies[i].rotation = (i / 5) * (Math.PI * 2);
+            bunnies[i].pivot.set(0, -200);
+
+            const sprite = new PIXI.Sprite(bunnyTex);
+            bunnies[i].addChild(sprite);
+            sprite.anchor.set(0.5);
+            sprite.scale.set(2 + Math.random());
+
+            layer.addChild(bunnies[i]);
+        }
+
+        // Listen for animate update
+        app.ticker.add((delta) => {
+            // just for fun, let's rotate mr rabbit a little
+            // delta is 1 if running at 100% performance
+            // creates frame-independent transformation
+            for (let i = 0; i < bunnies.length; i++) {
+                bunnies[i].rotation += 0.05 * delta;
+                bunnies[i].children[0].rotation += 0.1 * delta;
+            }
+        });
+    </script>
+  </html>