@@ -87,7 +88,7 @@ export default function Tutorial({ id, version }: { id: string; version: IVersio
{showEditor ? '< To Instructions' : 'To Editor >'}
LOADING...}>
- {() =>
);
diff --git a/src/examples/dev/advanced/collisionDetection.js b/src/examples/dev/advanced/collisionDetection.js
new file mode 100644
index 000000000..454a7ca6c
--- /dev/null
+++ b/src/examples/dev/advanced/collisionDetection.js
@@ -0,0 +1,179 @@
+import * as PIXI 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
+const app = new PIXI.Application({ background: '#111', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// 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 PIXI.Point(0);
+ }
+
+ const vCollision = new PIXI.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 PIXI.Point(vCollision.x / distance, vCollision.y / distance);
+
+ const vRelativeVelocity = new PIXI.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 PIXI.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 PIXI.Sprite(PIXI.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 PIXI.Point(0);
+greenSquare.mass = 3;
+
+// The square you move around
+const redSquare = new PIXI.Sprite(PIXI.Texture.WHITE);
+
+redSquare.position.set(0, 0);
+redSquare.width = 100;
+redSquare.height = 100;
+redSquare.tint = 0xff0000;
+redSquare.acceleration = new PIXI.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((delta) =>
+{
+ // 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 PIXI.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 PIXI.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);
diff --git a/src/examples/dev/advanced/mouseTrail.js b/src/examples/dev/advanced/mouseTrail.js
new file mode 100644
index 000000000..e0457e944
--- /dev/null
+++ b/src/examples/dev/advanced/mouseTrail.js
@@ -0,0 +1,101 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Get the texture for rope.
+const trailTexture = PIXI.Texture.from('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 PIXI.Point(0, 0));
+}
+
+// Create the rope
+const rope = new PIXI.SimpleRope(trailTexture, points);
+
+// Set the blendmode
+rope.blendmode = PIXI.BLEND_MODES.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];
+}
diff --git a/src/examples/dev/advanced/scratchCard.js b/src/examples/dev/advanced/scratchCard.js
new file mode 100644
index 000000000..b5e2b0274
--- /dev/null
+++ b/src/examples/dev/advanced/scratchCard.js
@@ -0,0 +1,83 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// prepare circle texture, that will be our brush
+const brush = new PIXI.Graphics().beginFill(0xffffff).drawCircle(0, 0, 50);
+
+// Create a line that will interpolate the drawn points
+const line = new PIXI.Graphics();
+
+PIXI.Assets.add('t1', 'https://pixijs.com/assets/bg_grass.jpg');
+PIXI.Assets.add('t2', 'https://pixijs.com/assets/bg_rotate.jpg');
+PIXI.Assets.load(['t1', 't2']).then(setup);
+
+function setup()
+{
+ const { width, height } = app.screen;
+ const stageSize = { width, height };
+
+ const background = Object.assign(PIXI.Sprite.from('t1'), stageSize);
+ const imageToReveal = Object.assign(PIXI.Sprite.from('t2'), stageSize);
+ const renderTexture = PIXI.RenderTexture.create(stageSize);
+ const renderTextureSprite = new PIXI.Sprite(renderTexture);
+
+ imageToReveal.mask = renderTextureSprite;
+
+ app.stage.addChild(background, imageToReveal, renderTextureSprite);
+
+ app.stage.eventMode = 'static';
+ app.stage.hitArea = app.screen;
+ app.stage
+ .on('pointerdown', pointerDown)
+ .on('pointerup', pointerUp)
+ .on('pointerupoutside', pointerUp)
+ .on('pointermove', pointerMove);
+
+ let dragging = false;
+ let lastDrawnPoint = null;
+
+ function pointerMove({ global: { x, y } })
+ {
+ if (dragging)
+ {
+ brush.position.set(x, y);
+ app.renderer.render(brush, {
+ renderTexture,
+ clear: false,
+ skipUpdateTransform: false,
+ });
+ // Smooth out the drawing a little bit to make it look nicer
+ // this connects the previous drawn point to the current one
+ // using a line
+ if (lastDrawnPoint)
+ {
+ line.clear()
+ .lineStyle({ width: 100, color: 0xffffff })
+ .moveTo(lastDrawnPoint.x, lastDrawnPoint.y)
+ .lineTo(x, y);
+ app.renderer.render(line, {
+ renderTexture,
+ clear: false,
+ skipUpdateTransform: false,
+ });
+ }
+ lastDrawnPoint = lastDrawnPoint || new PIXI.Point();
+ lastDrawnPoint.set(x, y);
+ }
+ }
+
+ function pointerDown(event)
+ {
+ dragging = true;
+ pointerMove(event);
+ }
+
+ function pointerUp(event)
+ {
+ dragging = false;
+ lastDrawnPoint = null;
+ }
+}
diff --git a/src/examples/dev/advanced/screenShot.js b/src/examples/dev/advanced/screenShot.js
new file mode 100644
index 000000000..06cbd30cc
--- /dev/null
+++ b/src/examples/dev/advanced/screenShot.js
@@ -0,0 +1,58 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ backgroundColor: '#111', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
+const bunnyContainer = new PIXI.Container();
+
+async function takeScreenshot()
+{
+ app.stop();
+ const url = await app.renderer.extract.base64(bunnyContainer);
+ const a = document.createElement('a');
+
+ document.body.append(a);
+ a.download = 'screenshot';
+ a.href = url;
+ a.click();
+ a.remove();
+ app.start();
+}
+
+app.stage.eventMode = 'static';
+app.stage.hitArea = app.screen;
+app.stage.on('pointerdown', takeScreenshot);
+
+for (let i = 0; i < 25; i++)
+{
+ const bunny = new PIXI.Sprite(texture);
+
+ bunny.anchor.set(0.5);
+ bunny.x = (i % 5) * 40;
+ bunny.y = Math.floor(i / 5) * 40;
+ bunnyContainer.addChild(bunny);
+}
+
+bunnyContainer.x = 400;
+bunnyContainer.y = 300;
+bunnyContainer.pivot.x = bunnyContainer.width / 2;
+bunnyContainer.pivot.y = bunnyContainer.height / 2;
+
+app.ticker.add((delta) =>
+{
+ bunnyContainer.rotation += 0.01 * delta;
+});
+
+const style = new PIXI.TextStyle({
+ fontFamily: 'Roboto',
+ fill: '#999',
+});
+
+const screenshotText = new PIXI.Text('Click To Take Screenshot', style);
+
+screenshotText.x = Math.round((app.screen.width - screenshotText.width) / 2);
+screenshotText.y = Math.round(screenshotText.height / 2);
+
+app.stage.addChild(screenshotText, bunnyContainer);
diff --git a/src/examples/dev/advanced/slots.js b/src/examples/dev/advanced/slots.js
new file mode 100644
index 000000000..d25099efd
--- /dev/null
+++ b/src/examples/dev/advanced/slots.js
@@ -0,0 +1,239 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+PIXI.Assets.load([
+ 'https://pixijs.com/assets/eggHead.png',
+ 'https://pixijs.com/assets/flowerTop.png',
+ 'https://pixijs.com/assets/helmlok.png',
+ 'https://pixijs.com/assets/skully.png',
+]).then(onAssetsLoaded);
+
+const REEL_WIDTH = 160;
+const SYMBOL_SIZE = 150;
+
+// onAssetsLoaded handler builds the example.
+function onAssetsLoaded()
+{
+ // Create different slot symbols.
+ const slotTextures = [
+ PIXI.Texture.from('https://pixijs.com/assets/eggHead.png'),
+ PIXI.Texture.from('https://pixijs.com/assets/flowerTop.png'),
+ PIXI.Texture.from('https://pixijs.com/assets/helmlok.png'),
+ PIXI.Texture.from('https://pixijs.com/assets/skully.png'),
+ ];
+
+ // Build the reels
+ const reels = [];
+ const reelContainer = new PIXI.Container();
+
+ for (let i = 0; i < 5; i++)
+ {
+ const rc = new PIXI.Container();
+
+ rc.x = i * REEL_WIDTH;
+ reelContainer.addChild(rc);
+
+ const reel = {
+ container: rc,
+ symbols: [],
+ position: 0,
+ previousPosition: 0,
+ blur: new PIXI.filters.BlurFilter(),
+ };
+
+ reel.blur.blurX = 0;
+ reel.blur.blurY = 0;
+ rc.filters = [reel.blur];
+
+ // Build the symbols
+ for (let j = 0; j < 4; j++)
+ {
+ const symbol = new PIXI.Sprite(slotTextures[Math.floor(Math.random() * slotTextures.length)]);
+ // Scale the symbol to fit symbol area.
+
+ symbol.y = j * SYMBOL_SIZE;
+ symbol.scale.x = symbol.scale.y = Math.min(SYMBOL_SIZE / symbol.width, SYMBOL_SIZE / symbol.height);
+ symbol.x = Math.round((SYMBOL_SIZE - symbol.width) / 2);
+ reel.symbols.push(symbol);
+ rc.addChild(symbol);
+ }
+ reels.push(reel);
+ }
+ app.stage.addChild(reelContainer);
+
+ // Build top & bottom covers and position reelContainer
+ const margin = (app.screen.height - SYMBOL_SIZE * 3) / 2;
+
+ reelContainer.y = margin;
+ reelContainer.x = Math.round(app.screen.width - REEL_WIDTH * 5);
+ const top = new PIXI.Graphics();
+
+ top.beginFill(0, 1);
+ top.drawRect(0, 0, app.screen.width, margin);
+ const bottom = new PIXI.Graphics();
+
+ bottom.beginFill(0, 1);
+ bottom.drawRect(0, SYMBOL_SIZE * 3 + margin, app.screen.width, margin);
+
+ // Add play text
+ const style = new PIXI.TextStyle({
+ fontFamily: 'Arial',
+ fontSize: 36,
+ fontStyle: 'italic',
+ fontWeight: 'bold',
+ fill: ['#ffffff', '#00ff99'], // gradient
+ stroke: '#4a1850',
+ strokeThickness: 5,
+ dropShadow: true,
+ dropShadowColor: '#000000',
+ dropShadowBlur: 4,
+ dropShadowAngle: Math.PI / 6,
+ dropShadowDistance: 6,
+ wordWrap: true,
+ wordWrapWidth: 440,
+ });
+
+ const playText = new PIXI.Text('Spin the wheels!', style);
+
+ playText.x = Math.round((bottom.width - playText.width) / 2);
+ playText.y = app.screen.height - margin + Math.round((margin - playText.height) / 2);
+ bottom.addChild(playText);
+
+ // Add header text
+ const headerText = new PIXI.Text('PIXI MONSTER SLOTS!', style);
+
+ headerText.x = Math.round((top.width - headerText.width) / 2);
+ headerText.y = Math.round((margin - headerText.height) / 2);
+ top.addChild(headerText);
+
+ app.stage.addChild(top);
+ app.stage.addChild(bottom);
+
+ // Set the interactivity.
+ bottom.eventMode = 'static';
+ bottom.cursor = 'pointer';
+ bottom.addListener('pointerdown', () =>
+ {
+ startPlay();
+ });
+
+ let running = false;
+
+ // Function to start playing.
+ function startPlay()
+ {
+ if (running) return;
+ running = true;
+
+ for (let i = 0; i < reels.length; i++)
+ {
+ const r = reels[i];
+ const extra = Math.floor(Math.random() * 3);
+ const target = r.position + 10 + i * 5 + extra;
+ const time = 2500 + i * 600 + extra * 600;
+
+ tweenTo(r, 'position', target, time, backout(0.5), null, i === reels.length - 1 ? reelsComplete : null);
+ }
+ }
+
+ // Reels done handler.
+ function reelsComplete()
+ {
+ running = false;
+ }
+
+ // Listen for animate update.
+ app.ticker.add((delta) =>
+ {
+ // Update the slots.
+ for (let i = 0; i < reels.length; i++)
+ {
+ const r = reels[i];
+ // Update blur filter y amount based on speed.
+ // This would be better if calculated with time in mind also. Now blur depends on frame rate.
+
+ r.blur.blurY = (r.position - r.previousPosition) * 8;
+ r.previousPosition = r.position;
+
+ // Update symbol positions on reel.
+ for (let j = 0; j < r.symbols.length; j++)
+ {
+ const s = r.symbols[j];
+ const prevy = s.y;
+
+ s.y = ((r.position + j) % r.symbols.length) * SYMBOL_SIZE - SYMBOL_SIZE;
+ if (s.y < 0 && prevy > SYMBOL_SIZE)
+ {
+ // Detect going over and swap a texture.
+ // This should in proper product be determined from some logical reel.
+ s.texture = slotTextures[Math.floor(Math.random() * slotTextures.length)];
+ s.scale.x = s.scale.y = Math.min(SYMBOL_SIZE / s.texture.width, SYMBOL_SIZE / s.texture.height);
+ s.x = Math.round((SYMBOL_SIZE - s.width) / 2);
+ }
+ }
+ }
+ });
+}
+
+// Very simple tweening utility function. This should be replaced with a proper tweening library in a real product.
+const tweening = [];
+
+function tweenTo(object, property, target, time, easing, onchange, oncomplete)
+{
+ const tween = {
+ object,
+ property,
+ propertyBeginValue: object[property],
+ target,
+ easing,
+ time,
+ change: onchange,
+ complete: oncomplete,
+ start: Date.now(),
+ };
+
+ tweening.push(tween);
+
+ return tween;
+}
+// Listen for animate update.
+app.ticker.add((delta) =>
+{
+ const now = Date.now();
+ const remove = [];
+
+ for (let i = 0; i < tweening.length; i++)
+ {
+ const t = tweening[i];
+ const phase = Math.min(1, (now - t.start) / t.time);
+
+ t.object[t.property] = lerp(t.propertyBeginValue, t.target, t.easing(phase));
+ if (t.change) t.change(t);
+ if (phase === 1)
+ {
+ t.object[t.property] = t.target;
+ if (t.complete) t.complete(t);
+ remove.push(t);
+ }
+ }
+ for (let i = 0; i < remove.length; i++)
+ {
+ tweening.splice(tweening.indexOf(remove[i]), 1);
+ }
+});
+
+// Basic lerp funtion.
+function lerp(a1, a2, t)
+{
+ return a1 * (1 - t) + a2 * t;
+}
+
+// Backout function from tweenjs.
+// https://github.com/CreateJS/TweenJS/blob/master/src/tweenjs/Ease.js
+function backout(amount)
+{
+ return (t) => --t * t * ((amount + 1) * t + amount) + 1;
+}
diff --git a/src/examples/dev/advanced/spinners.js b/src/examples/dev/advanced/spinners.js
new file mode 100644
index 000000000..3503c3719
--- /dev/null
+++ b/src/examples/dev/advanced/spinners.js
@@ -0,0 +1,427 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+/* ---------------------------------------
+ Spinner 1. Square with radial completion.
+ -------------------------------------- */
+const generateSpinner1 = (position) =>
+{
+ const container = new PIXI.Container();
+
+ container.position = position;
+ app.stage.addChild(container);
+
+ const base = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg');
+ const size = 100;
+
+ base.width = size;
+ base.height = size;
+
+ const bottom = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg');
+
+ bottom.width = size;
+ bottom.height = size;
+
+ const mask = new PIXI.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();
+ mask.lineStyle(2, 0xff0000, 1);
+ mask.beginFill(0xff0000, 1);
+ mask.moveTo(0, -size / 2);
+ mask.lineTo(0, 0);
+
+ mask.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.endFill();
+ };
+};
+
+/* -----------------------
+ Spinner 2. Scaling balls.
+ ---------------------- */
+const generateSpinner2 = (position) =>
+{
+ const container = new PIXI.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 = PIXI.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);
+ });
+ };
+};
+
+/* ---------------------
+ Spinner 3. Radial mask.
+ -------------------- */
+const generateSpinner3 = (position) =>
+{
+ const container = new PIXI.Container();
+
+ container.position = position;
+ app.stage.addChild(container);
+
+ const base = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg');
+ const size = 100;
+
+ base.width = size;
+ base.height = size;
+
+ const mask = new PIXI.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();
+ mask.lineStyle(2, 0xff0000, 1);
+ mask.beginFill(0xff0000, 1);
+ mask.moveTo(0, 0);
+ mask.lineTo(x1, y1);
+ mask.arc(0, 0, radius, angleStart, angle, false);
+ mask.lineTo(0, 0);
+ mask.endFill();
+ };
+};
+
+/* ---------------------------------
+ Spinner 4. Rounded rectangle edges.
+ ------------------------------- */
+const generateSpinner4 = (position) =>
+{
+ const container = new PIXI.Container();
+
+ container.position = position;
+ app.stage.addChild(container);
+
+ const size = 100;
+ const arcRadius = 15;
+
+ const base = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg');
+
+ base.width = size;
+ base.height = size;
+
+ // For better performance having assets prerounded would be better than masking.
+ const roundingMask = new PIXI.Graphics();
+
+ roundingMask.beginFill(0, 1);
+ roundingMask.lineStyle(1, 0xff0000, 1);
+ roundingMask.drawRoundedRect(0, 0, size, size, arcRadius);
+ roundingMask.endFill();
+ base.mask = roundingMask;
+
+ // The edge could be replaced with image as well.
+ const lineSize = 5;
+ const edge = new PIXI.Graphics();
+
+ edge.lineStyle(lineSize, 0xff0000, 1);
+ edge.drawRoundedRect(0, 0, size, size, arcRadius);
+ edge.endFill();
+
+ // Mask in this example works basically the same way as in example 1.
+ // Except it is reversed and calculates the mask in straight lines in edges.
+ const mask = new PIXI.Graphics();
+
+ mask.position.set(size / 2, size / 2);
+ edge.mask = mask;
+
+ container.addChild(base);
+ container.addChild(roundingMask);
+ container.addChild(edge);
+ container.addChild(mask);
+
+ let phase = 0;
+
+ return (delta) =>
+ {
+ // Update phase
+ phase += delta / 160;
+ 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;
+ // Line segments
+ const segments = [
+ [-size / 2 + lineSize, -size / 2 + lineSize, size / 2 - lineSize, -size / 2 + lineSize], // top segment
+ [size / 2 - lineSize, -size / 2 + lineSize, size / 2 - lineSize, size / 2 - lineSize], // right
+ [-size / 2 + lineSize, size / 2 - lineSize, size / 2 - lineSize, size / 2 - lineSize], // bottom
+ [-size / 2 + lineSize, -size / 2 + lineSize, -size / 2 + lineSize, size / 2 - lineSize], // left
+ ];
+ // To which dir should mask continue at each segment
+ let outDir = [
+ [0, -1],
+ [1, 0],
+ [0, 1],
+ [-1, 0],
+ ];
+
+ // Find the intersecting segment.
+ let intersection = null;
+ let winding = 0;
+ // What direction should the line continue after hit has been found before hitting the line size
+
+ 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 = 4 - i;
+ outDir = outDir[i];
+ break;
+ }
+ }
+
+ const corners = [
+ -size / 2 - lineSize,
+ -size / 2 - lineSize, // Top left,
+ -size / 2 - lineSize,
+ size / 2 + lineSize, // Bottom left
+ size / 2 + lineSize,
+ size / 2 + lineSize, // Bottom right
+ size / 2 + lineSize,
+ -size / 2 - lineSize, // Top right
+ ];
+
+ // Redraw mask
+ mask.clear();
+ mask.lineStyle(2, 0x00ff00, 1);
+ mask.beginFill(0xff0000, 1);
+
+ mask.moveTo(0, 0);
+ mask.moveTo(0, -size / 2 - lineSize);
+
+ // fill the corners
+ for (let i = 0; i < winding; i++)
+ {
+ mask.lineTo(corners[i * 2], corners[i * 2 + 1]);
+ }
+
+ mask.lineTo(intersection.x + outDir[0] * lineSize * 2, intersection.y + outDir[1] * lineSize * 2);
+ mask.lineTo(intersection.x, intersection.y);
+ mask.lineTo(0, 0);
+
+ mask.endFill();
+ };
+};
+
+/* ---------------------
+ Spinner 5. Rounded rectangle fixed length spinner by jonlepage
+ -------------------- */
+const generateSpinner5 = (position) =>
+{
+ const container = new PIXI.Container();
+
+ container.position = position;
+ app.stage.addChild(container);
+
+ const halfCircle = new PIXI.Graphics();
+
+ halfCircle.beginFill(0xff0000);
+ halfCircle.lineStyle(2, 0xffffff);
+ halfCircle.arc(0, 0, 100, 0, Math.PI);
+ halfCircle.endFill();
+ halfCircle.position.set(50, 50);
+
+ const rectangle = new PIXI.Graphics();
+
+ rectangle.lineStyle(2, 0xffffff, 1);
+ rectangle.drawRoundedRect(0, 0, 100, 100, 16);
+ rectangle.endFill();
+ rectangle.mask = halfCircle;
+
+ container.addChild(rectangle);
+ container.addChild(halfCircle);
+
+ let phase = 0;
+
+ return (delta) =>
+ {
+ // Update phase
+ phase += delta / 6;
+ phase %= Math.PI * 2;
+
+ halfCircle.rotation = phase;
+ };
+};
+
+const onTick = [
+ generateSpinner1(new PIXI.Point(50, 50)),
+ generateSpinner2(new PIXI.Point(160, 50)),
+ generateSpinner3(new PIXI.Point(270, 50)),
+ generateSpinner4(new PIXI.Point(380, 50)),
+ generateSpinner5(new PIXI.Point(490, 50)),
+];
+
+// Listen for animate update
+app.ticker.add((delta) =>
+{
+ // Call tick handling for each spinner.
+ onTick.forEach((cb) =>
+ {
+ cb(delta);
+ });
+});
+
+/**
+ * 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.
+*/
+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 };
+}
diff --git a/src/examples/dev/advanced/starWarp.js b/src/examples/dev/advanced/starWarp.js
new file mode 100644
index 000000000..c715e6723
--- /dev/null
+++ b/src/examples/dev/advanced/starWarp.js
@@ -0,0 +1,89 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Get the texture for star.
+const starTexture = PIXI.Texture.from('https://pixijs.com/assets/star.png');
+
+const starAmount = 1000;
+let cameraZ = 0;
+const fov = 20;
+const baseSpeed = 0.025;
+let speed = 0;
+let warpSpeed = 0;
+const starStretch = 5;
+const starBaseSize = 0.05;
+
+// Create the stars
+const stars = [];
+
+for (let i = 0; i < starAmount; i++)
+{
+ const star = {
+ sprite: new PIXI.Sprite(starTexture),
+ z: 0,
+ x: 0,
+ y: 0,
+ };
+
+ star.sprite.anchor.x = 0.5;
+ star.sprite.anchor.y = 0.7;
+ randomizeStar(star, true);
+ app.stage.addChild(star.sprite);
+ stars.push(star);
+}
+
+function randomizeStar(star, initial)
+{
+ star.z = initial ? Math.random() * 2000 : cameraZ + Math.random() * 1000 + 2000;
+
+ // Calculate star positions with radial random coordinate so no star hits the camera.
+ const deg = Math.random() * Math.PI * 2;
+ const distance = Math.random() * 50 + 1;
+
+ star.x = Math.cos(deg) * distance;
+ star.y = Math.sin(deg) * distance;
+}
+
+// Change flight speed every 5 seconds
+setInterval(() =>
+{
+ warpSpeed = warpSpeed > 0 ? 0 : 1;
+}, 5000);
+
+// Listen for animate update
+app.ticker.add((delta) =>
+{
+ // Simple easing. This should be changed to proper easing function when used for real.
+ speed += (warpSpeed - speed) / 20;
+ cameraZ += delta * 10 * (speed + baseSpeed);
+ for (let i = 0; i < starAmount; i++)
+ {
+ const star = stars[i];
+
+ if (star.z < cameraZ) randomizeStar(star);
+
+ // Map star 3d position to 2d with really simple projection
+ const z = star.z - cameraZ;
+
+ star.sprite.x = star.x * (fov / z) * app.renderer.screen.width + app.renderer.screen.width / 2;
+ star.sprite.y = star.y * (fov / z) * app.renderer.screen.width + app.renderer.screen.height / 2;
+
+ // Calculate star scale & rotation.
+ const dxCenter = star.sprite.x - app.renderer.screen.width / 2;
+ const dyCenter = star.sprite.y - app.renderer.screen.height / 2;
+ const distanceCenter = Math.sqrt(dxCenter * dxCenter + dyCenter * dyCenter);
+ const distanceScale = Math.max(0, (2000 - z) / 2000);
+
+ star.sprite.scale.x = distanceScale * starBaseSize;
+ // Star is looking towards center so that y axis is towards center.
+ // Scale the star depending on how fast we are moving, what the stretchfactor is
+ // and depending on how far away it is from the center.
+ star.sprite.scale.y
+ = distanceScale * starBaseSize
+ + (distanceScale * speed * starStretch * distanceCenter) / app.renderer.screen.width;
+ star.sprite.rotation = Math.atan2(dyCenter, dxCenter) + Math.PI / 2;
+ }
+});
diff --git a/src/examples/dev/assets/async.js b/src/examples/dev/assets/async.js
new file mode 100644
index 000000000..8b4b501ce
--- /dev/null
+++ b/src/examples/dev/assets/async.js
@@ -0,0 +1,26 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// await can only be used inside an async function
+async function init()
+{
+ const texture = await PIXI.Assets.load('https://pixijs.com/assets/bunny.png');
+
+ // create a new Sprite from the awaited loaded Texture
+ const bunny = PIXI.Sprite.from(texture);
+
+ // center the sprite's anchor point
+ bunny.anchor.set(0.5);
+
+ // move the sprite to the center of the screen
+ bunny.x = app.screen.width / 2;
+ bunny.y = app.screen.height / 2;
+
+ app.stage.addChild(bunny);
+}
+
+// Call that async function
+init();
diff --git a/src/examples/dev/assets/background.js b/src/examples/dev/assets/background.js
new file mode 100644
index 000000000..295d6667a
--- /dev/null
+++ b/src/examples/dev/assets/background.js
@@ -0,0 +1,37 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Add the assets to load
+PIXI.Assets.add('flowerTop', 'https://pixijs.com/assets/flowerTop.png');
+PIXI.Assets.add('eggHead', 'https://pixijs.com/assets/eggHead.png');
+
+// Allow the assets to load in the background
+PIXI.Assets.backgroundLoad(['flowerTop', 'eggHead']);
+
+// If the background load hasn't loaded this asset yet, calling load forces this asset to load now.
+PIXI.Assets.load('eggHead').then((texture) =>
+{
+ // auxiliar flag for toggling the texture
+ let isEggHead = true;
+
+ // create a new Sprite from the resolved loaded texture
+ const character = new PIXI.Sprite(texture);
+
+ character.anchor.set(0.5);
+ character.x = app.screen.width / 2;
+ character.y = app.screen.height / 2;
+ character.eventMode = 'static';
+ character.cursor = 'pointer';
+
+ app.stage.addChild(character);
+
+ character.on('pointertap', async () =>
+ {
+ isEggHead = !isEggHead;
+ // These promise are already resolved in the cache.
+ character.texture = await PIXI.Assets.load(isEggHead ? 'eggHead' : 'flowerTop');
+ });
+});
diff --git a/src/examples/dev/assets/bundle.js b/src/examples/dev/assets/bundle.js
new file mode 100644
index 000000000..e60ea4b95
--- /dev/null
+++ b/src/examples/dev/assets/bundle.js
@@ -0,0 +1,91 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+async function init()
+{
+ // manifest example
+ const manifestExample = {
+ bundles: [
+ {
+ name: 'load-screen',
+ assets: [
+ {
+ name: 'flowerTop',
+ srcs: 'https://pixijs.com/assets/flowerTop.png',
+ },
+ ],
+ },
+ {
+ name: 'game-screen',
+ assets: [
+ {
+ name: 'eggHead',
+ srcs: 'https://pixijs.com/assets/eggHead.png',
+ },
+ ],
+ },
+ ],
+ };
+
+ await PIXI.Assets.init({ manifest: manifestExample });
+
+ // bundles can be loaded in the background too!
+ PIXI.Assets.backgroundLoadBundle(['load-screen', 'game-screen']);
+
+ makeLoadScreen();
+}
+
+async function makeLoadScreen()
+{
+ // get the assets from the load screen bundle.
+ // If the bundle was already downloaded the promise resolves instantly!
+ const loadScreenAssets = await PIXI.Assets.loadBundle('load-screen');
+
+ // create a new Sprite from the resolved loaded texture
+ const goNext = new PIXI.Sprite(loadScreenAssets.flowerTop);
+
+ goNext.anchor.set(0.5);
+ goNext.x = app.screen.width / 2;
+ goNext.y = app.screen.height / 2;
+ app.stage.addChild(goNext);
+
+ goNext.eventMode = 'static';
+ goNext.cursor = 'pointer';
+
+ goNext.on('pointertap', async () =>
+ {
+ goNext.destroy();
+ makeGameScreen();
+ });
+}
+
+async function makeGameScreen()
+{
+ // Wait here until you get the assets
+ // If the user spends enough time in the load screen by the time they reach the game screen
+ // the assets are completely loaded and the promise resolves instantly!
+ const loadScreenAssets = await PIXI.Assets.loadBundle('game-screen');
+
+ // create a new Sprite from the resolved loaded texture
+ const goBack = new PIXI.Sprite(loadScreenAssets.eggHead);
+
+ goBack.anchor.set(0.5);
+ goBack.x = app.screen.width / 2;
+ goBack.y = app.screen.height / 2;
+ app.stage.addChild(goBack);
+
+ goBack.eventMode = 'static';
+ goBack.cursor = 'pointer';
+
+ goBack.on('pointertap', async () =>
+ {
+ goBack.destroy();
+ // The user can go back and the files are already downloaded
+ makeLoadScreen();
+ });
+}
+
+init();
diff --git a/src/examples/dev/assets/multiple.js b/src/examples/dev/assets/multiple.js
new file mode 100644
index 000000000..119dc312e
--- /dev/null
+++ b/src/examples/dev/assets/multiple.js
@@ -0,0 +1,32 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Add the assets to load
+PIXI.Assets.add('flowerTop', 'https://pixijs.com/assets/flowerTop.png');
+PIXI.Assets.add('eggHead', 'https://pixijs.com/assets/eggHead.png');
+
+// Load the assets and get a resolved promise once both are loaded
+const texturesPromise = PIXI.Assets.load(['flowerTop', 'eggHead']); // => Promise<{flowerTop: Texture, eggHead: Texture}>
+
+// When the promise resolves, we have the texture!
+texturesPromise.then((textures) =>
+{
+ // create a new Sprite from the resolved loaded Textures
+
+ const flower = PIXI.Sprite.from(textures.flowerTop);
+
+ flower.anchor.set(0.5);
+ flower.x = app.screen.width * 0.25;
+ flower.y = app.screen.height / 2;
+ app.stage.addChild(flower);
+
+ const egg = PIXI.Sprite.from(textures.eggHead);
+
+ egg.anchor.set(0.5);
+ egg.x = app.screen.width * 0.75;
+ egg.y = app.screen.height / 2;
+ app.stage.addChild(egg);
+});
diff --git a/src/examples/dev/assets/promise.js b/src/examples/dev/assets/promise.js
new file mode 100644
index 000000000..631bc5dcd
--- /dev/null
+++ b/src/examples/dev/assets/promise.js
@@ -0,0 +1,24 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Start loading right away and create a promise
+const texturePromise = PIXI.Assets.load('https://pixijs.com/assets/bunny.png');
+
+// When the promise resolves, we have the texture!
+texturePromise.then((resolvedTexture) =>
+{
+ // create a new Sprite from the resolved loaded Texture
+ const bunny = PIXI.Sprite.from(resolvedTexture);
+
+ // center the sprite's anchor point
+ bunny.anchor.set(0.5);
+
+ // move the sprite to the center of the screen
+ bunny.x = app.screen.width / 2;
+ bunny.y = app.screen.height / 2;
+
+ app.stage.addChild(bunny);
+});
diff --git a/src/examples/dev/basic/blendModes.js b/src/examples/dev/basic/blendModes.js
new file mode 100644
index 000000000..d4e2c8a79
--- /dev/null
+++ b/src/examples/dev/basic/blendModes.js
@@ -0,0 +1,92 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// create a new background sprite
+const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg');
+
+background.width = app.screen.width;
+background.height = app.screen.height;
+app.stage.addChild(background);
+
+// create an array to store a reference to the dudes
+const dudeArray = [];
+
+const totaldudes = 20;
+
+for (let i = 0; i < totaldudes; i++)
+{
+ // create a new Sprite that uses the image name that we just generated as its source
+ const dude = PIXI.Sprite.from('https://pixijs.com/assets/flowerTop.png');
+
+ dude.anchor.set(0.5);
+
+ // set a random scale for the dude
+ dude.scale.set(0.8 + Math.random() * 0.3);
+
+ // 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);
+
+ // The important bit of this example, this is how you change the default blend mode of the sprite
+ dude.blendMode = PIXI.BLEND_MODES.ADD;
+
+ // create some extra properties that will control movement
+ dude.direction = Math.random() * Math.PI * 2;
+
+ // this number will be used to modify the direction of the dude over time
+ dude.turningSpeed = Math.random() - 0.8;
+
+ // create a random speed for the dude between 0 - 2
+ dude.speed = 2 + Math.random() * 2;
+
+ // finally we push the dude into the dudeArray so it it can be easily accessed later
+ dudeArray.push(dude);
+
+ app.stage.addChild(dude);
+}
+
+// create a bounding box for the little dudes
+const dudeBoundsPadding = 100;
+
+const dudeBounds = new PIXI.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++)
+ {
+ 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;
+
+ // wrap the dudes 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;
+ }
+ }
+});
diff --git a/src/examples/dev/basic/cacheAsBitmap.js b/src/examples/dev/basic/cacheAsBitmap.js
new file mode 100644
index 000000000..d5942007d
--- /dev/null
+++ b/src/examples/dev/basic/cacheAsBitmap.js
@@ -0,0 +1,73 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+app.stop();
+
+// load resources
+PIXI.Assets.load('https://pixijs.com/assets/spritesheet/monsters.json').then(onAssetsLoaded);
+
+// holder to store aliens
+const aliens = [];
+const alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png'];
+
+let count = 0;
+
+// create an empty container
+const alienContainer = new PIXI.Container();
+
+alienContainer.x = 400;
+alienContainer.y = 300;
+
+// make the stage interactive
+app.stage.eventMode = 'static';
+app.stage.addChild(alienContainer);
+
+function onAssetsLoaded()
+{
+ // add a bunch of aliens with textures from image paths
+ for (let i = 0; i < 100; i++)
+ {
+ const frameName = alienFrames[i % 4];
+
+ // create an alien using the frame name..
+ const alien = PIXI.Sprite.from(frameName);
+
+ alien.tint = Math.random() * 0xffffff;
+
+ alien.x = Math.random() * 800 - 400;
+ alien.y = Math.random() * 600 - 300;
+ alien.anchor.x = 0.5;
+ alien.anchor.y = 0.5;
+ aliens.push(alien);
+ alienContainer.addChild(alien);
+ }
+ app.start();
+}
+
+// Combines both mouse click + touch tap
+app.stage.on('pointertap', onClick);
+
+function onClick()
+{
+ alienContainer.cacheAsBitmap = !alienContainer.cacheAsBitmap;
+}
+
+app.ticker.add(() =>
+{
+ // let's rotate the aliens a little bit
+ for (let i = 0; i < 100; i++)
+ {
+ const alien = aliens[i];
+
+ alien.rotation += 0.1;
+ }
+
+ count += 0.01;
+
+ alienContainer.scale.x = Math.sin(count);
+ alienContainer.scale.y = Math.sin(count);
+ alienContainer.rotation += 0.01;
+});
diff --git a/src/examples/dev/basic/container.js b/src/examples/dev/basic/container.js
new file mode 100644
index 000000000..9d23157ca
--- /dev/null
+++ b/src/examples/dev/basic/container.js
@@ -0,0 +1,39 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const container = new PIXI.Container();
+
+app.stage.addChild(container);
+
+// Create a new texture
+const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
+
+// Create a 5x5 grid of bunnies
+for (let i = 0; i < 25; i++)
+{
+ const bunny = new PIXI.Sprite(texture);
+
+ bunny.anchor.set(0.5);
+ bunny.x = (i % 5) * 40;
+ bunny.y = Math.floor(i / 5) * 40;
+ container.addChild(bunny);
+}
+
+// Move container to the center
+container.x = app.screen.width / 2;
+container.y = app.screen.height / 2;
+
+// Center bunny sprite in local container coordinates
+container.pivot.x = container.width / 2;
+container.pivot.y = container.height / 2;
+
+// Listen for animate update
+app.ticker.add((delta) =>
+{
+ // rotate the container!
+ // use delta to create frame-independent transform
+ container.rotation -= 0.01 * delta;
+});
diff --git a/src/examples/dev/basic/particleContainer.js b/src/examples/dev/basic/particleContainer.js
new file mode 100644
index 000000000..4dc6d56b2
--- /dev/null
+++ b/src/examples/dev/basic/particleContainer.js
@@ -0,0 +1,102 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const sprites = new PIXI.ParticleContainer(10000, {
+ scale: true,
+ position: true,
+ rotation: true,
+ uvs: true,
+ alpha: true,
+});
+
+app.stage.addChild(sprites);
+
+// create an array to store all the sprites
+const maggots = [];
+
+const totalSprites = app.renderer instanceof PIXI.Renderer ? 10000 : 100;
+
+for (let i = 0; i < totalSprites; i++)
+{
+ // create a new Sprite
+ const dude = PIXI.Sprite.from('https://pixijs.com/assets/maggot_tiny.png');
+
+ // set the anchor point so the texture is centerd on the sprite
+ dude.anchor.set(0.5);
+
+ // different maggots, different sizes
+ dude.scale.set(0.8 + Math.random() * 0.3);
+
+ // scatter them all
+ dude.x = Math.random() * app.screen.width;
+ dude.y = Math.random() * app.screen.height;
+
+ dude.tint = Math.random() * 0x808080;
+
+ // create a random direction in radians
+ dude.direction = Math.random() * Math.PI * 2;
+
+ // this number will be used to modify the direction of the sprite over time
+ dude.turningSpeed = Math.random() - 0.8;
+
+ // create a random speed between 0 - 2, and these maggots are slooww
+ dude.speed = (2 + Math.random() * 2) * 0.2;
+
+ dude.offset = Math.random() * 100;
+
+ // finally we push the dude into the maggots array so it it can be easily accessed later
+ maggots.push(dude);
+
+ sprites.addChild(dude);
+}
+
+// create a bounding box box for the little maggots
+const dudeBoundsPadding = 100;
+const dudeBounds = new PIXI.Rectangle(
+ -dudeBoundsPadding,
+ -dudeBoundsPadding,
+ app.screen.width + dudeBoundsPadding * 2,
+ app.screen.height + dudeBoundsPadding * 2,
+);
+
+let tick = 0;
+
+app.ticker.add(() =>
+{
+ // iterate through the sprites and update their position
+ for (let i = 0; i < maggots.length; i++)
+ {
+ const dude = maggots[i];
+
+ dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05;
+ dude.direction += dude.turningSpeed * 0.01;
+ dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
+ dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
+ dude.rotation = -dude.direction + Math.PI;
+
+ // wrap the maggots
+ 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;
+ }
+ }
+
+ // increment the ticker
+ tick += 0.1;
+});
diff --git a/src/examples/dev/basic/simplePlane.js b/src/examples/dev/basic/simplePlane.js
new file mode 100644
index 000000000..72faba2c5
--- /dev/null
+++ b/src/examples/dev/basic/simplePlane.js
@@ -0,0 +1,32 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+PIXI.Assets.load('https://pixijs.com/assets/bg_grass.jpg').then((texture) =>
+{
+ const plane = new PIXI.SimplePlane(texture, 10, 10);
+
+ plane.x = 100;
+ plane.y = 100;
+
+ app.stage.addChild(plane);
+
+ // Get the buffer for vertice positions.
+ const buffer = plane.geometry.getBuffer('aVertexPosition');
+
+ // Listen for animate update
+ let timer = 0;
+
+ app.ticker.add(() =>
+ {
+ // Randomize the vertice positions a bit to create movement.
+ for (let i = 0; i < buffer.data.length; i++)
+ {
+ buffer.data[i] += Math.sin(timer / 10 + i) * 0.5;
+ }
+ buffer.update();
+ timer++;
+ });
+});
diff --git a/src/examples/dev/basic/tinting.js b/src/examples/dev/basic/tinting.js
new file mode 100644
index 000000000..e52ddc6f8
--- /dev/null
+++ b/src/examples/dev/basic/tinting.js
@@ -0,0 +1,85 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// holder to store the aliens
+const aliens = [];
+
+const totalDudes = 20;
+
+for (let i = 0; i < totalDudes; i++)
+{
+ // create a new Sprite that uses the image name that we just generated as its source
+ const dude = PIXI.Sprite.from('https://pixijs.com/assets/eggHead.png');
+
+ // set the anchor point so the texture is centered on the sprite
+ dude.anchor.set(0.5);
+
+ // set a random scale for the dude - no point them all being the same size!
+ dude.scale.set(0.8 + Math.random() * 0.3);
+
+ // finally lets set the dude to be at a random position..
+ dude.x = Math.random() * app.screen.width;
+ dude.y = Math.random() * app.screen.height;
+
+ dude.tint = Math.random() * 0xffffff;
+
+ // create some extra properties that will control movement :
+ // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
+ dude.direction = Math.random() * Math.PI * 2;
+
+ // this number will be used to modify the direction of the dude over time
+ dude.turningSpeed = Math.random() - 0.8;
+
+ // create a random speed for the dude between 2 - 4
+ dude.speed = 2 + Math.random() * 2;
+
+ // finally we push the dude into the aliens array so it it can be easily accessed later
+ aliens.push(dude);
+
+ app.stage.addChild(dude);
+}
+
+// create a bounding box for the little dudes
+const dudeBoundsPadding = 100;
+const dudeBounds = new PIXI.Rectangle(
+ -dudeBoundsPadding,
+ -dudeBoundsPadding,
+ app.screen.width + dudeBoundsPadding * 2,
+ app.screen.height + dudeBoundsPadding * 2,
+);
+
+app.ticker.add(() =>
+{
+ // iterate through the dudes and update their position
+ for (let i = 0; i < aliens.length; i++)
+ {
+ const dude = aliens[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;
+
+ // wrap the dudes 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;
+ }
+ }
+});
diff --git a/src/examples/dev/basic/transparentBackground.js b/src/examples/dev/basic/transparentBackground.js
new file mode 100644
index 000000000..f31e19be8
--- /dev/null
+++ b/src/examples/dev/basic/transparentBackground.js
@@ -0,0 +1,23 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ backgroundAlpha: 0, resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// create a new Sprite from an image path.
+const bunny = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
+
+// center the sprite's anchor point
+bunny.anchor.set(0.5);
+
+// move the sprite to the center of the screen
+bunny.x = app.screen.width / 2;
+bunny.y = app.screen.height / 2;
+
+app.stage.addChild(bunny);
+
+app.ticker.add(() =>
+{
+ // just for fun, let's rotate mr rabbit a little
+ bunny.rotation += 0.1;
+});
diff --git a/src/examples/dev/events/click.js b/src/examples/dev/events/click.js
new file mode 100644
index 000000000..24ab92686
--- /dev/null
+++ b/src/examples/dev/events/click.js
@@ -0,0 +1,36 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Scale mode for all textures, will retain pixelation
+PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
+
+const sprite = PIXI.Sprite.from('https://pixijs.com/assets/bunny.png');
+
+// Set the initial position
+sprite.anchor.set(0.5);
+sprite.x = app.screen.width / 2;
+sprite.y = app.screen.height / 2;
+
+// Opt-in to interactivity
+sprite.eventMode = 'static';
+
+// Shows hand cursor
+sprite.cursor = 'pointer';
+
+// Pointers normalize touch and mouse (good for mobile and desktop)
+sprite.on('pointerdown', onClick);
+
+// Alternatively, use the mouse & touch events:
+// sprite.on('click', onClick); // mouse-only
+// sprite.on('tap', onClick); // touch-only
+
+app.stage.addChild(sprite);
+
+function onClick()
+{
+ sprite.scale.x *= 1.25;
+ sprite.scale.y *= 1.25;
+}
diff --git a/src/examples/dev/events/customHitarea.js b/src/examples/dev/events/customHitarea.js
new file mode 100644
index 000000000..852b95e1c
--- /dev/null
+++ b/src/examples/dev/events/customHitarea.js
@@ -0,0 +1,116 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application(800, 600, { background: '#1099bb' });
+
+document.body.appendChild(app.view);
+
+const yellowStar = PIXI.Texture.from('https://pixijs.com/assets/yellowstar.png');
+
+// Standard Sprite Button
+const starButton1 = new PIXI.Sprite(yellowStar);
+
+starButton1.position.set(50, 200);
+starButton1.cursor = 'pointer';
+starButton1.eventMode = 'static';
+
+starButton1
+ .on('pointerdown', onClick, starButton1)
+ .on('pointerover', onPointerOver, starButton1)
+ .on('pointerout', onPointerOut, starButton1);
+
+// Custom Hitarea Button
+const starButton2 = new PIXI.Sprite(yellowStar);
+
+starButton2.position.set(250, 200);
+
+// Create a hitarea that matches the sprite, which will be used for point
+// intersection
+starButton2.hitArea = new PIXI.Polygon([
+ 80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50,
+]);
+starButton2.cursor = 'pointer';
+starButton2.eventMode = 'static';
+
+starButton2
+ .on('pointerdown', onClick, starButton2)
+ .on('pointerover', onPointerOver, starButton2)
+ .on('pointerout', onPointerOut, starButton2);
+
+// With Mask, No Hit Area
+const starButton3 = new PIXI.Sprite(yellowStar);
+
+starButton3.position.set(450, 200);
+starButton3.cursor = 'pointer';
+starButton3.eventMode = 'static';
+
+const squareMask = new PIXI.Graphics().beginFill(0xffffff).drawRect(starButton3.x, starButton3.y, 75, 200).endFill();
+
+starButton3.mask = squareMask;
+
+starButton3
+ .on('pointerdown', onClick, starButton3)
+ .on('pointerover', onPointerOver, starButton3)
+ .on('pointerout', onPointerOut, starButton3);
+
+// With a Mask and Hit Area
+// Hitareas ignore masks. You can still click on a button made in this way,
+// even from areas covered by a mask
+const starButton4 = new PIXI.Sprite(yellowStar);
+
+starButton4.position.set(600, 200);
+
+const squareMask2 = new PIXI.Graphics().beginFill(0xffffff).drawRect(starButton4.x, starButton4.y, 75, 200).endFill();
+
+starButton4.mask = squareMask2;
+
+// Again, hitarea for intersection checks
+starButton4.hitArea = new PIXI.Polygon([
+ 80, 0, 100, 50, 160, 55, 115, 95, 130, 150, 80, 120, 30, 150, 45, 95, 0, 55, 60, 50,
+]);
+starButton4.cursor = 'pointer';
+starButton4.eventMode = 'static';
+
+starButton4
+ .on('pointerdown', onClick, starButton4)
+ .on('pointerover', onPointerOver, starButton4)
+ .on('pointerout', onPointerOut, starButton4);
+
+const style = new PIXI.TextStyle({ fill: '#ffffff' });
+
+const text1 = new PIXI.Text('Standard', style);
+
+text1.x = starButton1.x + 25;
+text1.y = starButton1.y + 170;
+
+const text2 = new PIXI.Text('Hit Area', style);
+
+text2.x = starButton2.x + 35;
+text2.y = starButton2.y + 170;
+
+const text3 = new PIXI.Text('Mask', style);
+
+text3.x = starButton3.x + 10;
+text3.y = starButton3.y + 170;
+
+const text4 = new PIXI.Text('Mask + Hit Area', style);
+
+text4.x = starButton4.x - 10;
+text4.y = starButton4.y + 170;
+
+// Add to stage
+app.stage.addChild(starButton2, starButton1, starButton3, starButton4, squareMask, squareMask2, text1, text2, text3, text4);
+
+function onClick()
+{
+ this.tint = 0x333333;
+}
+
+function onPointerOver()
+{
+ this.tint = 0x666666;
+}
+
+function onPointerOut()
+{
+ this.tint = 0xffffff;
+}
diff --git a/src/examples/dev/events/customMouseIcon.js b/src/examples/dev/events/customMouseIcon.js
new file mode 100644
index 000000000..4e479cece
--- /dev/null
+++ b/src/examples/dev/events/customMouseIcon.js
@@ -0,0 +1,104 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Css style for icons
+const defaultIcon = 'url(\'https://pixijs.com/assets/bunny.png\'),auto';
+const hoverIcon = 'url(\'https://pixijs.com/assets/bunny_saturated.png\'),auto';
+
+// Add custom cursor styles
+app.renderer.events.cursorStyles.default = defaultIcon;
+app.renderer.events.cursorStyles.hover = hoverIcon;
+
+// create a background...
+const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_button.jpg');
+
+background.width = app.screen.width;
+background.height = app.screen.height;
+// add background to stage...
+app.stage.addChild(background);
+
+// create some textures from an image path
+const textureButton = PIXI.Texture.from('https://pixijs.com/assets/button.png');
+const textureButtonDown = PIXI.Texture.from('https://pixijs.com/assets/button_down.png');
+const textureButtonOver = PIXI.Texture.from('https://pixijs.com/assets/button_over.png');
+
+const buttons = [];
+
+const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445];
+
+for (let i = 0; i < 5; i++)
+{
+ const button = new PIXI.Sprite(textureButton);
+
+ button.cursor = 'hover';
+
+ button.anchor.set(0.5);
+ button.x = buttonPositions[i * 2];
+ button.y = buttonPositions[i * 2 + 1];
+
+ // make the button interactive...
+ button.eventMode = 'static';
+
+ button
+ .on('pointerdown', onButtonDown)
+ .on('pointerup', onButtonUp)
+ .on('pointerupoutside', onButtonUp)
+ .on('pointerover', onButtonOver)
+ .on('pointerout', onButtonOut);
+
+ // add it to the stage
+ app.stage.addChild(button);
+
+ // add button to array
+ buttons.push(button);
+}
+
+// set some silly values...
+buttons[0].scale.set(1.2);
+buttons[2].rotation = Math.PI / 10;
+buttons[3].scale.set(0.8);
+buttons[4].scale.set(0.8, 1.2);
+buttons[4].rotation = Math.PI;
+
+function onButtonDown()
+{
+ this.isdown = true;
+ this.texture = textureButtonDown;
+ this.alpha = 1;
+}
+
+function onButtonUp()
+{
+ this.isdown = false;
+ if (this.isOver)
+ {
+ this.texture = textureButtonOver;
+ }
+ else
+ {
+ this.texture = textureButton;
+ }
+}
+
+function onButtonOver()
+{
+ this.isOver = true;
+ if (this.isdown)
+ {
+ return;
+ }
+ this.texture = textureButtonOver;
+}
+
+function onButtonOut()
+{
+ this.isOver = false;
+ if (this.isdown)
+ {
+ return;
+ }
+ this.texture = textureButton;
+}
diff --git a/src/examples/dev/events/dragging.js b/src/examples/dev/events/dragging.js
new file mode 100644
index 000000000..010260eec
--- /dev/null
+++ b/src/examples/dev/events/dragging.js
@@ -0,0 +1,81 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// create a texture from an image path
+const texture = PIXI.Texture.from('https://pixijs.com/assets/bunny.png');
+
+// Scale mode for pixelation
+texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
+
+for (let i = 0; i < 10; i++)
+{
+ createBunny(Math.floor(Math.random() * app.screen.width), Math.floor(Math.random() * app.screen.height));
+}
+
+function createBunny(x, y)
+{
+ // create our little bunny friend..
+ const bunny = new PIXI.Sprite(texture);
+
+ // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
+ bunny.eventMode = 'static';
+
+ // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
+ bunny.cursor = 'pointer';
+
+ // center the bunny's anchor point
+ bunny.anchor.set(0.5);
+
+ // make it a bit bigger, so it's easier to grab
+ bunny.scale.set(3);
+
+ // setup events for mouse + touch using
+ // the pointer events
+ bunny.on('pointerdown', onDragStart, bunny);
+
+ // move the sprite to its designated position
+ bunny.x = x;
+ bunny.y = y;
+
+ // add it to the stage
+ app.stage.addChild(bunny);
+}
+
+let dragTarget = null;
+
+app.stage.eventMode = 'static';
+app.stage.hitArea = app.screen;
+app.stage.on('pointerup', onDragEnd);
+app.stage.on('pointerupoutside', onDragEnd);
+
+function onDragMove(event)
+{
+ if (dragTarget)
+ {
+ dragTarget.parent.toLocal(event.global, null, dragTarget.position);
+ }
+}
+
+function onDragStart()
+{
+ // store a reference to the data
+ // the reason for this is because of multitouch
+ // we want to track the movement of this particular touch
+ // this.data = event.data;
+ this.alpha = 0.5;
+ dragTarget = this;
+ app.stage.on('pointermove', onDragMove);
+}
+
+function onDragEnd()
+{
+ if (dragTarget)
+ {
+ app.stage.off('pointermove', onDragMove);
+ dragTarget.alpha = 1;
+ dragTarget = null;
+ }
+}
diff --git a/src/examples/dev/events/hitTestingWithSpatialHash.js b/src/examples/dev/events/hitTestingWithSpatialHash.js
new file mode 100644
index 000000000..54ac85f1d
--- /dev/null
+++ b/src/examples/dev/events/hitTestingWithSpatialHash.js
@@ -0,0 +1,219 @@
+import * as PIXI from 'pixi.js';
+
+// This example shows how you can create your own EventBoundary to accelerate
+// hit-testing using spatial hashes. This can be used to optimize relatively
+// "flat" scene graphs, where a container contains so many objects that it
+// covers the whole scene.
+
+// This special event boundary overrides the hit-testing implementation to use
+// HashingContainer's own childHash to find children near the pointer
+// location.
+class HashingEventBoundary extends PIXI.EventBoundary
+{
+ constructor(...args)
+ {
+ super(...args);
+ // Create reusable temp rectangle for hit-testing!
+ this.tempRect = new PIXI.Rectangle();
+ }
+
+ hitTestRecursive(currentTarget, interactive, location, testFn, pruneFn)
+ {
+ // If currentTarget isn't a HashingContainer, then default to the
+ // regular hit-testing implementation provided by PixiJS.
+ if (!currentTarget || !currentTarget.visible || !currentTarget.childHash)
+ {
+ return super.hitTestRecursive(currentTarget, interactive, location, testFn, pruneFn);
+ }
+
+ // Check if the location is outside of the entire container
+ if (pruneFn(currentTarget, location)) return null;
+
+ // Time to get recursive and find the next child in the propagation
+ // path of the event, accelerated using the childHash.
+ if (currentTarget.interactiveChildren)
+ {
+ /* This is where the magic happens! */
+ const tempRect = this.tempRect;
+
+ // Store the location as a 0x0 rectangle. SpatialHash requires a
+ // rectangle for searching.
+ tempRect.x = location.x;
+ tempRect.y = location.y;
+
+ // Find all the children overlapping with tempRect a.k.a location,
+ // and then sort them by their index in the HashingContainer's
+ // children array.
+ const children = Array.from(currentTarget.childHash.search(tempRect)).sort((a, b) => a.refIndex - b.refIndex);
+
+ /* The following is copied from EventBoundary's code. */
+ for (let i = children.length - 1; i >= 0; i--)
+ {
+ const child = children[i];
+ const nestedHit = this.hitTestRecursive(child, interactive || child.interactive, location, testFn, pruneFn);
+
+ if (nestedHit)
+ {
+ // Its a good idea to check if a child has lost its
+ // parent. this means it has been removed whilst looping
+ // so its best
+ if (nestedHit.length > 0 && !nestedHit[nestedHit.length - 1].parent)
+ {
+ // eslint-disable-next-line no-continue
+ continue;
+ }
+
+ // Only add the current hit-test target to the hit-test
+ // chain if the chain has already started (i.e. the event
+ // target has been found) or if the current target is
+ // interactive (i.e. it becomes the event target).
+ if (nestedHit.length > 0 || currentTarget.interactive)
+ {
+ nestedHit.push(currentTarget);
+ }
+
+ return nestedHit;
+ }
+ }
+ }
+
+ /* The following is copied from EventBoundary's own implementation. */
+
+ // Finally, hit test this DisplayObject itself.
+ if (interactive && testFn(currentTarget, location))
+ {
+ // The current hit-test target is the event's target only if it
+ // is interactive. Otherwise, the first interactive ancestor will
+ // be the event's target.
+ return currentTarget.interactive ? [currentTarget] : [];
+ }
+
+ return null;
+ }
+}
+
+// HashingContainer is a special kind of container that organizes its children
+// in a spatial hash. It also sets each child's refIndex property to its index
+// in the hashing container's children array.
+class HashingContainer extends PIXI.Container
+{
+ constructor()
+ {
+ super();
+ this.childHash = new PIXI.SpatialHash();
+ }
+
+ // Override updateTransform to update this.childHash!
+ updateTransform()
+ {
+ super.updateTransform();
+
+ // Reset childHash & re-add all the children. This will
+ // make the spatial hash re-evaluate the coverage of each child.
+ this.childHash.reset();
+ for (let i = 0; i < this.children.length; i++)
+ {
+ const child = this.children[i];
+
+ this.childHash.put(child);
+ child.refIndex = i;
+ }
+ }
+}
+
+// This is the actual program using HashingEventBoundary, HashingContainer.
+function main()
+{
+ // Create app. autoStart = false so that the app doesn't render until
+ // something changes - this prevents redundant spatial-hash updates.
+ const app = new PIXI.Application({
+ antialias: true,
+ autoStart: false,
+ background: '#1099bb',
+ });
+
+ document.body.appendChild(app.view);
+
+ // Install our own EventBoundary!
+ app.renderer.events.rootBoundary = new HashingEventBoundary(app.stage);
+
+ // Make the hashing container
+ const container = app.stage.addChild(new HashingContainer());
+ // Textures to choose from for each random character
+ const textures = [
+ PIXI.Texture.from('https://pixijs.com/assets/skully.png'),
+ PIXI.Texture.from('https://pixijs.com/assets/eggHead.png'),
+ PIXI.Texture.from('https://pixijs.com/assets/flowerTop.png'),
+ PIXI.Texture.from('https://pixijs.com/assets/helmlok.png'),
+ ];
+ // Rerender scene when each texture loads
+
+ textures.forEach((tex) => tex.baseTexture.once('loaded', () => app.render()));
+
+ // Populate the hashing container!
+ function makeMonster(x, y)
+ {
+ const texture = textures[Math.floor(Math.random() * textures.length)];
+ const sprite = new PIXI.Sprite(texture);
+
+ // Randomly place the character
+ sprite.position.set(
+ x || Math.random() * (app.screen.width - 64),
+ y || 64 + Math.random() * (app.screen.height - 128),
+ );
+
+ // Make character smaller so we can have a bunch of 'em
+ sprite.scale.set(0.34);
+
+ // Make the character interactive!
+ sprite.eventMode = 'static';
+
+ // Explode on clicks!
+ sprite.addEventListener('click', onMonsterClicked);
+
+ container.addChild(sprite);
+
+ return sprite;
+ }
+ function onMonsterClicked(e)
+ {
+ const monster = this;
+ const pos = monster.position;
+ const radius = Math.max(monster.width, monster.height) * 2;
+
+ // Remove monster from scene once the event finishes propagating.
+ e.manager.dispatch.once('click', () =>
+ {
+ // TODO: Fix PixiJS throwing errors since the monster is removed
+ // from scene graph while was under hover.
+
+ monster.parent.removeChild(monster);
+ PIXI.Ticker.shared.addOnce(() => app.render());
+ });
+
+ for (let i = 0; i < 8; i++)
+ {
+ const x = pos.x + radius * Math.cos((i * Math.PI) / 4);
+ const y = pos.y + radius * Math.sin((i * Math.PI) / 4);
+
+ makeMonster(x, y);
+ }
+ }
+ // Make initial set of monsters
+ for (let i = 0; i < 100; i++) makeMonster();
+
+ // Add a descriptive title
+ const title = app.stage.addChild(
+ new PIXI.Text('Click on a monster and see it explode into more!', {
+ fontSize: 12,
+ }),
+ );
+
+ title.position.set(12, 12);
+
+ // Render the stage once
+ app.render();
+}
+
+// Run our program!
+main();
diff --git a/src/examples/dev/events/interactivity.js b/src/examples/dev/events/interactivity.js
new file mode 100644
index 000000000..665e0f752
--- /dev/null
+++ b/src/examples/dev/events/interactivity.js
@@ -0,0 +1,111 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// create a background...
+const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_button.jpg');
+
+background.width = app.screen.width;
+background.height = app.screen.height;
+
+// add background to stage...
+app.stage.addChild(background);
+
+// create some textures from an image path
+const textureButton = PIXI.Texture.from('https://pixijs.com/assets/button.png');
+const textureButtonDown = PIXI.Texture.from('https://pixijs.com/assets/button_down.png');
+const textureButtonOver = PIXI.Texture.from('https://pixijs.com/assets/button_over.png');
+
+const buttons = [];
+
+const buttonPositions = [175, 75, 655, 75, 410, 325, 150, 465, 685, 445];
+
+for (let i = 0; i < 5; i++)
+{
+ const button = new PIXI.Sprite(textureButton);
+
+ button.anchor.set(0.5);
+ button.x = buttonPositions[i * 2];
+ button.y = buttonPositions[i * 2 + 1];
+
+ // make the button interactive...
+ button.eventMode = 'static';
+ button.cursor = 'pointer';
+
+ button
+ // Mouse & touch events are normalized into
+ // the pointer* events for handling different
+ // button events.
+ .on('pointerdown', onButtonDown)
+ .on('pointerup', onButtonUp)
+ .on('pointerupoutside', onButtonUp)
+ .on('pointerover', onButtonOver)
+ .on('pointerout', onButtonOut);
+
+ // Use mouse-only events
+ // .on('mousedown', onButtonDown)
+ // .on('mouseup', onButtonUp)
+ // .on('mouseupoutside', onButtonUp)
+ // .on('mouseover', onButtonOver)
+ // .on('mouseout', onButtonOut)
+
+ // Use touch-only events
+ // .on('touchstart', onButtonDown)
+ // .on('touchend', onButtonUp)
+ // .on('touchendoutside', onButtonUp)
+
+ // add it to the stage
+ app.stage.addChild(button);
+
+ // add button to array
+ buttons.push(button);
+}
+
+// set some silly values...
+buttons[0].scale.set(1.2);
+buttons[2].rotation = Math.PI / 10;
+buttons[3].scale.set(0.8);
+buttons[4].scale.set(0.8, 1.2);
+buttons[4].rotation = Math.PI;
+
+function onButtonDown()
+{
+ this.isdown = true;
+ this.texture = textureButtonDown;
+ this.alpha = 1;
+}
+
+function onButtonUp()
+{
+ this.isdown = false;
+ if (this.isOver)
+ {
+ this.texture = textureButtonOver;
+ }
+ else
+ {
+ this.texture = textureButton;
+ }
+}
+
+function onButtonOver()
+{
+ this.isOver = true;
+ if (this.isdown)
+ {
+ return;
+ }
+ this.texture = textureButtonOver;
+}
+
+function onButtonOut()
+{
+ this.isOver = false;
+ if (this.isdown)
+ {
+ return;
+ }
+ this.texture = textureButton;
+}
diff --git a/src/examples/dev/events/logger.js b/src/examples/dev/events/logger.js
new file mode 100644
index 000000000..a76c32f0c
--- /dev/null
+++ b/src/examples/dev/events/logger.js
@@ -0,0 +1,86 @@
+import * as PIXI from 'pixi.js';
+
+// This example logs the order of events hover-related events in the scene.
+const app = new PIXI.Application({
+ antialias: true,
+ background: '#1099bb',
+});
+
+document.body.appendChild(app.view);
+
+const title = app.stage.addChild(
+ new PIXI.Text(
+ `Move your mouse slowly over the boxes to
+ see the order of pointerenter, pointerleave,
+ pointerover, pointerout events on each target!`,
+ {
+ fontSize: 16,
+ },
+ ),
+);
+
+title.x = 2;
+
+const logs = [];
+const logText = app.stage.addChild(
+ new PIXI.Text('', {
+ fontSize: 14,
+ }),
+);
+
+logText.y = 80;
+logText.x = 2;
+
+app.stage.name = 'stage';
+
+// Mount outer black box
+const blackBox = app.stage.addChild(new PIXI.Graphics().beginFill(0).drawRect(0, 0, 400, 400).endFill());
+
+blackBox.name = 'black box';
+blackBox.x = 400;
+
+// Mount white box inside the white one
+const whiteBox = blackBox.addChild(new PIXI.Graphics().beginFill(0xffffff).drawRect(100, 100, 200, 200).endFill());
+
+whiteBox.name = 'white box';
+
+// Enable interactivity everywhere!
+app.stage.eventMode = 'static';
+app.stage.hitArea = app.screen;
+whiteBox.eventMode = 'static';
+blackBox.eventMode = 'static';
+
+function onEvent(e)
+{
+ const type = e.type;
+ const targetName = e.target.name;
+ const currentTargetName = e.currentTarget.name;
+
+ // Add event to top of logs
+ logs.push(`${currentTargetName} received ${type} event (target is ${targetName})`);
+
+ if (currentTargetName === 'stage' || type === 'pointerenter' || type === 'pointerleave')
+ {
+ logs.push('-----------------------------------------', '');
+ }
+
+ // Prevent logs from growing too long
+ if (logs.length > 30)
+ {
+ while (logs.length > 30)
+ {
+ logs.shift();
+ }
+ }
+
+ // Update logText
+ logText.text = logs.join('\n');
+}
+
+[app.stage, whiteBox, blackBox].forEach((object) =>
+{
+ object.addEventListener('pointerenter', onEvent);
+ object.addEventListener('pointerleave', onEvent);
+ object.addEventListener('pointerover', onEvent);
+ object.addEventListener('pointerout', onEvent);
+});
diff --git a/src/examples/dev/events/nestedBoundaryWithProjection.js b/src/examples/dev/events/nestedBoundaryWithProjection.js
new file mode 100644
index 000000000..430a192ca
--- /dev/null
+++ b/src/examples/dev/events/nestedBoundaryWithProjection.js
@@ -0,0 +1,231 @@
+import * as PIXI from 'pixi.js';
+import '@pixi/graphics-extras';
+
+// This example shows how you can setup a nested boundary to propagate events
+// into a disjoint scene graph. Here, a camera is used to project an different
+// world onto the canvas.
+
+const app = new PIXI.Application({
+ antialias: true,
+ background: '#1099bb',
+});
+
+document.body.appendChild(app.view);
+
+// A projector renders it's content using projection. The transforms in
+// the contents scene graph don't change if you move the camera. To achieve
+// this, the content is not added as a "child" to the projector; however, this
+// means events won't propagate into the content by default.
+//
+// To solve this, we nest our own EventBoundary, and connect it using
+// addEventListener!
+class Projector extends PIXI.DisplayObject
+{
+ constructor()
+ {
+ super();
+
+ // The content root to be rendered by this camera.
+ this.content = new PIXI.Container();
+
+ // Temporary matrix to store the original projection transform.
+ this.originalTransform = new PIXI.Matrix();
+
+ // The event boundary that'll map events downstream into the content
+ // scene.
+ this.boundary = new PIXI.EventBoundary(this.content);
+
+ // Override copyMouseData to apply inverse worldTransform on
+ // global coords
+ this.boundary.copyMouseData = (from, to) =>
+ {
+ // Apply default implementation first
+ PIXI.EventBoundary.prototype.copyMouseData.call(this.boundary, from, to);
+
+ // 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!
+ ['pointerdown', 'pointerup', 'pointermove', 'pointerover', 'pointerout', 'wheel'].forEach((event) =>
+ {
+ this.addEventListener(event, (e) => this.boundary.mapEvent(e));
+ });
+
+ this.eventMode = 'static';
+ }
+
+ // Pass through cursor
+ get cursor()
+ {
+ return this.boundary.cursor;
+ }
+
+ // eslint-disable-next-line class-methods-use-this
+ set cursor(value)
+ {
+ throw new Error('The camera\'s cursor is derived from its content!');
+ }
+
+ // Pass through calculateBounds
+ calculateBounds()
+ {
+ const contentBounds = this.content.getBounds();
+
+ this._bounds.addFrameMatrix(
+ this.worldTransform,
+ contentBounds.x,
+ contentBounds.y,
+ contentBounds.width,
+ contentBounds.height,
+ );
+ }
+
+ // Pass through containsPoint
+ containsPoint(point)
+ {
+ return !!this.boundary.hitTest(point.x, point.y);
+ }
+
+ // Render content with projection
+ render(renderer)
+ {
+ renderer.batch.flush();
+
+ const projectionSystem = renderer.projection;
+ const renderTextureSystem = renderer.renderTexture;
+
+ projectionSystem.transform = projectionSystem.transform || new PIXI.Matrix();
+ projectionSystem.transform.copyTo(this.originalTransform);
+ projectionSystem.transform.append(this.worldTransform);
+ projectionSystem.update(null, null, 1, !renderTextureSystem.current);
+
+ this.content.render(renderer);
+
+ renderer.batch.flush();
+
+ projectionSystem.transform.copyFrom(this.originalTransform);
+ projectionSystem.update(null, null, 1, !renderTextureSystem.current);
+ }
+
+ // updateTransform also updates content's transform
+ updateTransform()
+ {
+ super.updateTransform();
+
+ this.content.enableTempParent();
+ this.content.updateTransform();
+ this.content.disableTempParent(null);
+ }
+}
+
+// The projector
+const projector = app.stage.addChild(new Projector());
+
+// Add coordinate axes!
+projector.content.addChild(
+ new PIXI.Graphics()
+ .lineStyle({ color: 0, alpha: 0.2, width: 2 })
+ .moveTo(0, -300)
+ .lineTo(0, 600)
+ .moveTo(-100, 0)
+ .lineTo(700, 0),
+);
+
+// Construct the star Graphics
+const stars = [1, 2, 3].map((i) => new PIXI.Graphics().beginFill(0xffffff, 0.75).drawStar(0, 0, 18 / i, (100 * i) / 2));
+
+// Place the stars
+stars[0].x = 0;
+stars[1].x = 200;
+stars[2].x = 500;
+
+// Add stars to the projector
+projector.content.addChild(...stars);
+
+// Make projection x+100, y+300
+projector.x = 100;
+projector.y = 300;
+projector.content.hitArea = new PIXI.Rectangle(-100, -300, app.screen.width, app.screen.height);
+// Make hit-area cover the whole screen so we can capture
+// pointermove everywhere!
+projector.hitArea = projector.content.hitArea;
+projector.content.eventMode = 'static';
+
+// Make stars interactive & add wheel handlers
+stars.forEach((star) =>
+{
+ // Make star interactive
+ star.eventMode = 'static';
+
+ // Set initial cursor
+ star.cursor = 'zoom-in';
+
+ // Add wheel rotation feedback
+ star.addEventListener('wheel', (e) =>
+ {
+ const scroll = Math.sign(e.deltaY) * Math.min(15, Math.abs(e.deltaY));
+
+ star.rotation += scroll / 100;
+ });
+
+ // Add click zoom-in/zoom-out handler
+ star.addEventListener('click', (e) =>
+ {
+ if (star.scale.x === 1)
+ {
+ star.scale.set(1.33);
+ star.cursor = 'zoom-out';
+ }
+ else
+ {
+ star.scale.set(1);
+ star.cursor = 'zoom-in';
+ }
+ });
+});
+
+PIXI.BitmapFont.from(
+ 'coordinates',
+ {
+ fontFamily: 'Roboto',
+ fontSize: 16,
+ fill: '#272d37',
+ },
+ { chars: ['Global:() Screen-.,', ['0', '9']] },
+);
+
+const coordinates = new PIXI.BitmapText('Global: (0, 0)\nScreen: (0, 0)', {
+ fontName: 'coordinates',
+});
+
+coordinates.x = 110;
+coordinates.y = 550;
+
+app.stage.addChild(coordinates);
+
+projector.content.addEventListener('pointermove', (e) =>
+{
+ const global = `(${e.global.x | 0}, ${e.global.y | 0})`;
+ const screen = `(${e.screen.x | 0}, ${e.screen.y | 0})`;
+
+ coordinates.text = `Global: ${global}\nScreen: ${screen}`;
+});
+
+const description = new PIXI.Text(
+ 'The (0, 0) world coordinates for the content is located at the center of the first star!'
+ + '\n * Mouse wheel over stars to rotate them'
+ + '\n * Click to zoom in or out',
+ {
+ fontSize: 16,
+ fontFamily: 'Roboto',
+ fill: '#272d37',
+ },
+);
+
+description.position.set(110, 12);
+
+app.stage.addChild(description);
diff --git a/src/examples/dev/events/pointerTracker.js b/src/examples/dev/events/pointerTracker.js
new file mode 100644
index 000000000..97c805c8b
--- /dev/null
+++ b/src/examples/dev/events/pointerTracker.js
@@ -0,0 +1,34 @@
+import * as PIXI from 'pixi.js';
+
+// In this a example, a circle will follow the pointer wherever it
+// moves over the canvas.
+
+const app = new PIXI.Application({
+ antialias: true,
+ background: '#1099bb',
+});
+
+document.body.appendChild(app.view);
+
+// Create the circle
+const circle = app.stage.addChild(
+ new PIXI.Graphics()
+ .beginFill(0xffffff)
+ .lineStyle({ color: 0x111111, alpha: 0.87, width: 1 })
+ .drawCircle(0, 0, 8)
+ .endFill(),
+);
+
+circle.position.set(app.screen.width / 2, app.screen.height / 2);
+
+// Enable interactivity!
+app.stage.eventMode = 'static';
+
+// Make sure the whole canvas area is interactive, not just the circle.
+app.stage.hitArea = app.screen;
+
+// Follow the pointer
+app.stage.addEventListener('pointermove', (e) =>
+{
+ circle.position.copyFrom(e.global);
+});
diff --git a/src/examples/dev/events/slider.js b/src/examples/dev/events/slider.js
new file mode 100644
index 000000000..1d1848d24
--- /dev/null
+++ b/src/examples/dev/events/slider.js
@@ -0,0 +1,84 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({
+ antialias: true,
+ background: '#1099bb',
+});
+
+document.body.appendChild(app.view);
+
+const stageHeight = app.screen.height;
+const stageWidth = app.screen.width;
+
+// Make sure stage covers the whole scene
+app.stage.hitArea = app.screen;
+
+// Make the slider
+const sliderWidth = 320;
+const slider = new PIXI.Graphics().beginFill(0x272d37).drawRect(0, 0, sliderWidth, 4);
+
+slider.x = (stageWidth - sliderWidth) / 2;
+slider.y = stageHeight * 0.75;
+
+// Draw the handle
+const handle = new PIXI.Graphics().beginFill(0xffffff).drawCircle(0, 0, 8);
+
+handle.y = slider.height / 2;
+handle.x = sliderWidth / 2;
+handle.eventMode = 'static';
+handle.cursor = 'pointer';
+
+handle.on('pointerdown', onDragStart).on('pointerup', onDragEnd).on('pointerupoutside', onDragEnd);
+
+app.stage.addChild(slider);
+slider.addChild(handle);
+
+// Add bunny whose scale can be changed by user using slider
+const bunny = app.stage.addChild(PIXI.Sprite.from('https://pixijs.com/assets/bunny.png'));
+
+bunny.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
+bunny.scale.set(3);
+bunny.anchor.set(0.5);
+bunny.x = stageWidth / 2;
+bunny.y = stageHeight / 2;
+
+// Add title
+const title = new PIXI.Text('Drag the handle to change the scale of bunny.', {
+ fill: '#272d37',
+ fontFamily: 'Roboto',
+ fontSize: 20,
+ align: 'center',
+});
+
+title.roundPixels = true;
+title.x = stageWidth / 2;
+title.y = 40;
+title.anchor.set(0.5, 0);
+app.stage.addChild(title);
+
+// Listen to pointermove on stage once handle is pressed.
+function onDragStart()
+{
+ app.stage.eventMode = 'static';
+ app.stage.addEventListener('pointermove', onDrag);
+}
+
+// Stop dragging feedback once the handle is released.
+function onDragEnd(e)
+{
+ app.stage.eventMode = 'auto';
+ app.stage.removeEventListener('pointermove', onDrag);
+}
+
+// Update the handle's position & bunny's scale when the handle is moved.
+function onDrag(e)
+{
+ const halfHandleWidth = handle.width / 2;
+ // Set handle y-position to match pointer, clamped to (4, screen.height - 4).
+
+ handle.x = Math.max(halfHandleWidth, Math.min(slider.toLocal(e.global).x, sliderWidth - halfHandleWidth));
+ // Normalize handle position between -1 and 1.
+ const t = 2 * (handle.x / sliderWidth - 0.5);
+
+ bunny.scale.set(3 * (1.1 + t));
+}
diff --git a/src/examples/dev/examplesData.json b/src/examples/dev/examplesData.json
new file mode 100644
index 000000000..50a3f3d4d
--- /dev/null
+++ b/src/examples/dev/examplesData.json
@@ -0,0 +1,108 @@
+{
+ "basic": [
+ "container",
+ "transparentBackground",
+ "tinting",
+ "cacheAsBitmap",
+ "particleContainer",
+ "blendModes",
+ "simplePlane"
+ ],
+ "advanced": [
+ "slots",
+ "scratchCard",
+ "starWarp",
+ "mouseTrail",
+ "screenShot",
+ "collisionDetection",
+ "spinners"
+ ],
+ "sprite": [
+ "basic",
+ "textureSwap",
+ "animatedSpriteExplosion",
+ "animatedSpriteJet",
+ "animatedSpriteAnimationSpeed",
+ "tilingSprite",
+ "video"
+ ],
+ "text": [
+ "pixiText",
+ "bitmapText",
+ "fromFont",
+ "webFont"
+ ],
+ "graphics": [
+ "simple",
+ "advanced",
+ "dynamic"
+ ],
+ "events": [
+ "click",
+ "interactivity",
+ "dragging",
+ "customMouseIcon",
+ "customHitarea",
+ {
+ "name": "hitTestingWithSpatialHash",
+ "hide": true
+ },
+ "logger",
+ "nestedBoundaryWithProjection",
+ "pointerTracker",
+ "slider"
+ ],
+ "masks": [
+ "graphics",
+ "sprite",
+ "filter"
+ ],
+ "filtersBasic": [
+ "blur",
+ "colorMatrix",
+ "displacementMapCrawlies",
+ "displacementMapFlag"
+ ],
+ "filtersAdvanced": [
+ "mouseBlending",
+ "custom",
+ "shaderToyFilterRenderTexture"
+ ],
+ "meshAndShaders": [
+ "texturedMeshBasic",
+ "texturedMeshAdvanced",
+ "triangle",
+ "triangleColor",
+ "triangleTextured",
+ "uniforms",
+ "sharingGeometry",
+ "sharedShader",
+ "mergingGeometry",
+ "interleavingGeometry",
+ "instancedGeometry",
+ "shaderToyMesh",
+ "multiPassShaderGeneratedMesh"
+ ],
+ "textures": [
+ "textureRotate",
+ "renderTextureBasic",
+ "renderTextureAdvanced",
+ "gradientBasic",
+ "gradientResource"
+ ],
+ "assets": [
+ "promise",
+ "async",
+ "multiple",
+ "background",
+ "bundle"
+ ],
+ "offscreenCanvas": [
+ "basic",
+ {
+ "name": "webWorker",
+ "hide": true,
+ "usesWebWorkerLibrary": true
+ }
+ ]
+}
diff --git a/src/examples/dev/filtersAdvanced/custom.js b/src/examples/dev/filtersAdvanced/custom.js
new file mode 100644
index 000000000..ba3733dc8
--- /dev/null
+++ b/src/examples/dev/filtersAdvanced/custom.js
@@ -0,0 +1,47 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Create background image
+const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_grass.jpg');
+
+background.width = app.screen.width;
+background.height = app.screen.height;
+app.stage.addChild(background);
+
+// Stop application wait for load to finish
+app.stop();
+
+fetch('https://pixijs.com/assets/pixi-filters/shader.frag')
+ .then((res) => res.text())
+ .then(onLoaded);
+
+let filter;
+
+// Handle the load completed
+function onLoaded(data)
+{
+ // Create the new filter, arguments: (vertexShader, framentSource)
+ filter = new PIXI.Filter(null, data, {
+ customUniform: 0.0,
+ });
+
+ // === WARNING ===
+ // specify uniforms in filter constructor
+ // or set them BEFORE first use
+ // filter.uniforms.customUniform = 0.0
+
+ // Add the filter
+ background.filters = [filter];
+
+ // Resume application update
+ app.start();
+}
+
+// Animate the filter
+app.ticker.add((delta) =>
+{
+ filter.uniforms.customUniform += 0.04 * delta;
+});
diff --git a/src/examples/dev/filtersAdvanced/mouseBlending.js b/src/examples/dev/filtersAdvanced/mouseBlending.js
new file mode 100644
index 000000000..34b2239d9
--- /dev/null
+++ b/src/examples/dev/filtersAdvanced/mouseBlending.js
@@ -0,0 +1,58 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * https://github.com/pixijs/pixi.js/wiki/v5-Creating-Filters
+ */
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+// Create background image
+const background = PIXI.Sprite.from('https://pixijs.com/assets/bg_grass.jpg');
+
+background.width = app.screen.width;
+background.height = app.screen.height;
+app.stage.addChild(background);
+
+// NOTE: this shader wont work on old devices where mediump precision is forced in fragment shader
+// because v5 default vertex shader uses `inputSize` in it. Same uniform in fragment and vertex shader
+// cant have different precision :(
+
+const shaderFrag = `
+precision highp float;
+
+varying vec2 vTextureCoord;
+
+uniform vec2 mouse;
+uniform vec4 inputSize;
+uniform vec4 outputFrame;
+uniform float time;
+
+void main() {
+ vec2 screenPos = vTextureCoord * inputSize.xy + outputFrame.xy;
+ if (length(mouse - screenPos) < 25.0) {
+ gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0) * 0.7; //yellow circle, alpha=0.7
+ } else {
+ // blend with underlying image, alpha=0.5
+ gl_FragColor = vec4( sin(time), (mouse.xy - outputFrame.xy) / outputFrame.zw, 1.0) * 0.5;
+ }
+}
+`;
+
+const container = new PIXI.Container();
+
+container.filterArea = new PIXI.Rectangle(100, 100, app.screen.width - 200, app.screen.height - 200);
+app.stage.addChild(container);
+const filter = new PIXI.Filter(null, shaderFrag, {
+ mouse: new PIXI.Point(),
+});
+
+container.filters = [filter];
+
+app.stage.hitArea = app.screen;
+app.stage.eventMode = 'static';
+app.stage.on('pointermove', (event) =>
+{
+ filter.uniforms.mouse.copyFrom(event.global);
+});
diff --git a/src/examples/dev/filtersAdvanced/shaderToyFilterRenderTexture.js b/src/examples/dev/filtersAdvanced/shaderToyFilterRenderTexture.js
new file mode 100644
index 000000000..2e26310a9
--- /dev/null
+++ b/src/examples/dev/filtersAdvanced/shaderToyFilterRenderTexture.js
@@ -0,0 +1,116 @@
+import * as PIXI from 'pixi.js';
+
+/**
+ * Please note that this is not the most optimal way of doing pure shader generated rendering and should be used when the
+ * scene is wanted as input texture. Check the mesh version of example for more performant version if you need only shader
+ * generated content.
+ **/
+const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });
+
+document.body.appendChild(app.view);
+
+PIXI.Assets.load('https://pixijs.com/assets/perlin.jpg').then(onAssetsLoaded);
+
+let filter = null;
+
+const text = new PIXI.Text('PixiJS', { fill: 0xffffff, fontSize: 80 });
+
+text.anchor.set(0.5, 0.5);
+text.position.set(app.renderer.screen.width / 2, app.renderer.screen.height / 2);
+
+app.stage.addChild(text);
+
+let totalTime = 0;
+
+// Fragment shader, in real use this would be much cleaner when loaded from a file
+// or embedded into the application as data resource.
+const fragment = `//Based on this: https://www.shadertoy.com/view/wtlSWX
+
+varying vec2 vTextureCoord;
+uniform sampler2D uSampler;
+uniform sampler2D noise;
+uniform float time;
+// Distance function. Just calculates the height (z) from x,y plane with really simple length check.
+// Its not exact as there could be shorter distances.
+vec2 dist(vec3 p)
+{
+ float id = floor(p.x)+floor(p.y);
+ id = mod(id, 2.);
+ float h = texture2D(noise, vec2(p.x, p.y)*0.04).r*5.1;
+ float h2 = texture2D(uSampler, vTextureCoord).r;
+ return vec2(h+h2-p.z,id);
+}
+//Light calculation.
+vec3 calclight(vec3 p, vec3 rd)
+{
+ vec2 eps = vec2( 0., 0.001);
+ vec3 n = normalize( vec3(
+ dist(p+eps.yxx).x - dist(p-eps.yxx).x,
+ dist(p+eps.xyx).x - dist(p-eps.xyx).x,
+ dist(p+eps.xxy).x - dist(p-eps.xxy).x
+ ));
+
+ vec3 d = vec3( max( 0., dot( -rd ,n)));
+
+ return d;
+}
+
+void main()
+{
+ vec2 uv = vec2(vTextureCoord.x, 1.-vTextureCoord.y);
+ uv *=2.;
+ uv-=1.;
+
+ vec3 cam = vec3(0.,time -2., -3.);
+ vec3 target = vec3(sin(time)*0.1, time+cos(time)+2., 0. );
+ float fov = 2.2;
+ vec3 forward = normalize( target - cam);
+ vec3 up = normalize(cross( forward, vec3(0., 1.,0.)));
+ vec3 right = normalize( cross( up, forward));
+ vec3 raydir = normalize(vec3( uv.x *up + uv.y * right + fov*forward));
+
+ //Do the raymarch
+ vec3 col = vec3(0.);
+ float t = 0.;
+ for( int i = 0; i < 100; i++)
+ {
+ vec3 p = t * raydir + cam;
+ vec2 d = dist(p);
+ t+=d.x*0.5;//Jump only half of the distance as height function used is not really the best for heightmaps.
+ if(d.x < 0.001)
+ {
+ vec3 bc = d.y < 0.5 ? vec3(1.0, .8, 0.) :
+ vec3(0.8,0.0, 1.0);
+ col = vec3( 1.) * calclight(p, raydir) * (1. - t/150.) *bc;
+ break;
+ }
+ if(t > 1000.)
+ {
+ break;
+ }
+ }
+ gl_FragColor = vec4(col, 1.);
+}
+`;
+
+function onAssetsLoaded(perlin)
+{
+ // Add perlin noise for filter, make sure it's wrapping and does not have mipmap.
+ perlin.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
+ perlin.baseTexture.mipmap = false;
+
+ // Build the filter
+ filter = new PIXI.Filter(null, fragment, {
+ time: 0.0,
+ noise: perlin,
+ });
+ app.stage.filterArea = app.renderer.screen;
+ app.stage.filters = [filter];
+
+ // Listen for animate update.
+ app.ticker.add((delta) =>
+ {
+ filter.uniforms.time = totalTime;
+ totalTime += delta / 60;
+ });
+}
diff --git a/src/examples/dev/filtersBasic/blur.js b/src/examples/dev/filtersBasic/blur.js
new file mode 100644
index 000000000..9557f45bf
--- /dev/null
+++ b/src/examples/dev/filtersBasic/blur.js
@@ -0,0 +1,42 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const bg = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/bg_depth_blur.jpg');
+
+bg.width = app.screen.width;
+bg.height = app.screen.height;
+app.stage.addChild(bg);
+
+const littleDudes = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/depth_blur_dudes.jpg');
+
+littleDudes.x = app.screen.width / 2 - 315;
+littleDudes.y = 200;
+app.stage.addChild(littleDudes);
+
+const littleRobot = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/depth_blur_moby.jpg');
+
+littleRobot.x = app.screen.width / 2 - 200;
+littleRobot.y = 100;
+app.stage.addChild(littleRobot);
+
+const blurFilter1 = new PIXI.filters.BlurFilter();
+const blurFilter2 = new PIXI.filters.BlurFilter();
+
+littleDudes.filters = [blurFilter1];
+littleRobot.filters = [blurFilter2];
+
+let count = 0;
+
+app.ticker.add(() =>
+{
+ count += 0.005;
+
+ const blurAmount = Math.cos(count);
+ const blurAmount2 = Math.sin(count);
+
+ blurFilter1.blur = 20 * blurAmount;
+ blurFilter2.blur = 20 * blurAmount2;
+});
diff --git a/src/examples/dev/filtersBasic/colorMatrix.js b/src/examples/dev/filtersBasic/colorMatrix.js
new file mode 100644
index 000000000..1ef11e814
--- /dev/null
+++ b/src/examples/dev/filtersBasic/colorMatrix.js
@@ -0,0 +1,90 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+app.stage.eventMode = 'static';
+
+const bg = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg');
+
+bg.anchor.set(0.5);
+
+bg.x = app.screen.width / 2;
+bg.y = app.screen.height / 2;
+
+const filter = new PIXI.filters.ColorMatrixFilter();
+
+const container = new PIXI.Container();
+
+container.x = app.screen.width / 2;
+container.y = app.screen.height / 2;
+
+const bgFront = PIXI.Sprite.from('https://pixijs.com/assets/bg_scene_rotate.jpg');
+
+bgFront.anchor.set(0.5);
+
+container.addChild(bgFront);
+
+const light2 = PIXI.Sprite.from('https://pixijs.com/assets/light_rotate_2.png');
+
+light2.anchor.set(0.5);
+container.addChild(light2);
+
+const light1 = PIXI.Sprite.from('https://pixijs.com/assets/light_rotate_1.png');
+
+light1.anchor.set(0.5);
+container.addChild(light1);
+
+const panda = PIXI.Sprite.from('https://pixijs.com/assets/panda.png');
+
+panda.anchor.set(0.5);
+
+container.addChild(panda);
+
+app.stage.addChild(container);
+
+app.stage.filters = [filter];
+
+let count = 0;
+let enabled = true;
+
+app.stage.on('pointertap', () =>
+{
+ enabled = !enabled;
+ app.stage.filters = enabled ? [filter] : null;
+});
+
+const help = new PIXI.Text('Click or tap to turn filters on / off.', {
+ fontFamily: 'Arial',
+ fontSize: 12,
+ fontWeight: 'bold',
+ fill: 'white',
+});
+
+help.y = app.screen.height - 25;
+help.x = 10;
+
+app.stage.addChild(help);
+
+app.ticker.add((delta) =>
+{
+ bg.rotation += 0.01;
+ bgFront.rotation -= 0.01;
+ light1.rotation += 0.02;
+ light2.rotation += 0.01;
+
+ panda.scale.x = 1 + Math.sin(count) * 0.04;
+ panda.scale.y = 1 + Math.cos(count) * 0.04;
+
+ count += 0.1;
+
+ const { matrix } = filter;
+
+ matrix[1] = Math.sin(count) * 3;
+ matrix[2] = Math.cos(count);
+ matrix[3] = Math.cos(count) * 1.5;
+ matrix[4] = Math.sin(count / 3) * 2;
+ matrix[5] = Math.sin(count / 2);
+ matrix[6] = Math.sin(count / 4);
+});
diff --git a/src/examples/dev/filtersBasic/displacementMapCrawlies.js b/src/examples/dev/filtersBasic/displacementMapCrawlies.js
new file mode 100644
index 000000000..21b823678
--- /dev/null
+++ b/src/examples/dev/filtersBasic/displacementMapCrawlies.js
@@ -0,0 +1,111 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+app.stage.eventMode = 'static';
+
+const container = new PIXI.Container();
+
+app.stage.addChild(container);
+
+const padding = 100;
+const bounds = new PIXI.Rectangle(-padding, -padding, app.screen.width + padding * 2, app.screen.height + padding * 2);
+const maggots = [];
+
+for (let i = 0; i < 20; i++)
+{
+ const maggot = PIXI.Sprite.from('https://pixijs.com/assets/maggot.png');
+
+ maggot.anchor.set(0.5);
+ container.addChild(maggot);
+
+ maggot.direction = Math.random() * Math.PI * 2;
+ maggot.speed = 1;
+ maggot.turnSpeed = Math.random() - 0.8;
+
+ maggot.x = Math.random() * bounds.width;
+ maggot.y = Math.random() * bounds.height;
+
+ maggot.scale.set(1 + Math.random() * 0.3);
+ maggot.original = new PIXI.Point();
+ maggot.original.copyFrom(maggot.scale);
+ maggots.push(maggot);
+}
+
+const displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displace.png');
+const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
+
+app.stage.addChild(displacementSprite);
+
+container.filters = [displacementFilter];
+
+displacementFilter.scale.x = 110;
+displacementFilter.scale.y = 110;
+displacementSprite.anchor.set(0.5);
+
+const ring = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/ring.png');
+
+ring.anchor.set(0.5);
+
+ring.visible = false;
+
+app.stage.addChild(ring);
+
+const bg = PIXI.Sprite.from('https://pixijs.com/assets/bg_grass.jpg');
+
+bg.width = app.screen.width;
+bg.height = app.screen.height;
+
+bg.alpha = 0.4;
+
+container.addChild(bg);
+
+app.stage.on('mousemove', onPointerMove).on('touchmove', onPointerMove);
+
+function onPointerMove(eventData)
+{
+ ring.visible = true;
+
+ displacementSprite.position.set(eventData.data.global.x - 25, eventData.data.global.y);
+ ring.position.copyFrom(displacementSprite.position);
+}
+
+let count = 0;
+
+app.ticker.add(() =>
+{
+ count += 0.05;
+
+ for (let i = 0; i < maggots.length; i++)
+ {
+ const maggot = maggots[i];
+
+ maggot.direction += maggot.turnSpeed * 0.01;
+ maggot.x += Math.sin(maggot.direction) * maggot.speed;
+ maggot.y += Math.cos(maggot.direction) * maggot.speed;
+
+ maggot.rotation = -maggot.direction - Math.PI / 2;
+ maggot.scale.x = maggot.original.x + Math.sin(count) * 0.2;
+
+ // wrap the maggots around as the crawl
+ if (maggot.x < bounds.x)
+ {
+ maggot.x += bounds.width;
+ }
+ else if (maggot.x > bounds.x + bounds.width)
+ {
+ maggot.x -= bounds.width;
+ }
+
+ if (maggot.y < bounds.y)
+ {
+ maggot.y += bounds.height;
+ }
+ else if (maggot.y > bounds.y + bounds.height)
+ {
+ maggot.y -= bounds.height;
+ }
+ }
+});
diff --git a/src/examples/dev/filtersBasic/displacementMapFlag.js b/src/examples/dev/filtersBasic/displacementMapFlag.js
new file mode 100644
index 000000000..0c09bc815
--- /dev/null
+++ b/src/examples/dev/filtersBasic/displacementMapFlag.js
@@ -0,0 +1,46 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ resizeTo: window });
+
+document.body.appendChild(app.view);
+
+app.stage.eventMode = 'static';
+
+const container = new PIXI.Container();
+
+app.stage.addChild(container);
+
+const flag = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/flag.png');
+
+container.addChild(flag);
+flag.x = 100;
+flag.y = 100;
+
+const displacementSprite = PIXI.Sprite.from('https://pixijs.com/assets/pixi-filters/displacement_map_repeat.jpg');
+// Make sure the sprite is wrapping.
+
+displacementSprite.texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;
+const displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite);
+
+displacementFilter.padding = 10;
+
+displacementSprite.position = flag.position;
+
+app.stage.addChild(displacementSprite);
+
+flag.filters = [displacementFilter];
+
+displacementFilter.scale.x = 30;
+displacementFilter.scale.y = 60;
+
+app.ticker.add(() =>
+{
+ // Offset the sprite position to make vFilterCoord update to larger value.
+ // Repeat wrapping makes sure there's still pixels on the coordinates.
+ displacementSprite.x++;
+ // Reset x to 0 when it's over width to keep values from going to very huge numbers.
+ if (displacementSprite.x > displacementSprite.width)
+ {
+ displacementSprite.x = 0;
+ }
+});
diff --git a/src/examples/dev/graphics/advanced.js b/src/examples/dev/graphics/advanced.js
new file mode 100644
index 000000000..bce095b7f
--- /dev/null
+++ b/src/examples/dev/graphics/advanced.js
@@ -0,0 +1,105 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ antialias: true, resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const sprite = PIXI.Sprite.from('https://pixijs.com/assets/bg_rotate.jpg');
+
+// // BEZIER CURVE ////
+// information: https://en.wikipedia.org/wiki/Bézier_curve
+
+const realPath = new PIXI.Graphics();
+
+realPath.lineStyle(2, 0xffffff, 1);
+realPath.moveTo(0, 0);
+realPath.lineTo(100, 200);
+realPath.lineTo(200, 200);
+realPath.lineTo(240, 100);
+
+realPath.position.x = 50;
+realPath.position.y = 50;
+
+app.stage.addChild(realPath);
+
+const bezier = new PIXI.Graphics();
+
+bezier.lineStyle(5, 0xaa0000, 1);
+bezier.bezierCurveTo(100, 200, 200, 200, 240, 100);
+
+bezier.position.x = 50;
+bezier.position.y = 50;
+
+app.stage.addChild(bezier);
+
+// // BEZIER CURVE 2 ////
+const realPath2 = new PIXI.Graphics();
+
+realPath2.lineStyle(2, 0xffffff, 1);
+realPath2.moveTo(0, 0);
+realPath2.lineTo(0, -100);
+realPath2.lineTo(150, 150);
+realPath2.lineTo(240, 100);
+
+realPath2.position.x = 320;
+realPath2.position.y = 150;
+
+app.stage.addChild(realPath2);
+
+const bezier2 = new PIXI.Graphics();
+
+bezier2.lineTextureStyle({ width: 10, texture: sprite.texture });
+bezier2.bezierCurveTo(0, -100, 150, 150, 240, 100);
+
+bezier2.position.x = 320;
+bezier2.position.y = 150;
+
+app.stage.addChild(bezier2);
+
+// // ARC ////
+const arc = new PIXI.Graphics();
+
+arc.lineStyle(5, 0xaa00bb, 1);
+arc.arc(600, 100, 50, Math.PI, 2 * Math.PI);
+
+app.stage.addChild(arc);
+
+// // ARC 2 ////
+const arc2 = new PIXI.Graphics();
+
+arc2.lineStyle(6, 0x3333dd, 1);
+arc2.arc(650, 270, 60, 2 * Math.PI, (3 * Math.PI) / 2);
+
+app.stage.addChild(arc2);
+
+// // ARC 3 ////
+const arc3 = new PIXI.Graphics();
+
+arc3.lineTextureStyle({ width: 20, texture: sprite.texture });
+arc3.arc(650, 420, 60, 2 * Math.PI, (2.5 * Math.PI) / 2);
+
+app.stage.addChild(arc3);
+
+// / Hole ////
+const rectAndHole = new PIXI.Graphics();
+
+rectAndHole.beginFill(0x00ff00);
+rectAndHole.drawRect(350, 350, 150, 150);
+rectAndHole.beginHole();
+rectAndHole.drawCircle(375, 375, 25);
+rectAndHole.drawCircle(425, 425, 25);
+rectAndHole.drawCircle(475, 475, 25);
+rectAndHole.endHole();
+rectAndHole.endFill();
+
+app.stage.addChild(rectAndHole);
+
+// // Line Texture Style ////
+const beatifulRect = new PIXI.Graphics();
+
+beatifulRect.lineTextureStyle({ width: 20, texture: sprite.texture });
+beatifulRect.beginFill(0xff0000);
+beatifulRect.drawRect(80, 350, 150, 150);
+beatifulRect.endFill();
+
+app.stage.addChild(beatifulRect);
diff --git a/src/examples/dev/graphics/dynamic.js b/src/examples/dev/graphics/dynamic.js
new file mode 100644
index 000000000..5db56f8d8
--- /dev/null
+++ b/src/examples/dev/graphics/dynamic.js
@@ -0,0 +1,98 @@
+import * as PIXI from 'pixi.js';
+
+const app = new PIXI.Application({ antialias: true, resizeTo: window });
+
+document.body.appendChild(app.view);
+
+app.stage.eventMode = 'static';
+app.stage.hitArea = app.screen;
+
+const graphics = new PIXI.Graphics();
+
+// set a fill and line style
+graphics.beginFill(0xff3300);
+graphics.lineStyle(10, 0xffd900, 1);
+
+// draw a shape
+graphics.moveTo(50, 50);
+graphics.lineTo(250, 50);
+graphics.lineTo(100, 100);
+graphics.lineTo(250, 220);
+graphics.lineTo(50, 220);
+graphics.lineTo(50, 50);
+graphics.closePath();
+graphics.endFill();
+
+// set a fill and line style again
+graphics.lineStyle(10, 0xff0000, 0.8);
+graphics.beginFill(0xff700b, 1);
+
+// draw a second shape
+graphics.moveTo(210, 300);
+graphics.lineTo(450, 320);
+graphics.lineTo(570, 350);
+graphics.quadraticCurveTo(600, 0, 480, 100);
+graphics.lineTo(330, 120);
+graphics.lineTo(410, 200);
+graphics.lineTo(210, 300);
+graphics.closePath();
+graphics.endFill();
+
+// draw a rectangle
+graphics.lineStyle(2, 0x0000ff, 1);
+graphics.drawRect(50, 250, 100, 100);
+
+// draw a circle
+graphics.lineStyle(0);
+graphics.beginFill(0xffff0b, 0.5);
+graphics.drawCircle(470, 200, 100);
+graphics.endFill();
+
+graphics.lineStyle(20, 0x33ff00);
+graphics.moveTo(30, 30);
+graphics.lineTo(600, 300);
+
+app.stage.addChild(graphics);
+
+// let's create a moving shape
+const thing = new PIXI.Graphics();
+
+app.stage.addChild(thing);
+thing.x = 800 / 2;
+thing.y = 600 / 2;
+
+let count = 0;
+
+// Just click on the stage to draw random lines
+window.app = app;
+app.stage.on('pointerdown', () =>
+{
+ graphics.lineStyle(Math.random() * 30, Math.random() * 0xffffff, 1);
+ graphics.moveTo(Math.random() * 800, Math.random() * 600);
+ graphics.bezierCurveTo(
+ Math.random() * 800,
+ Math.random() * 600,
+ Math.random() * 800,
+ Math.random() * 600,
+ Math.random() * 800,
+ Math.random() * 600,
+ );
+});
+
+app.ticker.add(() =>
+{
+ count += 0.1;
+
+ thing.clear();
+ thing.lineStyle(10, 0xff0000, 1);
+ thing.beginFill(0xffff00, 0.5);
+
+ thing.moveTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20);
+ thing.lineTo(120 + Math.cos(count) * 20, -100 + Math.sin(count) * 20);
+ thing.lineTo(120 + Math.sin(count) * 20, 100 + Math.cos(count) * 20);
+ thing.lineTo(-120 + Math.cos(count) * 20, 100 + Math.sin(count) * 20);
+ thing.lineTo(-120 + Math.sin(count) * 20, -100 + Math.cos(count) * 20);
+ thing.closePath();
+
+ thing.rotation = count * 0.1;
+});
diff --git a/src/examples/dev/graphics/simple.js b/src/examples/dev/graphics/simple.js
new file mode 100644
index 000000000..735e40f20
--- /dev/null
+++ b/src/examples/dev/graphics/simple.js
@@ -0,0 +1,99 @@
+import * as PIXI from 'pixi.js';
+import '@pixi/graphics-extras';
+
+const app = new PIXI.Application({ antialias: true, resizeTo: window });
+
+document.body.appendChild(app.view);
+
+const graphics = new PIXI.Graphics();
+
+// Rectangle
+graphics.beginFill(0xde3249);
+graphics.drawRect(50, 50, 100, 100);
+graphics.endFill();
+
+// Rectangle + line style 1
+graphics.lineStyle(2, 0xfeeb77, 1);
+graphics.beginFill(0x650a5a);
+graphics.drawRect(200, 50, 100, 100);
+graphics.endFill();
+
+// Rectangle + line style 2
+graphics.lineStyle(10, 0xffbd01, 1);
+graphics.beginFill(0xc34288);
+graphics.drawRect(350, 50, 100, 100);
+graphics.endFill();
+
+// Rectangle 2
+graphics.lineStyle(2, 0xffffff, 1);
+graphics.beginFill(0xaa4f08);
+graphics.drawRect(530, 50, 140, 100);
+graphics.endFill();
+
+// Circle
+graphics.lineStyle(0); // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
+graphics.beginFill(0xde3249, 1);
+graphics.drawCircle(100, 250, 50);
+graphics.endFill();
+
+// Circle + line style 1
+graphics.lineStyle(2, 0xfeeb77, 1);
+graphics.beginFill(0x650a5a, 1);
+graphics.drawCircle(250, 250, 50);
+graphics.endFill();
+
+// Circle + line style 2
+graphics.lineStyle(10, 0xffbd01, 1);
+graphics.beginFill(0xc34288, 1);
+graphics.drawCircle(400, 250, 50);
+graphics.endFill();
+
+// Ellipse + line style 2
+graphics.lineStyle(2, 0xffffff, 1);
+graphics.beginFill(0xaa4f08, 1);
+graphics.drawEllipse(600, 250, 80, 50);
+graphics.endFill();
+
+// draw a shape
+graphics.beginFill(0xff3300);
+graphics.lineStyle(4, 0xffd900, 1);
+graphics.moveTo(50, 350);
+graphics.lineTo(250, 350);
+graphics.lineTo(100, 400);
+graphics.lineTo(50, 350);
+graphics.closePath();
+graphics.endFill();
+
+// draw a rounded rectangle
+graphics.lineStyle(2, 0xff00ff, 1);
+graphics.beginFill(0x650a5a, 0.25);
+graphics.drawRoundedRect(50, 440, 100, 100, 16);
+graphics.endFill();
+
+// draw star
+graphics.lineStyle(2, 0xffffff);
+graphics.beginFill(0x35cc5a, 1);
+graphics.drawStar(360, 370, 5, 50);
+graphics.endFill();
+
+// draw star 2
+graphics.lineStyle(2, 0xffffff);
+graphics.beginFill(0xffcc5a, 1);
+graphics.drawStar(280, 510, 7, 50);
+graphics.endFill();
+
+// draw star 3
+graphics.lineStyle(4, 0xffffff);
+graphics.beginFill(0x55335a, 1);
+graphics.drawStar(470, 450, 4, 50);
+graphics.endFill();
+
+// draw polygon
+const path = [600, 370, 700, 460, 780, 420, 730, 570, 590, 520];
+
+graphics.lineStyle(0);
+graphics.beginFill(0x3500fa, 1);
+graphics.drawPolygon(path);
+graphics.endFill();
+
+app.stage.addChild(graphics);
diff --git a/src/examples/dev/index.ts b/src/examples/dev/index.ts
new file mode 100644
index 000000000..e950e4884
--- /dev/null
+++ b/src/examples/dev/index.ts
@@ -0,0 +1,261 @@
+import collisionDetection from '!!raw-loader!./advanced/collisionDetection.js';
+import mouseTrail from '!!raw-loader!./advanced/mouseTrail.js';
+import scratchCard from '!!raw-loader!./advanced/scratchCard.js';
+import screenShot from '!!raw-loader!./advanced/screenShot.js';
+import slots from '!!raw-loader!./advanced/slots.js';
+import spinners from '!!raw-loader!./advanced/spinners.js';
+import starWarp from '!!raw-loader!./advanced/starWarp.js';
+
+import async from '!!raw-loader!./assets/async.js';
+import background from '!!raw-loader!./assets/background.js';
+import bundle from '!!raw-loader!./assets/bundle.js';
+import multiple from '!!raw-loader!./assets/multiple.js';
+import promise from '!!raw-loader!./assets/promise.js';
+
+import blendModes from '!!raw-loader!./basic/blendModes.js';
+import cacheAsBitmap from '!!raw-loader!./basic/cacheAsBitmap.js';
+import container from '!!raw-loader!./basic/container.js';
+import particleContainer from '!!raw-loader!./basic/particleContainer.js';
+import simplePlane from '!!raw-loader!./basic/simplePlane.js';
+import tinting from '!!raw-loader!./basic/tinting.js';
+import transparentBackground from '!!raw-loader!./basic/transparentBackground.js';
+
+import click from '!!raw-loader!./events/click.js';
+import customHitarea from '!!raw-loader!./events/customHitarea.js';
+import customMouseIcon from '!!raw-loader!./events/customMouseIcon.js';
+import dragging from '!!raw-loader!./events/dragging.js';
+import hitTestingWithSpatialHash from '!!raw-loader!./events/hitTestingWithSpatialHash.js';
+import interactivity from '!!raw-loader!./events/interactivity.js';
+import logger from '!!raw-loader!./events/logger.js';
+import nestedBoundaryWithProjection from '!!raw-loader!./events/nestedBoundaryWithProjection.js';
+import pointerTracker from '!!raw-loader!./events/pointerTracker.js';
+import slider from '!!raw-loader!./events/slider.js';
+
+import custom from '!!raw-loader!./filtersAdvanced/custom.js';
+import mouseBlending from '!!raw-loader!./filtersAdvanced/mouseBlending.js';
+import shaderToyFilterRenderTexture from '!!raw-loader!./filtersAdvanced/shaderToyFilterRenderTexture.js';
+
+import blur from '!!raw-loader!./filtersBasic/blur.js';
+import colorMatrix from '!!raw-loader!./filtersBasic/colorMatrix.js';
+import displacementMapCrawlies from '!!raw-loader!./filtersBasic/displacementMapCrawlies.js';
+import displacementMapFlag from '!!raw-loader!./filtersBasic/displacementMapFlag.js';
+
+import advanced from '!!raw-loader!./graphics/advanced.js';
+import dynamic from '!!raw-loader!./graphics/dynamic.js';
+import simple from '!!raw-loader!./graphics/simple.js';
+
+import filter from '!!raw-loader!./masks/filter.js';
+import graphics from '!!raw-loader!./masks/graphics.js';
+import sprite from '!!raw-loader!./masks/sprite.js';
+
+import instancedGeometry from '!!raw-loader!./meshAndShaders/instancedGeometry.js';
+import interleavingGeometry from '!!raw-loader!./meshAndShaders/interleavingGeometry.js';
+import mergingGeometry from '!!raw-loader!./meshAndShaders/mergingGeometry.js';
+import multiPassShaderGeneratedMesh from '!!raw-loader!./meshAndShaders/multiPassShaderGeneratedMesh.js';
+import shaderToyMesh from '!!raw-loader!./meshAndShaders/shaderToyMesh.js';
+import sharedShader from '!!raw-loader!./meshAndShaders/sharedShader.js';
+import sharingGeometry from '!!raw-loader!./meshAndShaders/sharingGeometry.js';
+import texturedMeshAdvanced from '!!raw-loader!./meshAndShaders/texturedMeshAdvanced.js';
+import texturedMeshBasic from '!!raw-loader!./meshAndShaders/texturedMeshBasic.js';
+import triangleColor from '!!raw-loader!./meshAndShaders/triangleColor.js';
+import triangleTextured from '!!raw-loader!./meshAndShaders/triangleTextured.js';
+import triangle from '!!raw-loader!./meshAndShaders/triangle.js';
+import uniforms from '!!raw-loader!./meshAndShaders/uniforms.js';
+
+import offscreenCanvasBasic from '!!raw-loader!./offscreenCanvas/basic.js';
+import webWorker from '!!raw-loader!./offscreenCanvas/webWorker.js';
+
+import animatedSpriteAnimationSpeed from '!!raw-loader!./sprite/animatedSpriteAnimationSpeed.js';
+import animatedSpriteExplosion from '!!raw-loader!./sprite/animatedSpriteExplosion.js';
+import animatedSpriteJet from '!!raw-loader!./sprite/animatedSpriteJet.js';
+import spriteBasic from '!!raw-loader!./sprite/basic.js';
+import textureSwap from '!!raw-loader!./sprite/textureSwap.js';
+import tilingSprite from '!!raw-loader!./sprite/tilingSprite.js';
+import video from '!!raw-loader!./sprite/video.js';
+
+import bitmapText from '!!raw-loader!./text/bitmapText.js';
+import fromFont from '!!raw-loader!./text/fromFont.js';
+import pixiText from '!!raw-loader!./text/pixiText.js';
+import webFont from '!!raw-loader!./text/webFont.js';
+
+import gradientBasic from '!!raw-loader!./textures/gradientBasic.js';
+import gradientResource from '!!raw-loader!./textures/gradientResource.js';
+import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js';
+import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js';
+import textureRotate from '!!raw-loader!./textures/textureRotate.js';
+import type { Option } from '@site/src/components/Select';
+
+// Defines order of examples in documentation and playground dropdown, it's defined
+// separately here so it can be used in runtime code and in the md generation script
+import examplesData from './examplesData.json';
+import { camelCaseToSentenceCase } from '@site/src/utils/utils';
+import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
+
+const examplesSource: ExamplesSourceType = {
+ basic: {
+ blendModes,
+ cacheAsBitmap,
+ container,
+ particleContainer,
+ simplePlane,
+ tinting,
+ transparentBackground,
+ },
+ sprite: {
+ animatedSpriteAnimationSpeed,
+ animatedSpriteExplosion,
+ animatedSpriteJet,
+ basic: spriteBasic,
+ textureSwap,
+ tilingSprite,
+ video,
+ },
+ text: {
+ bitmapText,
+ fromFont,
+ pixiText,
+ webFont,
+ },
+ graphics: {
+ advanced,
+ dynamic,
+ simple,
+ },
+ events: {
+ click,
+ customHitarea,
+ customMouseIcon,
+ dragging,
+ hitTestingWithSpatialHash,
+ interactivity,
+ logger,
+ nestedBoundaryWithProjection,
+ pointerTracker,
+ slider,
+ },
+ masks: {
+ filter,
+ graphics,
+ sprite,
+ },
+ textures: {
+ gradientBasic,
+ gradientResource,
+ renderTextureAdvanced,
+ renderTextureBasic,
+ textureRotate,
+ },
+ assets: {
+ async,
+ background,
+ bundle,
+ multiple,
+ promise,
+ },
+ offscreenCanvas: {
+ basic: offscreenCanvasBasic,
+ webWorker,
+ },
+ filtersBasic: {
+ blur,
+ colorMatrix,
+ displacementMapCrawlies,
+ displacementMapFlag,
+ },
+ filtersAdvanced: {
+ custom,
+ mouseBlending,
+ shaderToyFilterRenderTexture,
+ },
+ advanced: {
+ collisionDetection,
+ mouseTrail,
+ scratchCard,
+ screenShot,
+ slots,
+ spinners,
+ starWarp,
+ },
+ meshAndShaders: {
+ instancedGeometry,
+ interleavingGeometry,
+ mergingGeometry,
+ multiPassShaderGeneratedMesh,
+ shaderToyMesh,
+ sharedShader,
+ sharingGeometry,
+ texturedMeshAdvanced,
+ texturedMeshBasic,
+ triangleColor,
+ triangleTextured,
+ triangle,
+ uniforms,
+ },
+};
+
+const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string): Required
-
- Current version (Stable)
-
-
-
-
-
-
-
-
| {latestVersion.version} | -
-
- |
-
-
- |
-
-
- |
-
|---|
-
- Next version (Unreleased)
-
-
-
-
-
+ {devVersion && (
+
-
| {devVersion.version} | -
-
- |
-
-
- |
-
|---|
+
+ Dev version
+
+
+
+
+
+ )}
{preReleaseVersion && (
+
| + {devVersion.version} (From brach: {devVersion.versionLabel}) + | +
+
+ |
+
+
+ |
+
|---|
@@ -133,6 +105,41 @@ export default function Version(): JSX.Element
)}
+ {latestVersion && (
+
+
+ Current version (Stable)
+
+
+
+
+
+ )}
+
{pastVersions.length > 0 && (
+
| {latestVersion.version} | +
+
+ |
+
+
+ |
+
+
+ |
+
|---|