pixi-plugin-example v2.0.0
PixiJS plugin example
This is a demo project with collection of simple hacks for PixiJS.
You can make your own pixi plugin based on this repo.
Algorithms represented in this repo hack several parts of Pixi - you can take those ideas and expand them.
If you are that desperate, you can add use it through npm pixi-plugin-example:'=version'
, because we do not guarantee any back compatibility! This is not a plugin, its a tutorial!
How to make your own plugin for PixiJS
People will like the fact that you want to ease their life with with one line
import 'pixi-awesome-plugin'
Follow the steps:
1. Clone repo locally
2. Create your own repository and copy all the code there
3. Remove folders from src
, except those you want to use as base for plugin
4. Remove everything from examples
, leave examples that is close to what you want
5. Put your code in src
, example in examples
, test that it works
6. Replace all pixi-plugin-example
in package.json
to your plugin name
7. Change version to 0.1.0
or whatever you want
8. Change UMD namespace and file names in examples
accordingly
9. Make sure you use only necessary pixi plugins in peerDependencies
and devDependencies
, they have to be the same!
10. Add/Remove GlobalMixins from global.d.ts
to hack pixi interfaces
11. Check that project builds
12. Start web server here (like http-server -c-1
) and check that example works
13. Write a README, and publish your plugin to npm!
Extra tips:
- When you make changes and want to re-publish, you can use
npm run release:patch
to change version of lib. - If you reference
@pixi/layers
or some other plugins, changerollup.config.js
accordingly, otherwise they'll be compiled inside your lib - remove all "lint"-related commands from
package.json
if you don't like our code style or it obstructs you - Contact Ivan to add your plugin to PixiJS Wiki
List of demos
filters
changing FilterSystem for profit
That's enough for now :)
How to build
npm i
npm run build
Vanilla JS, UMD build
All pixiJS v6 plugins has special umd
build suited for vanilla.
Navigate pixi-plugin-example
npm package, take dist/pixi-plugin-example.umd.js
file.
<script src='lib/pixi.js'></script>
<script src='lib/pixi-plugin-example.umd.js'></script>
Also, you can access CDN link, something like https://cdn.jsdelivr.net/npm/pixi-plugin-example@latest/dist/pixi-plugin-example.umd.js
all classes can be accessed through PIXI.example
package.
How to contribute
Just make PR.