open-index/open-npm huggingface dataset:
npm package: @pixi/filter-old-film
Description: PixiJS filter to apply an old film effect with grain and scratches
Author: finscn
Latest version: 5.1.1

# OldFilmFilter

> PixiJS filter to apply an old film effect with grain and scratches.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=OldFilmFilter)

## Installation

```bash
npm install @pixi/filter-old-film
```

## Usage

```js
import {OldFilmFilter} from '@pixi/filter-old-film';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new OldFilmFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/OldFilmFilter.html
npm package: @pixi/filter-outline
Description: PixiJS filter to apply an outline/stroke effect
Author: Mat Groves
Latest version: 5.2.0

# OutlineFilter

> PixiJS filter to apply an outline/stroke effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=OutlineFilter)

## Installation

```bash
npm install @pixi/filter-outline
```

## Usage

```js
import {OutlineFilter} from '@pixi/filter-outline';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new OutlineFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/OutlineFilter.html
npm package: @pixi/filter-pixelate
Description: PixiJS filter to apply a pixelation effect
Author: Mat Groves
Latest version: 5.1.1

# PixelateFilter

> PixiJS filter to apply a pixelation effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=PixelateFilter)

## Installation

```bash
npm install @pixi/filter-pixelate
```

## Usage

```js
import {PixelateFilter} from '@pixi/filter-pixelate';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new PixelateFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/PixelateFilter.html
npm package: @pixi/filter-radial-blur
Description: PixiJS filter to apply a radial blur effect
Author: finscn
Latest version: 5.1.1

# RadialBlurFilter

> PixiJS filter to apply a radial blur effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=RadialBlurFilter)

## Installation

```bash
npm install @pixi/filter-radial-blur
```

## Usage

```js
import {RadialBlurFilter} from '@pixi/filter-radial-blur';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new RadialBlurFilter(60, 9)];
```

## Documentation

See https://filters.pixijs.download/main/docs/RadialBlurFilter.html
npm package: @pixi/filter-reflection
Description: PixiJS filter to apply reflection and wave effect
Author: finscn
Latest version: 5.1.1

# ReflectionFilter

> PixiJS filter to apply reflection and wave effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ReflectionFilter)

## Installation

```bash
npm install @pixi/filter-reflection
```

## Usage

```js
import {ReflectionFilter} from '@pixi/filter-reflection';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new ReflectionFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/ReflectionFilter.html
npm package: @pixi/filter-rgb-split
Description: PixiJS filter to split and shift red, green or blue channels
Author: Mat Groves
Latest version: 5.1.1

# RGBSplitFilter

> PixiJS filter to split and shift red, green or blue channels.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=RGBSplitFilter)

## Installation

```bash
npm install @pixi/filter-rgb-split
```

## Usage

```js
import {RGBSplitFilter} from '@pixi/filter-rgb-split';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new RGBSplitFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/RGBSplitFilter.html
npm package: @pixi/filter-shockwave
Description: PixiJS filter to apply a shockwave-type effect
Author: Mat Groves
Latest version: 5.1.1

# ShockwaveFilter

> PixiJS filter to apply a shockwave-type effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ShockwaveFilter)

## Installation

```bash
npm install @pixi/filter-shockwave
```

## Usage

```js
import {ShockwaveFilter} from '@pixi/filter-shockwave';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new ShockwaveFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/ShockwaveFilter.html
npm package: @pixi/filter-simple-lightmap
Description: PixiJS filter to create a light-map from a texture
Author: Mat Groves
Latest version: 5.1.1

# SimpleLightmapFilter

> PixiJS filter to create a light-map from a texture.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=SimpleLightmapFilter)

## Installation

```bash
npm install @pixi/filter-simple-lightmap
```

## Usage

```js
import {SimpleLightmapFilter} from '@pixi/filter-simple-lightmap';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new SimpleLightmapFilter(texture, [0, 0, 0, 0.5])];
```

## Documentation

See https://filters.pixijs.download/main/docs/SimpleLightmapFilter.html
npm package: @pixi/filter-tilt-shift
Description: PixiJS filter to render a tilt-shift-like camera effect
Author: Mat Groves
Latest version: 5.2.0

# TiltShiftFilter

> PixiJS filter to render a tilt-shift-like camera effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=TiltShiftFilter)

## Installation

```bash
npm install @pixi/filter-tilt-shift
```

## Usage

```js
import {TiltShiftFilter} from '@pixi/filter-tilt-shift';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new TiltShiftFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/TiltShiftFilter.html
npm package: @pixi/filter-twist
Description: PixiJS filter to apply a twist effect to a DisplayObject
Author: Mat Groves
Latest version: 5.1.1

# TwistFilter

> PixiJS filter to apply a twist effect to a DisplayObject.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=TwistFilter)

## Installation

```bash
npm install @pixi/filter-twist
```

## Usage

```js
import {TwistFilter} from '@pixi/filter-twist';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new TwistFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/TwistFilter.html
npm package: @pixi/filter-zoom-blur
Description: PixiJS filter to apply zoom blur effect
Author: finscn
Latest version: 5.1.1

# ZoomBlurFilter

> PixiJS filter to apply zoom blur effect.

[View demo](https://filters.pixijs.download/main/demo/index.html?enabled=ZoomBlurFilter)

## Installation

```bash
npm install @pixi/filter-zoom-blur
```

## Usage

```js
import {ZoomBlurFilter} from '@pixi/filter-zoom-blur';
import {Container} from 'pixi.js';

const container = new Container();
container.filters = [new ZoomBlurFilter()];
```

## Documentation

See https://filters.pixijs.download/main/docs/ZoomBlurFilter.html
npm package: @pixi/gif
Description: Animated GIF Runtime for PixiJS
Author: Matt Karl @bigtimebuddy
Latest version: 3.0.1

# PixiJS Animated GIF

[![Node.js CI](https://github.com/pixijs/gif/actions/workflows/nodejs.yml/badge.svg?branch=main)](https://github.com/pixijs/gif/actions/workflows/nodejs.yml)

Plugin to support playback of animated GIF images in PixiJS. Unlike normal GIF playback in the browser, this plugins allows you to stop, loop, change speed, or go to a specific frame.

* [Demo](https://pixijs.io/gif/examples/)
* [API Documentation](https://pixijs.io/gif/docs/)

## Usage

Load an animated GIF image with Assets:

```ts
import '@pixi/gif';
import { Assets } from 'pixi.js';

const app = new Application();
const image = await Assets.load('image.gif');
app.stage.addChild(image);
```

To use a gif without Assets:

```ts
import { Application } from 'pixi.js';
import { AnimatedGIF } from '@pixi/gif';

const app = new Application();
fetch('image.gif')
    .then(res => res.arrayBuffer())
    .then(AnimatedGIF.fromBuffer)
    .then(image => app.stage.addChild(image));
```

### Version Compatiblity

| PixiJS | PixiJS GIF |
|--------|------------|
| v6.x   | v1.x       |
| v7.x   | v2.x       |
| v8.x   | v3.x       |
npm package: @pixi/graphics-extras
Description: Additional Graphics functions for drawing special shapes.
Author: Matt Karl
Latest version: 7.4.3

# @pixi/graphics-extras

Adds the follow methods to Graphics:

* `drawTorus`
* `drawChamferRect`
* `drawFilletRect`
* `drawRegularPolygon`

## Installation

```bash
npm install @pixi/graphics-extras
```

## Usage

```js
import { Graphics } from '@pixi/graphics';
import '@pixi/graphics-extras';

const shapes = new Graphics()
    .beginFill(0xffffff)
    .drawTorus(0, 0, 20, 100);
```

## CDN Install

Via jsDelivr:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@pixi/graphics-extras@7.x/dist/graphics-extras.min.js"></script>
```

Or via unpkg:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://unpkg.com/@pixi/graphics-extras@7.x/dist/graphics-extras.min.js"></script>
```
npm package: @pixi/interaction
Description: Plugin for handling mouse, touch and pointer events
Author: Mat Groves
Latest version: 6.5.10

# @pixi/interaction

## Installation

```bash
npm install @pixi/interaction
```

## Usage

```js
import { InteractionManager } from '@pixi/interaction';
import { extensions } from '@pixi/core';

extensions.add(InteractionManager);
```
npm package: @pixi/jest-electron
Description: Easiest way to run jest unit test cases in electron.
Author: hustcc
Latest version: 26.1.0

# jest-electron

> Easiest way to run jest unit test cases in electron.

When we run unit test in Jest, it is actually running in the node environment, or virtual browser environment(e.g. `JSDOM`) mocked by NodeJS. Sometimes we need a lot of [Jest mocks](https://github.com/jest-community/awesome-jest#mocks) for running code with no throw, such as: jest-canvas-mock, jest-storage-mock, @jest/fake-timers and so on. This is solved by `Jest-Electron`.

[![Build Status](https://github.com/hustcc/jest-electron/workflows/build/badge.svg)](https://github.com/hustcc/jest-electron/actions)
[![npm](https://img.shields.io/npm/v/jest-electron.svg)](https://www.npmjs.com/package/jest-electron)
[![npm](https://img.shields.io/npm/dm/jest-electron.svg)](https://www.npmjs.com/package/jest-electron)


1. Technological ecology of `Jest`.
2. Complete and real `browser environment`.
3. `Multi-renderer` for running performance.
4. `Running and debug` is better then mock.


## Installation


 - Add into devDependencies

```bash
$ npm i --save-dev jest-electron
```

 - Update Jest config

```diff
{
  "jest": {
+    "runner": "jest-electron/runner",
+    "testEnvironment": "jest-electron/environment"
  }
}
```

**Notice**: update the `runner` configure, not `testRunner`.



## Related

> Those will be helpful when run test case with `jest-electron`.

 - [jest-less-loader](https://github.com/hustcc/jest-less-loader): Run test cases with import `less`, `css` code.
 - [jest-url-loader](https://github.com/hustcc/jest-url-loader): Run test cases with import `svg`, `png`, `jpg` or other url file..



## CI

> Run test cases with `jest-electron` for continuous integration.

 - **GitHub action**

Running on `macOS` will be ok.


```diff
- runs-on: ubuntu-latest
+ runs-on: macOS-latest
```


 - **travis**

Update `.travis.yml` with electron supported.
 
```diff
language: node_js
node_js:
  - "8"
  - "9"
  - "10"
  - "11"
  - "12"
+ addons:
+   apt:
+     packages:
+       - xvfb
+ install:
+   - export DISPLAY=':99.0'
+   - Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &
+   - npm install
script:
  - npm run test
```

Depending on your executor, you might need to disable sandbox and shared memory usage:

```bash
export JEST_ELECTRON_STARTUP_ARGS='--disable-dev-shm-usage --no-sandbox'
npm run test
```

## Env

 - **debug mode**

Keep the electron browser window for debugging, set process env `DEBUG_MODE=1`.


```bash
DEBUG_MODE=1 jest
```

 - **additional startup arguments**

Run electron with arbitrary arguments.

```bash
JEST_ELECTRON_STARTUP_ARGS='--disable-dev-shm-usage'
```

Run electron with `--no-sandbox`, set process env `JEST_ELECTRON_STARTUP_ARGS='--no-sandbox'`.

```bash
JEST_ELECTRON_STARTUP_ARGS='--no-sandbox' jest
```


## License

MIT@[hustcc](https://github.com/hustcc).
npm package: @pixi/jsdoc-comments
Description: Exports all JSDoc-style comments from either .js or .ts files.
Author: Matt Karl
Latest version: 1.0.0

# JSDoc Comments

[![Build Status](https://travis-ci.org/pixijs/jsdoc-comments.svg?branch=master)](https://travis-ci.org/pixijs/jsdoc-comments)

This commandline utility exports all JSDoc-style comments from files into another folder without any code. This is useful if you want to use JSDoc but file formats do not support JavaScript parsing, for instance, TypeScript files.

This is a port of [**gulp-comments**](https://github.com/jiborobot/gulp-comments) but for use without Gulp.

## Install

```
npm i @pixi/jsdoc-comments -D
```

## Usage

Directory (either `--dir` or `-d`) is required as the output directory location. Additional arguments are used as the glob of files to include.

```
comments -d .docs "src/**/*.ts"
```

### Filters

Additional you can add a filter argument (either `--filter` or `-f`) of a tag that will exclude comment. For instance:

```
comments -d .docs -f "@internal" "src/**/*.ts"
```
npm package: @pixi/jsdoc-template
Description: PixiJS template for JSDoc 3
Author: Matt Karl
Latest version: 2.6.0

# PixiJS template for JSDoc 3

- [PixiJS](http://pixijs.com/)
- [JSDoc3](https://github.com/jsdoc3/jsdoc)
- [JSDoc3 API Documentations](http://usejsdoc.org)

## Installation

Install the template using NPM:

```bash
npm install @pixi/jsdoc-template --save-dev
```

## Usage

If you already have JSDoc system, you can use this project as JSDoc template. More information about JSDoc command-line arguments can be found [here](http://usejsdoc.org/about-commandline.html).

```bash
jsdoc -c conf.json -R README.md
```

### conf.json

You can set options for customizing your documentations. Notice the `"template"` field for setting the path to **pixi-jsdoc-template**.

```json
{
  "templates": {
      "applicationName": "Demo",
      "disqus": "",
      "googleAnalytics": "",
      "favicon": "path/to/favicon.png",
      "openGraph": {
          "title": "",
          "type": "website",
          "image": "",
          "site_name": "",
          "url": ""
      },
      "meta": {
          "title": "",
          "description": "",
          "keyword": ""
      },
      "linenums": true,
      "source": {
          "include": [
              "./src/"
          ],
          "includePattern": ".+\\.js(doc)?$",
          "excludePattern": "(^|\\/|\\\\)_"
      },
      "opts": {
          "encoding": "utf8",
          "recurse": true,
          "private": false,
          "lenient": true,
          "destination": "./docs",
          "template": "./node_modules/@pixi/jsdoc-template"
      }
  },
  "pixi": {
      "styles": ["path/to/custom/styles.css"],
      "scripts": ["path/to/custom/script.js"]
   }
}
```

## License

This project under the MIT License. and this project refered by default template for JSDoc 3.
npm package: @pixi/lights
Description: A plugin that adds deferred lighting to PixiJS v6
Author: Ivan Popelyshev
Latest version: 4.1.0

# PixiJS Lights

[![Build CI](https://github.com/pixijs/lights/actions/workflows/build.yml/badge.svg)](https://github.com/pixijs/lights/actions/workflows/build.yml) [![npm version](https://badge.fury.io/js/@pixi%2Flights.svg)](https://badge.fury.io/js/@pixi%2Flights)

A plugin that adds deferred lighting to PixiJS.

**Note**: This modules *requires* v7.0.0+ of [PixiJS](https://github.com/pixijs/pixijs) and v2.0.1+ of [@pixi/layers](https://github.com/pixijs/layers).

* [Demo](https://pixijs.io/lights/demo/)

## Usage

You have to create three layers: one for sprites, one for their normals and one for lights. Sprites and normals are rendered to temporary RenderTexture, and lights have those two textures as an input.

```js
// Get class references
import {Application, Sprite, Container, lights} from 'pixi.js';
import {Layer, Stage} from '@pixi/layers';
import {diffuseGroup, normalGroup, lightGroup, PointLight} from '@pixi/lights';

// Create new application
const app = new Application({
    backgroundColor: 0x000000, // Black is required!
    width: 800,
    height: 600
});
document.body.appendChild(app.view);

// Use the pixi-layers Stage instead of default Container
app.stage = new Stage();

// Add the background diffuse color
const diffuse = Sprite.fromImage('images/BGTextureTest.jpg');
diffuse.parentGroup = diffuseGroup;

// Add the background normal map
const normals = Sprite.fromImage('images/BGTextureNORM.jpg');
normals.parentGroup = normalGroup;

// Create the point light
const light = new PointLight(0xffffff, 1);
light.x = app.screen.width / 2;
light.y = app.screen.height / 2;

// Create a background container 
const background = new Container();
background.addChild(
    normals,
    diffuse,
    light
);

app.stage.addChild(
    // put all layers for deferred rendering of normals
    new Layer(diffuseGroup),
    new Layer(normalGroup),
    new Layer(lightGroup),
    // Add the lights and images
    background
);
```

* [Run This](https://pixijs.io/lights/examples/usage.html)

### Filters

If you want to use light shaders inside a filter, make sure its full-screen:

```js
app.stage.filters = [new BlurFilter()];
app.stage.filterArea = app.screen;
```

## Vanilla JS

Navigate `pixi-lights` npm package, take `dist/pixi-lights.js` file.

```html
<script src='lib/pixi.js'></script>
<script src='lib/pixi-lights.umd.js'></script>
```

all classes can be accessed through `PIXI.lights` global namespace.

## Building

You normally don't need to build this module, you can just download a release from the releases page.

Then you can install dependencies and build:

```js
npm i && npm run build
```

That will output the built distributables to `./lib` and `./dist`.

## Roadmap

1. More lighting types, left are:
 - Spot lights
 - Hemisphere lights
 - Area lights
2. Add dynamic shadows
3. Write tests!
npm package: @pixi/loaders
Description: Load assets and resources
Author: Mat Groves
Latest version: 6.5.10

# @pixi/loaders

## Installation

```bash
npm install @pixi/loaders
```

## Usage

Using the loader directly:

```js
import { Loader } from '@pixi/loaders';

const loader = new Loader();
loader.add('path/to/file.jpg');
loader.load(() => {});
```

Using the loader as an Application plugin:

```js 
import { AppLoaderPlugin } from '@pixi/loaders';
import { Application } from '@pixi/app';
import { extensions } from '@pixi/core';

extensions.add(AppLoaderPlugin);

const app = new Application();
app.loader.add('path/to/file.jpg');
app.loader.load(() => {});
```
npm package: @pixi/marquee-selection
Description: Marching Ants UI extension for PixiJS
Author: Matt Karl
Latest version: 1.0.2

# Marquee Selection

This is a extension for PixiJS v8 that provides a single display element for displaying a marquee selection. Also, sometimes called ["Marching Ants"](https://en.wikipedia.org/wiki/Marching_ants). As Wikipedia says:

> The marching ants effect is an animation technique often found in selection tools of computer graphics programs. It helps the user to distinguish the selection border from the image background by animating the border. The border is a dotted or dashed line where the dashes seem to move slowly sideways and up and down. This creates an illusion of ants marching in line as the black and white parts of the line start to move.

![marquee selection preview](https://userland.pixijs.io/marquee-selection/preview.gif)


## Getting Started

```
npm install @pixi/marquee-selection
```

```typescript
import { Application } from 'pixi.js';
import { MarqueeSelection } from '@pixi/marquee-selection';

const app = new Application();
await app.init();

const marquee = new MarqueeSelection();
app.stage.addChild(marquee);
```

## Links

* [Documentation](https://userland.pixijs.io/marquee-selection/docs/index.html)
* [Example](https://userland.pixijs.io/marquee-selection/examples/index.html)
npm package: @pixi/math-extras
Description: Useful methods for some math structures
Author: Milton Candelero
Latest version: 7.4.3

# @pixi/math-extras

## Installation

```bash
npm install @pixi/math-extras
```

## Usage

```js
import '@pixi/math-extras';
```

## CDN Install

Via jsDelivr:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@pixi/math-extras@7.x/dist/math-extras.min.js"></script>
```

Or via unpkg:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://unpkg.com/@pixi/math-extras@7.x/dist/math-extras.min.js"></script>
```
npm package: @pixi/mesh-extras
Description: Custom Mesh display objects, like Rope and SimplePlane
Author: Mat Groves
Latest version: 7.4.3

# @pixi/mesh-extras

## Installation

```bash
npm install @pixi/mesh-extras
```

## Usage

```js
import '@pixi/mesh';
import { Rope } from '@pixi/mesh-extras';

const rope = new Rope();
```
npm package: @pixi/mixin-cache-as-bitmap
Description: Mixin to allow caching container and its children to a bitmap texture
Author: Mat Groves
Latest version: 7.4.3

# @pixi/mixin-cache-as-bitmap

## Installation

```bash
npm install @pixi/mixin-cache-as-bitmap
```

## Usage

```js
import '@pixi/mixin-cache-as-bitmap';
```
npm package: @pixi/mixin-get-child-by-name
Description: Mixin function to find a child DisplayObject by name
Author: Mat Groves
Latest version: 7.4.3

# @pixi/mixin-get-child-by-name

## Installation

```bash
npm install @pixi/mixin-get-child-by-name
```

## Usage

```js
import '@pixi/mixin-get-child-by-name';
```
npm package: @pixi/mixin-get-global-position
Description: Mixin to find the global position of a DisplayObject
Author: Mat Groves
Latest version: 7.4.3

# @pixi/mixin-get-global-position

## Installation

```bash
npm install @pixi/mixin-get-global-position
```

## Usage

```js
import '@pixi/mixin-get-global-position';
```
npm package: @pixi/polyfill
Description: Support for legacy browser JavaScript environments
Author: Mat Groves
Latest version: 6.5.10

# @pixi/polyfill

Support for legacy browser JavaScript environments. Polyfills included:

* `Math.sign`
* `Object.assign`
* `requestAnimationFrame`
* `ArrayBuffer`
* `Float32Array`
* `Uint32Array`
* `Uint16Array`

## Installation

```bash
npm install @pixi/polyfill
```

## Usage

```js
import '@pixi/polyfill';
```
npm package: @pixi/react-animated
Description: Animate your @pixi/react components with react-spring
Latest version: 7.1.3

# React Spring

Use `"@pixi/react-animated"` with [`"@pixi/react"`](https://github.com/pixijs/pixi-react/tree/master/packages/react)
for react-spring compatible animated components.

## Usage

```jsx
import React from 'react';
import { Spring } from 'react-spring';
import { Texture } from 'pixi.js';
import { Stage, Sprite } from '@pixi/react-animated';

const App = () => (
  <Stage>
    <Spring native from={{ x: 0, y: 0 }} to={{ x: 200, y: 200 }}>
      {(props) => <Sprite texture={Texture.WHITE} tint={0xff0000} {...props} />}
    </Spring>
  </Stage>
);
```
npm package: @pixi/runner
Description: A simple alternative to events and signals with an emphasis on performance.
Author: Mat Groves
Latest version: 7.4.3

# @pixi/runner

A simple alternative to events and signals with an emphasis on performance.

Can be used as an alternative to events / signals. 

## Installation

```bash
npm install @pixi/runner
```

## Usage

```js
import { Runner } from '@pixi/runner';

const onComplete = new Runner('onComplete');

// listenerObject needs to have a 'onComplete' function
onComplete.add(listenerObject);

// emit() and all listeners will have their 'onComplete' functions called
onComplete.emit(data);
```

Can be used to execute a function on many objects. Handy for games. If you need to update you game elements each frame:

```js
import { Runner } from '@pixi/runner';

const updateRunner = new Runner('update');

// gameItems should all have a 'update' function
updateRunner.add(gameItem1);
updateRunner.add(gameItem2);
updateRunner.add(gameItem3);

// Update game elements...
updateRunner.emit();
```

## Features

- Easy to use familiar API.
- Under the hood it dynamically creates a looping function that is highly optimised. 
- Avoids using 'call' and runs the function directly (which is faster!).
- You can pass parameters when emitting.

Pros:
- Doesn't rely on strings.
- Code-completion works properly.
- Trying to dispatch or listen to an event type that doesn't exist throws errors (helps you find errors early).
- No need to create constants to store string values.
- Easy to identify which signals the object dispatch.
- Favor composition over inheritance.
- Doesn't mess with the prototype chain.
- Its fast, a lot faster than events and signals.
- Great for when performance matters.
- Its light weight, with a tiny memory footprint (smaller than events and signals)


Cons:
- Not quite as flexible. All listeners / items in the runner must have the correct function name specified within the runners constructor.

## When to Use

In practice I have found the Runner incredibly useful and so thought it would be nice to share with the world. It currently forms the backbone of the messaging system in our game engine. Its working out great for things like update events, collision events etc.

Great to use if you are say looping through and array and calling the same function on each object. The resulting code is cleaner than a loop whilst still keeping the performance as fast as possible.

So yeah, if you are dispatching signals/events to a lot of listeners often (like everyframe often), then I would consider using this alternative. For most cases, this performance boost is not really important enough to switch from your current fave.

Think of this as a nice alternative for when speed really counts!

to run the tests, move to the runner-benchmark folder then run the following:

```bash
npm run benchmark
```

Next open you browser (http://localhost:9966). The test is run in the console.
The test result above comes from macbook pro chrome 58.

Any thoughts or comments hit me up on twitter [@doormat23](https://twitter.com/doormat23), I'd love to hear them!
npm package: @pixi/sound
Description: WebAudio API playback library with filters
Author: Matt Karl @bigtimebuddy
Latest version: 6.0.1

# PixiJS Sound

WebAudio API playback library, with filters. Modern audio playback for modern browsers. 

[![Node.js CI](https://github.com/pixijs/sound/workflows/Node.js%20CI/badge.svg)](https://github.com/pixijs/sound/actions?query=workflow%3A%22Node.js+CI%22) [![npm version](https://badge.fury.io/js/%40pixi%2Fsound.svg)](https://badge.fury.io/js/%40pixi%2Fsound)

**Features**

* Pausing and resuming
* Independent volume control
* Support blocking or layered sounds (multiple instances)
* Support for `PIXI.Assets` system
* Dynamic filters:
    * ReverbFilter
    * DistortionFilter
    * EqualizerFilter
    * StereoFilter
    * TelephoneFilter

**Known Compatibility**

* Chrome 58+
* Firefox 52+
* Safari 11+
* iOS 11+

## Usage

Installation is available by [NPM](https://npmjs.org):

```bash
npm i @pixi/sound --save
```

To import into your project, for instance, when using [Webpack](https://webpack.js.org/), [Parcel](https://parceljs.org/), [Rollup](https://rollupjs.org/), or another bundler:

```typescript
import { sound } from '@pixi/sound';

sound.add('my-sound', 'path/to/file.mp3');
sound.play('my-sound');
```

### Browser Usage

If you're using a `<script>` element to import `@pixi/sound` into your project, then the SoundLibrary object is `PIXI.sound` global.

```html
<!-- PixiJS must be imported before @pixi/sound -->
<script src="https://unpkg.com/pixi.js/dist/browser/pixi.min.js"></script>

<!-- found here, if not using CDN "./node_modules/@pixi/sound/dist/pixi-sound.js" -->
<script src="https://unpkg.com/@pixi/sound/dist/pixi-sound.js"></script>

<script>
    PIXI.sound.add('my-sound', 'path/to/file.mp3');
    PIXI.sound.play('my-sound');
</script>
```

### Versions Compatibility

| PixiJS | PixiJS Sound |
|---|---|
| v5.x - v6.x | v4.x |
| v7.x | v5.x |
| v8.x | v6.x |

### Resources

* [Releases](https://github.com/pixijs/sound/releases)
* [Basics](https://pixijs.io/sound/examples/index.html)
* [Sprites](https://pixijs.io/sound/examples/sprites.html)
* [Filters](https://pixijs.io/sound/examples/filters.html)
* [Demo](https://pixijs.io/sound/examples/demo.html)
* [API Documentation](https://pixijs.io/sound/docs/index.html)

## License

MIT License.
npm package: @pixi/spatial-hash
Description: Spatial hash algorithm for PixiJS scene graphs
Author: Shukant K. Pal
Latest version: 1.1.3

# @pixi/spatial-hash - PixiJS Spatial Hash Kit

[![Node.js CI](https://github.com/SukantPal/pixi-spatial-hash/actions/workflows/node.js.yml/badge.svg)](https://github.com/SukantPal/pixi-spatial-hash/actions/workflows/node.js.yml)

This package provides an 2D spatial hash implementation. You can use the spatial-hash as standalone or as a system on
your renderer.

## Standalone usage

If you do not need to hash your entire scene graph, then using a standalone object that is infrequently updated is
ideal. This is especially true if you do not render on each tick.

```ts
import { SpatialHash } from 'pixi-spatial-hash';

const spatialHash = new SpatialHash(25);
const particleContainer = new Container();

// HINT: Setup your particle container with particles!!!

function updateSpatialHash() {
    spatialHash.reset();

    for (let i = 0; i < particleContainer.children.length; i++)
    {
        spatialHash.add(particleContainer.children[i];)
    }
}

function checkCollision() {
    updateSpatialHash();

    for (let i = 0; i < particleContainer.children.length - 1; i++)
    {
        const particle = particleContainer.children[i];
        const collidedParticles = spatialHash.search(particle.getBounds());// Set<Particle>

        if (collidedParticles.size > 0)
        {
            alert('Particles have collided!');
        }
    }
}
```

## Spatial-hash system usage

If you need a spatial hash over the whole scene graph updated each tick, then the spatial-hash system is the ideal
method:

```ts
import { SpatialHashSystem } from 'pixi-spatial-hash';
import { Application } from 'pixi.js';

const app = new Application();

document.body.appendChild(app.view);

app.renderer.addSystem(SpatialHashSystem, "spatialHash");   // Install the SpatialHashSystem
app.renderer.spatialHash.addTarget(app.stage);              // Register app.stage as a hashed-target

// Optional: Use a Ticker to update the spatial hash each frame instead. By default, the spatial hash is
// updated on each render call.
app.renderer.spatialHash.setTicker(app.ticker);

// Optional-2: Update the spatial-hash right now! You can then search for any display-objects intersecting with a display-object
// or rectangle bounds.
app.renderer.spatialHash.update();
app.renderer.search(displayObject);
```
npm package: @pixi/spine-pixi
Description: A port of the @esotericsoftware/spine-pixi runtime to PixiJS v8.
Author: PixiJS Team
Latest version: 2.1.1

# @pixi/spine-pixi

This repo is a port of the @esotericsoftware/spine-pixi runtime to PixiJS v8.

Once all features are ported we will look to add this into the esotericsoftware repo.

🚨 WARNING: Missing Features 🚨

- Ability to set dark tint
- Debug renderer has not been fully tested so YMMV
- iife bundle not tested
npm package: @pixi/svg2ttf
Description: Converts SVG font to TTF font
Author: Sergey Batishchev
Latest version: 6.1.0

svg2ttf
=======

[![CI](https://github.com/fontello/svg2ttf/actions/workflows/ci.yml/badge.svg)](https://github.com/fontello/svg2ttf/actions/workflows/ci.yml)
[![NPM version](https://img.shields.io/npm/v/svg2ttf.svg?style=flat)](https://www.npmjs.org/package/svg2ttf)

> Converts SVG fonts to TTF format. It was initially written for
[Fontello](http://fontello.com), but you can find it useful for your projects.

__For developpers:__

Internal API is similar to FontForge's one. Since primary goal
is generating iconic fonts, sources can lack some specific TTF/OTF features,
like kerning and so on. Anyway, current code is a good base for development,
because it will save you tons of hours to implement correct writing & optimizing
TTF tables.


Using from CLI
----------------

Install:

``` bash
npm install -g svg2ttf
```

Usage example:

``` bash
svg2ttf fontello.svg fontello.ttf
```


API
---

### svg2ttf(svgFontString, options) -> buf

- `svgFontString` - SVG font content
- `options`
  - `copyright` - copyright string (optional)
  - `description` - description string (optional)
  - `ts` - Unix timestamp (in seconds) to override creation time (optional)
  - `url` - manufacturer url (optional)
  - `version` - font version string, can be `Version x.y` or `x.y`.
- `buf` - internal [byte buffer](https://github.com/fontello/microbuffer)
   object, similar to DataView. It's `buffer` property is  `Uin8Array` or `Array`
   with ttf content.

Example:

``` javascript
var fs = require('fs');
var svg2ttf = require('svg2ttf');

var ttf = svg2ttf(fs.readFileSync('myfont.svg', 'utf8'), {});
fs.writeFileSync('myfont.ttf', new Buffer(ttf.buffer));
```


## svg2ttf for enterprise

Available as part of the Tidelift Subscription.

The maintainers of `svg2ttf` and thousands of other packages are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. [Learn more.](https://tidelift.com/subscription/pkg/npm-svg2ttf?utm_source=npm-svg2ttf&utm_medium=referral&utm_campaign=enterprise&utm_term=repo)
npm package: @pixi/text-html
Description: Multi-Style Text Rendering Plugin for PixiJS
Author: Matt Karl
Latest version: 7.4.3

# PixiJS HTMLText

![npm (scoped)](https://img.shields.io/npm/v/@pixi/text-html)

An alternative to `PIXI.Text` that works with both WebGL and Canvas, however, it has some advantages:

* Supports [HTML tags](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) for styling such as `<strong>`, or `<em>`, as well as `<span style="">`
* Better support for emojis and other HTML layout features, better compatibility with CSS line-height and letter-spacing.

Disadvantages:

* Unlike `PIXI.Text`, HTMLText rendering will vary slightly between platforms and browsers. HTMLText uses SVG/DOM to render text and not Context2D's fillText like `PIXI.Text`.
* Performance and memory usage is on-par with `PIXI.Text` (that is to say, slow and heavy)
* Only works with browsers that support [`<foreignObject>`](https://caniuse.com/?search=foreignObject).

## Usage

```js
import { HTMLText } from 'pixi.js';

const text = new HTMLText("Hello World", { fontSize: 20 });
```

_**Important:** Because the HTMLText object takes a raw HTML string, it's represents a potential vector for [XSS](https://en.wikipedia.org/wiki/Cross-site_scripting), it's strongly encourage you santize input especially if you're accepting user-strings._

### Custom Fonts

Because rendering within a `<foreignObject>` element does not have access to fonts available in the current document, therefore, you need to load the fonts explicitly.

```js
const text = new HTMLText("Hello World", { fontFamily: 'Custom' });

await text.style.loadFont('./path/to/custom-regular.ttf', { family: 'Custom' });
```

**Multiple Weights**

```js
const text = new HTMLText("Hello <b>World</b>", { fontFamily: 'Custom' });

await Promise.all([
    text.style.loadFont('./path/to/custom-regular.ttf', { family: 'Custom' }),
    text.style.loadFont('./path/to/custom-bold.ttf', { family: 'Custom', weight: 'bold' });
]);
```

## Styles

Not all styles and values are compatible between PIXI.Text, mainly because Text is rendered using a DOM element instead of Context2D's fillText API.

**Supported**

* `fill`
* `fontFamily`
* `fontSize`
* `fontWeight`
* `fontStyle`
* `fontVariant`
* `letterSpacing` †
* `align` (also supports `justify` value)
* `padding`
* `breakWords`
* `lineHeight` †
* `whiteSpace` (also supports `nowrap`, `pre-wrap` values)
* `wordWrap`
* `wordWrapWidth`
* `strokeThickness` ‡
* `dropShadow` ‡
* `dropShadowAngle`
* `dropShadowDistance`
* `dropShadowBlur` ‡
* `dropShadowColor`
* `stroke`
* `strokeThickness`

† _Values may differ slightly from PIXI.Text rendering._
‡ _Appearance may differ slightly between different browsers._

**Unsupported**

* `fillGradientStops`
* `fillGradientType`
* `lineJoin`
* `miterLimit`
* `textBaseline`
* `trim`
* `leading`
npm package: @pixi/ticker
Description: Tickers are control the timings within PixiJS
Author: Mat Groves
Latest version: 7.4.3

# @pixi/ticker

## Installation

```bash
npm install @pixi/ticker
```

## Usage

Create a Ticker object directly:

```js
import { Ticker } from '@pixi/ticker';

const ticker = new Ticker();
ticker.start();
```

Use as an Application plugin:

```js
import '@pixi/ticker';
import { Application } from '@pixi/app';

const app = new Application();
app.ticker.start();
```
npm package: @pixi/tilemap
Description: A low-level, optimized rectangular tilemap implementation for PixiJS.
Author: Ivan Popelyshev
Latest version: 5.0.2

# @pixi/tilemap - PixiJS Tilemap Kit

[![Automation CI](https://github.com/pixijs-userland/tilemap/actions/workflows/main.yml/badge.svg)](https://github.com/pixijs-userland/tilemap/actions/workflows/main.yml)
<p align="center">
<img src="https://i.imgur.com/hfoiBRk.png" width="1280px" />
<p/>

This package provides a low-level rectangular tilemap implementation, optimized for high performance rendering and a
out-of-the-box canvas fallback.

## Version Compatiblity

| PixiJS | PixiJS Tilemap Kit |
|--------|--------------------|
| v4.x   | v1.x               |
| v5.x   | v2.x               |
| v6.x   | v3.x               |
| v7.x   | v4.x               |
| v8.x   | v5.x               |

## Installation :package:

```bash
npm install --save @pixi/tilemap
```

You can also use the browser bundle:

```
<script src="https://cdn.jsdelivr.net/npm/@pixi/tilemap@latest/dist/pixi-tilemap.js"></script>
```

## Usage

In short, the tilemap you create will render each tile texture at the provided position and dimensions. Generally, a
spritesheet is used to load the tileset assets:

```ts
import { Assets } from 'pixi.js';
import { CompositeTilemap } from '@pixi/tilemap';

Assets.add('atlas', 'atlas.json');
Assets.load(['atlas']).then(() =>
{
    const tilemap = new CompositeTilemap();

    // Render your first tile at (0, 0)!
    tilemap.tile('grass.png', 0, 0);
});
```

`CompositeTilemap` is actually a lazy composite of layered `Tilemap` instances. A `Tilemap` has a fixed number of tile
textures (the tileset) it can render in one go. Usually, `CompositeTilemap` abstracts away this limitation in a robust
enough manner.

### Demos

* [Basic Demo (WebGL)](https://userland.pixijs.io/tilemap/examples/basic.html)
* [Basic Demo (WebGPU)](https://userland.pixijs.io/tilemap/examples/basic.html?preference=webgpu)

### Settings

```ts
import { settings } from '@pixi/tilemap';
```

| Setting | Description |
|---------|-------------|
| `TEXTURES_PER_TILEMAP` | Temporarily switched off |
| `TEXTILE_UNITS` | Temporarily switched off |
| `use32bitIndex` | There's also a limitation on 16k tiles per one tilemap. If you want to lift it, please use PixiJS v5.1.0 and following setting `settings.use32bitIndex = true;` |

## RPGMaker

Canvas fallback is 5x slower than vanilla rpgmaker. WebGL version is faster and doesnt use extra textures.

### RPGMaker Demo

* [WebGL Demo](https://userland.pixijs.io/tilemap/examples/)
  * [60% Scale](https://userland.pixijs.io/tilemap/examples/?scale=0.6)
  * [140% Scale](https://userland.pixijs.io/tilemap/examples/?scale=1.4)
* [WebGL Retina Demo](https://userland.pixijs.io/tilemap/examples/?resolution=2)
  * [60% Scale](https://userland.pixijs.io/tilemap/examples/?resolution=2&scale=0.6)
  * [140% Scale](https://userland.pixijs.io/tilemap/examples/?resolution=2&scale=1.4)
* [WebGPU Demo](https://userland.pixijs.io/tilemap/examples/?preference=webgpu)

## More Tutorials

* [Alan01252 Tutorial](https://github.com/Alan01252/pixi-tilemap-tutorial)
npm package: @pixi/unsafe-eval
Description: Adds support for environments that disallow support of new Function
Author: Matt Karl
Latest version: 7.4.3

# @pixi/unsafe-eval

Adds support for environments that disallow support of `new Function`, such as WeChat.

## Installation

```bash
npm install @pixi/unsafe-eval
```

## Usage

Import `@pixi/unsafe-eval` before you create `Application` or `Renderer`.

```js
import { Renderer } from '@pixi/core';

// Apply the patch to PIXI
import '@pixi/unsafe-eval';

// Create the renderer with patch applied
const renderer = new Renderer();
```

## CDN Install

Via jsDelivr:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://cdn.jsdelivr.net/npm/@pixi/unsafe-eval@7.x/dist/unsafe-eval.min.js"></script>
```

Or via unpkg:

```html
<!-- This script tag should be placed after pixi.min.js -->
<script src="https://unpkg.com/@pixi/unsafe-eval@7.x/dist/unsafe-eval.min.js"></script>
```
npm package: @pixi/webdoc-docusaurus-template
Description: PixiJS' webdoc + docusaurus template for API documentation
Author: Zyie
Latest version: 1.0.1

# @pixi/webdoc-docusaurus-template

This template is used to generate the markdown files to be consumed by Docusaurus for PixiJS API documentation

For usage, see [webdoc](https://github.com/webdoc-labs/webdoc).
npm package: @pixi/webdoc-template
Description: PixiJS' webdoc template for API documentation
Author: Shukant K. Pal
Latest version: 2.2.3

# @pixi/webdoc-template

This template is used to generate the standalone PixiJS API documentation and was based on [pixi-jsdoc-template](https://github.com/pixijs/pixi-jsdoc-template).

For usage, see [webdoc](https://github.com/webdoc-labs/webdoc).

## Working with docs generation

- Docs generation triggers the `publish.js` script which will generate and manipulate all the doc nodes that are then used to build out the docs HTML files - based on the templates within the `tmpl` directory. The `.tmpl` template files can be edited directly and will be reflected on rebuild.
- Static resources within the `static` directory will also be copied over into the directory where the compiled HTML files go, which include the scripts and the styles.
- To iterate on the `publish.js`, the `main.js` script and the `main.css`, please refer to the `src` directory which hold all the source files for these 3 compiled files.
  - `src/index.js` is the entry point for the compilation of `publish.js` while `src/static/index.js` is for `main.js` that gets loaded on the client.
  - `src/static/styles/index.scss` is the entry point for the compilation of `main.css` that also gets loaded alongside the client from within the HTML files.
- Once altered, run `npm run build` to kick start the compilation. `npm run watch` is also available for re-compilation on changes.
npm package: @pixi/webworker-plugins
Description: Plugins for Web Workers
Author: SuperSodaSea
Latest version: 1.0.1

# @pixi/webworker-plugins

[![npm version](https://badge.fury.io/js/@pixi%2Fwebworker-plugins.svg)](https://www.npmjs.com/package/@pixi/webworker-plugins)

Plugins for Web Workers.

```ts
import FooWorker from 'worker:./foo.worker.ts';
```


## Install

```bash
npm install @pixi/webworker-plugins --save-dev
```


## `@pixi/webworker-plugins/jest-transform`

Jest transform for Web Workers.

### Usage

Add the following code to your **jest.config.js**:

```js
module.exports = {
    transform: {
        '\\.worker.ts$': '@pixi/webworker-plugins/lib/jest-transform',
    },
    moduleNameMapper: {
        '^worker:(.*)$': '$1',
    },
    // ...
};
```


## `@pixi/webworker-plugins/rollup-plugin`

Rollup plugin for Web Workers.

### Usage

Add the following code to your **rollup.config.mjs**:

```js
import webworker from '@pixi/webworker-plugins/rollup-plugin';

export default {
    plugins: [
        webworker(),
    ],
    // ...
};
```