Feat: v8 additional examples

src/examples/v8.0.0/basic/blendModes.js

@@ -1,104 +1,93 @@
-import { Application, Assets, Sprite, Rectangle } from 'pixi.js';
+import 'pixi.js/advanced-blend-modes';
+
+import { Application, Assets, Container, Sprite } from 'pixi.js';
 
 (async () =>
 {
     // Create a new application
     const app = new Application();
 
     // Initialize the application
-    await app.init({ resizeTo: window });
+    await app.init({
+        antialias: true,
+        backgroundColor: 'white',
+        resizeTo: window,
+        // NEEDS TO BE TRUE FOR WEBGL!
+        useBackBuffer: true,
+    });
 
     // Append the application canvas to the document body
     document.body.appendChild(app.canvas);
 
-    // Load the textures
-    const bgTexture = await Assets.load('https://pixijs.com/assets/bg_rotate.jpg');
-    const alienTexture = await Assets.load('https://pixijs.com/assets/flowerTop.png');
-
-    // Create a new background sprite
-    const background = new Sprite(bgTexture);
-
-    background.width = app.screen.width;
-    background.height = app.screen.height;
-    app.stage.addChild(background);
-
-    // Create an array to store references to the dudes
-    const dudeArray = [];
-
-    const totaldudes = 20;
-
-    for (let i = 0; i < totaldudes; i++)
+    const pandaTexture = await Assets.load(`https://pixijs.com/assets/panda.png`);
+    const rainbowGradient = await Assets.load(`https://pixijs.com/assets/rainbow-gradient.png`);
+
+    const allBlendModes = [
+        'normal',
+        'add',
+        'screen',
+        'darken',
+        'lighten',
+        'color-dodge',
+        'color-burn',
+        'linear-burn',
+        'linear-dodge',
+        'linear-light',
+        'hard-light',
+        'soft-light',
+        'pin-light',
+        'difference',
+        'exclusion',
+        'overlay',
+        'saturation',
+        'color',
+        'luminosity',
+        'add-npm',
+        'subtract',
+        'divide',
+        'vivid-light',
+        'hard-mix',
+        'negation',
+    ];
+
+    const size = 800 / 5;
+
+    const pandas = [];
+
+    for (let i = 0; i < allBlendModes.length; i++)
     {
-        // Create a new alien Sprite
-        const dude = new Sprite(alienTexture);
-
-        dude.anchor.set(0.5);
-
-        // Set a random scale for the dude
-        dude.scale.set(0.8 + Math.random() * 0.3);
+        const container = new Container();
 
-        // Finally let's set the dude to be at a random position...
-        dude.x = Math.floor(Math.random() * app.screen.width);
-        dude.y = Math.floor(Math.random() * app.screen.height);
+        const sprite = new Sprite({
+            texture: pandaTexture,
+            width: 100,
+            height: 100,
+            anchor: 0.5,
+            position: { x: size / 2, y: size / 2 },
+        });
 
-        // The important bit of this example, this is how you change the default blend mode of the sprite
-        dude.blendMode = 'add';
+        pandas.push(sprite);
 
-        // Create some extra properties that will control movement
-        dude.direction = Math.random() * Math.PI * 2;
+        const sprite2 = new Sprite({
+            texture: rainbowGradient,
+            width: size,
+            height: size,
+            blendMode: allBlendModes[i],
+        });
 
-        // This number will be used to modify the direction of the dude over time
-        dude.turningSpeed = Math.random() - 0.8;
+        container.addChild(sprite, sprite2);
 
-        // Create a random speed for the dude between 0 - 2
-        dude.speed = 2 + Math.random() * 2;
+        app.stage.addChild(container);
 
-        // Finally we push the dude into the dudeArray so it it can be easily accessed later
-        dudeArray.push(dude);
-
-        app.stage.addChild(dude);
+        container.x = (i % 5) * size;
+        container.y = Math.floor(i / 5) * size;
     }
 
-    // Create a bounding box for the little dudes
-    const dudeBoundsPadding = 100;
-
-    const dudeBounds = new Rectangle(
-        -dudeBoundsPadding,
-        -dudeBoundsPadding,
-        app.screen.width + dudeBoundsPadding * 2,
-        app.screen.height + dudeBoundsPadding * 2,
-    );
-
     app.ticker.add(() =>
     {
-        // Iterate through the dudes and update the positions
-        for (let i = 0; i < dudeArray.length; i++)
+        pandas.forEach((panda, i) =>
         {
-            const dude = dudeArray[i];
-
-            dude.direction += dude.turningSpeed * 0.01;
-            dude.x += Math.sin(dude.direction) * dude.speed;
-            dude.y += Math.cos(dude.direction) * dude.speed;
-            dude.rotation = -dude.direction - Math.PI / 2;
-
-            // Constrain the dudes' position by testing their bounds...
-            if (dude.x < dudeBounds.x)
-            {
-                dude.x += dudeBounds.width;
-            }
-            else if (dude.x > dudeBounds.x + dudeBounds.width)
-            {
-                dude.x -= dudeBounds.width;
-            }
-
-            if (dude.y < dudeBounds.y)
-            {
-                dude.y += dudeBounds.height;
-            }
-            else if (dude.y > dudeBounds.y + dudeBounds.height)
-            {
-                dude.y -= dudeBounds.height;
-            }
-        }
+            panda.rotation += 0.01 * (i % 2 ? 1 : -1);
+        });
     });
 })();

src/examples/v8.0.0/basic/renderGroup.js

@@ -0,0 +1,66 @@
+import { Application, Assets, Container, Sprite } from 'pixi.js';
+
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({
+        backgroundColor: 'brown',
+        resizeTo: window,
+    });
+
+    const treeTexture = await Assets.load(`https://pixijs.com/assets/tree.png`);
+
+    const worldContainer = new Container({
+        // this will make moving this container GPU powered
+        isRenderGroup: true,
+    });
+
+    const worldSize = 5000;
+
+    for (let i = 0; i < 100000; i++)
+    {
+        const yPos = Math.random() * worldSize;
+
+        const tree = new Sprite({
+            texture: treeTexture,
+            x: Math.random() * worldSize,
+            y: yPos,
+            scale: 0.25,
+            anchor: 0.5,
+        });
+
+        worldContainer.addChild(tree);
+    }
+
+    // sort the trees by their y position
+    worldContainer.children.sort((a, b) => a.position.y - b.position.y);
+
+    app.stage.addChild(worldContainer);
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    let x = 0;
+    let y = 0;
+
+    app.canvas.addEventListener('mousemove', (e) =>
+    {
+        x = e.clientX;
+        y = e.clientY;
+    });
+
+    app.ticker.add(() =>
+    {
+        const screenWidth = app.renderer.width;
+        const screenHeight = app.renderer.height;
+
+        const targetX = (x / screenWidth) * (worldSize - screenWidth);
+        const targetY = (y / screenHeight) * (worldSize - screenHeight);
+
+        worldContainer.x += (-targetX - worldContainer.x) * 0.1;
+        worldContainer.y += (-targetY - worldContainer.y) * 0.1;
+    });
+})();

src/examples/v8.0.0/examplesData.json

@@ -6,7 +6,7 @@
     "particleContainer",
     "blendModes",
     "meshPlane",
-    "fillGradient"
+    "renderGroup"
   ],
   "advanced": [
     "slots",
@@ -35,7 +35,12 @@
   "graphics": [
     "simple",
     "advanced",
-    "dynamic"
+    "dynamic",
+    "svg",
+    "svg-load",
+    "texture",
+    "fillGradient",
+    "meshFromPath"
   ],
   "events": [
     "click",

src/examples/v8.0.0/graphics/meshFromPath.js

@@ -0,0 +1,56 @@
+import { Application, buildGeometryFromPath, Graphics, GraphicsPath, Mesh, Texture } from 'pixi.js';
+
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({
+        backgroundColor: 'brown',
+        resizeTo: window,
+        antialias: true,
+    });
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    const path = new GraphicsPath()
+        .rect(-50, -50, 100, 100)
+        .circle(80, 80, 50)
+        .circle(80, -80, 50)
+        .circle(-80, 80, 50)
+        .circle(-80, -80, 50);
+
+    const geometry = buildGeometryFromPath({
+        path,
+    });
+
+    const meshes = [];
+
+    for (let i = 0; i < 200; i++)
+    {
+        const x = Math.random() * app.screen.width;
+        const y = Math.random() * app.screen.height;
+
+        const mesh = new Mesh({
+            geometry,
+            texture: Texture.WHITE,
+            x,
+            y,
+            tint: Math.random() * 0xffffff,
+        });
+
+        app.stage.addChild(mesh);
+
+        meshes.push(mesh);
+    }
+
+    app.ticker.add(() =>
+    {
+        meshes.forEach((mesh) =>
+        {
+            mesh.rotation += 0.01;
+        });
+    });
+})();

src/examples/v8.0.0/graphics/svg-load.js

@@ -0,0 +1,37 @@
+import { Application, Assets, Graphics } from 'pixi.js';
+
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({ antialias: true, resizeTo: window });
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    const tigerSvg = await Assets.load({
+        src: 'https://pixijs.com/assets/tiger.svg',
+        data: {
+            parseAsGraphicsContext: true,
+        },
+    });
+
+    const graphics = new Graphics(tigerSvg);
+
+    // line it up as this svg is not centered
+    const bounds = graphics.getLocalBounds();
+
+    graphics.pivot.set((bounds.x + bounds.width) / 2, (bounds.y + bounds.height) / 2);
+
+    graphics.position.set(app.screen.width / 2, app.screen.height / 2);
+
+    app.stage.addChild(graphics);
+
+    app.ticker.add((time) =>
+    {
+        graphics.rotation += 0.01;
+        graphics.scale.set(2 + Math.sin(graphics.rotation));
+    });
+})();

src/examples/v8.0.0/graphics/svg.js

@@ -0,0 +1,36 @@
+import { Application, Assets, Graphics } from 'pixi.js';
+
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({
+        antialias: true,
+        backgroundColor: 'white',
+        resizeTo: window,
+    });
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    const graphics = new Graphics().svg(`
+            <svg height="400" width="450" xmlns="http://www.w3.org/2000/svg">
+                <!-- Draw the paths -->
+                <path id="lineAB" d="M 100 350 l 150 -300" stroke="red" stroke-width="4"/>
+                <path id="lineBC" d="M 250 50 l 150 300" stroke="red" stroke-width="4"/>
+                <path id="lineMID" d="M 175 200 l 150 0" stroke="green" stroke-width="4"/>
+                <path id="lineAC" d="M 100 350 q 150 -300 300 0" stroke="blue" fill="none" stroke-width="4"/>
+
+                <!-- Mark relevant points -->
+                <g stroke="black" stroke-width="3" fill="black">
+                    <circle id="pointA" cx="100" cy="350" r="4" />
+                    <circle id="pointB" cx="250" cy="50" r="4" />
+                    <circle id="pointC" cx="400" cy="350" r="4" />
+                </g>
+            </svg>
+        `);
+
+    app.stage.addChild(graphics);
+})();