ZYandu

How to make a glow / color fade with PIXI.filters.GlowFilter?

Recommended Posts

I want to add a really big blue glow to the gray hold bar. This example looks pretty good but I want it to look less like a tight border and more like a stretched blue fade out. I tried to accomplish this by increasing the outer strength. 

let barContainer = new PIXI.Container();
barContainer.position.set(xPosition, 110);

let bar = new PIXI.Graphics();
bar.beginFill(0xffffff);
bar.tint = 0xbbbbbb;
bar.drawRect(0, 0, chordWidth, 10);

barContainer.addChild(bar);

let glowFilter = new GlowFilter(10, 2, 0, 0x00507c, 0.1);
glowFilter.padding = 100;

barContainer.children[0].filters = [glowFilter];

1104284719_ScreenShot2019-04-10at11_25_58AM.thumb.png.790443b4ac46e6952d024807e39476fc.png

 

//increase outer strength to try and make the filter spread out farther
let glowFilter = new GlowFilter(10, 30, 0, 0x00507c, 0.1);

1844465897_ScreenShot2019-04-10at11_29_42AM.thumb.png.f7d097b235ab590aa41e88144178ce97.png

 

As cool of a border as this is, how can I make a glow filter that fades out? Is it possible with something as easy as GlowFilter or other filters?

Thank you for any help! 😁

 

P.S. I also tried the approach of using a gradient image as suggested in this topic but it didn't work very well with my rectangles that heavily vary in width. 

 

Share this post


Link to post
Share on other sites

I have solution for that thing - custom GlowFilter, but i dont want to publish it without extra preparations, because there are several filters i want to move to special plugin, filters that emulate Flash.

I'm afraid that my queue of "who to help and make simple hack in 15 minutes" is too big right now :(

Until then, I suggest to use make progress-bar sprite-basd and prerender everything you can in several frames in photoshop.

Share this post


Link to post
Share on other sites

That's awesome Ivan, I'm excited you're working on custom filters!

I will try making the bar sprites in Photoshop or Adobe for now! Perhaps I will find a way to build an SVG version programmatically to have flexibility in their width. 😃

Thank you! 

Share this post


Link to post
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.

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

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.