Merge pull request #88 from pixijs/dev

Support PixiJS v7

Author: ivanpopelyshev

.eslintrc

@@ -0,0 +1,26 @@
+name: Build CI
+on:
+  push:
+    branches: [ '**' ]
+    tags: [ '**' ]
+  release:
+    types: [ 'created' ]
+  pull_request:
+    branches: [ '**' ]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js 16.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: 16
+    - name: Install npm
+      run: npm install -g npm@8
+    - name: Install dependencies
+      run: npm ci
+    - name: Build
+      run: npm run build
+    - name: Documention
+      run: npm run docs

.github/workflows/build.yml

@@ -28,7 +28,9 @@ docs/
 .idea
 
 # tsc output
-compile
 dist
 lib
 index.d.ts
+
+# webdoc
+example.api.json*

.gitignore

@@ -1,12 +1,12 @@
 # @pixi/layers - PixiJS Layers Kit
 
-[![Build](https://github.com/pixijs/layers/workflows/Build/badge.svg)](https://github.com/pixijs/layers/actions?query=workflow%3A%22Build%22) [![npm version](https://badge.fury.io/js/%40pixi%2Flayers.svg)](https://badge.fury.io/js/%40pixi%2Flayers)
+[![Build CI](https://github.com/pixijs/layers/actions/workflows/build.yml/badge.svg)](https://github.com/pixijs/layers/actions/workflows/build.yml) [![npm version](https://badge.fury.io/js/%40pixi%2Flayers.svg)](https://badge.fury.io/js/%40pixi%2Flayers)
 
 This package provides an extension to scene tree - layers. These layers allows you to change
 the rendering order of items in your scene without moving them around in your scene. It's like
 {@link PIXI.DisplayObject#zIndex zIndex}, but supercharged.
 
-It has been ported to PixiJS 6 since @pixi/layers 1.0.0 (formerly pixi-layers).
+It has been ported to PixiJS 7 since @pixi/layers 2.0.0 (formerly pixi-layers).
 
 **Nothing will work if you dont create Stage and set it as root. Please do it or read full explanation.**
 
@@ -16,28 +16,21 @@ It has been ported to PixiJS 6 since @pixi/layers 1.0.0 (formerly pixi-layers).
 npm install --save @pixi/layers
 ```
 
-### Migration from v5
-
-See [usage with canvas and particles](#usage-with-canvas-and-particles) part of this doc.
-
-If you still work with PixiJS `v5` and prior - see README `pixi-v5` branch, or just use npm package `pixi-layers`
-
 ## Examples
 
-* [Lighting example](https://pixijs.io/examples/#/plugin-layers/lighting.js)
-* [Z-order example](https://pixijs.io/examples/#/plugin-layers/zorder.js)
-* [Double buffering](http://pixijs.github.io/examples/#/layers/trail.js)
-* [Normals example - WORK IN PROGRESS](http://pixijs.github.io/examples/#/layers/normals.js)
-* [Normals with sorting - WORK IN PROGRESS](http://pixijs.github.io/examples/#/layers/normals.js)
+* [Blend Modes example](https://pixijs.io/layers/examples/blend-modes.html)
+* [Z-order example](https://pixijs.io/layers/examples/z-order.html)
+* [Double buffering](https://pixijs.io/layers/examples/trail.html)
+* [Bring To Top](https://pixijs.io/layers/examples/bring-to-top.html)
 
 ## Usage
 
 {@link Layer} extends {@link PIXI.Container}:
 
 ```js
-import { Layer } from '@pixi/layers'
+import { Layer } from '@pixi/layers';
 
-let layer = new Layer();
+const layer = new Layer();
 ```
 
 A DisplayObject/Container can be rendered inside its layer instead of direct parent
@@ -89,29 +82,29 @@ When you move a character with attached sprites from different layers to a new s
 
 Instead, you can create a new display Group:
 
-```
-let lightGroup = new Group();
+```js
+const lightGroup = new Group();
 
 bunnySprite.parentGroup = lightGroup;
-let lightLayer = new Layer(lightGroup); // only one layer per stage can be bound to same group
+const lightLayer = new Layer(lightGroup); // only one layer per stage can be bound to same group
 ```
 
 Groups are working between different stages, so when you move bunny it will be rendered in its light layer.
 
 Layer is representation of global Group in this particular stage.
 
-## Vanilla JS, UMD build
+## Vanilla JS,
 
-All pixiJS v6 plugins has special `umd` build suited for vanilla.   
-Navigate `pixi-layers` npm package, take `dist/pixi-layers.umd.js` file.
+All PixiJS has a special bundle suited for vanilla JavaScript in the browser.   
+Navigate `pixi-layers` npm package, take `dist/pixi-layers.js` file.
 
 ```html
-<script src='lib/pixi.js'></script>
-<script src='lib/pixi-layers.umd.js'></script>
+<script src="./pixi.min.js"></script>
+<script src="./pixi-layers.js"></script>
 ```
 
 ```js
-let layer = new PIXI.display.Layer();
+const layer = new PIXI.layers.Layer();
 ```
 
 ## Usage with canvas and particles
@@ -123,19 +116,19 @@ The important thing is to call it when you know that corresponding module is loa
 If you use `@pixi/canvas-renderer`
 
 ```js
-import * as PIXI from 'pixi.js-legacy';
+import { CanvasRenderer } from 'pixi.js-legacy';
 import { applyCanvasMixin } from '@pixi/layers';
 
-applyCanvasMixin(PIXI.CanvasRenderer);
+applyCanvasMixin(CanvasRenderer);
 ```
 
 If you use `@pixi/particles`
 
 ```js
-import * as PIXI from 'pixi.js';
+import { ParticleContainer } from 'pixi.js';
 import { applyCanvasMixin } from '@pixi/layers';
 
-applyParticleMixin(PIXI.ParticleContainer);
+applyParticleMixin(ParticleContainer);
 ```
 
 ## Advanced sorting

README.md

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Blend Modes | PixiJS Lights Examples</title>
+    <script src="https://pixijs.download/dev/pixi.min.js"></script>
+    <script src="../dist/pixi-layers.js"></script>
+    <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+    <h1>Blend Modes</h1>
+    <script>
+        const W = 800;
+        const H = 600;
+        const PAD = 80;
+        const resolution = 1;
+        const WIDTH = W / resolution;
+        const HEIGHT = H / resolution;
+
+        const app = new PIXI.Application({
+            width: WIDTH,
+            height: HEIGHT,
+            resolution,
+        });
+        document.body.appendChild(app.view);
+
+        // create the stage instead of container
+        app.stage = new PIXI.layers.Stage();
+
+        const background = new PIXI.TilingSprite(
+            PIXI.Texture.from('assets/p2.jpg'),
+            WIDTH,
+            HEIGHT,
+        );
+        app.stage.addChild(background);
+        // make container for bunnies
+        const bunnyWorld = new PIXI.Container();
+        app.stage.addChild(bunnyWorld);
+
+        const lighting = new PIXI.layers.Layer();
+        lighting.on('display', (element) => {
+            element.blendMode = PIXI.BLEND_MODES.ADD;
+        });
+        lighting.useRenderTexture = true;
+        lighting.clearColor = [0.5, 0.5, 0.5, 1]; // ambient gray
+
+        app.stage.addChild(lighting);
+
+        const lightingSprite = new PIXI.Sprite(lighting.getRenderTexture());
+        lightingSprite.blendMode = PIXI.BLEND_MODES.MULTIPLY;
+
+        app.stage.addChild(lightingSprite);
+
+        const bunnyTexture = PIXI.Texture.from('assets/bunny.png');
+        function updateBunny(bunny) {
+            bunny.x += bunny.vx;
+            bunny.y += bunny.vy;
+            if (bunny.x > WIDTH + PAD) {
+                bunny.x -= WIDTH + 2 * PAD;
+            }
+            if (bunny.x < -PAD) {
+                bunny.x += WIDTH + 2 * PAD;
+            }
+            if (bunny.y > HEIGHT + PAD) {
+                bunny.y -= HEIGHT + 2 * PAD;
+            }
+            if (bunny.y < -PAD) {
+                bunny.y += HEIGHT + 2 * PAD;
+            }
+        }
+
+        function createBunny() {
+            const bunny = new PIXI.Sprite(bunnyTexture);
+            bunny.update = updateBunny;
+
+            const angle = Math.random() * Math.PI * 2;
+            const speed = 200.0; // px per second
+            bunny.vx = Math.cos(angle) * speed / 60.0;
+            bunny.vy = Math.sin(angle) * speed / 60.0;
+            bunny.position.set(Math.random() * WIDTH, Math.random() * HEIGHT);
+            bunny.anchor.set(0.5, 0.5);
+
+            const lightbulb = new PIXI.Graphics();
+            const rr = Math.random() * 0x80 | 0;
+            const rg = Math.random() * 0x80 | 0;
+            const rb = Math.random() * 0x80 | 0;
+            const rad = 50 + Math.random() * 20;
+            lightbulb.beginFill((rr << 16) + (rg << 8) + rb, 1.0);
+            lightbulb.drawCircle(0, 0, rad);
+            lightbulb.endFill();
+            lightbulb.parentLayer = lighting;// <-- try comment it
+
+            bunny.addChild(lightbulb);
+
+            return bunny;
+        }
+
+        for (let i = 0; i < 40; i++) {
+            bunnyWorld.addChild(createBunny());
+        }
+
+        app.ticker.add(() => {
+            bunnyWorld.children.forEach(updateBunny);
+        });
+    </script>
+  </html>