koobas.hobune.stream
Using iTween with the new Unity UI
I'm creating a simple slide-in animation for my game. It is a GUI box shown at the bottom with character dialog inside.
The animation looks 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. I'm trying to update it to use Unity 5's new UI system using a Panel and Text, but animating the width and position is proving to be harder than I thought.
void Start() {
iTween.ValueTo(gameObject, iTween.Hash(
"from", initialX,
"to", finalX,
"time", slideInTime,
"onUpdate", "slideIn",
"easeType", easeType
)
);
iTween.ValueTo(gameObject, iTween.Hash(
"from", initialBoxWidth,
"to", finalBoxWidth,
"delay", waitTime,
"time", expandTime,
"onUpdate", "expand",
"easeType", easeType
)
);
}
void OnGUI() {
GUI.Box (new Rect(x, y, boxWidth, boxHeight), boxString);
}
void slideIn(float newPosition) {
x = newPosition;
}
void expand(float newWidth) {
boxWidth = newWidth;
}
Is it possible to achieve the same effect with Panels and Text?
Hello sdhdsfghdfghd,
yes, it is possile to achieve the same effect with Unity's new UI. Just keep in mind, that you are now working with the RectTransform as a base. You can (buy and) download examples on how to animate uGUI elements from the developer's homepage. I also wanted to create a slide-in animation just like you and figured it out myself:
public RectTransform uGuiElement;
public Vector2 targetPosition;
public void SlideIn(){
iTween.ValueTo(uGuiElement.gameObject, iTween.Hash(
"from", uGuiElement.anchoredPosition,
"to", targetPosition,
"time", animationTime,
"onupdatetarget", this.gameObject,
"onupdate", "MoveGuiElement"));
}
}
public void MoveGuiElement(Vector2 position){
uGuiElement.anchoredPosition = position;
}
Hope this is what you were looking for!
I believe $$anonymous$$oveGuiElement should have Vector3, like this
public void $$anonymous$$oveGuiElement(Vector3 position){
Nope, the variable anchoredPosition is of the type Vector2.
The new UI uses RectTransform for it's coordinate system - including distances from each side. iTween only has native commands for the standard unity Vector3, as for as movement is concerned. Therefore, you have to use iTween's ability to modify a value directly and callback the new value over time.
I just wish there was a way to do this to an array of items.
Anyone still having issue moving UI with ITween then simply use the "isLocal" property and set it to true. Now record the positions from the canvas where you want your UI to move and pass those values below line of code.
iTween.MoveTo(button_gameObject, iTween.Hash("position", new Vector3(x_pos, y_pos, 0), "speed", 500f, "easetype", "easeInQuad", "islocal", true));
x_pos : The position of UI image where it is going to transfer/animate in the Canvas.
y_pos : The position of UI image where it is going to transfer/animate in the Canvas.
