Jump to content

[PIXI] Filter property questions...


Recommended Posts



I've been playing around with Pixi's filters and came across some properties that I don't understand.


1. Does anyone know what these properties refer to on the AsciiFilter? I've read the documentation but I'm not sure exactly what they refer to:


padding - is this the padding between each character or padding around the filter edges?

size - Is this the size of each character or the pixel size area that should be converted into characters?

uniforms - I can't guess what this might be.  :huh:


2. I also wonder what the `center` value type should be for the `ShockwaveFilter`. This is what the docs say:


 @member {object<string, number>}


....but I don't understand what that means :mellow:. How should that value be applied?


shockwaveFilter.center = ???;


3. Are `angle` values for the filters in Radians or Degrees?


4. What's the difference between the `TiltShiftFilter` and the `TiltShiftAxis` filter?


5. Does the `SmartBlurFilter` no longer have `blur`, `blurX`, and `blurY` properties?


6. In the `TiltShiftFilter` does "strength of the blur" refer to a value in pixels, or is it a normalized value?



Link to comment
Share on other sites

1. Padding and uniforms are inherited from AbstractFilter (http://pixijs.github.io/docs/PIXI.AbstractFilter.html). All filters have them. Padding adds spacing around the filterArea, uniforms are the uniforms passe dinto the shader.

2. It is pretty clear what is does in the docs (http://pixijs.github.io/docs/PIXI.filters.ShockwaveFilter.html#center): "Sets the center of the shockwave in normalized screen coords. That is (0,0) is the top-left and (1,1) is the bottom right."

3. All angle values in Pixi.js are always in radians.

4. TiltShiftFilter uses 2 sub filters to do the effect (similar to how blur does) called TiltShiftXFilter and TiltShiftYFilter. Each of those filters inherit from TiltShiftAxisFilter which contains code common between them.

5. Previously (v2) SmartBlurFilter actually had no parameters at all. After the refactor we made the delta a uniform that can be changed but it is undocumented since it doesn't have a getter/setter.

6. Neither, it is just a value representing power. It is bounded by (-Infinity, Inifitity). Usually a value around (0, 10] is good.

Link to comment
Share on other sites

Thank you, Xerver that's a big help!


That is (0,0) is the top-left and (1,1) is the bottom right.


I'm still confused about what the "object.<string, number>" value type is.

Do you apply the value like this?


center = (1,1)

Link to comment
Share on other sites

"object<string,number>" is an object with string keys that maps to numbers. Specifically shockwave filter is looking for:


{ x: 0, y: 0 }


That should really say a Point object instead to be more clear (since it is just duck typing that value anyway). I think I was just trying to say it doesn't have to be a Point object, just something with x/y properties.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...