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.

Dealing with device for Ubuntu Touch development

Lately I am working on Ubuntu Touch Calendar application. Recently I also got device and now I wanted to run and test application on real device.

So it seems there are two type of Ubuntu Touch image,
one cdimage-touch, which is read-write image but it does not support over the air update and
other ubuntu-system, which is read only, but which can be updated over the air

For development purpose its better to use cdimage-touch, as you can transfer file from computer to device and test it as its read-write. Its not possible with ubuntu-system image. But if you just want to see how Ubuntu Touch looks and test applications then ubuntu-system image is good.

You can follow steps mentioned here, to install appropriate image on device.

Now we have proper image on device, then following are some command which can be used to install the application and transfer file form computer to device.

adb push can be used to tranfer file from computer to device, just like copy

adb push tests/autopilot/calendar_app/tests/test_calendar.py /usr/lib/python2.7/dist-packages/calendar_app/tests/

BTW, " /usr/lib/python2.7/dist-packages/" is the path where test case are installed by default on device. And above command is coping updated test case file to device.

If you want to run test on device then you can use following command on your desktop terminal.

phablet-test-run calendar_app

Same way we can transfer QML files as well. Like below.

adb push YearView.qml /usr/share/calendar-app/YearView.qml

It seems "/usr/share/" is path where applications are installed.

If you want to install complete application built from source code, then you can run following command to build application from source. You need to run this command from directory where debian folder is residing.

debuild -uc -us -b

This will generate .deb file in parent folder. You can copy this file to device via adb push. Then you can goto device's shell by adb shell command.

adb push DEB_FILENAME.deb /tmp
adb shell

And finally install .deb by running following command on device's shell.

cd /tmp
dpkg -i DEB_FILENAME.deb

Now you should be able to run latest installed app.

Un-boxing Nexus 4

I recently received Nexus 4. Here are few snaps.

Box contains USB cable, power adapter in which you can plug in USB cord to charge the device and user manual.

Device is quite nice looking, but I am going to use it for testing Ubuntu Touch.

After firing some command from here, I was able to boot Ubuntu Touch on it.

Sharing on Facebook, Twitter with BB10 Cascades app

I am currently adding sharing feature to my BB10 Audiobook Reader app. I wanted to allow sharing on Facebook, Twitter, BBM  and other supported platform.

BB10 support this via Invocation framework, Using Invocation framework you can share things using native application.

Using Invokation Framework is easy, you just need use InvokeActionItem and set some property and all is done.

Following is my code that share comment via Facebook or Twitter. Following code will allow to share using any application which support plain text invocation target.

By default it will also have sharing icon, you can use Image property to change it to custom icon.

Pressing share button on toolbar will show all application which can share the data specified by mimeType, User can select one of those and share data using that application.

Page {
    ...
    actions[
        InvokeActionItem {
            title: "Share"
            query {
                mimeType: "text/plain"           
                invokeActionId: "bb.action.SHARE"
            }
            onTriggered: {
                data = "Comments to share";
            }
        }
        ...
    ]
    ...
}

You can find more about, how to share with individual application from here. And here is documentation for InvokeActionItem.

Here is how it looks and works on device.

Reading file from resource in iOS

I was working on creating some utility function for iOS App. I required to create a File in resource and read it. File contains some words separated by new lines. I wanted to read those words and create array of those.

Its quite simple but though to share it.

Following how its done.

        
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"keywords_en" ofType:@"txt"];
NSError *error = nil;
NSString *keywordsStr = [NSString stringWithContentsOfFile: filePath encoding:NSUTF8StringEncoding error:&error];

NSArray* keywordArray = [[keywordsStr componentsSeparatedByString:@"\n"]retain];