Jump to content

How to apply the DropShadowFilter?


Recommended Posts

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.

Link to comment
Share on other sites

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":



Link to comment
Share on other sites

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];
Link to comment
Share on other sites

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.


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...