Blog

Pixi.js v1.6 is ‘in da house’

July 10, 2014 at 8:43 pm / by

Its been a busy few months for the team at Goodboy! But fortunately Mat Groves still found time to kick out a new Pixi release!

Howdy everyone! Guess what? Pixi.js 1.6 is here! And we added loads of optimizations / bug fixes and a few juicy features that hopefully will help you have an even better Pixi experience!

Blah blah blah. wha eva.. so what’s new?

We gave the PIXI.Graphics object a much needed improvement  and also added a bunch of new functions to the API that will let you draw pretty curves and the like!

Complex Polys in webGL

Finally you can now draw complex shapes in Pixi.js. The shape can be as complex as you like and even reverse over itself / be concave. Whatever crazy shapes you can imagine Pixi now has you covered. Why dont you tap in to your inner Picasso and try out the example below to see what I’m talking about:

We are using a really neat technique thats makes cheeky use of the stencil buffer and triangle fans!

You basically draw a triangle fan, using the GL_INVERT function in the stencil buffer. This flips the value between zero and a nonzero value every time a triangle is drawn that covers a pixel. After all the triangles are drawn, if a pixel is covered an even number of times, the value in the stencil buffers is zero; otherwise, it’s nonzero. Finally you draw a large polygon over the whole region (or redraw the triangles), but allow drawing only where the stencil buffer is nonzero.

This technique offers really fast performance for complex shapes as there is no tessellation involved at all. Not only that but we combined this approach with the current techniques we use to render graphics to get the best of both worlds when drawing webGL primitives. More info on this method can be found here.

All these complex shapes can be used as masks too, and the masks will work correctly if they are nested in other masks. This was a complete mine field to get working but we got there in the end! Check out this stencil manager if you want a taste of how we achieved it using the stencil buffer. It nearly broke my brain :)

New Graphics functions

We figured now Pixi can draw crazy shapes it’s about time we added some extra functions that let you drawing more interesting things… like curves! Heres the list of curve drawing functions we have:

  • arc
  • arcTo
  • bezierCurveTo
  • quadraticCurveTo
  • roundedRectangle

We have also added a drawPath method which lets you pass an array of x/y values to the graphics object so you can easily get programatic shapes in there too (Air high five).

Strips and Rope

Strips and Ropes have made it into pixi.js at last! These guys are still quite experimental but I figured we should get them in and let the world start using them. They are the first feature of a new bunch of display objects that we are ultimately going to add to the library. The idea is that they will offer more interesting effects rather than simply stamping images on the screen. Like this snake:

Whoooo! Look at that guy go! I could watch him all day… I digress…

Strip is basically a triangle strip that will let you draw a bunch of textured triangles to build more interesting geometry. Its a little more complex than a regular Pixi displayObject as it requires a little knowledge of how buffer/vertices/indices/UVs work.

So strip is really more of a base class for building other complex items like the Rope class. Rope allows you to draw a texture across a bunch of points to create cool bendy effect. Examples of the rope in action can be found here and also here. Its early days for these little guys but I hope to get them into shape and, as ever, welcome everyone’s thoughts and input on what they should be.

This example is now bundled in as a Pixi example too so you can go straight in and play with it! Did I mention that this new feature will work in both WebGL and Canvas? well it will! so that’s nice too :)

Optimised the renderers

It’s also worth noting that we really went to town on the webGL renderer. We focused on speeding up more real world use cases of the engine. So automatic batching is still there and super fast but now the rest of the rendering has been streamlined and optimised.

This means pixi will now render faster when there is a mix of graphics / sprites / batches than previous versions and pixi.js 1.6 should give us all a nice little performance boost! I even have a few more tricks up my sleeve that will involve reducing the draw calls made to the GPU even more and hopefully give it another kick! But that will have to wait till 1.7…

And yes even the Canvas renderer has been given a little tlc and been streamlined so even that should run a little better in this release. Props to Richard Davey for taking care of that one!

 

The rest:

Theres is also a ton of bug fix’s and other miscellaneous tweaks and features in this version. So heres the full change log:

New features

  • Complex polys now supported in Pixi in webGL.
  • Nested masking and complex poly masking supported in webGL.
  • quadraticCurveTo added to PIXI.Graphics.
  • bezierCurveTo added to PIXI.Graphics.
  • arcTo added to PIXI.Graphics.
  • arc added to PIXI.Graphics.
  • drawPath added to PIXI.Graphics.
  • roundedRectangle added to PIXI.Graphics.
  • PIXI.Strip and PIXI.Rope added to library along with a new example.
  • addChild / addChildAt functions now return the child.
  • Add scaleMode params to PIXI.FilterTexture and PIXI.RenderTexture.
  • fromFrames and fromImages static helper methods added to PIXI.MovieClip.
  • updateSourceImage added to PIXI.BaseTexture.
  • Added multitouch support.
  • new valid property added to PIXI.Texture.
  • Option to control premultiplied alpha on textures.
  • Pixi logs current version in the console.
  • webp image support.
  • clear function added to PIXI.RenderTexture

Bug Fixes

  • Fix to roundPixels property in PIXI.CanvasRenderer.
  • Fixed interactive bug when mousemove being called on removed objects.
  • Fix bug touch move event handling.
  • Various CocoonJS Fixs.
  • Masks now work when used in PIXI.RenderTextures / cacheAsBitmap and PIXI.Filters.
  • Fixed bug where stroked PIXI.Text sometimes got clipped.
  • Removed the trailing whitespace when wordwrapping a PIXI.Text.
  • Fixed texture loading on IE11.
  • Fixed Data URI loading.
  • Fixed issue so now loader only uses XDomainRequest in IE, if a crossorigin request is needed.
  • Fixed issue where alpha not being respected if cacheAsBitmap is true
  • Fixed PIXI.RendeTexture resize bug.
  • Fixed PIXI.TilingSprite not render children on canvas.
  • Fixes issue where if both mask and filter are applied to one object the object did not render.
  • If the texture is destroyed, it should be removed from PIXI.TextureCache too.
  • PIXI.Graphics blendMode property now works in webGL.
  • Trimmed sprites now behave the same as non trimmed sprites.

Misc

  • Doc tweaks / typo corrections.
  • Added Spine license to src.
  • Removed this.local in InteractionData.
  • Shader manager Simplified.
  • Sprite._renderCanvas streamlined and optimized.
  • WebGL drawCalls optimized.

As usual I would like to give a massive thanks to everyone in the Pixi community who submitted a PR or helped out in anyway. You lot are great and really are a fundamental part of the whole Pixi shebang! I don’t know what I would do with out your helping hands!

Shout out to Richard Davey too for digging into Pixi and helping me out by submitting a ton of fixes and tweaks for Pixi 1.6. Oh and more good news, if you are a Phaser fan we timed it so that Phaser and Pixi both upgraded at the same time! So Pixi 1.6 can be found in the latest Phaser build too! Everybody winning :)

Righto! Thats all I got for now. Plenty to play around with and get excited about I hope! You can get your mit’s on the Pixi 1.6 over on github.

Until the next post, Happy Coding!

Did you like this? Share it:
 

0 Comments

You can be the first one to leave a comment.

Leave a Comment

 

— required *

— required *