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 ?

weepy

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) {
  event.preventDefault();
  var rect = this.target.view.getBoundingClientRect();
  var changedTouches = event.changedTouches;

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

Thanks!

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.

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
}

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

Why?
Well, 3 big reasons:

• iOS performance was/is better on CSS3 than Canvas
• iOS support for CSS3 Shaders
• Android browser canvas implementation bugs rendering alternative

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?

Regards,
Gunther

(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.

are are textures tiled in pixi.js?

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

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

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 );
soul.display.setInteractive(true);

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.

Is MovieClip working?

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

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 WebGLBatch.so may it affect efficiency?

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?

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:

http://bl.ocks.org/pjanik/5169968
SVG (D3, requestAnimationFrame)

http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---

http://bl.ocks.org/pjanik/5238326
Pixi.js WebGLRenderer
Circles FPS repaint [ms]
--- error ---


Windows 7, Firefox Nightly 22.0a1 (2013-03-25)

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5238326
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

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5238326
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

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
--- error ---


Windows 7, Chrome 25.0.1364.172 m

http://bl.ocks.org/pjanik/5169968
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


http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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)

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]
--- error ---


Windows 7, Safari 5.1.7

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5169965
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

http://bl.ocks.org/pjanik/5169961
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


http://bl.ocks.org/pjanik/5169968
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


http://bl.ocks.org/pjanik/5238284
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 25.0.1.1364.169

http://bl.ocks.org/pjanik/5169968
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

http://bl.ocks.org/pjanik/5169961
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

http://bl.ocks.org/pjanik/5238284
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

http://bl.ocks.org/pjanik/5169968
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


http://bl.ocks.org/pjanik/5169961
Canvas (KineticJS) + Shape Caching
Circles FPS repaint [ms]

http://bl.ocks.org/pjanik/5238284
Pixi.js CanvasRenderer
Circles FPS repaint [ms]

maybe, AssetLoader doesn't work when cache enabled.

I had run in this case...

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

thanks pixijs.

Hello :)
Is there on the list of things to do some sort of (dynamic) mask-filter support by chance?

From a Cairo tutorial:
http://zetcode.com/gfx/cairo/clippingmasking/

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!

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 pixe.dev.js 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.

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.

Become normaly.

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 ;)

It looks for stage which does not exist in that scope. this.stage maybe?

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

https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix.js#L36

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.

Hi,

is there a way to have a transparent background?

thanks!

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:
http://jsfiddle.net/tolmark12/dDWD9/1/ (coffeescript)

edit : updated js fiddle link

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 :
107
Uncaught Error: SecurityError: DOM Exception 18 pixi.js:1887
299
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 ;)

It would be really great to either have the source for runpixierun in the examples, or some other sanitized "full" example in src.

When you view the Readme.md file on github.com (which many will do) the link to the bunny demo goes to a 404.

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;
  stage.addChild(mySprite);

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

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.

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?

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.

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 :) 👍

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});

    if(frameData[i].trimmed)
    {
        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?

Hi,

I've tested it on

FF 19.0.2
Opera 6.0.3
OSX 10.8.3

check the green text.

btw: great library!

I created a CanvasRenderer and tried to save a big rendered map to texture to optimize it a bit since it was a static map. However it only seemed to work when I was using a WebGLRenderer.

Made a demo http://jsfiddle.net/3SVGY/2/
Just switch the renderer to Canvas to see that it doesnt work

Hi, I'm seeing that ant is being used as a building system.

However, right now in the front-end world, Grunt.js has become a defacto standard so that even the jQuery team changed it to Grunt.js.

Thank you!

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.

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

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:

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:

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

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.

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 :
http://turbosqel.pl/relativepixi/
cheers !

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;

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.

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.

If you click with the right mouse button while keeping the left mouse button down, or vice versa, you can turn on more lights.

Would you consider adding "snap to pixel" feature to both of the renderers?

After making a little demo yesterday, I found that my sprite blurs when it is not positioned at
integer points.

The sub-pixel bluring effect looks the same with one in the article
http://seb.ly/2011/02/html5-canvas-sprite-optimisation/

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);
  document.body.appendChild(renderer.view);
  var texture = PIXI.Texture.fromImage("stone.png");
  var stone = new PIXI.Sprite(texture);
  console.log(stone.width + ', ' + stone.height);
  stage.addChild(stone);
  console.log(stone.width + ', ' + stone.height);
  requestAnimFrame( animate );
  console.log(stone.width + ', ' + stone.height);
  renderer.render(stage);
  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.

I have problem with using assetloader ,because when I refresh page it is not calling onComplete function .

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.