I created a simple slide-in animation for my game. The box is shown at the bottom with character dialog.

The animation is as follows:

A square slides in from the left, then waits a bit, then expands to its full width.

The box is made using Unity's GUI Box. The timing is extended for debugging purposes (I need to be able to clearly see the animation).

enter image description here

It isn't coded spectacularly (I wrote it in 5 minutes in the first way that occurred to me), but I can't really think of another way to write it at the moment. What would you improve?

private string boxString = "Hello, world! I am sample character dialog.";

private float elapsedTime = 0.0f;

private float initialSlideInDuration = 1.333f;
private float waitBetweenSlideAndExpand = 0.666f;
private float expansionDuration;

private float boxHeightPercentage = 0.10f;
private float boxWidthPercentage = 0.95f;
private float positionFromLeft;
private float positionFromBottom;
private float boxWidth;
private float boxHeight;

// instantiate variables before any frames are drawn
void Start () {
    expansionDuration = initialSlideInDuration + waitBetweenSlideAndExpand + 3.333f;
    boxWidth = Screen.width*boxWidthPercentage;
    boxHeight = Screen.height*boxHeightPercentage;
    positionFromLeft = (Screen.width - (Screen.width * boxWidthPercentage)) / 2;
    positionFromBottom = Screen.height - (positionFromLeft + boxHeight);

// called once per frame
void Update () {
    elapsedTime += Time.deltaTime;  

// render and handle GUI events
void OnGUI() {
    // slide in square
    if (elapsedTime <= initialSlideInDuration) {
        float initialLeftPadding = -positionFromLeft - boxHeight;
        float finalLeftPadding = positionFromLeft;
        float movementDistance = (2 * positionFromLeft) + boxHeight;
        float progress = elapsedTime / initialSlideInDuration;

        GUI.Box (new Rect ((progress * movementDistance) + initialLeftPadding, positionFromBottom, boxHeight, boxHeight), boxString);
    // if square is ready and we have waited, animate to rectangle
    else if (elapsedTime > initialSlideInDuration+waitBetweenSlideAndExpand && elapsedTime <= expansionDuration) {
        float initialWidth = boxHeight;
        float finalWidth = boxWidth;
        float growth = finalWidth - initialWidth;
        float progress = elapsedTime / expansionDuration;

        GUI.Box(new Rect(positionFromLeft, positionFromBottom, (progress * growth) + initialWidth, boxHeight), boxString);
    // stay as full width rectangle
    else if(elapsedTime > expansionDuration){
        GUI.Box (new Rect (positionFromLeft, positionFromBottom, boxWidth, boxHeight), boxString);
    // we are waiting, display the square with left padding
    else {
        GUI.Box (new Rect (positionFromLeft, positionFromBottom, boxHeight, boxHeight), boxString);

The following makes the assumption that all durations are totaled together (as duration) and should give a smoother animation. with a pause based on the original box width (presently height);

void OnGUI() {
    float progress = elapsedTime / duration;
    float leftPositon = progress * positionFromLeft - boxHeight;
    float width = (progress * (boxWidth + positionFromLeft)) - positionFromLeft;

    if (leftPositon > positionFromLeft){
        leftPositon = positionFromLeft;

    if (width < boxHeight) {
        width = boxHeight;
    else if ( width > boxWidth){
        width = boxWidth;

    GUI.Box (
        new Rect (

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.