Animasi Sprite dengan XNA 4.0 pada Windows Phone 7

Hampir semua game pasti menggunakan animasi sprite. Biasanya animasi sprite digunakan untuk menjadikan gambar-gambar pada suatu game bergerak sehingga menimbulkan kesan hidup. Dalam tutorial ini, saya akan memberikan langkah-langkah untuk membuat animasi sprite yang dapat digunakan dalam pembuatan game dengan XNA 4.0 pada Windows Phone 7.

Software-software yang dibutuhkan antara lain:

1. Microsoft Visual Studio 2010
2. Windows Phone Developer Tools

Langkah-langkahnya adalah sebagai berikut:

1. Buka Microsoft Visual Studio 2010, kemudian pada menu bar pilih “File”, lalu pilih “New”, dan pilih “New Project…”.

Pada kolom “Installed Templates” pilih “Visual C#”, lalu pilih “XNA Game Studio 4.0″. Kemudian pada kolom di sebelah kanan “Installed Templates” pilih “Windows Phone Game (4.0)”. Ketikkan nama project pada kolom “Name”, sebagai contoh saya memberikan nama “WP7XNASpriteAnimation”. Setelah itu klik tombol “OK”.

2. Pada “Solution Explorer”, klik kanan pada project “WP7XNASpriteAnimation”, kemudian pilih “Add”, lalu pilih “Class…”.

Ketikkan nama kelas pada kolom “Name”, sebagai contoh saya memberikan nama “SpriteAnimation”. Kemudian klik tombol “Add”.

3. Ubah code di kelas “SpriteAnimation” menjadi seperti ini

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;

namespace WP7XNASpriteAnimation
{
    class SpriteAnimation
    {
        double currentTime;
        double interval;

        int currentFrameNumber;
        int numberOfFrames;

        Rectangle frame;
        Rectangle drawRectangle;

        Texture2D spriteSet;

        public SpriteAnimation(Texture2D spriteSet, int spriteWidth, int spriteHeight, double interval, Vector2 position)
        {
            currentTime = 0.0;
            this.interval = interval;
            currentFrameNumber = 0;
            numberOfFrames = spriteSet.Width / spriteWidth;
            frame = new Rectangle(0, 0, spriteWidth, spriteHeight);
            drawRectangle = new Rectangle((int)position.X, (int)position.Y, spriteWidth, spriteHeight);
            this.spriteSet = spriteSet;
        }

        public void Update(GameTime gameTime)
        {
            currentTime += gameTime.ElapsedGameTime.TotalMilliseconds;

            if (currentTime >= interval)
            {
                currentTime = 0.0;
                currentFrameNumber++;
                if (currentFrameNumber >= numberOfFrames)
                {
                    currentFrameNumber = 0;
                }
            }

            frame.X = currentFrameNumber * frame.Width;
        }

        public void Draw(SpriteBatch spriteBatch)
        {
            spriteBatch.Begin();
            spriteBatch.Draw(spriteSet, drawRectangle, frame, Color.White);
            spriteBatch.End();
        }
    }
}

/*
Penjelasan:
Teknik yang digunakan untuk membuat animasi sprite pada kelas SpriteAnimation adalah hanya dengan menggeser gambar ke kiri sesuai dengan nomor frame yang sedang ditampilkan. Variabel currentTime berguna sebagai timer. Jika jumlah dari variabel tersebut melebihi atau sama dengan interval, maka nomor frame yang ditampilkan akan di-increment atau ditambah dengan 1. Pengecekan terhadap nomor frame dilakukan setiap bertambahnya nomor frame. Jika nomor frame telah melebihi atau sama dengan jumlah frame yang ada maka nomor frame akan dikembalikan menjadi 0, sehingga animasi akan berulang.
*/

4. Sebagai contoh, Anda dapat men-download gambar di bawah ini untuk digunakan sebagai sprite set. Simpan gambar di bawah ini dengan nama “spritesetsample”.

Pada “Solution Explorer”, klik kanan pada project “WP7XNASpriteAnimationContent”, kemudian pilih “Add”, lalu pilih “Existing Item…”. Arahkan ke file sprite set yang bernama “spritesetsample” yang telah Anda download tadi.

5. Pada kelas “Game1.cs” pada project “WP7XNASpriteAnimation”, tambahkan dua buah variabel berikut ini

Texture2D spriteSet;
SpriteAnimation spriteAnimation;

/*
Penjelasan:
spriteSet berguna untuk menyimpan gambar sprite set yang akan kita gunakan untuk animasi sprite.
spriteAnimation berguna untuk menyimpan objek dari kelas SpriteAnimation yang telah kita buat.
*/

Pada method “LoadContent”, tambahkan code berikut ini

spriteSet = Content.Load<Texture2D>("spritesetsample");
spriteAnimation = new SpriteAnimation(spriteSet, 256, 256, 500.0, new Vector2(100.0f, 100.0f));

/*
Pertama-tama kita load gambar sprite set dari harddisk ke memory, kemudian setelah itu kita masukkan sprite set tersebut sebagai parameter untuk membuat objek dari kelas SpriteAnimation. Ukuran sprite yang kita gunakan adalah 256 pixel panjangnya dan 256 pixel tingginya. Terdapat 3 frame dengan ukuran yang sama berjajar secara horizontal. Karena kita hanya memiliki 3 frame saja, maka agar animasi masih dapat terlihat, kita gunakan interval selama 500 miliseconds. Posisi penggambaran sprite pada layar adalah dengan x = 100 pixel dan y = 100 pixel. Titik x = 0 dan y = 0 pada layar terletak pada pojok kiri atas layar ketika device diposisikan secara landscape.
*/

Pada method “Update”, tambahkan code berikut ini

spriteAnimation.Update(gameTime);

Pada method “Draw”, tambahkan code berikut ini

spriteAnimation.Draw(spriteBatch);

Untuk melihat hasil dari animasi sprite yang telah kita buat, dapat dilakukan dengan menekan tombol F5 pada keyboard.

Tampilan animasi sprite pada saat berjalan

Contoh solution dari animasi sprite yang telah kita buat dapat di-download di sini.

This entry was posted in Windows Phone 7. Bookmark the permalink.

3 Responses to Animasi Sprite dengan XNA 4.0 pada Windows Phone 7

  1. Bagus says:

    Keren nih, mau nanya kalo getpixel gimana ya??
    saya bisa membuatnya di VS2008 c# untuk windows mobile 6.0 kodenya :

    private void GreyScale()
    {
    Bitmap b = new Bitmap(pictureBox1.Image);
    BitmapData bmData = b.LockBits(new Rectangle(0, 0, b.Width, b.Height),ImageLockMode.ReadWrite, PixelFormat.Format24bppRgb);
    int stride = bmData.Stride;
    System.IntPtr Scan0 = bmData.Scan0;
    unsafe
    {
    byte* p = (byte*)(void*)Scan0;
    int nOffset = stride – b.Width * 3;
    byte red, green, blue,tmp;
    for (int y = 0; y < b.Height; ++y)
    {
    for (int x = 0; x < b.Width; ++x)
    {
    blue = p[0];
    green = p[1];
    red = p[2];
    tmp = (byte)((red + green + blue) / 3);
    if (tmp <= 100)
    {
    tmp = 1;
    }
    else
    {
    tmp = 255;
    }
    p[0] = p[1] = p[2] = tmp;
    p += 3;
    }
    }
    }
    b.UnlockBits(bmData);
    pictureBox1.Image = b;
    }

    saya copy ke VS2010 tidak bisa,
    mohon pencerahan GAN :D

  2. masidiq says:

    Makasih ya udah share
    :D
    Trus berkarya

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>