- Home /
UI 4.6 Flash effect/Saturation for Image?
Hello all. I'm trying to make a flash effect on an icon in our UI. By flash effect, I mean to saturate the image from its normal colors to pure white and back again. My intention is to drive the animation from C# script via tween/easing. The icon I'm working with is in a prefab, and numerous copies of the prefab are instantiated in a layout group to display player inventory. When you get more of a thing I'd like that item in the list to flash to white to draw your eye to the fact that you now have more of them.
The prefab is a root game object with only 2 children, one child is text (to display how many) the other is the icon to show. The icon is displayed via the new 4.6 Image component (we're changing the actual asset to display from script with no problems).
I feel like this should be easy to accomplish but apparently it is very difficult. The closest I've come thus far is by adding a material to the Image that has a shader attached that allows me to set the _FlashEffect amount (from 0 -> 1). It sort of works in that my image does flash, however ALL of my images in the inventory flash which is not desired. I got the shader from here: http://answers.unity3d.com/questions/709687/shader-to-flash-a-2d-sprite-to-white.html
From my sleuthing online this seems to be because I'm not getting the material.shader from the renderer which would cause an instance of the material to be made. Instead the only way i've been able to get at the shader of an image is like so:
Image resIcon = flashTarget.GetComponentInChildren<Image>();
if (resIcon != null)
resIcon.material.SetFloat("_FlashAmount", flashValue);
After a full day searching and reading tons of stuff I'm turning here for help. Is there a way to get at the renderer of an image component that I've missed (does it even have one?), or is there another way to accomplish my goal? Any insight into solving this issue would be very much appreciated. Thanks for your time.
EDIT: adding my own answer as a work around below. while it is getting the job done it is less than ideal and any pointers to a better way would be appreciated.
you want to get the player attention , huh ?
why you don't choose a easy way ? like changing the size !
if you think its a good way , tell me to explain what i mean :)
I'm already changing the size but the Designer wants it to flash white as well. This shouldn't be that hard, its trivial in actionscript / flash, surely Unity has provided some method for accomplishing per image effects in UI that I'm just not aware of (I've only been using Unity for about 6 weeks).
interwebs plz
Does adding a comment bump a question back up so it will get seen again? I don't know, but that is my hope and the reason for this comment.
Answer by Arctodus · Feb 26, 2015 at 08:09 PM
So I have a functional workaround for this which I'm less than happy with, but it does work. For all of my buttons that need to have a flashing effect on the icon I actually give them 2 Image components (attached as separate children of the main button). One of these icons has the flash/saturation shader I listed earlier as a material set on that icon: http://answers.unity3d.com/questions/709687/shader-to-flash-a-2d-sprite-to-white.html
On start I set the flash icon to alpha 0 via a canvas group and then SetActive(false). Later on when I need that button to do it's flash effect I SetActive(true) on the secondary icon, then use an iTween.ValueTo with a call back to tween the alpha from 0 -> 1 -> 0 over the time the tween executes.
As I said this does work, but it means every button now has 2 icons, both have to be loaded when data changes etc. There must be a better way.
Answer by Guedez · Jul 30, 2015 at 02:41 PM
I am some years late, but here is how to make it work:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class ImageFlasher : MonoBehaviour {
private Image image;
[Range(0, 1)]
public float flash = 0;
void Start() {
image = gameObject.GetComponent<Image>();
image.material = new Material(image.material);
}
void Update() {
image.material.SetFloat("_FlashAmount", flash);
}
}
This is what solves the whole 'all images are flashing all at once'
image.material = new Material(image.material);
Although, I assume that this makes so that the images stop batching, but who cares?
Answer by Tuncer · Feb 19, 2015 at 06:59 PM
Maybe, you can use blink effect like this :
void Update()
{
if (resIcon)
{
Color temp = resIcon.GetComponent<Image>().color;
resIcon.GetComponent<Image>().color = new Color(temp.r,temp.g,temp.b,Mathf.Abs(Mathf.Sin(Time.time * 2f)));
}
}
If I'm understanding your code here correctly this is changing the alpha of the image over time to create a fade in/out effect? we're are using effects similar to this in other places for a different purpose so it wouldn't work here unfortunately. Thank you for taking the time to answer though :)
On an unrelated note, I've been finding alpha effects much easier to manage by using a canvas group rather than color because with a canvas group you get all the children of the object as well. Code like the below as an update callback for an iTween.ValueTo is working pretty well.
CanvasGroup cGroup = myGameObject.GetComponent<CanvasGroup>();
if (cGroup != null)
cGroup.alpha = newAlpha;
Answer by Mmmpies · Feb 19, 2015 at 09:57 PM
You can do this with an animation. Highlight the button you're going to use as a prefab an open the Animation Window.
Add a curve and select Buttons.Colors.Highlighted then do the same and select Buttons.Colors.Normal.
Start the animation for both with the default color then set a new frame that'll be the middle one say half a second in and change the color for both Highlighted and Normal then set a new frame at one second an go back to the default color.
As a test I just created a script to flash when clicked and stop when clicked again:
using UnityEngine;
using System.Collections;
public class FlashButton : MonoBehaviour {
private bool playAnim = false;
private Animator anim;
void Start()
{
anim = GetComponent<Animator>();
}
public void switchFlash()
{
playAnim = !playAnim;
anim.SetBool("flash", playAnim);
}
}
I made sure the button had an Animator element:
And set the Animator to have two states and a bool, I called the bool flash:
Start the game and clicked the button and it starts flashing, click again and it stops. Not exactly what you want but just animate the flash and take into account sometimes the button will be highlighted and sometimes it will be normal, cover both and you should be OK.
All you need to do is reference the script on the button to tell it when to flash, with my example that's with a click but if you have a reference for the button you can call the function when that buttons items increase.
Thanks for showing me this, I haven't had occasion/opportunity to use any animation components in unity yet. Thus far I've been able to drive everything I've needed from script using lerps and easing (iTween).
This answer is unfortunately not what I'm looking for as it's only a color change and not an actual saturation of the image to pure white. Re-reading my original post I probably wasn't explicit enough in my ask for assistance, I will update it.
Thanks for your time.
Ah, sorry, I read it wrong. Hmmm, getting late where I am but if I get chance I'll look into image saturation over the weekend. If I find anything that'll help I'll post it.
Answer by G-Reusch · Sep 30, 2016 at 06:27 AM
Another late answer, but it's one I don't see so I'll post it in case someone's looking for alternative solutions to the ones above. This one worked particularly well for me since I wanted to Lerp to the white color.
Only drawback is that this method ignores alpha transparency of the original sprite.
Make a child object under the sprite you want to turn white.
Give it an Image component with default UI sprite.
Add Mask component to the parent object.
The original sprite will now be completely white, and you can Lerp the child image's color if you want a smooth transition between normal color and pure white.
Hope this helps someone :)
Your answer
Follow this Question
Related Questions
Unity UI : How to get masked image? 1 Answer
Unity 4.6 New UI Button OnHoldPressed 0 Answers
How to change 4.6 Button Image from script 1 Answer
2 Scrollrects and Parallax effect 2 Answers