Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 12 Next capture
2021 2022 2023
1 capture
12 Jun 22 - 12 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
  • Help Room /
This question was closed Apr 08, 2018 at 01:23 PM by meat5000 for the following reason:

The question is answered, right answer was accepted

avatar image
4
Question by nTu4Ka · Sep 05, 2015 at 07:25 PM · uibutton

Pulsating glow effect on UI Button

Hi,

I want to implement a pulsating glowing border on a UI button. Unfortunately the only solution I found requires Unity Pro licence.

Is there any shaders that do this? Or any suggestions on how to implement glowing effect?

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

  • Sort: 
avatar image
7
Best Answer

Answer by wibble82 · Sep 06, 2015 at 01:53 PM

There are many approaches to making something appear to glow, that get cleverer as you go on. A common approach if you want the glow to interact with the background is to use an additive shader.

However, I would suggest as your first attempt simply make an image to contain your 'glow'. Using the sprite system in unity you can create a sprite with a 'border' that can be used in the UI image. Check it out in the UI documentation or videos if need be.

Once there, you can create a simple image that contains a blurry border and show it over your button. The more alpha you apply to it, the more it'll show up.

Here's a very quick sample I did using this approach:

alt text

This was just using this simple sprite (EDIT: the sprite is just white with an alpha channel so you can't see it here, but right click and you should be able to download it!): alt text

Obviously you can do what you like to that sprite to make it prettier!

You can then control the visibility of the border just by setting its color (critically the alpha channel) in a script.

The next step up would be, as I said, to use a shader that is set to be additive blending instead of the default one, as this 'adds' the colour to the background rather than blending with it, which can give a bit more of a lighting effect.


blurborder.png (6.9 kB)
glowbutton.png (39.4 kB)
Comment
Add comment · Show 14 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image nTu4Ka · Sep 06, 2015 at 02:08 PM 0
Share

I don't have the picture at the moment. I will try to describe it: -square button with texture -it has a border (let it be 2 px wide) -the border is glowing and pulsating (fading in and out)

 Post effects seem like overkill (and possibly unsuitable) if all you're trying to do is make a single button glow. They're designed for full screen effects.

Hmm. I never thought of that. It seems that the easiest and interesting way would be to write a shader + animation like in this video: https://www.youtube.com/watch?v=WU_$$anonymous$$9fLnd_Y The problem is that implementation from it doesn't work on buttons.

avatar image _Gkxd · Sep 06, 2015 at 02:36 PM 0
Share

@nTu4$$anonymous$$a
It's probably easier to have the glowing effect on a separate image that you fade and/or switch on/off as needed. The effects don't all have to be on the button itself.

I have written this shader too, which may or may not work on buttons, though it is used for 2D: http://answers.unity3d.com/questions/1016159/radial-gradient-c.html#answer-1016322

(Writing a shader is probably overkill though.)

avatar image nTu4Ka · Sep 06, 2015 at 02:55 PM 0
Share

@wibble82 Interesting. I thought about creating border separately but didn't liked the idea for several reasons. Firstly I thought that there'll be a ready solution. Secondly the way I wanted it to be - I would have to create 10 or smth images so that the animation would be smooth. And in case I wanted to change smth - it would consume more time than to tweak variables in code.

avatar image nTu4Ka · Sep 06, 2015 at 02:57 PM 0
Share

@_Gkxd Wow! You're awesome! It looks much like something I was looking for. Very interested to play with it and try to animate it.

avatar image _Gkxd · Sep 06, 2015 at 05:47 PM 0
Share

@nTu4$$anonymous$$a

I think @wibble82's solution is the better way to go. It doesn't seem like you understand what he's actually doing. The glow itself is a pure white image, and that's the only image that you will ever need. What you can do in Unity is assign a color to an image, and that color will be blended with the image (including transparency). So you'll only need one image for the glow, and you can change its color in Unity using a color picker or in a script.

Show more comments

Follow this Question

Answers Answers and Comments

32 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How can I generate and setup buttons via code 1 Answer

How to write a script for an existing button 1 Answer

Can i update button listener? 0 Answers

disable UI button 4 Answers

How to add random number on a ui button?? 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges