pixijs / examples

Rendering examples using PixiJS and related plugins

Warning This repository is no longer maintained. Examples have been moved into the main website's repository and is deployed to pixijs.com/examples.

PixiJS Examples Guidelines

This is the repository for examples using latest version of PixiJS.

The iframe that displays the examples is 800 * 600, consequently please avoid creating a renderer that is larger than these dimensions.

Running

This micro-site is built using HTML and jQuery and can be run on your local server without additional requirements.

If you change the site code within src/main.js or any styling within src/main.less you will need to rebuild the project. After installing dependencies via npm i, you can perform a one off projection build via npm run watch, or you can start a watch process for development via npm run watch.

Project Structure

All the examples are stored in the public/examples/js folder and loaded via the public/examples/manifest.json file.

All the assets are stored in public/examples/assets.

Every sub-folder in the examples folder corresponds to a sub-menu in the website's sidebar.

Creating an Example

You can use the basic example as a template, it is located in public/examples/js/demos-basic/container.js. All you need to do is copy and paste this file to where you think your example belongs within the examples/js folder structure, and change the contents to make a new example. You will then also need to update the public/examples/manifest.json to allow the menu to point to your new example.

examples's Issues

[BUG] - pixi example mouse trail on chrome (windows 8.1)

I'm using pixi v4.8.5 in my project and when I started to test it in one old notebook I noticed a bug in PIXI.mesh.Rope. Went to the official pixi examples to see how it would behave and realized the bug also happens there.

Expected Behavior

Current Behavior

Environment

• pixi.js version: 4.8.5
• Browser: CHROME 81.0.4044.92
• OS: Windows 8.1 Pro
• Graphics card: Intel HD Graphics 3000

The same thing happens in v5 with the latest pixi version (using PIXI.SimpleRope).

The bug is also present when running on Opera (Version 67.0.3575.137).
It doesn't happen in Firefox (75.0).

If I use the flag forceCanves: true it works as expected, but the performance is not good.
The flag legacy: true doesn't fix it.

I decided to check my chrome on webglreport.com:

Firefox receives the green OK message for webgl1 and webgl2. Opera and chrome have the same results.

System says the driver is up to date.

I also have ubuntu 16.04 running on the same PC and the bug doesn't happen there (tested latest chrome and firefox).

Is there any workaround?

Gray cursor on gray background in examples on website

For example:
https://pixijs.io/examples/#/basics/basic.js
Users can edit the code and change the visible result. Ok try to do something with code. It becomes a hell because cursor intermix with background - they have similar colors.

Invalid comment in CacheAsBitmap example

At line 62 in /examples/?v=v6.0.4#/demos-basic/cacheAsBitmap.js
there are a comment:

    // var sprite = new PIXI.Sprite(alienContainer.generateTexture());
    // app.stage.addChild(sprite);
    // sprite.x = Math.random() * 800;
    // sprite.y = Math.random() * 600;

PIXI.Container.generateTexture - is not a function - example failed on PIXI 6.0.4

Masking demo looks weird.

There's something wrong with Masking demo.

Maybe it's intentional but I don't think so. It used to look like this:

And now it's like:

After bit of digging looks like this code was shorted before:

thing.beginFill(0x8bc5ff, 0.4);
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.rotation = count * 0.1;

So I'm guessing something went wrong while moving examples around.
If somehow it's how it's suppose to look like, just close this issue.

Could you add the demo of pixi-tilemap in pixi examples ?

pixi-tilemap : https://github.com/pixijs/pixi-tilemap

Can assets in this repo be used for commercial purposes?

Hey there, I was just wondering if the characters in this repo could be used commercially in other websites? I've noticed the package json file mentions MIT license, I'm just not sure if that applies to all the assets in the repo as well?

If they so happen to not be allowed to be used commercially, does anyone know a marketplace where I could by assets to use with this framework? (I'm specially interested in characters that could be used with the spine framework)

Thanks 😊

Features: Improvements to Examples

Feature Improvements

Having upgrade examples to work with v7, there are bunch of improvements that could make this examples project much better.

• Convert src code to be React, remove jQuery
• Convert styles to be SASS instead of LESS
• Upgrade ESLint to latest, revisit config rules
• Use History API to track changes (back, forward navigation)
• Decouple the file system organization and manifest organization
• Handle 404s with requests
• Add embed code generation (e.g., ?embed=1&lite=1)
• Don't embed plugin builds, source from an external CDN
• Support for export for 3rd party tools (e.g, codepen, jsfiddle, codesandbox.io)
• Revisit responsive design for large screen-sizes (weird positioning)

basic.js example uses division instead of multiplication for frame-independent transformation

In example basic.js, there is the code:

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.rotation += 0.1 / delta;
});

Instead, it should be:

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.rotation += 0.1 * delta;
});

Delta is greater if there is a greater time difference between steps. To ensure the same speed of rotation at any performance, there should be multiplication.

We made a wrong move

#24 just nuked examples for all version prior to 4.3.3

Cannot set backgroundColor to black (0x000000)

When I set backgroundColor: 0x000000, it won't turn black unless it's inside quote '0x000000'.

var renderer = PIXI.autoDetectRenderer(800, 800,  {backgroundColor: 0x000000});

Is it possible to create a transparent sprite?

I need transparent sprites that will be placed on canvas to trigger specific events when clicked. This way they dont override the background image of the canvas.

Demo website has issues in Firefox

I was unable to select items from the navigation in Firefox, I assume because of the attached Javascript error.

Works fine in Chrome.

TypeError: e.event.props is undefined[Learn More] examples:3:3027
    <anonymous> https://pixijs.io/examples/#/basics/basic.js:3
    <anonymous> https://pixijs.io/examples/#/basics/basic.js:3
    <anonymous> https://pixijs.io/examples/#/basics/basic.js:3
    <anonymous> https://pixijs.io/examples/#/basics/basic.js:3
    m6jQuery

SpectorJS doesnt work with examples

Subj. Because we use iframe, spector doesnt detect the canvas. Maybe there's a way to fight that.

Copy to create new examples doesnt work

In the readme you write how to create your own examples:

All you need to do is copy and paste this file to where you think your example belongs.
You can then come back to the browser and navigate to your file and start changing it.

Actually you need to explain a bit more. After creating an example you need to add it to the manifest.json in the root folder of the examples. This was working for me.

missing bezier arrow example

hi, i want draw a dynamic arrow with bezier curve, but i can find demo on how draw a arrow with graphics.
how i can perform this?

it for use in this kind of context, but i can't perform this in photoshop, too complex to do.

it possible to add a bezier arrow in pixi demo to help understand?
Or if someone have a code to share ?
https://www.pixiplayground.com/#/edit/cohufb~Y8gCB8VPlmql8f
thanks in advance.

Version Selector Cut-off with Version Warning

When the current version doesn't work with the example, the pop-up selector for the version is cutoff.

Also, might be nice to include a warning ⚠️ symbol next to the error message and give it some more padding, so it's a little more obvious. Doing this might solve the select cut-off.

how to use dragbones getbone??

how to use dragbones getbone??
` const app = new PIXI.Application({ antialias: true });
document.body.appendChild(app.view);

app.stop();

// load spine data
PIXI.Loader.shared
    .add('skeleton', '/moban/dragonbones/Dragon_ske.json')
    .add('texture_json', '/moban/dragonbones/Dragon_tex.json')
    .add('texture_png', '/moban/dragonbones/Dragon_tex.png')
    .load(onAssetsLoaded);

function onAssetsLoaded(loader, res) {
    const factory = dragonBones.PixiFactory.factory;

    factory.parseDragonBonesData(res.skeleton.data);
    factory.parseTextureAtlasData(res.texture_json.data, res.texture_png.texture);
    var armature = factory.buildArmature("Dragon");
    // var armatureDisplay = armature.getDisplay();
    var armatureDisplay = factory.buildArmatureDisplay('Dragon', 'Dragon');
    // armatureDisplay.animation.play('walk');
    armatureDisplay.x = 400.0;
    armatureDisplay.y = 400.0;
    armatureDisplay.scale.x = 0.6;
    armatureDisplay.scale.y = 0.6;
     //调整动画速度
    // armatureDisplay.animation.timeScale = 0.1;

    //控制骨骼旋转
    var head =armature.getBone("head");
    head.offset.rotation = 0.6;
    head.invalidUpdate();
    app.stage.addChild(armatureDisplay);
    // setTimeout(function() {
    //     armatureDisplay.animation.play('stand');
    //     setTimeout(function() {
    //         armatureDisplay.animation.play('walk');
    //     }, 2000)
    // }, 2000)

    app.start();
}`

this is no effect

Typo in comment on tinting example page

Just small typo on tinting example page.

centerd -> centered

Text Demo

Hi the text demo here:
http://pixijs.github.io/examples/index.html?s=basics&f=text.js&title=Text
and here
https://github.com/pixijs/examples/blob/gh-pages/examples/basics/text.js

the font option has the incorrect order for the styling:
var style = {
font : '36px Arial bold italic',

should be:
var style = {
font : 'bold italic 36px Arial',

cheers and thanks for your hard work on PIXI.js

How to debug examples in Chrome?

I cloned examples repo git clone https://github.com/pixijs/examples and built it with npm run build. I want to be able to debug examples in Chrome. I mean set breakpoint in PIXI.Application, etc. With http-server -c-1 I do not see such an option. Running build seemed to be bundled and minified (pixi-examples.min.js). Is there such an option to debug examples? Or maybe should I request it?

why do the examples still reference PIXI.Stage?

I thought these examples are for v3

add link to logo

to make returning to the rest of the website possible

https://github.com/pixijs/examples/blob/gh-pages/index.html#L18

v4 examples are not working

This is the console error:

ERROR: 0:116: '26' : memory exhausted 

pixi.js:6453 WebGL: INVALID_VALUE: attachShader: no object or object deleted

pixi.js:6459 Pixi.js Error: Could not initialize shader.24.compileProgram @ pixi.js:6459
19.Shader @ pixi.js:5769
generateMultiTextureShader @ pixi.js:17743
88.SpriteRenderer.onContextChange @ pixi.js:17470
emit @ pixi.js:1238
...
window.onload   @   VM294:1

Update for pixi-spine

@englercj Can you tell me where pixi.js is referenced from html, so I can add pixi-spine there too?

Interactivity Error in Latest ver..

I found I can't do click event in this demo...
addr:
http://pixijs.github.io/examples/?v=v4.1.0#/demos/interactivity.js

In fact other demo like:
addr:
http://pixijs.github.io/examples/?v=v4.1.0#/basics/click.js

are works bad!!!!

And I have test other version....I found this is only in latest ver..It works fine in v4.0.3

My Device info:
Mac OS 10.11.5 and Mac Chrome v53.0.2785.30 dev (64-bit)

About the cdn , again

Could you change a cdn ?

example https://www.jsdelivr.com/

Interactive demo doesn't seem to be accessible

I read on the main page that all pixi content is accessible. From a brief look through the accessibility code here on GitHub, it seems content should become accessible (i.e. generate matching HTML) on pressing TAB. However, when I press tab on the examples page https://pixijs.io/examples/#/interaction/interactivity.js, nothing happens.

Please change another sprite in demo Particle Container!

Maggots are so terrible 😭😭😭😭😭

Video doesn't show in the examples

Hi guys, i found the trouble.
Maybe you know about that.
But anyway, in example on this LINK
Video show only in 4.0.0 version.
In version 4.0.1 and above video doesn't work, only music.
I checked in Google Chrome 53.0.2785.143 and Firefox 43.0.2

Pixi Spine Walking Animation Example Throws Error

The example shown on the documentation site here throws an error when I try to view it:
http://pixijs.github.io/examples/#/spine/spineboy.js

Error in console:
Uncaught Error: Cannot add resources while the loader is running.
at Loader.add (pixi.js:5190)
at Loader. (pixi-spine.js:5457)
at pixi.js:5432
at next (pixi.js:6616)
at Loader.bitmapFontParser (pixi.js:32776)
at pixi.js:5432
at next (pixi.js:6616)
at Loader.spritesheetParser (pixi.js:33098)
at pixi.js:5432
at next (pixi.js:6616)

It looks like all the spine examples have this issue since none are working for me.
On Chrome Version 55.0.2883.87 m

website is snail ?

I can't open it , can fix it ?

Examples on pixi website don't seem to be accessible?

I read on the main page that all pixi content is accessible. From a brief look through the accessibility code here on GitHub, it seems content should become accessible (i.e. generate matching HTML) on pressing TAB. However, when I press tab on the examples page https://pixijs.io/examples/#/demos-basic/container.js, nothing happens.

In the README you reference a basic.html that doesn't exist

I see an html file index.html at / but not in the subdirectory you point out.

required/examples/basics/basic.html

this exists mind you:
required/examples/basics/basic.js

Fails on `npm start`

I followed the instructions and get an error:

    [01:15:29] Using gulpfile ~/github/examples/gulpfile.js
    [01:15:29] Starting 'build'...
    [01:15:29] Starting 'clean'...
    [01:15:29] Starting 'serve'...
    [01:15:29] Finished 'serve' after 42 ms
    [01:15:29] Server started http://localhost:9000
    [01:15:29] LiveReload started on port 35729
    [01:15:29] Finished 'clean' after 67 ms
    [01:15:29] Starting 'assets'...
    [01:15:29] Starting 'html:index'...
    [01:15:29] Starting 'styles:common'...
    [01:15:29] Starting 'jshint'...
    /Users/me/github/examples/node_modules/gulp-less/index.js:68
        }).done(undefined, cb);
           ^

The updated pixi-spine.js should be put into _site/js/plugins

Hi,

Right now there are two copies of pixi-spine,js, one is under _site/js/plugings, the other is under _site/js.
However, the editor will use the one under _site/js/plugins.

Regarding 34f72fe

Why does the dragonBones animation not display correctly if it uses a mesh?

add license?

which license are code examples and assets shared under?

The old version document is gone !

As the title. I can't found the old version document on the web. My team is still use version 4.

what editor they use to create the animation ?

Hi I am new using this framework.
I see this example and I would like to know which editor they use to generate the json with the animation. This is just a doubt. Your answer will very help

graphics simple / drawStar is not a function

https://pixijs.io/examples/#/graphics/simple.js

I'm new to pixi.js, but I expect this function was deprecated/renamed at some point?

mesh examples not working

mesh examples are not working, black canvas

http://pixijs.io/examples/#/mesh/triangle-color.js

Text not visible in Cards example

In the plugin-projection 3D cards example, the 'Tap on cards' text does not display.

algorithmic Zoom calculation for canvas and render

would be great if we could have an example with a zoom based on mouse position for canvas rendering.
I am not sure of the mathematical formula to use with event.
A example could help.
Thank you guys.

const mapZoom = SM_S._spriteset._tilemap.scale; // zoom based on scale the render
    function wheel_(event) {//TODO: zoom system
        if(event.wheelDeltaY>0){
            mapZoom.x+=0.05;
            mapZoom.y+=0.05;
            $gameMap._displayX+=0.05
            dX+=0.05;
        }else{
            mapZoom.x-=0.05;
            mapZoom.y-=0.05;
            $gameMap._displayX-=0.05
            dX-=0.05;
        }
    };

Upgrade to v7.0.0

This project will need some work upgrading to v7:

• Removes interaction plugin (replaces with events)
• Removes Loader (replaces with Assets)

There are several plugins that will also require updating.

Security Error in 3D Cards example

Error: "Failed to execute 'texImage2D' on 'WebGL2RenderingContext': The image element contains cross-origin data, and may not be loaded.".
If I understand right, couse of error is CORS. But how to fix it?

Incomplete path in drawStar

Expected Behavior

Complete lineStyle

Current Behavior

Is missing the last segment.

Possible Solution

pixijs/pixijs#5462

Steps to Reproduce

https://www.pixiplayground.com/#/edit/Ytz80nX7aREstArPfAkV3

Environment

• pixi.js version: v5.0.0-rc.2
• Browser & Version: Chrome Version 72.0.3626.109 (Official Build) (64-bit)_
• OS & Version: Windows 7

Cannot build app

when using npm run build it is showing this

F:\pixi-test\examples\examples\js\plugin-picture\mask-blur.js
9:22 error Strings must use singlequote quotes
11:16 error Strings must use singlequote quotes
11:37 error Strings must use singlequote quotes
18:5 error Expected exception block, space or tab after '//' in comment spaced-comment
43:23 error There should be no line break before or after '=' operator-linebreak
44:9 error Strings must use singlequote quotes
44:47 error '+' should be placed at the beginning of the line operator-linebreak
45:9 error Strings must use singlequote quotes
45:59 error '+' should be placed at the beginning of the line operator-linebreak
46:9 error Strings must use singlequote quotes
59:30 error Strings must use singlequote quotes
59:54 error Missing trailing comma comma-dangle

F:\pixi-test\examples\examples\js\text\text.js
25:22 error Missing trailing comma comma-dangle
40:22 error Strings must use singlequote quotes
45:17 error Strings must use singlequote quotes
46:15 error Strings must use singlequote quotes
47:24 error Missing trailing comma comma-dangle
51:23 error A space is required after ',' comma-spacing

Examples broken, PIXI not loading

Looks like all examples on the website are broken at the minute:

Iframe reload does not free previous window

After reloading the code, all previous tickers are still alive. That's the source of memory and performance leak.

Video example issues

1. testVideo.mp4 returns a 404 error
2. This feature seems broken on Firefox Android (I tested it with a video of mine). It says NS_ERROR_NOT_AVAILABLE