Beginning 2D sprite animation with Unity3D

Now that Unity is free and you can develop app for Windows phone, BB10, Android and iOS using it. I thought to give it a try.

To learn it, I started with creating simple 2D game, in which I need to switch images on object when someone touches it. It too some time to get it done first time, but finally now I know how it can be done.

So let's get started.

First we need to setup Main camera.

- I seen some videos and in one of video, author suggested to set camera at x=0,y-0, z = -10
and rotation to x=0, y=180, z=0.  I decided to use the same.

- Set camera size as 1 as its easier to deal with

- Set projection to Orthographic for 2D games.

Setup light for 2D game

We dont need to use lighting for 2D game, so we will light up whole scene by following.

Edit-> Render setting ->Ambient Light

Change Ambient light to White, It should light up whole scene

Create a cube to represent 2D object

Now we should add some object to scene.

Actually I want to render 2D image on scene, but that's not possible so we will add some 3D object and apply material over it (which is our image). And render that object to represent our image.

To do that we can add cube to scene, with proper size, Ideally we just need a plane which only one face to represent image, as that will same memory, but to learn how it works, cube will do.

Add cube to scene by Create in Hierarchy and then cube.

set position as x = 0, y = 0, z = 10

You should see a Cube in your view now.

Import image as asset

Now drag image which we need to draw to asset window,
If you want to draw animation than Image needs to be sprite sheet, I created one myself with all images i needed to be displayed.

Create material with image and apply on the Cube

We can not add image diractly to Cube, we need to create material first.
To create material,

 Project window, create ->material

Now drag image over material's texture window.

Now you can apply this material to cube, by dragging material and dropping it on cube.

Now you can see the image, but you see whole sprite sheet.  We don't want that, we need to show only one portion of sprite sheet.

Let's click material again and you will see it has tiling and offset property.

So our sprite sheet has two sprite, thus tiling will be 0.5. Let's set tiling to 0.5. Now we see proper image on cube.

If you play with offset, you can see by manipulating it we can show different sprite on cube.

By setting offset to 0.5 you can show different image on cube. We will be using this property when we add support for event, on which we will show different image.

Its showing proper image but its also showing white background, but my image is transparent. We can add transparency by selecting proper Shader.

Click material, from Shader select -> Transparent ->cutout->Diffuse

You can play with Alpha cutoff value to adjust transparency. Now it should look like below.

Handle touch event so we can animate image on touch

Now we have our 2D object, we wan to add event on it. For that we need to add script to it.

Click on object -> from Inspector window -> select Add Component -> New Script

Name it and select scripting language of your choice, I selecte c# as scripting language.

Open script, and add following code in Update method.

 void Update () {  
  if( Input.anyKey ){
   gameObject.renderer.material.mainTextureOffset = new Vector2(0.5f,0); 
  } else {
   gameObject.renderer.material.mainTextureOffset = new Vector2(0.0f,0);
  }
 }

This script will check if any key is pressed. If pressed we are setting material offset to 0.5 else 0. To display different part of sprite sheet.

OK, We are done now. Here is how it works.