Giter Site home page Giter Site logo

pixijs / pixijs Goto Github PK

View Code? Open in Web Editor NEW
37.6K 1.0K 4.4K 81.57 MB

The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.

Home Page:

License: MIT License

JavaScript 3.82% GLSL 0.69% PLSQL 0.71% TypeScript 94.78%
canvas2d pixijs javascript webgl glsl canvas rendering pixi game renderer rendering-engine rendering-2d-graphics data-visualization

pixijs's Introduction

PixiJS — The HTML5 Creation Engine

pixi.js logo

Discord npm version Node.js CI

The aim of this project is to provide a fast lightweight 2D library that works across all devices. The PixiJS renderer allows everyone to enjoy the power of hardware acceleration without prior knowledge of WebGL. Also, it's fast. Really fast.

If you want to keep up to date with the latest PixiJS news then feel free to follow us on Twitter @PixiJS and we will keep you posted! You can also check back on our site as any breakthroughs will be posted up there too!

We are now a part of the Open Collective and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!

What to Use PixiJS for and When to Use It

PixiJS is a rendering library that will allow you to create rich, interactive graphics, cross-platform applications, and games without having to dive into the WebGL API or deal with browser and device compatibility.

PixiJS has full WebGL support and seamlessly falls back to HTML5's canvas if needed. As a framework, PixiJS is a fantastic tool for authoring interactive content, especially with the move away from Adobe Flash in recent years. Use it for your graphics rich, interactive websites, applications, and HTML5 games. Out of the box, cross-platform compatibility and graceful degradation mean you have less work to do and have more fun doing it! If you want to create polished and refined experiences relatively quickly, without delving into dense, low-level code, all while avoiding the headaches of browser inconsistencies, then sprinkle your next project with some PixiJS magic!

Boost your development and feel free to use your imagination!


  • Website: Find out more about PixiJS on the official website.
  • Getting started:
    • Check out @kittykatattack's comprehensive tutorial.
    • Also check out @miltoncandelero's PixiJS tutorials aimed toward videogames with recipes, best practices and TypeScript / npm / webpack setup here
  • Examples: Get stuck right in and play around with PixiJS code and features right here!
  • Docs: Get to know the PixiJS API by checking out the docs.
  • Guide: Supplementary guide to the API documentation here.
  • Wiki: Other misc tutorials and resources are on the Wiki.


  • Forums: Check out the forum and Stackoverflow, both friendly places to ask your PixiJS questions.
  • Inspiration: Check out the gallery to see some of the amazing things people have created!
  • Chat: You can join us on Discord to chat about PixiJS.


It's easy to get started with PixiJS! Simply download a prebuilt build!

Alternatively, PixiJS can be installed with npm or simply using a content delivery network (CDN) URL to embed PixiJS directly on your HTML page.

Note: After v4.5.0, support for the Bower package manager has been dropped. Please see the release notes for more information.

NPM Install

npm install pixi.js

There is no default export. The correct way to import PixiJS is:

import * as PIXI from 'pixi.js'

CDN Install (via cdnjs)

<script src=""></script>

Note: 5.1.3 can be replaced by any released version.


Thanks to @photonstorm for providing those last 2 examples and allowing us to share the source code :)


Want to be part of the PixiJS project? Great! All are welcome! We will get there quicker together :) Whether you find a bug, have a great feature request or you fancy owning a task from the road map above feel free to get in touch.

Make sure to read the Contributing Guide before submitting changes.

Current features

  • WebGL renderer (with automatic smart batching allowing for REALLY fast performance)
  • Canvas renderer (Fastest in town!)
  • Full scene graph
  • Super easy to use API (similar to the flash display list API)
  • Support for texture atlases
  • Asset loader / sprite sheet loader
  • Auto-detect which renderer should be used
  • Full Mouse and Multi-touch Interaction
  • Text
  • BitmapFont text
  • Multiline Text
  • Render Texture
  • Primitive Drawing
  • Masking
  • Filters
  • User Plugins

Basic Usage Example

import { Application, Sprite, Assets } from 'pixi.js';

// The application will create a renderer using WebGL, if possible,
// with a fallback to a canvas render. It will also setup the ticker
// and the root stage PIXI.Container
const app = new Application();

// The application will create a canvas element for you that you
// can then insert into the DOM

// load the texture we need
const texture = await Assets.load('bunny.png');

// This creates a texture from a 'bunny.png' image
const bunny = new Sprite(texture);

// Setup the position of the bunny
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

// Rotate around the center
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;

// Add the bunny to the scene we are building

// Listen for frame updates
app.ticker.add(() => {
    // each frame we spin the bunny around a bit
    bunny.rotation += 0.01;

How to build

Note that for most users you don't need to build this project. If all you want is to use PixiJS, then just download one of our prebuilt releases. Really the only time you should need to build PixiJS is if you are developing it.

If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm:

npm install

Then, to build the source, run:

npm run build

Error installing gl package

In most cases installing gl from npm should just work. However, if you run into problems you might need to adjust your system configuration and make sure all your dependencies are up to date

Please refer to the gl installation guide for more information.

Error installing canvas package

The canvas library currently being used does not have a pre-built version for every environment. When the package detects an unsupported environment, it will try to build from source.

To build from source you will need to make sure you have the following dependencies installed and then reinstall:

brew install pkg-config cairo pango libpng jpeg giflib librsvg

For non-mac users, please refer to the canvas installation guide for more information.

How to generate the documentation

The docs can be generated using npm:

npm run docs

The documentation uses webdoc in combination with this template pixi-webdoc-template. The configuration file can be found at webdoc.conf.json


This content is released under the ( MIT License.

pixijs's People


GoodBoyDigital avatar englercj avatar bigtimebuddy avatar ivanpopelyshev avatar ShukantPal avatar themoonrat avatar staff0rd avatar dev7355608 avatar Zyie avatar alvinsight avatar drkibitz avatar photonstorm avatar stbaer avatar eXponenta avatar JetLua avatar andrewstart avatar krzysztof-o avatar AMorporkian avatar jasonsturges avatar SerG-Y avatar SebastianNette avatar agamemnus avatar miltoncandelero avatar serprex avatar SirKnightDragoon avatar mattdesl avatar TheWyo avatar spaceribs avatar namuol avatar mofnire avatar


 avatar 恶魔狮子 avatar  avatar  avatar  avatar Ankitkumar Santosh Singh avatar Dominic Bachmann avatar  avatar Oleg Abrazhaev avatar Hoel Shen avatar Luis Miguel Alvarado avatar Marcin Zieliński avatar Darshik Gori avatar Vítor Fernandes Fonseca da Costa avatar  avatar  avatar Markus Häcker avatar Thakor Yashpal avatar Alan avatar  avatar IcetCode avatar ChanMo avatar Tryston Perry avatar Serge Ivlev avatar Guillaume LEROY avatar Adib Ulinuha avatar damalga avatar sorae_42 avatar Ahai-8 avatar Dee avatar  avatar Chris Hu avatar  avatar Nyi Nyi Lwin avatar 김윤우 avatar Jie avatar yangcoder avatar Dashpilot avatar Arjay Gallentes avatar Damien Roche avatar sunil avatar Kfir Goldfarb avatar Bryan Housel avatar Lion Schitik avatar balanceglove2 avatar  avatar  avatar Charles Lo avatar  avatar Noe Zuniga avatar  avatar Eduardo Pineda Guerra avatar JeffreyBool avatar 子龙 avatar chf007 avatar Hanlin avatar YantaoZhao avatar Chanuka Samarasinghe avatar  avatar André Queiroz avatar Wuxue avatar  avatar Marcell Kiss avatar avatar CoolSnow avatar  avatar 道易 avatar 阿基米胡 avatar  avatar Chase William avatar Rafael de Figueiredo Alves avatar  avatar RETEX avatar selçuk güler avatar Zihan Chen avatar caesarzztt avatar silvesterwali avatar Burden Haze  avatar Pranev avatar kimn avatar minjian.cai avatar Surgor avatar Jaya avatar Ersoy Filinte avatar Muhammad Iqbal avatar canoe avatar  avatar Adrien Fischer avatar wakary avatar fxrazor avatar Poverty avatar Brice Parent avatar  avatar  avatar Caique C Pereira avatar  avatar __承_影__ avatar 魏轲鑫 avatar Anton Kindt avatar A粒麦子 avatar


arden avatar ippa avatar azu avatar i17c avatar  avatar  avatar  avatar Rozario Chivers avatar Bryan Housel avatar Abhik Khanra avatar Miguel Carmona avatar JIN Tao avatar Ryan Parr avatar Dimitri del Marmol avatar Jeff Fox avatar Bernardino Lopez avatar Dirk Johnson avatar Fernando Zendron avatar grayflow avatar Bruno Campos avatar Tom Trenka avatar Troy Hitch avatar Petr Vostřel avatar Abhijeet Kaulgud avatar Karol Adamczyk avatar Maciej Kuś avatar Mofasa avatar  avatar Ademilson avatar AsO avatar Lane Allen avatar julyzergcn avatar Joven A. Barola avatar André Philip avatar Maxim Vavilov avatar 雷 avatar h3nr7 avatar  avatar  avatar davidwei_001 avatar Byron Manley avatar Ultravisionist avatar star avatar Richard Davey avatar  avatar Lorenzo Gatti avatar evandrix avatar Zhang Haocong avatar Jason Davis avatar 宋琦 avatar clark avatar Carlos avatar atsuo yamada avatar  avatar Pascal Van Hecke avatar Meigo Kukk avatar Peter Schmidler avatar Seb Schmidt avatar  avatar Marco Gallen avatar frankwinter avatar Kaloyan Ivanov avatar Jamie Owen avatar  avatar Monkey avatar send2vinnie avatar  avatar  avatar Owen Lawson avatar Brian Holman avatar finscn avatar Lissa Aguilar avatar alcemir fernandes soares avatar Sam Welker avatar  avatar 月影 avatar Adam Telfer avatar Nick Chan avatar Mr.Flash avatar Yuan Liang avatar Richard Hess avatar Pablo Targa avatar Francesco Sorrentino avatar dafei1288 avatar roadlabs avatar Yoshiyuki Ieyama avatar Aspirin Shi avatar Jamie Knight avatar Ariel Gerardo Ríos avatar Leïla Sofiane avatar vitrum.zhu avatar  avatar Alex Burner avatar Jesse Freeman avatar Yichang avatar Andrea Mucci avatar xRay avatar Bob Smith avatar Damien Chaillou avatar David Oster aka George Pasparakis avatar

pixijs's Issues

Remove, then render the same stage (toggle a stage) possible?

I'm attempting to render a pixi stage (PIXI.autoDetectRenderer) into a canvas element, then via a separate JS remove the stage by selecting it's container in jquery and emptying out the respective canvas element.

When I try to render the same pixi stage again, I run into a bunch of WebGL related errors like this:

WebGL: INVALID_OPERATION: bindTexture: object not from this context

I assume this is because I'm merely emptying out the canvas element, but the related WebGL objects still exist somewhere in memory.

Is there an easy way to be able toggle the existence of a pixi stage?

Spritesheet frames are displayed incorrectly in Safari on Windows 7


I can't attach the JSON file to test with, but this sprite sheet renders correctly in Firefox/IE/Chrome but flickers in Safari on windows. Also, to make it run I had to comment out the line:

throw new Error("Texture Error: frame does not fit inside the base Texture dimensions " + this);

on 3624 of because it kept throwing an error there, even though the sprite sheet seems valid. If I remove that validation check the frames appear to be animating correctly.

The validation error happens across all browsers.

Let me know if you'd like me to email you the files I am working with.

Setting depth of Sprite?

It would be great to have a "swap depth" feature like in Flash so you can do simple 3D transforms using the formula:

var s1= new Sprite();
var scale = focalLength / (focalLength + z);
s1.position.x = x * scale;
s1.position.y = y * scale;
s1.scale = scale;

And then sort by scale.

setInteractive( true ) causes a ReferenceError: stage is not defined

am i doing something wrong here????

var textureList = [];

var max = soul.fileList.length;
trace("the max looks like " + max );

for ( var i = 0; i < max; i++ )
var texture = PIXI.Texture.fromImage( soul.fileList[i] );
if ( texture != null ) textureList.push( texture );


soul.display = new PIXI.MovieClip( textureList );

Android default browser bugs

Hi, this goes for Android in general, but I need to have a rendering engine that works on all the 2.x~ 4.x Android devices.

I was just trying Run pixi run on a Samsung Galaxy S3's default browser (the most popular handset yet) and it has serious rendering bugs that it makes the game unplayable.

What's do you think on this issue?
Thank you!

InteractionManager: Uncaught ReferenceError

Hi there!
There is a little bug in the InteractionManager:

PIXI.InteractionManager.prototype.onTouchEnd = function(event)

If you use a touchEvent like "touchStart" or "touchEnd", the console return:

Uncaught ReferenceError: itemTouchData is not defined 

Can we just update with:

PIXI.InteractionManager.prototype.onTouchEnd = function(event) {
  var rect =;
  var changedTouches = event.changedTouches;

  for (var i=0; i < changedTouches.length; i++) {
    var itemTouchData; // <-- Here?!
    var touchEvent = changedTouches[i];


compare with three.js

I'm using THREE.js for a 2d game project.

It seems like the webgl batching performance optimisation, and the interaction manager, are where pixi.js distinguishes itself from other libraries.

Are there other points? THREE.js feels like overkill for my project and I'd prefer to use something specifically 2d oriented.

When does a Sprite's width and height become valid?

When I load a texture into a sprite, and then ask for the sprite's width, I get a value of 1. Only after going through the animation loop a couple times does the width become valid. Is there a reliable way to check the dimensions of a loaded texture?

  var stage = new PIXI.Stage(0x66FF99);
  var renderer = new PIXI.CanvasRenderer(800, 600);
  var texture = PIXI.Texture.fromImage("stone.png");
  var stone = new PIXI.Sprite(texture);
  console.log(stone.width + ', ' + stone.height);
  console.log(stone.width + ', ' + stone.height);
  requestAnimFrame( animate );
  console.log(stone.width + ', ' + stone.height);
  console.log(stone.width + ', ' + stone.height);

All of those console.log()s log "1, 1" even though it should be 128, 128. If I put that console.log() in the animation loop, it does start to output 128, 128.

How To Build

(Whoops, had to edit this issue because I accidentally prematurely posted it :/)

Annyways, I noticed you guys included some built files in the repo. I was wondering if you could include some instructions in the README to create our own builds.

For example, I would love to make a build that is not minified, to be able to explore the source a bit more.

texture.setFrame() requires texture.noFrame = false to work as well?

Hi. I've been playing a bit with Pixi, and enjoying it a lot so far.

I was wondering about setting the frame of a texture. It did not work for me at first, and I had to look around in the source to find the "noFrame" flag. Is this expected / normal? There was no mention of it in the docs for setFrame().

The line:

texture.setFrame( frameRec );

does not work without adding:

texture.noFrame = false;

CSS3 Render support

I would like to see in pixi.js an additional CSS3 render aside from Canvas and WebGL.

Well, 3 big reasons:

Specially with the CSS3 Shaders, we can do some very interesting effects.

I just made a demo to prove the point here, which you can try on your iOS here.
If you press the 3rd button, you can see a CSS3 Grayscale Shader in action, in all 60fps glory.

What do you think?


Request: movieclip.playFramesThen(frames:int,callback:func)

Would be nice to be able to tell the movieclip to play x-number of frames, and at the completion of showing those frames, call a callback that may switch the textures, etc.

e.g. if I click on an element, switch from "idle" frames to "you touched me" frames, then at the completion of showing those frames, call the callback that switches back to the "idle" frames.

Unless I'm mistaken, I have not seen this in the api yet.

How do we remove sprites?

When there's a collision I want to remove a sprite from the game. How do I do this? Intuitively, from the docs, I tried stage.removeChild(mySprite), but got this error:

Uncaught Error: [object Object] The supplied DisplayObject must be a child of the caller [object Object] pixi.js:7
PIXI.DisplayObjectContainer.removeChild pixi.js:7

mySprite is in fact a child of stage:

  var stage = new PIXI.Stage(0x66FF99);
  var mySprite = new PIXI.Sprite(PIXI.Texture.fromImage("stone.png"));
  mySprite.anchor.x = 0.5;
  mySprite.anchor.y = 0.5;
  mySprite.position.x = 1000;
  mySprite.position.y = 300;

The sprite does disappear and everything else freezes when I get this error.

Performance issues on Safari, Mobile Safari, and Android browsers

We've implemented an open source HTML5 2D Molecular Dynamics simulation framework and are using SVG and D3.js to render the particles.

Performance is reasonable but there has recently been a terrible SVG performance regression in Firefox.

So we wrote a simple benchmark test to help us evaluate Pixi.js, KineticJS) + Shape Caching, and SVG using D3.js

The results were very confusing ... I'm sharing this here because I thought you would be interested ... in general Pixi.js is very good ...but also there seems to serious relative performance issues on Safari, Mobile Safari, and Android browsers.

Here are the three versions of the benchmark test:
SVG (D3, requestAnimationFrame)
Canvas (KineticJS) + Shape Caching
Pixi.js CanvasRenderer

Anyway here's the very confusing "executive summary" ... following this are the data I collected if you want to dig deeper.

I've collected performance data from three of Piotr's red-circle animation benchmarks from iPad, Android, Mac OS X 10.6.8, 10.8.3, and Windows 7.

Tested on all platforms:

  • D3 SVG request AnimationFrame
  • Canvas KineticJS + Shape Caching
  • Pixi.js Canvas Renderer

The results are bizarre.

The only consistent results are where WebGL is available Pixi.js WebglRenderer is the fastest by far.

On all the Safari-based browsers (including Mobile Safari on the iPad) the D3 SVG rendering is faster.

Chrome on Android was recently updated from v18 to v25. Chrome v25 now appears to be at least three times slower rendering SVG than Chrome 18.

The stock Android browser is 3x faster rendering SVG than Chrome 25.

On all versions of Safari the Pixi.js Canvas renderer is much slower than than Canvas KineticJS + Shape Caching.

On all the other browsers the Pixi.js Canvas renderer is much faster than Canvas KineticJS + Shape Caching.

EXCEPT on the stock Android browser where the Pixi.js Canvas renderer is 4x slower than Canvas KineticJS + Shape Caching.

On all versions of Firefox Pixi.js CanvasRenderer is much faster than Canvas KineticJS + Shape Caching which in turn is much faster than D3 SVG request AnimationFrame.

On all versions of Chromw (except on Android) Pixi.js CanvasRenderer is about twice as fast as either Canvas KineticJS + Shape Caching or D3 SVG request AnimationFrame (which are about the same).

Mac OS X 10.6.8, Chrome 27.0.1452.0 canary
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  57.43   17.41
50  59.67   16.76
150 59.55   16.79
250 48.65   20.55
500 27.25   36.70
750 18.58   53.83
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  55.74   17.94
50  57.67   17.34
150 58.66   17.05
250 53.92   18.55
500 28.36   35.27
750 19.93   50.19
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
--- error ---

Windows 7, Firefox Nightly 22.0a1 (2013-03-25)
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  58.92   16.97
50  59.24   16.88
150 39.22   25.50
250 26.92   37.15
500 14.61   68.45
750 9.85    101.47
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  59.59   16.78
50  59.29   16.87
150 50.47   19.81
250 32.33   30.93
500 17.24   58.00
750 11.86   84.31
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  48.00   20.83
50  59.57   16.79
150 59.01   16.95
250 59.48   16.81
500 49.07   20.38
750 34.90   28.65
5000    6.16    162.24
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
25  56.58   17.67
50  59.55   16.79
150 59.15   16.91
250 59.17   16.90
500 59.15   16.91
750 59.57   16.79
5000    41.53   24.08

Mac OS X 10.6.8, Chrome 25.0.1364.99
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.97   17.87
50  59.62   16.77
150 59.64   16.77
250 44.29   22.58
500 26.57   37.64
750 17.99   55.59
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  49.34   20.27
50  59.27   16.87
150 58.96   16.96
250 58.21   17.18
500 30.61   32.67
750 20.39   49.05
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  56.45   17.71
50  58.75   17.02
150 59.08   16.93
250 59.08   16.93
500 59.10   16.92
750 58.66   17.05
5000    18.66   53.58
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
25  56.39   17.73
50  59.64   16.77
150 60.39   16.56
250 60.44   16.55
500 60.48   16.53
750 60.05   16.65
5000    46.55   21.48

Windows 7, IE10
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25 85.71 11.67
50 91.19 10.97
150 54.55 18.33
250 33.88 29.52
500 17.36 57.59
750 10.60 94.38
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25 63.56 15.73
50 63.99 15.63
150 42.48 23.54
250 27.84 35.92
500 15.93 62.78
750 11.08 90.24
Pixi.js CanvasRenderer
--- error ---

Windows 7, Chrome 25.0.1364.172 m
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.39   18.05
50  59.71   16.75
150 36.15   27.66
250 39.83   25.11
500 23.88   41.87
750 16.30   61.35
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  59.55   16.79
50  59.64   16.77
150 58.57   17.07
250 42.77   23.38
500 25.00   40.00
750 17.52   57.08
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  59.48   16.81
50  59.12   16.91
150 59.24   16.88
250 48.91   20.45
500 37.21   26.87
750 38.55   25.94
5000    18.46   54.17

Windows 7, Firefox 19.0.2
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  47.88   20.89
50  45.86   21.81
150 13.38   74.71
250 7.66    130.62
500 3.77    265.28
750 3.66    273.38
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  79.83   12.53
50  60.66   16.49
150 38.67   25.86
250 29.52   33.88
500 13.66   73.22
750 8.31    120.36
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  61.40   16.29
50  58.28   17.16
150 51.16   19.55
250 48.64   20.56
500 30.73   32.55
750 19.88   50.29
5000    3.55    281.77

Windows 7, Firefox Nightly 22.0a1 (2013-03-25)
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  55.85   17.91
50  42.23   23.68
150 18.75   53.33
250 12.60   79.35
500 8.49    117.83
750 4.67    214.30
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  39.54   25.29
50  40.28   24.83
150 35.72   27.99
250 27.64   36.17
500 18.55   53.92
750 14.26   70.12
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  64.77   15.44
50  67.45   14.83
150 67.84   14.74
250 67.20   14.88
500 59.48   16.81
750 45.18   22.13
5000    10.67   93.73

Windows 7, Chrome 27.0.1452.2 canary
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  58.37   17.13
50  59.59   16.78
150 56.80   17.61
250 49.24   20.31
500 23.88   41.87
750 16.78   59.59
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  32.11   31.15
50  32.11   31.15
150 36.36   27.50
250 39.03   25.62
500 24.43   40.93
750 16.24   61.57
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---

Windows 7, Safari 5.1.7
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  52.87   18.91
50  52.52   19.04
150 44.40   22.52
250 36.24   27.59
500 27.93   35.80
750 22.77   43.91
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  44.96   22.24
50  31.98   31.27
150 15.55   64.31
250 10.47   95.51
500 7.26    137.66
750 6.22    160.66
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  45.55   21.95
50  46.32   21.59
150 36.01   27.77
250 29.53   33.86
500 20.89   47.86
750 15.00   66.65
5000    3.35    298.30

iPad2, iOS 6.1.2, Mobile Safari
Canvas (KineticJS)
Circles FPS repaint [ms]
25  46.96   21.29
50  35.28   28.35
150 15.68   63.78
250 9.97    100.31
500 5.19    192.83
750 3.51    284.75
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  55.21   18.11
50  44.55   22.45
150 17.52   57.08
250 11.44   87.43
500 6.05    165.37
750 4.10    244.00
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  56.01  17.85
50  50.27 19.89
150 27.83 35.93
250 18.88 52.97
500 17.38 57.53
750 9.99  100.07
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  55.39 18.05
50  52.72 18.97
150 29.78 33.58
250 21.65 46.19
500 11.62 86.09
750 7.71  129.65
5000  1.18  846.20

Motorola Xoom Android v4.1.2, Chrome
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  16.53   60.51
50  14.21   70.35
150 8.03    124.53
250 5.59    179.01
500 3.08    324.61
750 2.19    457.61
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
25  19.22   52.03
50  22.29   44.86
150 11.62   86.09
250 8.15    122.69
500 4.40    227.51
750 3.03    329.65
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
25  21.30   46.94
50  21.19   47.20
150 20.98   47.66
250 20.61   48.51
500 17.84   56.07
750 12.86   77.79
5000    2.45    408.06

Motorola Xoom Android v4.1.2, Android Browser
SVG (D3, requestAnimationFrame)
Circles FPS repaint [ms]
25  43.12   23.19
50  28.83   34.69
150 13.10   76.32
250 9.89    101.09
500 5.50    181.79
750 4.10    244.10
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]
Pixi.js CanvasRenderer
Circles FPS repaint [ms]

Pixi as an asynchronous module

This would be really useful if possible - but possibly a fair bit of refactoring.

At the moment, when loading pixi via a module loader (like requireJS), with a shim opening up the global to scripts, it works ok, but one of the dependencies (namely gl-matrix-min) is a 'proper' self contained AMD module. This confuses a little, as that is what gets returned if you follow the standard loading pattern as the code currently stands.

Just a thought. Will continue to play ;)

Mousemove Events

Looks like we get mouseup, mousedown, mouseover, and mouseout events called on Sprites (per the docs). I want to allow dragging in grapefruit, is there anyway we can also get mousemove events so I can drag stuff around?

Multiple PIXI.Stage's on one page

When I have more than one pixi stage on a page that uses textured sprites, the first stage renders the sprite just fine, however the second throws the error:

WebGL: INVALID_OPERATION: bindTexture: object not from this context 

Here's an example, once it loads, click run with the console open: (coffeescript)

edit : updated js fiddle link

WebGL Renderer resolution halves on refresh

I'm trying out a Pixi WebGL demo, based on one of the Photon Storm ones. I'm running it in Chrome 25.0.1364.152 through Xampp local server.

When I'm updating the JavaScript, saving & refreshing, every so often the renderer seems to get confused and drops the resolution of all Sprites by about half. Upon refreshing again, it does it again until all assets are completely invisible. Booting the page up in an incognito window seems to solve it, but I thought I'd mention it.

Texture filtering and Tilemaps

So close!

I am creating tilemaps in the way we discussed before (in #48), using a single sprite for each "tile" all which share the tileset texture as their base texture. However, there is a small issue with scaling.

Without scaling it all looks great:

scale at 1

Once I make the scale 2, it scales up using Linear scaling due to lines 241/242 in the WebGLRenderer. Unfortunately linear scaling does not guarantee that textures will stay the same size so we get:

scale at 2

If I patch those lines to use gl.NEAREST for the filter we get:

scale at 2 (NEAREST)

So the ideal situation here is if I could set the filter type for a texture either in the ctor or with some property so that it would use the proper filtering when rendered.

Event outside the case where I need tiles to fit together, scaling any kind of "pixel-art" game will require gl.NEAREST scaling to look half decent.

compare with easeljs

Hi there - great project

I'm just evaluating some graphics engines. I've kinda got it down to between easeljs and pixi

What would you considering the similarities / differences between the two ?


WebGLRenderer does not remove sprites from previous stage

I have two stages, A loader stage and a gameWorld stage. Every frame I call .render on the WebGLRenderer instance. passing it the current stage. During asset loading the stage passed is the loader stage, which renders a loading screen with a few sprites. Once asset loading is complete, the current stage is set to the gameWorld stage, with a large number of various sprites.

The issue is that when the stage is replaced, sprites from the previous stage are not removed from the webGL context. Instead they are rendered above everything else.

Right mousebutton click

Hi. I can’t catch, how to detect if right mouse button was clicked?
Or how to detect double-click?

pixi won't run locally

I love the philosophy of pixi.js and the demos are impressive. So I'd really like to teach my students JavaScript through pixi.js. However, it won't run locally (entering file:///C:/etc in the address bar of Chrome) for me. I have to host the HTML/JavaScript code to get the examples to run.

I know I can install a simple local webserver, but then we lose out on live editing (which WebStorm beautifully supports), simplicity and other conveniences. Is there any way I can use pixi.js locally? I get the following error for the Basics example:
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:58
PIXI.WebGLRenderer.updateTexture pixi.js:58
PIXI.WebGLRenderer.render pixi.js:56
animate index.html:51

removeTextureFromCache is wrong

PIXI.Texture.removeTextureFromCache = function(id)
    PIXI.TextureCache[id] = texture;

There's no such variable as texture there, maybe it's supposed to be null.

set width/height before texture is loaded

I have one more proposal for Sprite , I spot it when create sprites that dont have texture ready .

Sprite ctor :
this.width = 0;
this.height = 0;
// this will inform that Sprite dont have texture and size set

function setTexture :
this.width = this.width || texture.frame.width;
this.height = this.height || texture.frame.height;
// if width or height was set by user before texture was set , it will stay . If width/height is default 0 , it will set texture size .

btw : quick example of latest relative pixi works , resize screen to see how it works :
cheers !

Problem with renderer

Hello Sir [Urgent]

I'm currently doing a project assignment for a game using pixi.js and I viewed much of your examples attached with the project's folder ( pixi.js ) and found a problem when viewing it in chrome nor comodo dragon and it's working fine with firefox and IE ....

it displays the following error :
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:1887
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:1887

I tried to surround the line with a try and catch .. it showed some kind of a rectangle for the image's sprite but didn't show it. I guess maybe there is a cross browser problem or maybe I need some guidance on how to use it

Thanks guys and good job 👍 :)

p.s when I finish the game ... looking forward to send you a link to play it ;)

Doesn't work on a page using requirejs

This is because you include Brandon's gl-matrix which will use and amd exporter if it finds one:

This means that if I use requirejs on a page that I include pixi.js in, then I get mat3 undefined errors.

ReferenceError: mat3 is not defined

I'm not sure what the best way to tackle this is. The hack-around I have used in the past is to wrap the included code in a closure in which I shadow off the exporters so it thinks to use global despite the environment:

(function() {
    var require = define = exports = module = undefined;

    /** Include Brandon's code here **/

So that works, but obviously isn't ideal. I am currently having to do this when I include your library.

Problem with setting width and height of a background

Hello guys [Urgent 2]

Setting the width and height of an image sprite as a background using

var background = PIXI.Sprite.FromImage('someurl');

then setting the width and height using

background.width = 800;
background.height = 600;

it sometimes works correctly ... and sometimes it doesn't work at all ... do I have to use the assets loader class and import image data with json ? like the image url , the width and height , position ?

Or there is some turnaround that could be done ? :)

Thanks :) 👍

AssetLoader doesn't work when cache enabled.

maybe, AssetLoader doesn't work when cache enabled.

I had run in this case...

if(texture.width && texture.height){
texture.hasLoaded = true;
} else if(!texture.hasLoaded){

thanks pixijs.


Talk to me about tilemaps, grapefruit uses the Tiled Editor json format for tilemaps. But I am less worried about specifics for that format, talk to me more about how you think tilemaps should render using Pixi.

I was thinking about having a Map (extends DisplayObjectContainer) with Layers (each extending DisplayObjectContainer). The Layers each generate and add one PIXI.Sprite for each "tile" on the map. I was thinking they would each share a PIXI.Texture instance for the texture holding all the tiles, and do some offset fancyness to make that work.

Is there a better way to do tilemaps in Pixi? How would you do it? I cam move this to the forums if it would be more appropriate there.

Texture can't be created based on Texture

It would be nice to mention in documentation, that Texture can be only created from BaseTexture, not from another Texture.

For example: I have own spritesheet, which loads with PIXI.Texture.fromImage. This method returns Texture and this blocks me from creating sprites directly from that object.

It can be easly avoided by getting baseTexture property from loaded image, or (like in SpriteSheetLoader.js:84) by additing listeners on loaded event and pass it higher.

Interactivity "mouseup" callback

It's kind of weird that the data presented in "mouseup" callback are the same with those presented in "mousedown" callback, which means I can't get any new information about the cursor when "mouseup" callback is called.

// in mousedown callback
{  // PIXI.InteractionData
    global: PIXI.Point with {x: 1037.6550910248598, y: 767.5979057591624},
    local: PIXI.Point with {x: 125.45961682745371, y: 160.0335078534032},
    target: PIXI.Sprite

// in mouseup callback
{  // PIXI.InteractionData
    global: PIXI.Point with {x: 1037.6550910248598, y: 767.5979057591624},
    local: PIXI.Point with {x: 125.45961682745371, y: 160.0335078534032},
    target: PIXI.Sprite

Drawing functions

Is it possible to use drawing functions (say, I want to draw a line or circle) with PIXI?

I'm new in graphics and web graphics, sorry if this question is something obvious.


Become normaly.

WebGLRenderer.addDisplayObject issue

when a new sprite is added to stage,pixi look for the closet previous sprite and next sprite and then insert after or insert before one of the both.Is it to let the Web GLBatch draw order and display tree order consistent?but I think it doesn't gurantee that all the sprites with the same texture and blend mode were group into the same may it affect efficiency?

SpriteSheetLoader and trimmed sprites

The code to support trimmed sprites is commented out. If I enable and complete it then it seems to work fine.

var frameData = jsondata.frames;
for (var i in frameData) 
    var rect = frameData[i].frame;
    PIXI.TextureCache[i] = new PIXI.Texture(this.texture, {x:rect.x, y:rect.y, width:rect.w, height:rect.h});

        var realSize = frameData[i].spriteSourceSize;
        PIXI.TextureCache[i].trim.x = (realSize.x / rect.w);
        PIXI.TextureCache[i].trim.y = (realSize.y / rect.h);

Can this be enabled or is it missing something?

Texture Cache

Caching for PIXI.Texture.fromCanvas() return first cached texture.
it is wrong to use 'canvas' as key for TextureCache[] and BaseTextureCache[]
Also I it think caching for canvas is bad idea, because canvas can change content.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.