- Home /
how to make an animation that changes color in a clockwise rotation
not sure exactly how to word that one. basically i have a custom cursor thats in the shape of a circle thats one color. when the cursor is hovering over a button i want it to to animate for 2 seconds before that button is actually selected. i want to do this by changing its color to white in like a clockwise rotation. (i dont want the color of the entire image to fade to white gradually, picture having a blue circle, and in a clockwise rotation that circle will change into a white circle, like if there was a layer mask on it).
I know how to code, im not looking for how to press buttons or detect hovering etc., But i dont have much experience with animations, in fact none at all with unity.
so is there some kind of way to animate the cursor this way? like to have a layer mask of the button thats one color that will gradually turn into the same picture just a different color? I hope i worded that clearly.
Do you mean something like:
You start with a cursor like
(source)
but ins$$anonymous$$d of spinning a light around inside the cursor, you would change the color of the cursor with that spin?
Answer by Eno-Khaon · Jun 28, 2015 at 12:02 AM
Well, there are two approaches to it, though the results you're looking for in particular may depend on how you want it presented.
If you're looking for an absolute mouse cursor to go on top of everything, you'll want to make use of the GUI, which means NOT being able to make good use of shaders.
If you go the GUI route, you'll probably just need to create multiple images to simulate the cursor changing color, but your options would be much more limited for color.
The basic way of displaying the cursor in this way would be something like:
using UnityEngine;
public class MouseCursor
{
public Texture2D txCursor;
void Start()
{
Cursor.visible = false;
}
void OnGUI()
{
GUI.depth = 1;
if(txCursor != null)
{
GUI.DrawTexture(new Rect(Input.mousePosition.x, Screen.height - Input.mousePosition.y, txCursor.width, txCursor.height), txCursor);
}
}
}
If you're looking to maximize versatility on the cursor's potential appearance, here's a very basic shader to apply to a plane to get you started on the effect:
Shader "Custom/CircleCursor"
{
Properties
{
_Color ("Color One", Color) = (0,0,1,1)
_ColorChange ("Color Two", Color) = (1,0,0,1)
_MainTex ("Albedo (RGB)", 2D) = "white" {}
_BlendTex ("Color Change Gradient", 2D) = "white" {}
}
SubShader
{
Tags { "Queue"="Transparent" "RenderType"="Transparent" }
LOD 200
CGPROGRAM
// Physically based Standard lighting model, and enable shadows on all light types
#pragma surface surf Standard fullforwardshadows alpha
// Use shader model 3.0 target, to get nicer looking lighting
#pragma target 3.0
sampler2D _MainTex;
sampler2D _BlendTex;
struct Input
{
float2 uv_MainTex;
float2 uv_BlendTex;
};
fixed4 _Color;
fixed4 _ColorChange;
void surf (Input IN, inout SurfaceOutputStandard o)
{
// Albedo comes from a texture tinted by color
fixed4 t = tex2D(_MainTex, IN.uv_MainTex);
fixed4 m = tex2D(_BlendTex, IN.uv_BlendTex);
fixed4 color = lerp(_Color, _ColorChange, saturate(floor(frac(_Time.x * 5.0) + m)));
o.Emission = t.rgb * color.rgb;
o.Alpha = t.a;
}
ENDCG
}
FallBack "Diffuse"
}
It's by no means perfect, but it should serve as a basic framework for applying gradual, circular color changes to the texture.
Textures utilized in testing:
Sorry i should have mentioned, im not using Gui components or a mouse im using gameobjects as buttons and the oculus rift with a reticle in the center of the view (so GUI methods wont work for this). Ins$$anonymous$$d of GUI.drawTexture i changed it to Graphics.drawTexture. The function i have it set up in is being called by an OnTriggerEnter function in a script on the child object(which is how im detecting button collisions). No animation is happening. I threw a Debug.Log in there so i know its getting called, but that gets printed several times in a few seconds. im guessing my values for Graphics.drawTexture are wrong (or that doesnt work in this case, ive never used it before) i have this:
Graphics.DrawTexture(new Rect(transform.position.x, transform.position.y, transform.lossyScale.x, transform.lossyScale.y), txCursor);
i think im just going to make a sprite sheet, store them in an array or linked list, and animate them that way
Answer by jakeflaze3859 · Jun 27, 2015 at 10:51 PM
Are you talking about a texture mapped to a plane, a sprite, or something else?
Your answer
