{"id":85268,"date":"2019-09-27T14:41:25","date_gmt":"2019-09-27T14:41:25","guid":{"rendered":"https:\/\/www.red-gate.com\/simple-talk\/?p=85268"},"modified":"2021-07-29T19:44:06","modified_gmt":"2021-07-29T19:44:06","slug":"using-the-itween-plugin-for-unity","status":"publish","type":"post","link":"https:\/\/www.red-gate.com\/simple-talk\/development\/dotnet-development\/using-the-itween-plugin-for-unity\/","title":{"rendered":"Using the iTween Plugin for Unity"},"content":{"rendered":"

It’s happened to every developer at some point; you’re trying to accomplish a simple task but the method to accomplish said task requires more lines of code than you would like. Surely it doesn’t have to be this way. This is often especially true in the world of game development, where there are often many steps required to accomplish one large goal. For example, suppose you wish to fade an object while your game is running. Two common ways to do this would be to tie the fade action to an animation and call this animation in code or interpolate some color values in your script to create the fade effect. While they get the job done, both methods require several steps to accomplish. What if there was something out there that could do all that work in a single line of code?<\/p>\n

You might think this is wishful thinking, but the reality is that such a feat is very possible. A plugin for Unity, iTween, can give you the result you want with minimal effort required on your end. iTween is an animation plugin that uses interpolation systems to create animations that look and feel good. The goal of the plugin, according to its website<\/a>, is to streamline the production of your Unity project and put you in the mindset of an action-movie director instead of a coder. Here you’ll be shown a small project demonstrating iTween’s simple use and what it can bring to your Unity project.<\/p>\n

Setup<\/h2>\n

Of course, to use iTween, you’ll have to create a project (Figure 1) and import the iTween plugin into said project.<\/p>\n

<\/p>\n

Figure 1: Creating a new project<\/p>\n

Name the project iTween Demo<\/em>. To better show off iTween’s use, it is recommended that the project be in 3D. Decide on a location for the project, then create it as shown in Figure 2.<\/p>\n

<\/p>\n

Figure 2: Project name, template, and creation.<\/p>\n

First, you’ll have to get the iTween asset into your project. The easiest way to do this would be through Unity’s Asset Store. In the top menu, navigate to Window->Asset Store as shown in Figure 3.<\/p>\n

<\/p>\n

Figure 3: Opening the Unity Asset Store<\/p>\n

Once the Asset Store has loaded, you will need to search for iTween. <\/em>The item you’ll be looking for will have a matching name created by PixelPlacement <\/em>and should be free. After selecting the asset, click the download button. Once the asset has finished downloading, you’ll be able to press the button again to import iTween into the project. Once the plugin is extracted you’ll be able to import it into the project, as shown in Figure 4.<\/p>\n

<\/p>\n

Figure 4: Importing iTween<\/p>\n

After the package manager is finished loading, click Import <\/em>near the bottom of the window to put iTween into your project. The example project will also need some music and a single sound to test out iTween functionality. If you need some recommendations, Loop & Music Free<\/a> by Marching Dream and Sound FX \u2013 Retro Pack<\/em><\/a> by Zero Rare will have what you need for sound effects. With all your assets in place, close out the Asset Store <\/em>and begin setting up the project. The Assets window should look similar to Figure 5.<\/p>\n

<\/p>\n

Figure 5: The current Assets <\/em>window<\/p>\n

To begin, two objects will need to be placed within the game world. The first will be a regular cube that will showcase the iTween animations. Your cube object can be created by going to the Hierarchy <\/em>and selecting Create->3D Object->Cube,<\/em> as shown in Figure 6.<\/p>\n

<\/p>\n

Figure 6: Creating a cube.<\/p>\n

In its Transform <\/em>component in the Inspector <\/em>window, set the rotation to x <\/em>-10, y <\/em>45, and z <\/em>-30. After that, set the scale to 2 across all axes. Figure 7 shows how that should look.<\/p>\n

<\/p>\n

Figure 7: Setting the rotation and scale of the cube.<\/p>\n

Create another 3D object, this time a sphere. This object will give the Cube <\/em>object something to look at in a specific iTween animation. Supposing the sphere was the moon, it can be placed in the sky. The exact coordinates are x <\/em>-6, y <\/em>11, z <\/em>15. The scale and rotation remain the same. When complete, the scene should look similar to Figure 8.<\/p>\n

<\/p>\n

Figure 8: How the project currently looks<\/p>\n

One last task remains before the coding part begins. Among other things, the Cube <\/em>object will be able to fade in and out as though it used a cloaking device. However, its default material will not allow the fading. Instead, a new material will be created. In the Assets <\/em>window right-click, then choose Create->Material <\/em>as shown in Figure 9 and name the material FadeMat<\/em>.<\/p>\n

<\/p>\n

Figure 9: Creating a new material<\/p>\n

Immediately after creating the material, navigate to the Inspector <\/em>window and set its rendering mode to Transparent<\/em> like Figure 10.<\/p>\n

<\/p>\n

Figure 10: Setting the material’s rendering mode<\/p>\n

Finally, the new material will need to be assigned to Cube<\/em>. Select the Cube <\/em>object, go to the Mesh Renderer <\/em>component in the Inspector <\/em>window, and click the arrow next to Materials<\/em>. Then click and drag the FadeMat <\/em>material from the Assets <\/em>window into the Element 0 <\/em>field under Materials<\/em>. Figure 11 shows you how to do this.<\/p>\n

<\/p>\n

Figure 11: Setting Cube’s <\/em>material<\/p>\n

All that’s left is a sound manager for the sound effect that will be played later. Create a new object, this time an Audio Source <\/em>object. It can be created via Create->Audio->Audio Source<\/em>. Name it SoundManager,<\/em> and then the setup will be complete. To begin coding the project, create a new asset in the Assets <\/em>window, this time a script, and call it Actions<\/em>. Once created, double click the script to open it in Visual Studio.<\/p>\n

The Code<\/h2>\n

To start, you want to make this script require the object it’s attached to have an AudioSource<\/code> component. Doing this requires the following line of code above the class declaration:<\/p>\n

[RequireComponent(typeof(AudioSource))]<\/pre>\n
Once the Actions <\/em>script is attached to the object, it will automatically add this AudioSource<\/code> component for you. In addition, it will prevent the removal of this component so long as the Actions <\/em>script component is also attached. Next, the Start<\/code> and Update<\/code> functions can be removed or commented out as they will not be needed. Then you get variable declaration out of the way.<\/p>\n
public Transform lookObject;\r\npublic AudioSource otherAudio;\r\npublic AudioClip stabSound;\r\npublic MeshRenderer mr;<\/pre>\n
The Transform<\/code> variable, lookObject<\/code>, will hold the Transform <\/em>information from the Sphere <\/em>object created earlier. One of the iTween animations the project will use will involve the Cube <\/em>looking at the Sphere<\/em>, but in order to do that, it will need to know where the Sphere <\/em>is. Following this is the otherAudio<\/code> variable, which will reference SoundManager<\/em>‘s AudioSource <\/em>component and stabSound<\/code> which, despite the violent sounding name, has nothing to do with sharp objects. This is in reference to a sound that will be played using iTween’s Stab <\/em>command, which will be covered later. Finally, there’s mr<\/code>, which will contain information about the Cube <\/em>object’s MeshRenderer <\/em>component. This is how the object’s colour will be reset when you want to stop an iTween animation.<\/p>\n
At this point, the script should look similar to Figure 12.<\/p>\n
<\/p>\n
Figure 12: Beginning of Actions <\/em>script.<\/p>\n
With everything prepared, the first thing to do is to develop a UI that will display some buttons and text. Ordinarily you might do this in the Unity Editor rather than in code, but for this project using Unity’s OnGUI<\/code> method will work nicely. But what does OnGUI<\/code> do? OnGUI<\/code> is a method that handles the creation and execution of UI elements and functionality. It’s a helpful method for when you need a quick UI or to create showcases such as this.<\/p>\n
private void OnGUI()\r\n{\r\n\tGUI.Label(new Rect(600, 10, 150, 50), \"# of iTweens running: \" \r\n            + iTween.Count());\r\n}<\/pre>\n
After creating the method, the very first thing done is to create a GUI label. A new rectangle is created in this label that will contain some text. This text will display the number of iTween animations currently running using iTween’s Count<\/code> method. Now several buttons will be created in the OnGUI<\/code> function that the user can press to begin an iTween animation. The first three all relate to an object’s transform and look like this:<\/p>\n
if (GUI.Button(new Rect(10, 10, 100, 20), \"Move Object\"))\r\n\tiTween.MoveBy(gameObject, iTween.Hash(\"x\", 4, \"easeType\", \r\n        \"easeInOutExpo\", \"loopType\", \"pingPong\", \"delay\", 0.3f, \r\n        \"onStart\", \"PlaySound\"));\r\nif (GUI.Button(new Rect(10, 30, 100, 20), \"Rotate Object\"))\r\n\tiTween.RotateBy(gameObject, iTween.Hash(\"y\", 0.5f, \"easeType\", \r\n        \"easeInOutExpo\", \"loopType\", \"pingPong\", \"delay\", 0.5f));\r\nif (GUI.Button(new Rect(10, 50, 100, 20), \"Scale Object\"))\r\n\tiTween.ScaleBy(gameObject, iTween.Hash(\"x\", 3, \"y\", 3, \"z\", 3, \r\n        \"easeType\", \"easeInOutExpo\", \"loopType\", \"pingPong\", \r\n        \"delay\", 1f));<\/pre>\n
Now would be a good time to break down what all of these are doing. First, you’re creating a new button in code and checking if this button is clicked. The button’s size and position are defined in the new<\/code> Rect<\/code>‘s <\/em>parameters. Some text is created within this rectangle, and then you get to the button’s functionality the next line down. As you can see, all three buttons operate very similarly to each other. You first select which iTween action you wish to take, followed by setting which object should perform this action. In this case, the object is the one this script will be attached to, so the code just says gameObject<\/code>.<\/p>\n
Next, an iTween hash is defined. This is where you set what part of an object is to be animated, such as the x-<\/em>axis, and how it will animate. In the MoveBy<\/code> iTween for instance, you’ve told Unity to move the object on its x-<\/em>axis to four and set the easeType<\/code> to easeInOutExpo<\/code>. The easeType<\/code> in an iTween, as the name implies, is how the object will ease in and out of its animation. There is also loopType<\/code>, which has been set to pingPong<\/code> in all three animations. Using pingPong<\/code> will cause the animation to play forward then backward over and over. You can also set the loopType<\/code> to none<\/code> and loop<\/code>. Next is delay<\/code> which allows you to set how much time you want to pass before the animation begins, and finally in MoveBy<\/code>, <\/em>you have an onStart<\/code> parameter. OnStart<\/code> is where you can define a method to perform upon the start of an iTween, in this case a currently undefined method named PlaySound<\/code>. Speaking of which, perhaps now is a good time to create this method.<\/p>\n
void PlaySound()\r\n{\r\n\tiTween.Stab(gameObject, iTween.Hash(\"audioClip\", stabSound, \r\n              \"audioSource\", otherAudio, \"volume\", 1, \"delay\", \r\n              0.35f, \"loopType\", \"none\"));\r\n}<\/pre>\n
A new iTween has been introduced, named Stab<\/code>. Admittedly it sounds rather vicious, but all it does is play a sound effect of your choosing. Like the earlier iTweens, Stab<\/code> first asks you to select a game object then create a hash. This time the hash has you setting audioClip<\/code> to the previously defined stabSound<\/code>, which will come from the otherAudio<\/code> AudioSource<\/code>. The volume is set to 1, a delay is set, and Unity is told that there will be no looping. At this point, the script should so far look like the one in Figure 13.<\/p>\n
<\/p>\n
Figure 13: OnGUI <\/em>and PlaySound <\/em>methods.<\/p>\n
Returning to the OnGUI<\/code> method, the next few iTweens will deal with changing an object’s appearance as well as playing with the game’s music.<\/p>\n
if (GUI.Button(new Rect(10, 70, 100, 20), \"Color Object\"))\r\n\tiTween.ColorTo(gameObject, iTween.Hash(\"r\", 5, \"easeType\", \r\n        \"easeInOutExpo\", \"loopType\", \"pingPong\", \"delay\", 0.5f));\r\nif (GUI.Button(new Rect(10, 90, 100, 20), \"Change Pitch\"))\r\n\tiTween.AudioTo(gameObject, iTween.Hash(\"pitch\", 0, \"delay\", \r\n        1, \"time\", 3, \"easeType\", \"easeInOutExpo\", \"onComplete\", \r\n        \"ReturnAudio\"));\r\nif (GUI.Button(new Rect(150, 10, 100, 20), \"Fade Object\"))\r\n\tiTween.FadeTo(gameObject, iTween.Hash(\"alpha\", 0, \"time\", 1, \r\n        \"delay\", 0.35f, \"easeType\", \"easeInOutExpo\", \"loopType\", \r\n        \"pingPong\"));<\/pre>\n
Perhaps you’re noticing a pattern here? Barring a few key differences, almost every iTween is structured the same way. The most significant difference is in which value is being changed. For example, in ColorTo<\/code>, the object’s r<\/code> (red) value is changing while RotateBy<\/code> is adjusting the object’s y <\/em>rotation value. This is one more reason for iTween’s appeal \u2013 that being the universal rules to using an iTween command. There are of course some exceptions such as Stab<\/code>, and you can add or remove complexity of the commands on a whim like what was done with the AudioTo<\/code> line. In this iTween, the opposite of the MoveBy's<\/code> onStart<\/code> parameter is being performed, onComplete<\/code>. Once this iTween has finished its task, it will perform the ReturnAudio<\/code> method. That method performs a slightly different iTween that demonstrates how you can control as much or as little of the iTween command as you wish.<\/p>\n
void ReturnAudio()\r\n{\r\n\tiTween.AudioTo(gameObject, iTween.Hash(\"pitch\", 1, \"time\",\r\n        1.6, \"delay\", 0.5f));\r\n}<\/pre>\n
There are a few other animations this project is looking to demonstrate before the script is complete. The following code shows how you can create an animation that rapidly shakes the object, \u201cpunches\u201d the object, and how an object can be made to look at another point in the world. Once again, all this is to be entered in the OnGUI<\/code> method.<\/p>\n
if (GUI.Button(new Rect(150, 30, 100, 20), \"Look Object\"))\r\n\tiTween.LookTo(gameObject, iTween.Hash(\"lookTarget\", lookObject,\r\n        \"time\", 1, \"delay\", 1, \"easeType\", \"linear\", \"loopType\", \r\n        \"pingPong\"));\r\nif (GUI.Button(new Rect(150, 50, 100, 20), \"Shake Object\"))\r\n\tiTween.ShakePosition(gameObject, iTween.Hash(\"amount\", \r\n        new Vector3(2, 2, 2), \"time\", 2, \"delay\", 0.5f, \"easeType\", \r\n        \"easeInBounce\", \"loopType\", \"loop\"));\r\nif (GUI.Button(new Rect(150, 70, 100, 20), \"Punch Object\"))\r\n\tiTween.PunchPosition(gameObject, iTween.Hash(\"amount\", \r\n        new Vector3(5, 5, 5), \"time\", 2, \"delay\", 1, \r\n        \"loopType\", \"loop\"));<\/pre>\n
All of these animations involve feeding the code some kind of position or transform data to complete the task. For instance, LookTo<\/code> has you giving lookTarget<\/code> the transform data for lookObject<\/code>, also known as the Sphere<\/code> object created earlier. Similarly, ShakePosition<\/code> and PunchPosition<\/code> ask for Vector3<\/code> data to accomplish their goals. Now, the script is mostly finished but you might be wondering what one can do about all these looping animations. Naturally, there’s a way to stop all these animations immediately if so desired.<\/p>\n
if (GUI.Button(new Rect(450, 10, 110, 20), \"Stop Everything\"))\r\n{\r\n\tiTween.Stop();\r\n\ttransform.position = new Vector3(0, 0, 0);\r\n\ttransform.localScale = new Vector3(2, 2, 2);\r\n\ttransform.eulerAngles = new Vector3(-10, 45, -30);\r\n\tmr.material.color = Color.white;\r\n\tiTween.AudioTo(gameObject, iTween.Hash(\"pitch\", 1, \r\n            \"time\", 1.6, \"delay\", 0.5f));\r\n}<\/pre>\n
The code, in particular, is iTween.Stop<\/code> which, you guessed it, stops all currently running iTweens. The remainder of the code resets the object’s position, scale, rotation, and colour. It also uses the same AudioTo<\/code> command from the ReturnAudio<\/code> method in case this is pressed in the middle of the audio’s pitch being brought down. Now that the script is complete, the only task left to do is save the script and go back to the Unity editor to finish some last-minute tasks.<\/p>\n
Finishing the Project<\/h2>\n
Very little remains to be done before the project is complete. First, you’ll need to attach the Actions <\/em>script to the Cube <\/em>object. To make it easier to work with the Cube properties, you might want to lock the inspector. Figure 14 shows where to drag the Actions script.<\/p>\n
<\/p>\n
Figure 14: Attaching the Actions <\/em>script component to Cube<\/em><\/p>\n
Notice an AudioSource <\/em>component is attached to the Cube at the same time thanks to the RequireComponent <\/em>class attribute from earlier.<\/p>\n
In the AudioSource <\/em>component, place a song of your choice into the AudioClip <\/em>field, as shown in Figure 15. This is the song that will receive a pitch change thanks to the AudioTo <\/em>command from earlier. You can also set Loop <\/em>to true if you wish, but it is not required.<\/p>\n
<\/p>\n
Figure 15: Selecting a music track<\/p>\n
All that’s left is to fill in the fields from the Action <\/em>script component. Look Object <\/em>will be given the Sphere <\/em>object’s Transform <\/em>data, while SoundManager <\/em>will fill the Other Audio <\/em>field, as shown in Figure 16.<\/p>\n
<\/p>\n
Figure 16: Filling Look Object <\/em>and Other Audio <\/em>fields<\/p>\n
Stab Sound <\/em>will be a sound effect of your choosing. Like when selecting the music for Cube<\/em>‘s AudioSource <\/em>component, you’ll need to drag some audio file from the Assets <\/em>window into Stab Sound.<\/em> Finally, Mr <\/em>is filled by dragging Cube’s Mesh Renderer <\/em>component into the Mr <\/em>field shown in Figure 16.<\/p>\n
<\/p>\n
Figure 17: Filling the Mr <\/em>field<\/p>\n
Once all the fields are filled, you are ready to test out the project. The GUI you created in code will instantly appear and clicking any of the buttons will perform their respective tasks. Try mixing and matching iTweens so, as an example, you can have it changing size while rotating. You can also adjust the position of the Sphere <\/em>object to get a slightly different result when clicking the Look Object <\/em>button. Figure 18 shows the GUI once you are playing the game.<\/p>\n
<\/p>\n
Figure 18: The finished project<\/p>\n
Conclusion<\/h2>\n
It almost feels like cheating when using iTween, doesn’t it? What’s normally a three to five-step process can be simplified into one step, consisting of one line of code. The examples shown here are just a small sampling of what iTween can do. You can check out iTween’s website<\/a> to see more examples as well as some documentation showing all the different commands available to you. Whether it be used for prototyping or giving your current development a nice boost, there’s plenty of reason to consider having the iTween plugin on hand for any project.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Video games often contain animation of the objects and characters, but how is that accomplished? In this article, Lance Talbert explains how a Unity plugin called iTween can make creating animation easy. …<\/p>\n","protected":false},"author":317499,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[143538,53],"tags":[],"coauthors":[52549],"class_list":["post-85268","post","type-post","status-publish","format-standard","hentry","category-dotnet-development","category-featured"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/85268","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/317499"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=85268"}],"version-history":[{"count":5,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/85268\/revisions"}],"predecessor-version":[{"id":85288,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/85268\/revisions\/85288"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=85268"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=85268"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=85268"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=85268"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}