Merge branch 'chore-upgrade-to-v8-rc1' into pre-release-v8-examples

docs/pixi-version.json

@@ -1,10 +1,10 @@
 {
   "versionLabel": "prerelease-v8",
-  "version": "8.0.0-rc",
-  "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc",
-  "build": "https://pixijs.download/v8.0.0-rc/pixi.min.js",
-  "docs": "https://pixijs.download/v8.0.0-rc/docs/index.html",
-  "npm": "8.0.0-rc",
+  "version": "8.0.0-rc.1",
+  "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.1",
+  "build": "https://pixijs.download/v8.0.0-rc.1/pixi.min.js",
+  "docs": "https://pixijs.download/v8.0.0-rc.1/docs/index.html",
+  "npm": "8.0.0-rc.1",
   "prerelease": true,
   "latest": false
 }

pixi-versions.json

@@ -12,11 +12,11 @@
   },
   {
     "versionLabel": "prerelease-v8",
-    "version": "8.0.0-rc",
-    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc",
-    "build": "https://pixijs.download/v8.0.0-rc/pixi.min.js",
-    "docs": "https://pixijs.download/v8.0.0-rc/docs/index.html",
-    "npm": "8.0.0-rc",
+    "version": "8.0.0-rc.1",
+    "releaseNotes": "https://github.com/pixijs/pixijs/releases/tag/v8.0.0-rc.1",
+    "build": "https://pixijs.download/v8.0.0-rc.1/pixi.min.js",
+    "docs": "https://pixijs.download/v8.0.0-rc.1/docs/index.html",
+    "npm": "8.0.0-rc.1",
     "prerelease": true,
     "latest": false,
     "isCurrent": true

src/examples/index.ts

@@ -1,6 +1,6 @@
 import type { OptionGroup } from '../components/Select';
 import v7x from './v7.3.2/index';
-import v8x from './v8.0.0-rc/index';
+import v8x from './v8.0.0-rc.1/index';
 
 export type ExampleDataEntry = {
     name: string;
@@ -24,7 +24,7 @@ export type ExamplesDataType = Record<string, CategoryDataType>;
 // TODO: Use await import to dynamically load versioned content on demand instead?
 const versions: Record<string, { entries: ExamplesDataType; options: OptionGroup[] }> = {
     '7.3.2': v7x,
-    '8.0.0-rc': v8x,
+    '8.0.0-rc.1': v8x,
 };
 
 export function getExampleEntry(version: string, pathString: string): ExampleSourceEntry | undefined

src/examples/v8.0.0-rc.1/advanced/collisionDetection.js

@@ -0,0 +1,194 @@
+import { Application, Assets, Point, Sprite, Texture } from 'pixi.js';
+
+// Based somewhat on this article by Spicy Yoghurt
+// URL for further reading: https://spicyyoghurt.com/tutorials/html5-javascript-game-development/collision-detection-physics
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({ background: '#111', resizeTo: window });
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    // Options for how objects interact
+    // How fast the red square moves
+    const movementSpeed = 0.05;
+
+    // Strength of the impulse push between two objects
+    const impulsePower = 5;
+
+    // Test For Hit
+    // A basic AABB check between two different squares
+    function testForAABB(object1, object2)
+    {
+        const bounds1 = object1.getBounds();
+        const bounds2 = object2.getBounds();
+
+        return (
+            bounds1.x < bounds2.x + bounds2.width
+            && bounds1.x + bounds1.width > bounds2.x
+            && bounds1.y < bounds2.y + bounds2.height
+            && bounds1.y + bounds1.height > bounds2.y
+        );
+    }
+
+    // Calculates the results of a collision, allowing us to give an impulse that
+    // shoves objects apart
+    function collisionResponse(object1, object2)
+    {
+        if (!object1 || !object2)
+        {
+            return new Point(0);
+        }
+
+        const vCollision = new Point(object2.x - object1.x, object2.y - object1.y);
+
+        const distance = Math.sqrt(
+            (object2.x - object1.x) * (object2.x - object1.x) + (object2.y - object1.y) * (object2.y - object1.y),
+        );
+
+        const vCollisionNorm = new Point(vCollision.x / distance, vCollision.y / distance);
+
+        const vRelativeVelocity = new Point(
+            object1.acceleration.x - object2.acceleration.x,
+            object1.acceleration.y - object2.acceleration.y,
+        );
+
+        const speed = vRelativeVelocity.x * vCollisionNorm.x + vRelativeVelocity.y * vCollisionNorm.y;
+
+        const impulse = (impulsePower * speed) / (object1.mass + object2.mass);
+
+        return new Point(impulse * vCollisionNorm.x, impulse * vCollisionNorm.y);
+    }
+
+    // Calculate the distance between two given points
+    function distanceBetweenTwoPoints(p1, p2)
+    {
+        const a = p1.x - p2.x;
+        const b = p1.y - p2.y;
+
+        return Math.hypot(a, b);
+    }
+
+    // The green square we will knock about
+    const greenSquare = new Sprite(Texture.WHITE);
+
+    greenSquare.position.set((app.screen.width - 100) / 2, (app.screen.height - 100) / 2);
+    greenSquare.width = 100;
+    greenSquare.height = 100;
+    greenSquare.tint = 0x00ff00;
+    greenSquare.acceleration = new Point(0);
+    greenSquare.mass = 3;
+
+    // The square you move around
+    const redSquare = new Sprite(Texture.WHITE);
+
+    redSquare.position.set(0, 0);
+    redSquare.width = 100;
+    redSquare.height = 100;
+    redSquare.tint = 0xff0000;
+    redSquare.acceleration = new Point(0);
+    redSquare.mass = 1;
+
+    const mouseCoords = { x: 0, y: 0 };
+
+    app.stage.eventMode = 'static';
+    app.stage.hitArea = app.screen;
+    app.stage.on('mousemove', (event) =>
+    {
+        mouseCoords.x = event.global.x;
+        mouseCoords.y = event.global.y;
+    });
+
+    // Listen for animate update
+    app.ticker.add((time) =>
+    {
+        const delta = time.deltaTime;
+
+        // Applied deacceleration for both squares, done by reducing the
+        // acceleration by 0.01% of the acceleration every loop
+        redSquare.acceleration.set(redSquare.acceleration.x * 0.99, redSquare.acceleration.y * 0.99);
+        greenSquare.acceleration.set(greenSquare.acceleration.x * 0.99, greenSquare.acceleration.y * 0.99);
+
+        // Check whether the green square ever moves off the screen
+        // If so, reverse acceleration in that direction
+        if (greenSquare.x < 0 || greenSquare.x > app.screen.width - 100)
+        {
+            greenSquare.acceleration.x = -greenSquare.acceleration.x;
+        }
+
+        if (greenSquare.y < 0 || greenSquare.y > app.screen.height - 100)
+        {
+            greenSquare.acceleration.y = -greenSquare.acceleration.y;
+        }
+
+        // If the green square pops out of the cordon, it pops back into the
+        // middle
+        if (
+            greenSquare.x < -30
+            || greenSquare.x > app.screen.width + 30
+            || greenSquare.y < -30
+            || greenSquare.y > app.screen.height + 30
+        )
+        {
+            greenSquare.position.set((app.screen.width - 100) / 2, (app.screen.height - 100) / 2);
+        }
+
+        // If the mouse is off screen, then don't update any further
+        if (
+            app.screen.width > mouseCoords.x
+            || mouseCoords.x > 0
+            || app.screen.height > mouseCoords.y
+            || mouseCoords.y > 0
+        )
+        {
+            // Get the red square's center point
+            const redSquareCenterPosition = new Point(
+                redSquare.x + redSquare.width * 0.5,
+                redSquare.y + redSquare.height * 0.5,
+            );
+
+            // Calculate the direction vector between the mouse pointer and
+            // the red square
+            const toMouseDirection = new Point(
+                mouseCoords.x - redSquareCenterPosition.x,
+                mouseCoords.y - redSquareCenterPosition.y,
+            );
+
+            // Use the above to figure out the angle that direction has
+            const angleToMouse = Math.atan2(toMouseDirection.y, toMouseDirection.x);
+
+            // Figure out the speed the square should be travelling by, as a
+            // function of how far away from the mouse pointer the red square is
+            const distMouseRedSquare = distanceBetweenTwoPoints(mouseCoords, redSquareCenterPosition);
+            const redSpeed = distMouseRedSquare * movementSpeed;
+
+            // Calculate the acceleration of the red square
+            redSquare.acceleration.set(Math.cos(angleToMouse) * redSpeed, Math.sin(angleToMouse) * redSpeed);
+        }
+
+        // If the two squares are colliding
+        if (testForAABB(greenSquare, redSquare))
+        {
+            // Calculate the changes in acceleration that should be made between
+            // each square as a result of the collision
+            const collisionPush = collisionResponse(greenSquare, redSquare);
+            // Set the changes in acceleration for both squares
+
+            redSquare.acceleration.set(collisionPush.x * greenSquare.mass, collisionPush.y * greenSquare.mass);
+            greenSquare.acceleration.set(-(collisionPush.x * redSquare.mass), -(collisionPush.y * redSquare.mass));
+        }
+
+        greenSquare.x += greenSquare.acceleration.x * delta;
+        greenSquare.y += greenSquare.acceleration.y * delta;
+
+        redSquare.x += redSquare.acceleration.x * delta;
+        redSquare.y += redSquare.acceleration.y * delta;
+    });
+
+    // Add to stage
+    app.stage.addChild(redSquare, greenSquare);
+})();

src/examples/v8.0.0-rc.1/advanced/mouseTrail.js

@@ -0,0 +1,111 @@
+import { Application, Assets, Point, Sprite, MeshRope } from 'pixi.js';
+
+(async () =>
+{
+    // Create a new application
+    const app = new Application();
+
+    // Initialize the application
+    await app.init({ background: '#1099bb', resizeTo: window });
+
+    // Append the application canvas to the document body
+    document.body.appendChild(app.canvas);
+
+    // Load the texture for rope.
+    const trailTexture = await Assets.load('https://pixijs.com/assets/trail.png');
+
+    const historyX = [];
+    const historyY = [];
+    // historySize determines how long the trail will be.
+    const historySize = 20;
+    // ropeSize determines how smooth the trail will be.
+    const ropeSize = 100;
+    const points = [];
+
+    // Create history array.
+    for (let i = 0; i < historySize; i++)
+    {
+        historyX.push(0);
+
+        historyY.push(0);
+    }
+    // Create rope points.
+    for (let i = 0; i < ropeSize; i++)
+    {
+        points.push(new Point(0, 0));
+    }
+
+    // Create the rope
+    const rope = new MeshRope({ texture: trailTexture, points });
+
+    // Set the blendmode
+    rope.blendmode = 'add';
+
+    app.stage.addChild(rope);
+
+    let mouseposition = null;
+
+    app.stage.eventMode = 'static';
+    app.stage.hitArea = app.screen;
+    app.stage.on('mousemove', (event) =>
+    {
+        mouseposition = mouseposition || { x: 0, y: 0 };
+        mouseposition.x = event.global.x;
+        mouseposition.y = event.global.y;
+    });
+
+    // Listen for animate update
+    app.ticker.add(() =>
+    {
+        if (!mouseposition) return;
+
+        // Update the mouse values to history
+        historyX.pop();
+        historyX.unshift(mouseposition.x);
+        historyY.pop();
+        historyY.unshift(mouseposition.y);
+        // Update the points to correspond with history.
+        for (let i = 0; i < ropeSize; i++)
+        {
+            const p = points[i];
+
+            // Smooth the curve with cubic interpolation to prevent sharp edges.
+            const ix = cubicInterpolation(historyX, (i / ropeSize) * historySize);
+            const iy = cubicInterpolation(historyY, (i / ropeSize) * historySize);
+
+            p.x = ix;
+            p.y = iy;
+        }
+    });
+
+    /**
+     * Cubic interpolation based on https://github.com/osuushi/Smooth.js
+     */
+    function clipInput(k, arr)
+    {
+        if (k < 0) k = 0;
+        if (k > arr.length - 1) k = arr.length - 1;
+
+        return arr[k];
+    }
+
+    function getTangent(k, factor, array)
+    {
+        return (factor * (clipInput(k + 1, array) - clipInput(k - 1, array))) / 2;
+    }
+
+    function cubicInterpolation(array, t, tangentFactor)
+    {
+        if (tangentFactor === null) tangentFactor = 1;
+
+        const k = Math.floor(t);
+        const m = [getTangent(k, tangentFactor, array), getTangent(k + 1, tangentFactor, array)];
+        const p = [clipInput(k, array), clipInput(k + 1, array)];
+
+        t -= k;
+        const t2 = t * t;
+        const t3 = t * t2;
+
+        return (2 * t3 - 3 * t2 + 1) * p[0] + (t3 - 2 * t2 + t) * m[0] + (-2 * t3 + 3 * t2) * p[1] + (t3 - t2) * m[1];
+    }
+})();