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

[Mat Groves]

Well hot dog we have a new Pixi.js release! Check out all the new stuff we added!

 

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.
  

More info can be found here: http://www.goodboydigital.com/pixi-js-v1-6-0-in-da-house/

 

Enjoy

 

Mat

[xdiepx]

Awesome!!!!

[1-800-STAR-WARS]

I love you guys. How are you so good at this?

[n1313]

Are there any breaking changes in 1.6.0? I switched from 1.5.3 and my project fell apart.

[HemingwayGames]

Nice work! My game is currently getting assessed for the PAXAus Indie Showcase so I'll upgrade in a couple of weeks :-)

[alex_h]

It looks like cropping might now be broken for render textures? Previously I was able to crop a render texture by passing a modified rectangle to its setFrame method. If I do this with Pixi 1.6 the texture gets stretched rather than cropped. I now see that there is a 'crop' property of RenderTexture that is also a rectangle so presumably I should actually be targeting this rather than the frame rectangle to achieve cropping. But when I modify the values (eg width, x) of the crop rectangle this has no visible effect. Am I missing something obvious?

[Mat Groves]

hi there! made a few tweaks to the release that should fix up the render texture issues. Let me know if there is any thing else that look off! cheers all!

[alex_h]

Cool, thanks! So is modifying the crop rect the intended way to apply cropping to a render texture? I still just seem to get stretching rather than cropping. I've downloaded the latest master and dev branches of Pixi 1.6 and tried with both.

 

[Edit] Actually this problem only seems to occur with the WebGL renderer, it behaves same as it used to when I try it with the canvas renderer.

[trueicecold]

PixiJS 1.6.0 totally broke my app... all containers are not located properly, seems to always stick to the top left corner of the canvas

[Mat Groves]

PixiJS 1.6.0 totally broke my app... all containers are not located properly, seems to always stick to the top left corner of the canvas

 

doh! if you could share a little more info I can take a look for ya. cheers!

[Mat Groves]

Cool, thanks! So is modifying the crop rect the intended way to apply cropping to a render texture? I still just seem to get stretching rather than cropping. I've downloaded the latest master and dev branches of Pixi 1.6 and tried with both.

 

[Edit] Actually this problem only seems to occur with the WebGL renderer, it behaves same as it used to when I try it with the canvas renderer.

 

cool, does it work if you use the setFrame function? 

[mrBRC]

It is not rendering correctly.. most of my assets are sprites within DisplayObjectContainers.

Most of those DisplayObjectContainers's WorldTransform (MATRIX) property have NaN values.. 

 

 

Also, The Loaders, Texture, and Base Texture values seem to be all correctly propagated and functional.

Edited July 16, 2014 by mrBRC

[mrBRC]

Hmm.. I suspect the modifications to the Shader Manager is the cause of this webgl rendering issue. 

I see you added a UID to your Shaders And the method setShader: which runs a comparison against the UID. I think this is the root of the issue.

 

Replace it with the following and run a test using WebGL rendering.. in my case.. it suceeds initially.. and than fails consistently while in the rendering loop.

 

PIXI.WebGLShaderManager.prototype.setShader = function(shader){    if (this._currentId === shader._UID) {  console.log("setShader False:", {"instance":this,"shader":shader});  return false;}       this._currentId = shader._UID;    this.currentShader = shader;    this.gl.useProgram(shader.program);    this.setAttribs(shader.attributes);console.log("setShader True:", {"instance":this,"shader":shader});    return true;};

or is it supposed to do that???

 

be sure to point a breakpoint in your animation loop while running this (using Browser's Developer Console).. otherwise you'll get bogged down pretty quickly..

Edited July 16, 2014 by mrBRC

[mrBRC]

actually.. disregard that idea.. I incorrectly assumed you were calling that function in your manager when the setting of the shader was actually warranted.. I figured the currentid to shader id check was really just in case others attempted to use the method.

[mrBRC]

It would appear that setting the height and width on my DisplayObjectContainer was the root cause of the WebGL Rendering breaking.. 

Edited July 17, 2014 by mrBRC

[alex_h]

cool, does it work if you use the setFrame function? 

 

Hi Matt,

 

yes the Texture.setFrame function works properly with the canvas renderer, ie my texture gets cropped not stretched. Comparing back to the copy of the setFrame method from pixi 1.5 it seems likely that it is the trim rectangle interfering somehow, perhaps somewhere in the webgl pipeline it gets set to a non-null value?

For my own purposes I was able to work around the problem by duplicating the relevant parts of the setFrame function into my own code:

//cropRect is a PIXI.Rectangle instancevar rtx = renderTexture.texture;rtx.frame = cropRect;rtx.crop = cropRect;rtx.width = cropRect.width;rtx.height = cropRect.height;PIXI.Texture.frameUpdates.push(rtx);

Really enjoying working with Pixi so far otherwise, thanks!

[Mat Groves]

It would appear that setting the height and width on my DisplayObjectContainer was the root cause of the WebGL Rendering breaking.. 

 

Just put a fix up for that

[michaelmihai]

Tinting is broken, too (1.6.1). Example 17.

[Mat Groves]

Tinting is broken, too (1.6.1). Example 17.

 

works fine for me? what issue are you experiencing? cheers!

[sebrofjr]

I feel guilty now. I just got back from vacation and now i see this  Thanks as always!

[michaelmihai]

Sorry Mat, example 17 works fine.

 

The problem is with Spine. So in example 12 if you add for example spineBoy.children[1].children[0].tint = 0xff0000 in 1.6.1 nothing happens. In 1.5.3 his left arm turns red.

[crowbar]

The comments in pixi.dev.js for drawPath are just copied from lineTo.