How to apply the DropShadowFilter?

[Wanderer777]

I can't get the DropShadowFilter to work with my images. Is this the correct way to do it?

var shadow 	= new PIXI.filters.DropShadowFilter();shadow.color 	= 0x0000;shadow.distance = 5;shadow.alpha 	= 0.55;shadow.angle 	= 45;shadow.blur 	= 5;Spr = new PIXI.Sprite(PIXI.loader.resources.Sheet1.textures['button.png']);Spr.filters 	= [shadow];

Only the sprite is shown -no filter attached though. Using Firefox 40.0.3, Win7, WebGLRenderer.

[Wanderer777]

JSFiddle example -demonstrates the following:

 

• DropShadow filter does not work (blur filter does)
• Tinting a group does not affect its children

 

https://jsfiddle.net/Wanderer777/5goztwcs/2/

 

 

[xerver]

The dropshadow filter not working seems weird, you should open a bug.,

 

As far as tinting effecting children, tint does not effect children in any way. It only tints the texture of the object you assign it to. In fact, Container doesn't even have a tint property at all. Only Graphics, Sprite, and things that inherit from those object do.

 

See the docs and search for "tint":

 

http://pixijs.github.io/docs/index.html

[Wanderer777]

So can you see a drop shadow effect in the JSFiddle? I tested this with Firefox, Chrome and UC and none of them shows a drop shadow effect.

 

Opened a bug.

[xerver]

No I can't see the dropdown filter, looks like it is not working. I would open a bug.

[coolblue]

Put the drop shadow filter on the container that wraps the sprites. Drop shadow on individual sprites is extremely slow, also shadow angle is in radians with zero being downwards.
 

dropShadow = new PIXI.filters.DropShadowFilter();dropShadow.color = "0x" + tinycolor("steelblue").toHex();dropShadow.angle = Math.PI/4;dropShadow.blur = 4;dropShadow.distance = 5;stage = new PIXI.Container();stage.filters = [dropShadow];

[Wanderer777]

I managed it to get it working now -don't know why though:

var shadow     = new PIXI.filters.DropShadowFilter(); shadow.blur = 4; shadow.alpha = 1; shadow.distance = 5;Spr = new PIXI.Sprite(PIXI.loader.resources.Sheet1.textures['button.png']);Spr.filters     = [shadow];

I am not concerned about performance issues since I use the drop shadow effect for title screen buttons only (cosmetics only). In-game I am using sprites for shadows, so they are also visible on non-WebGL platforms, too.

 

[coolblue]

Maybe the angle was breaking it, like I said it should be in radians: Math.PI / 4 in your case.

[Wanderer777]

I found at least one situation that seems to break the drop shadow filter:

 

If a sprite is placed within a group where .cacheAsBitmap is set to true, drop shadow filter is not rendered when applied to a children.