How to create a frame animation with character sprite in android ?

As it is obvious from our title, we will be creating a simple frame animation using a very few lines of code.

First of all go here and grab some character sprite images that you would like to animate. I have chosen the following set of images.



you can download the above set of images >> Download it here

Now go ahead and create a new android studio(or choose an IDE of your choice) project. Now, if you extract the above resource which i have provided, you could find a folder called running in which there are 6 frame images as shown in the image above . Copy all the images to your drawable folder like this



Now right click on your drawable folder and then new >> Drawable Resource File. Name it as running_anim. Now the drawable directory will look like this



Now open up running_anim.xml and add the following code to it

<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/frame1" android:duration="100"/>
    <item android:drawable="@drawable/frame2" android:duration="100"/>
    <item android:drawable="@drawable/frame3" android:duration="100"/>
    <item android:drawable="@drawable/frame4" android:duration="100"/>
    <item android:drawable="@drawable/frame5" android:duration="100"/>
    <item android:drawable="@drawable/frame6" android:duration="100"/>
</animation-list>

Here we have added the 5 images which should be animated in sequence. The duration for which each image has to stay in the frame can also be mention here by using android:duration


Now go to your res >> layout folder and open activity_main.xml add the following code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/sprite_image"
        android:src="@drawable/frame1"
        android:layout_width="match_parent"
        android:layout_height="200dp" />

</RelativeLayout>

The above imageview sprite_image is where we will run the animation


Now that all the design part is complete, let us see how to run the animation using some java code. Now goto your MainActivity.java file and then add the following code

public class MainActivity extends AppCompatActivity {

    private ImageView sprite_image;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        sprite_image=(ImageView)findViewById(R.id.sprite_image);
        sprite_image.setImageResource(R.drawable.running_anim);
    }
}

As shown in the code above just set image resource of the ImageView as the  running_anim.xml that we created using the 6 images in the beginning. Now if you go ahead and run the project, you could see the following output



No comments:

Post a Comment