Pixi.js v1.4.2 Out and ready to go!

[Mat Groves]

Hello html5game dev forum people!

 

Big news over in the pixi camp! We have just released the latest and greatest version of pixi.js for you to play with and make more cool stuff!

 

 

Lots more detail can be found on our goodboy blog. But heres the list of new stuff  / tweaks included in the latest version:

 

New features:

 

• WebGL Filters
• Added Sprite Tinting (canvas and webGL)
• Added Sprite blend modes (canvas and webGL)
• Added webGL context loss handling
• New webGL renderer
• Restructured the canvas renderer
• Added ability to have multiple renderers on one web page
• Added support for trimmed sprite sheets
• Add a Contributing Guide
• Add an Atlas Spritesheet loader (#444, @MKelm)
• Implement swapChildren (#431, @namuol)
• Add base64 support to asset loader (#414, @mattdesl)
• Add totalFrames to PIXI.MovieClip (#315, @MikkoH)
• Add uniform sprite sheet loader (#311, @alaa-eddine)
• Make Interactive dom element configurable (#321, @MikkoH)
• Add AMD export (#267)
• Implement travis-ci and jshint integration (thanks @drkibitz)
• webGL renderer is now fully compatible with IE11
• Fully compatible with Cocoon.js (@ekelokorpi)
• Fixed issue where PIXI.TilingSprite required a power of two texture. It now accepts any texture.
• Added new tint example
• Added new blendMode example
• Added cacheAsBitmap to PIXI.Graphics object. Useful for complex graphics objects. Also a great way to guarantee antialiasing on graphics objects in webGL as it renders using canvas
• Added generateTexture to PIXI.Graphics object. This function returns a PIXI.Texture of the graphics object. Useful if the graphics objects as is used multiple times
• Added AlphaMaskFilter

 

Bug Fixes

 

• Fix issue where urls have http in the resource (#443, @sirflo)
• Fix IE11 check (#442, @photonstorm)
• Fix issues where nested Masking was not working correctly in webGL
• Fix cursor style for interactive sprites (#347, @lain-dono)
• Fix issues with texture destroy (#415, @mattdesl)
• Fix incorrect BitmapText width (#425, @jcd-as)
• Fix issue with query params on asset loader (#400, @hugeen)
• Fix transparent background on objects (#286, @mdoch)
• Fix problems with event emitter (#187, @johnste)
• Fix handling of black colors (#288)
• Fix an issue with empty masks (#313)
• Fix detector code (#358, @mattdesl)
• Fix issues with IE ajax
• Fix misc bugs with PIXI.Graphics
• Fix issue with removing children with filters
• Fix a bunch of documentation errors
• Fix setText to be on proper prototype (#330)
• Redundant code removed from SpineLoader and SpriteSheetLoader (@Nibbler999)

Big thanks to everyone who contributed to this pixi release! We all hope you enjoy using pixi.js 1.4

 

https://github.com/GoodBoyDigital/pixi.js

[benny!]

Wow ... what a great list of updates and new features.

 

Thanks so much!

[creole]

would be great if tinting and blend modes could be added to BitmapText too

[xerver]

would be great if tinting and blend modes could be added to BitmapText too

Put in a feature request  https://github.com/GoodBoyDigital/pixi.js/issues

[triqui]

Great, I was looking for something like this to write a tutorial about the making of an HTML5 game, downloading immediatly...

[creole]

done, thanks

 

https://github.com/GoodBoyDigital/pixi.js/issues/497

[1-800-STAR-WARS]

Anyone noticed any issues with masking and Graphics? A colleague mentioned that the new version broke some masking he was doing while drawing filled rectangles, but he quickly fixed it by using a sprite before we could dig any deeper.

[Mat Groves]

Anyone noticed any issues with masking and Graphics? A colleague mentioned that the new version broke some masking he was doing while drawing filled rectangles, but he quickly fixed it by using a sprite before we could dig any deeper.

 

Will make sure to look into that one! An more info on the issue would be ace thanks!

[1-800-STAR-WARS]

Asked him for more info, here ya go! (The Alchemy stuff is just our namespace with functions for doing responsive images and scaling)

 

"So – when I mask a sprite using a graphic, the effect works.

When I tried to mask a graphic with a graphic it failed.

The graphic that was the mask became invisible (which you’d expect).

The graphic that should have been masked remained visible on the stage as though no mask had been applied.

Actual code below…"

/*   this fails:

    this.bloodGraphic = new PIXI.Graphics();

    this.bloodGraphic.beginFill(0xFF0000);

    this.bloodGraphic.drawRect(0,0,150*Alchemy.Global.posScale.x,150*Alchemy.Global.posScale.y);

    this.bloodGraphic.endFill();  

*/


//this works

    this.bloodGraphic = new PIXI.Sprite(blood2Texture);


//add the display object (either graphic / sprite) to be masked to the stage

    this.stage.addChild(this.bloodGraphic);

    this.bloodGraphic.position = Alchemy.Renderer.scaledPoint(350, 675);


//create a mask using graphic

    var mBloodMask = new PIXI.Graphics();

    mBloodMask.beginFill(0x00FF00,0.5);


    mBloodMask.moveTo(0*Alchemy.Global.posScale.x,0*Alchemy.Global.posScale.y);

    mBloodMask.lineTo(77*Alchemy.Global.posScale.x,0*Alchemy.Global.posScale.y);

    mBloodMask.lineTo(37*Alchemy.Global.posScale.x,130*Alchemy.Global.posScale.y);


    mBloodMask.lineTo(0*Alchemy.Global.posScale.x,130*Alchemy.Global.posScale.y);

    mBloodMask.lineTo(-40*Alchemy.Global.posScale.x,120*Alchemy.Global.posScale.y);


    mBloodMask.endFill();


//add mask

    this.stage.addChild(mBloodMask);

    mBloodMask.position = Alchemy.Renderer.scaledPoint(400, 545);


// mask the graphic we want masked:

    this.bloodGraphic.mask = mBloodMask;

[Mat Groves]

@Lewis Perfect! Thanks very much for the all the detail. Will make sure to take a look

[sebrofjr]

I also had an issue where i was using the Blur Filter on a DisplayObject that contained sprites and a mask,  In the previous dev build with filters enabled it worked great, in this official release I now get blacked out areas along with the blur.  I'm thinking its a mask conflict or something.  I will try to replicate an example of this.

[Mat Groves]

I also had an issue where i was using the Blur Filter on a DisplayObject that contained sprites and a mask,  In the previous dev build with filters enabled it worked great, in this official release I now get blacked out areas along with the blur.  I'm thinking its a mask conflict or something.  I will try to replicate an example of this.

 

Please do! There where some big changes in 1.4 so keen to make sure that we nip any of these issues in the bud

[sebrofjr]

Okay, so I can simulate this again with some of the examples online.

 

in https://github.com/GoodBoyDigital/pixi.js/blob/master/examples/example%2014%20-%20Masking/index%20double%20mask.html

 

or https://github.com/GoodBoyDigital/pixi.js/blob/master/examples/example%2014%20-%20Masking/index%20nested%20masks.html

 

just add:

blurFilter = new PIXI.BlurFilter();container.filters = [blurFilter]; 

after the container is initialized or added to stage.  It removes the mask.  This doesn't happen in the standard 1 mask display though.  I also think the black i was seeing in my source is the black graphic object i created as the mask.

[Mat Groves]

Okay, so I can simulate this again with some of the examples online.

 

in https://github.com/GoodBoyDigital/pixi.js/blob/master/examples/example%2014%20-%20Masking/index%20double%20mask.html

 

or https://github.com/GoodBoyDigital/pixi.js/blob/master/examples/example%2014%20-%20Masking/index%20nested%20masks.html

 

just add:

blurFilter = new PIXI.BlurFilter();container.filters = [blurFilter]; 

after the container is initialized or added to stage.  It removes the mask.  This doesn't happen in the standard 1 mask display though.  I also think the black i was seeing in my source is the black graphic object i created as the mask.

 

Thanks for the heads up! looking into this now

[Vecanti]

I was using 1.3 and moved to 1.4.3 and the new version fixed an issue with setTexture() I was having where it would update textures when in webGL mode but did not update textures in Canvas mode (or at least not on Dolphin browser I was testing Canvas with).  

 

So thank you so much!

[spaceman]

First let me say, we love PixiJS.  Amazing library!!!

 

Now for the nits:

 

1) When I use autoDetectRenderer() for a parallax animation (like in the tutorial on the PixiJS site) using PIXI.TilingSprite and some regular PIXI.Sprite (s) in the recent version of Chrome for example (Version 33.0.1750.154 m) everything masked disappears.  On IE11 (Windows8, WebGL -enabled), things just look a mess (hard to describe--sprites appearing where they shouldn't, masking "off", etc.).

 

It seems like masking (master and dev branches) is not working with WebGL, because if I switch to CanvasRenderer, this issue goes away.  I hope there is an easy solution!  The WebGLRenderer is fantabulous when it works, but we really need the masking to be working to proceed with it.

 

2) A distant secondary concern is the always challenging IE support for which we found that we had to insert this line, a hack really, to force image reloading whenever one would navigate to/from a page with a PIXI stage.  Or else certain sprites would "disappear" frustratingly.  Navigating to and from 3 or more times seemed to trigger the artifacts consistently in IE11.  The animation was relatively simple, involving just a couple of sprites, and the issue would probably present therefore with the basic bunny demo, too, with a little nav'ing back and forth.  It seemed like some sort of contention between the browser and Pixi's caching schemes.  The fix requires one to define page load random number like so somewhere in execution of the main script but then everything works in IE:

 

 

PIXI.ImageLoader = function(url, crossorigin)

{

    PIXI.EventTarget.call(this);

 

    /**

     * The texture being loaded

     *

     * @property texture

     * @type Texture

     */

    var urlRandomSuffix = '?n=' + pglRandomNumber; url += urlRandomSuffix; // <- enforce cache file reload (e.g., IE11 nav. buttons)

    this.texture = PIXI.Texture.fromImage(url, crossorigin);

 

    /**

     * if the image is loaded with loadFramedSpriteSheet

     * frames will contain the sprite sheet frames

     *

     */

    this.frames = [];

 

};

 

// then define this outside of Pixi

var pglRandomNumber = Math.random();

 

 

I don't know whether or not this is a "solution" per-se, but does the trick to ensure regardless of how many visits in one user session of the browser that the raster imagery assets load properly.  This is less of an issue than 1) because i) its just IE it seems, and 2) we thought that our site would contain multiple pages each with a canvas+stage, however due to need to support sound events on mobile as well we will be using the single-page approach so as to avoid having to have visitors "click-twice" to hear sound (once to go to the page, and again to hear it).  Anyways, I digress.  

 

We hope there is a solution to 1).  It looks like there is some investigation needs to be done still into issues around WebGL and masking.

 

Otherwise, we are absolutely loving using PixiJS, by the way.  It is the first technology that together with GreenSock and SoundJS we feel really makes it possible to replace Flash, with some ingenuity and fancy coding footwork, but at least it's possible now!  Thank you, thankyou; and we hope that these observations and suggestions can help in some small way to keep making Pixi better and better.