Animating GUI text?

I want to animate GUI text (and maybe also bitmaps) to create some simple credits with entry/exit effects.

Before I begin, I thought I’d make sure which, if any, of the following may be controlled from scripting:

  • X and Y position

  • X and Y scale

  • color

  • opacity for fades (I suppose this would mean writing a custom shader?)

For example, animating the scale could make the text grow from a point and then shrink again.

Thanks in advance. My first test failed and it might be my own fault but I thought I’d make sure it’s even possible before spending more time on it.

  1. Yes
  2. Used to be able to. Not sure with new pixel-correct system
  3. Yes
  4. Yes, all you do is have a shader with alpha and increase the transparency as you go.

EDIT: My debug console script might help you figure out how to some of that stuff. (sorry it’s in C#)

-Jeremy

Thanks! I’ll experiment with the scaling question. I’m using a mix of pixel-accurate and non-accurate text/images, as it happens.

For sure “yes” to all questions for bitmaps. I made a script for using a custom 2D mouse pointer, which turns into different pointers at the left, right, top and bottom edges, and fades to semi-transparency when not being moved. Besides that it scales depending on resolution and aspect ratio so it’s always the same size. Actually I could post that if anyone’s interested…it’s pretty generic and not really tied to my project.

You use guiElement.color = Vector4(r,g,b,a) for color (or use guiElement.color.a for just alpha, or .r, .g, .b), guiElement.texture for the image, transform.localScale for the scale (vector3, except z is unused of course), and GUITexture.pixelInset = Rect (xmin, ymin, xmax, ymax) for the pixel inset.

–Eric

Can you post it in the wiki or here, would love to play with it.
Thanks,
Ray

Curses, you posted before I finished my edit. :wink: Anyway, sure, I’ll put in on the wiki later, but here we go for now (even if [ code ] messes up my nicely tabbed comments a bit):

var normalCursor : Texture;							// The texture for when the cursor isn't near a screen edge
var leftCursor : Texture;							// The texture for the cursor when it's at the left edge
var rightCursor : Texture;							// Ditto, right edge
var upCursor : Texture;								// Top edge
var downCursor : Texture;							// ...And bottom edge
var nativeRatio = 1.3333333333333;					// Aspect ratio of the monitor used to set up GUI elements
private var lastPositionX = Input.mousePosition.x;	// Where the mouse X position was last
private var lastPositionY = Input.mousePosition.y;	// Where the mouse Y position was last
var fadeAlpha = .5;									// Normal alpha value of the cursor ... .5 is full
var fadeTo = .2;									// The alpha value the cursor fades to if not moved
var fadeRate = .22;									// The rate at which the cursor fades
static var cursorIsFading = true;					// Whether we should fade the cursor
private var fadeValue = fadeAlpha;

// Scale the cursor so it looks right in any aspect ratio, and turn off the OS mouse pointer
function Start() {
	currentRatio = Screen.width / Screen.height;
	// If the ratio is 16:10, change it to 16:9 so stuff is still square on iMac monitors for example...
	// er, I hope that works...looks right when I test a 16:10 screen mode here anyway.  Someone tell me if that's wrong
	if (Mathf.Approximately(1.6, currentRatio)) {
		currentRatio = 1.7777777;
	}
	transform.localScale.x *= nativeRatio / currentRatio;
	Screen.showCursor = false;
}

function Update() {
	// If the mouse has moved since the last update
	if (Input.mousePosition.x != lastPositionX || Input.mousePosition.y != lastPositionY) {
		// Get mouse X and Y position as a percentage of screen width and height
		MoveMouse(Input.mousePosition.x / Screen.width, Input.mousePosition.y / Screen.height);
	}
	// Fade the alpha of the cursor
	if (cursorIsFading) {
		guiElement.color.a = fadeValue;
		fadeValue -= fadeRate * Time.deltaTime;
		if (fadeValue < fadeTo) {
			fadeValue = fadeTo;
			cursorIsFading = false;
		}
	}
}

function MoveMouse(mousePosX : float, mousePosY : float) {
	// Store current position so we can see if it's moved next frame
	lastPositionX = Input.mousePosition.x;
	lastPositionY = Input.mousePosition.y;
	// Make the cursor solid, and set fading to start in case mouse movement stops
	guiElement.color.a = fadeAlpha;
	fadeValue = fadeAlpha;
	guiElement.texture = normalCursor;
	cursorIsFading = true;
	
	// If the mouse is on the left edge, first make sure the cursor doesn't go off the screen, then give it the left cursor
	if (mousePosX < .005) {
		mousePosX = .005;
		guiElement.texture = leftCursor;
	}
	// If the mouse is on the right edge, first make sure the cursor doesn't go off the screen, then give it the right cursor
	if (mousePosX > .995) {
		mousePosX = .995;
		guiElement.texture = rightCursor;
	}
	// If the mouse is at the bottom, first make sure etc., then give it the down cursor
	if (mousePosY < .005) {
		mousePosY = .005;
		guiElement.texture = downCursor;
	}
	// If the mouse is at the top, first make sure etc., then give it the up cursor
	if (mousePosY > .995) {
		mousePosY = .995;
		guiElement.texture = upCursor;
	}
	
	transform.position.x = mousePosX;
	transform.position.y = mousePosY;
}

The cursorIsFading variable and code may seem redundant, but it’s there so I can stop the cursor fading from other scripts even if the mouse is still moving.

The values I used for the GUI element are: scale X .04, Y .06, pixel inset values -32, -32, 32, 32, for a 256x256 sized texture. That’s pretty large (intentionally); probably you’d generally use something half or quarter that.

–Eric

Wow, very useful!

And I’ll report back what I find with scaling/squashing of text.

Forgot to say…for anyone using that script, you do GameObject → Create Other → GUI Texture, then drag the script on to that GUI texture, then drag your cursor images onto the appropriate slots in the Inspector. That’s probably obvious, but it took me a while sometimes to get the simple stuff… :wink:

–Eric

Is the only way to animate GUI text color and opacity through scripts such as the one that Eric provided (I havent tried it yet as it seems too much for what I need - and I feel like animating a material should be a default action in Unity) ? All Im seeing in the animation window as keyframeable attributes are:

  • Enabled
  • Pixel Offset.x
  • Pixel Offset.y
  • Line Spacing
  • Tab Size
  • Pixel Correct

NO Material color properties or opacity. Also when Im in “record” mode in the animation window the “Font” and the “Material” section of the GUI text object in the inspector is grayed out.

Ill poke around with the script as well, but I dont like using custom solutions for seemingly “standard” actions (in my opinion of course :-). Also Im an artist and dont really have too much of a grasp on scripts and code in general.

Any insight would be greatly appreciated.

thanks guys.

yh !! 7 years later