Feat: v8 examples update (#56)

* Restructuring: Move Tutorial and Playground into the Docusaurus Docs Structure

* Fix main container styling in coding mode for full-screen

* Chore: Website Restructuring

* Updated content generation scripts

* Minor fixes

* Chore: Website Versioning

* Chore: Create v7.x Snapshot + Make Working Docs the Pre-Release v8

* Versions page fixes

* Tweaked Sandpack Dependencies Config

* Hotfix: Restructure Source Examples and Tutorial

* Type hotfix

* Pre-Release v8 Examples Update

* Added back parcel-bundler for all pixi versions

* More examples updated

* More examples update

* Updated/Added/Removed more examples

* Reverted conditioned babel core dev dependency

* Pre-update Shader examples

* Revert Ticker.shared back to app.ticker

* Lint fix

* Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.1

* Remove v8.0.0-rc (old) content

* Simplify source versioning for examples and tutorials

* Bump up to v8.0.0-rc.2

* Type fix

* Add ghtoken ignore

* Fix Versioned Links

* Upgrade to RC4

* Chore: Website Versioning Scripts (#52)

* Chore: Website Versioning

* Versions page fixes

* Add `Working with Content` Section on README (#54)

* Added Working with Content Section on README

* Quick adjustment

---------

Co-authored-by: Baz Utsahajit <[email protected]>

* Chore: Create v7.x Snapshot + Make Working Docs the Pre-Release v8 (#53)

* Chore: Create v7.x Snapshot + Make Working Docs the Pre-Release v8

* Tweaked Sandpack Dependencies Config

* Hotfix: Restructure Source Examples and Tutorial (#55)

* Hotfix: Restructure Source Examples and Tutorial

* Type hotfix

* Added back parcel-bundler for all pixi versions

* Reverted conditioned babel core dev dependency

* Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.2 and Simplify examples and tutorial source versioning (#60)

* Chore: Upgrade Working Docs to use PixiJS v8.0.0-rc.1

* Simplify source versioning for examples and tutorials

* Bump up to v8.0.0-rc.2

* Type fix

* Add ghtoken ignore

* Fix Versioned Links

* Upgrade to RC4

* More Assorted fixes

---------

Co-authored-by: Baz Utsahajit <[email protected]>

---------

Co-authored-by: Baz Utsahajit <[email protected]>

---------

Co-authored-by: Baz Utsahajit <[email protected]>

---------

Co-authored-by: Baz Utsahajit <[email protected]>

* Upgrade to RC4

* No footer on example pages

* Update v7.x versioned docs

* Use semver to pick the latest version instead of relying on the latest tag

* Update Versions Page + Add devs and unmaintained versions

* More readme update

* Allowing user to customize pixi version label

* Add the ability to manage generic snapshots

* Combine gitignores into the root one

* Updated Mesh and Shaders Section

* Remove Nested Boundary with Projection Example

* Remove 7.3.2

* Update generate example docs script to fix sidebar names

* Add ability to add extra packages to the playground

* Split out Triangle example into multiple files

* Update examples config to allow multiple files

* Adapt syntax highlighting on tab switches

* Extract multi-file handling into a useCodeSource function

* Split long examples into multiple files

* Allow active file override with '$'

* Editor tutorial code change fix

* Allow extra packages on tutorial + add babel plugin

* Resolve conflict

* Fix editor styling and persisting playground changes

* Updated editor now keep persisted changes on all visible files + Fix tabs overflowing

* Tabs style update and fixes

* Upgrade to RC5

* Remove unused types and functions

* Fix tab scroll

* Fix texture url

* Lint Fix

* Remove ShaderToy Filter Render Texture Example

* Update Instanced Geometry + Multipass Mesh Codes

* Bump up to RC6

* Uncomment in instanced geometry

* Fix uniform float type

* fix up the custom shaders for gl

* Upgrade to RC7

* Updated v7.x to latest

* add more examples for v8 (#71)

* undo change

* remove file

---------

Co-authored-by: Baz Utsahajit <[email protected]>
Co-authored-by: Mat Groves <[email protected]>
Co-authored-by: Zyie <[email protected]>

.gitignore

@@ -34,4 +34,4 @@ yarn-error.log*
 
 scripts/pixiVersions.json
 
-.ghtoken
+.ghtoken

README.md

@@ -101,4 +101,4 @@ $ npm run switch-snapshot-pixi-version-config
 
 where both come with an interactive list of all the snapshots for selection to be actioned on accordingly.
 
-The `update-pixi-version-configs` script is also called pre-build and pre-deploy to update all the outdated labels or metadata on the `pixi-version.json` config on all the docs directories.
+The `update-pixi-version-configs` script is also called pre-build and pre-deploy to update all the outdated labels or metadata on the `pixi-version.json` config on all the docs directories.

scripts/generate-example-docs.js

@@ -116,15 +116,13 @@ async function go()
                     'hide_table_of_contents: true',
                     'hide_edit_this_page: true',
                     `sidebar_position: ${sidebarPosition++}`,
-                    'hide_title: true',
                     'custom_edit_url: null',
+                    `title: ${exampleTitle}`,
                     '---',
                     '<!-- AUTO-GENERATED BY [generate-example-docs] script -->',
                     'import Example from \'@site/src/components/Example/index\';',
                     'import version from \'../../pixi-version.json\';',
                     '',
-                    `# ${exampleTitle}`,
-                    '',
                     `<Example id="${exampleKey}" pixiVersion={version}/>`,
                     '',
                 ].join('\n');

src/examples/v7.0.0/events/nestedBoundaryWithProjection.js

@@ -44,9 +44,6 @@ class Projector extends PIXI.DisplayObject
 
             // Then bring global coords into content's world
             this.worldTransform.applyInverse(to.global, to.global);
-            // TODO: Remove after https://github.com/pixijs/pixi.js/pull/7381
-            // is merged!
-            to.target = this.boundary.hitTest(to.global.x, to.global.y);
         };
 
         // Propagate these events down into the content's scene graph!

src/examples/v8.0.0/advanced/spinners/index.js

@@ -0,0 +1,43 @@
+import { Application, Assets, Container, Sprite, Point, Graphics } from 'pixi.js';
+import { generateSpinner1 } from './spinner1';
+import { generateSpinner2 } from './spinner2';
+import { generateSpinner3 } from './spinner3';
+import { generateSpinner4 } from './spinner4';
+import { generateSpinner5 } from './spinner5';
+
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({ antialias: true, background: '#1099bb', resizeTo: window });
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    // Load the textures
+    await Assets.load([
+        'https://pixijs.com/assets/bg_scene_rotate.jpg',
+        'https://pixijs.com/assets/bg_rotate.jpg',
+        'https://pixijs.com/assets/circle.png',
+    ]);
+
+    const onTick = [
+        generateSpinner1(app, new Point(50, 50)),
+        generateSpinner2(app, new Point(160, 50)),
+        generateSpinner3(app, new Point(270, 50)),
+        generateSpinner4(app, new Point(380, 50)),
+        generateSpinner5(app, new Point(490, 50)),
+    ];
+
+    // Listen for animate update
+    app.ticker.add((time) =>
+    {
+        // Call tick handling for each spinner.
+        onTick.forEach((cb) =>
+        {
+            cb(time.deltaTime);
+        });
+    });
+})();

src/examples/v8.0.0/advanced/spinners/intersect.js

@@ -0,0 +1,40 @@
+/**
+ * Helper functions
+
+line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
+Determine the intersection point of two line segments
+Return FALSE if the lines don't intersect
+
+Code modified from original to match pixi examples linting rules.
+*/
+export function intersect(x1, y1, x2, y2, x3, y3, x4, y4)
+{
+    // Check if none of the lines are of length 0
+    if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4))
+    {
+        return false;
+    }
+
+    const denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1);
+
+    // Lines are parallel
+    if (denominator === 0)
+    {
+        return false;
+    }
+
+    const ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator;
+    const ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator;
+
+    // is the intersection along the segments
+    if (ua < 0 || ua > 1 || ub < 0 || ub > 1)
+    {
+        return false;
+    }
+
+    // Return a object with the x and y coordinates of the intersection
+    const x = x1 + ua * (x2 - x1);
+    const y = y1 + ua * (y2 - y1);
+
+    return { x, y };
+}

src/examples/v8.0.0/advanced/spinners/spinner1.js

@@ -0,0 +1,99 @@
+import { Container, Graphics, Sprite } from 'pixi.js';
+import { intersect } from './intersect';
+
+/* ---------------------------------------
+Spinner 1. Square with radial completion.
+-------------------------------------- */
+export function generateSpinner1(app, position)
+{
+    const container = new Container();
+
+    container.position = position;
+    app.stage.addChild(container);
+
+    const base = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg');
+    const size = 100;
+
+    base.width = size;
+    base.height = size;
+
+    const bottom = Sprite.from('https://pixijs.com/assets/bg_rotate.jpg');
+
+    bottom.width = size;
+    bottom.height = size;
+
+    const mask = new Graphics();
+
+    mask.position.set(size / 2, size / 2);
+    base.mask = mask;
+    window.mask = mask;
+
+    container.addChild(bottom);
+    container.addChild(base);
+    container.addChild(mask);
+
+    let phase = 0;
+
+    return (delta) =>
+    {
+        // Update phase
+        phase += delta / 60;
+        phase %= Math.PI * 2;
+
+        // Calculate target point.
+        const x = Math.cos(phase - Math.PI / 2) * size;
+        const y = Math.sin(phase - Math.PI / 2) * size;
+
+        const segments = [
+            [-size / 2, -size / 2, size / 2, -size / 2], // top segment
+            [size / 2, -size / 2, size / 2, size / 2], // right
+            [-size / 2, size / 2, size / 2, size / 2], // bottom
+            [-size / 2, -size / 2, -size / 2, size / 2], // left
+        ];
+
+        // Find the intersecting segment.
+        let intersection = null;
+        let winding = 0;
+
+        for (let i = 0; i < segments.length; i++)
+        {
+            const segment = segments[i];
+            const hit = intersect(0, 0, x, y, segment[0], segment[1], segment[2], segment[3]);
+
+            if (hit)
+            {
+                intersection = hit;
+                if (i === 0) winding = hit.x > 0 ? 0 : 4;
+                else winding = i;
+                break;
+            }
+        }
+
+        const corners = [
+            size / 2,
+            -size / 2, // Top right
+            size / 2,
+            size / 2, // Bottom right
+            -size / 2,
+            size / 2, // Bottom left
+            -size / 2,
+            -size / 2, // Top left,
+            0,
+            -size / 2, // End point
+        ];
+
+        // Redraw mask
+        mask.clear()
+            .moveTo(0, -size / 2)
+            .lineTo(0, 0)
+            .lineTo(intersection.x, intersection.y);
+
+        // fill the corners
+        for (let i = winding; i < corners.length / 2; i++)
+        {
+            mask.lineTo(corners[i * 2], corners[i * 2 + 1]);
+        }
+
+        mask.fill({ color: 0xff0000 });
+    };
+}

src/examples/v8.0.0/advanced/spinners/spinner2.js

@@ -0,0 +1,47 @@
+const { Container, Sprite } = require('pixi.js');
+
+/* -----------------------
+Spinner 2. Scaling balls.
+---------------------- */
+export function generateSpinner2(app, position)
+{
+    const container = new Container();
+
+    container.position = position;
+    app.stage.addChild(container);
+
+    const size = 100;
+    const ballAmount = 7;
+    const balls = [];
+
+    for (let i = 0; i < ballAmount; i++)
+    {
+        const ball = Sprite.from('https://pixijs.com/assets/circle.png');
+
+        ball.anchor.set(0.5);
+        container.addChild(ball);
+        ball.position.set(
+            size / 2 + (Math.cos((i / ballAmount) * Math.PI * 2) * size) / 3,
+            size / 2 + (Math.sin((i / ballAmount) * Math.PI * 2) * size) / 3,
+        );
+        balls.push(ball);
+    }
+
+    let phase = 0;
+
+    return (delta) =>
+    {
+        // Update phase
+        phase += delta / 60;
+        phase %= Math.PI * 2;
+
+        // Update ball scales
+        balls.forEach((b, i) =>
+        {
+            const sin = Math.sin((i / ballAmount) * Math.PI - phase);
+            // Multiply sin with itself to get more steeper edge.
+
+            b.scale.set(Math.abs(sin * sin * sin * 0.5) + 0.5);
+        });
+    };
+}

src/examples/v8.0.0/advanced/spinners/spinner3.js

@@ -0,0 +1,51 @@
+import { Container, Graphics, Sprite } from 'pixi.js';
+
+/* ---------------------
+Spinner 3. Radial mask.
+-------------------- */
+export function generateSpinner3(app, position)
+{
+    const container = new Container();
+
+    container.position = position;
+    app.stage.addChild(container);
+
+    const base = Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg');
+    const size = 100;
+
+    base.width = size;
+    base.height = size;
+
+    const mask = new Graphics();
+
+    mask.position.set(size / 2, size / 2);
+    base.mask = mask;
+    window.mask = mask;
+
+    container.addChild(base);
+    container.addChild(mask);
+
+    let phase = 0;
+
+    return (delta) =>
+    {
+        // Update phase
+        phase += delta / 60;
+        phase %= Math.PI * 2;
+
+        const angleStart = 0 - Math.PI / 2;
+        const angle = phase + angleStart;
+        const radius = 50;
+
+        const x1 = Math.cos(angleStart) * radius;
+        const y1 = Math.sin(angleStart) * radius;
+
+        // Redraw mask
+        mask.clear()
+            .moveTo(0, 0)
+            .lineTo(x1, y1)
+            .arc(0, 0, radius, angleStart, angle, false)
+            .lineTo(0, 0)
+            .fill({ color: 0xff0000 });
+    };
+}