Untuk mengunduh Standard XNA Library klik di sini
Untuk mengunduh contoh penggunaan Standard XNA Library klik di sini

Berikut ini tampilan ketika aplikasi contoh penggunaan Standard XNA Library dijalankan:

Catatan:
Semua tekstur adalah bukan karya saya.

Pada tutorial kali ini saya akan membahas cara mengubah gambar berwarna menjadi grayscale menggunakan XNA 4.0. Cara yang diperkenalkan dalam tutorial ini dapat digunakan dalam pembuatan permainan pada platform Windows Phone 7 dan Windows.

Pada XNA 4.0 resource gambar direpresentasikan dengan kelas Texture2D. Fungsi dari kelas Texture2D yang akan digunakan adalah SetData dan GetData. Sesuai namanya, fungsi-fungsi tersebut berguna untuk mengubah dan mendapatkan data yang bertipe Color dari suatu objek dari kelas Texture2D.

Langkah-langkah pembuatan aplikasinya adalah sebagai berikut.

1. Buat project “Windows Phone Game (4.0)” baru. Sebagai contoh saya namakan project tersebut “GrayscaleConvert”.

2. Tambahkan suatu resource gambar dengan cara menekan tombol kanan mouse pada project “GrayscaleConvertContent” yang terdapat pada jendela solution explorer, kemudian pilih “Add”, dan pilih “Existing Item”. Sebagai contoh saya menambahkan gambar bernama “Koala.jpg”.

3. Tambahkan variabel-variabel berikut ini dalam file “Game1.cs”.

Texture2D myImage;
Texture2D converted

4. Tambahkan baris kode berikut ini dalam fungsi “LoadContent()”.

myImage = Content.Load<Texture2D>("Koala");
converted = new Texture2D(GraphicsDevice, myImage.Width, myImage.Height);

Color[] myImageColors = new Color[myImage.Width * myImage.Height];
Color[] newImageColors = new Color[myImageColors.Length];

myImage.GetData<Color>(myImageColors);

for (int ii = 0; ii < myImageColors.Length; ii++)
{
     byte blue = myImageColors[ii].B;
     byte green = myImageColors[ii].G;
     byte red = myImageColors[ii].R;
     byte tmp = (byte)((red + green + blue) / 3);
     if (tmp <= 100)
     {
          tmp = 1;
     }
     else
     {
          tmp = 255;
     }

     Color c = new Color(tmp, tmp, tmp);
     newImageColors[ii] = c;
}

converted.SetData<Color>(newImageColors);

5. Tambahkan baris kode berikut ini dalam fungsi “Draw(GameTime gameTime)”

spriteBatch.Begin();
spriteBatch.Draw(myImage, new Rectangle(0, 0, 200, 200), Color.White);
spriteBatch.Draw(converted, new Rectangle(0, 200, 200, 200), Color.White);
spriteBatch.End();

Untuk menjalankan aplikasi dapat dilakukan dengan cara menekan tombol F5 pada keyboard atau pilih menu “Debug” dan pilih “Start Debugging”.

Berikut ini adalah screenshot pada saat aplikasi dijalankan.

Contoh solution yang dibuat dalam tutorial ini dapat di-download di sini.

This implementation will save current frame into an image file named “anImageFile.png”

Put this code into your draw method.

if (takeScreenshot)
{
   Color[] colors = new Color[GraphicsDevice.Viewport.Width * GraphicsDevice.Viewport.Height];
   GraphicsDevice.GetBackBufferData<Color>(colors);

   Texture2D tex2D = new Texture2D(GraphicsDevice, GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height);
   tex2D.SetData<Color>(colors);

   String filename = "anImageFile.png";

   FileStream stream = File.Create(filename);

   tex2D.SaveAsPng(stream, GraphicsDevice.Viewport.Width, GraphicsDevice.Viewport.Height);

   stream.Flush();
   stream.Close();

   takeScreenshot = false;
}

The idea is very simple. First, we get colors data from graphics device, then we create a new Texture2D object and set colors data with saved colors data from graphics device. Finally, we call the SaveAsPng method to save current frame into an image file.

In this tutorial I will explain about Realtime Optimally Adapting Meshes (ROAM) implementation using C# XNA 4.0 Framework. Also this implementation is my final project for my computer science degree. This implementation is based on original ROAM paper and C++ OpenGL implementation from clod.zip archive in here.

The difference between simple ROAM and original ROAM is in the variance computation to determine whether triangle must be split or not. While simple ROAM use screen space distance between left and center position of the triangle, original ROAM use triangle wedgies to determine error metrics used to calculate triangle priority.

Some screenshot:

*Note: The frame rate is drop because the application window is not focused, but SnippingTool window instead.

to be continued…

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.

Untuk memperlihatkan bagaimana mudahnya membuat aplikasi untuk platform Windows Phone 7, saya akan memberikan contoh bagaimana mudahnya membuat aplikasi kalkulator sederhana pada platform tersebut.

Software-software yang dibutuhkan antara lain:

1. Microsoft Expression Blend 4.0
2. Windows Phone Developer Tools

Langkah-langkahnya adalah sebagai berikut:

1. Buka Microsoft Expression Blend 4.0, kemudian pada welcome screen pilih “New Project…” atau dapat juga dengan memilih “File” pada menu bar, lalu pilih “New Project…”.

2. Pada window “New Project”, pilih “Windows Phone” pada “Project types”, kemudian pilih “Windows Phone Application” pada project templates. Isikan nama project pada kolom “Name”, setelah itu klik tombol “OK”.

3. Microsoft Expression Blend 4.0 akan otomatis menyiapkan berbagai library dan file yang diperlukan untuk membuat aplikasi untuk platform Windows Phone 7. Tampilan awal aplikasi kita adalah seperti ini

Kita akan mengubah tulisan “MY APPLICATION” menjadi “Kalkulator Sederhana”, dan tulisan “page name” menjadi “Kalkulator” dengan cara sebagai berikut:

	Pastikan “Selection” tools pada toolbox telah terpilih.
	Pilih TextBlock yang ingin kita ganti tulisannya.
	Pada tab “Properties”, scroll ke kolom “Common Properties”. Ketikkan tulisan yang diinginkan pada kolom “Text”.

4. Control-control yang diperlukan agar pengguna dapat berinteraksi dengan aplikasi kalkulator sederhana yang kita buat adalah sebagai berikut:

No.	Icon pada Toolbox	Nama Control	Properties
1		TextBlock	Text = “Bilangan 1:”
2		TextBlock	Text = “Bilangan 2:”
3		TextBlock	Text = “Operasi:”
4		TextBlock	Text = “Hasil:”
5		TextBox	Name = “bilangan1″
6		TextBox	Name = “bilangan2″
7		TextBox	Name = “hasil”
8		RadioButton	Name = “operasi_tambah” Content = “+” IsChecked = true
9		RadioButton	Name = “operasi_kurang” Content = “-”
10		RadioButton	Name = “operasi_kali” Content = “*”
11		RadioButton	Name = “operasi_bagi” Content = “/”
12		Button	Name = “tombol_hitung” Content = “Hitung”

Tambahkan control-control tersebut dengan cara memilih icon dari control yang ingin dibuat pada toolbox, kemudian men-drag pada ContentPanel yang terletak pada lembar kerja Microsoft Expression Blend 4.0. Setelah itu atur posisi dan properties-nya seperti dengan yang ditunjukkan pada gambar dan tabel di atas.

5. Untuk menambahkan fungsionalitasnya, pastikan “Selection” tool telah terpilih pada toolbox, kemudian pilih instance control bernama “tombol_hitung”. Pada tab “Properties” klik icon “Events” yang bergambar seperti petir.

Klik dua kali pada kolom di sebelah kanan tulisan “Click”. Pada code editor tambahkan code berikut ini sebagai implementasi dari method “tombol_hitung_Click” yang telah dibuat secara otomatis

int bilanganPertama = Convert.ToInt32(bilangan1.Text);
int bilanganKedua = Convert.ToInt32(bilangan2.Text);
			
if(operasi_tambah.IsChecked.Value)
{
	int hasilnya = bilanganPertama+bilanganKedua;
	hasil.Text = hasilnya.ToString();
}
else if(operasi_kurang.IsChecked.Value)
{
	int hasilnya = bilanganPertama-bilanganKedua;
	hasil.Text = hasilnya.ToString();
}
else if(operasi_kali.IsChecked.Value)
{
	int hasilnya = bilanganPertama*bilanganKedua;
	hasil.Text = hasilnya.ToString();
}
else if(operasi_bagi.IsChecked.Value)
{
	int hasilnya = bilanganPertama/bilanganKedua;
	hasil.Text = hasilnya.ToString();
}

/*
Penjelasan:
Pertama-tama kita mendapatkan text yang telah di-input oleh user pada kolom TextBox bilangan1 dan bilangan2. Setelah itu kita melakukan konversi dari tipe data string yang merupakan tipe data yang merepresentasikan teks menjadi tipe data integer yang merepresentasikan bilangan bulat.

Apabila user memilih operasi penjumlahan, maka angka yang telah dimasukkan oleh user pada kolom TextBox bilangan1 dan bilangan2 akan dijumlahkan.

Apabila user memilih operasi pengurangan, maka angka yang telah dimasukkan oleh user pada kolom TextBox bilangan1 akan dikurangi dengan angka yang telah dimasukkan oleh user pada kolom TextBox bilangan2.

Apabila user memilih operasi perkalian, maka angka yang telah dimasukkan oleh user pada kolom TextBox bilangan1 dan bilangan2 akan dikalikan.

Apabila user memilih operasi pembagian, maka angka yang telah dimasukkan oleh user pada kolom TextBox bilangan1 akan dibagi dengan angka yang telah dimasukkan oleh user pada kolom TextBox bilangan2. Karena yang digunakan adalah tipe data integer, maka hasil dari pembagian akan dibulatkan ke bawah.
*/

Untuk menjalankan aplikasi kalkulator sederhana yang telah kita buat, dapat dilakukan dengan menekan tombol F5 pada keyboard atau dengan memilih menu “Project” pada menu bar, kemudian pilih “Run Project”.

Tampilan aplikasi kalkulator sederhana pada saat berjalan

Aplikasi kalkulator sederhana ini masih memiliki banyak sekali kelemahan, contohnya seperti tidak bisa menghitung bilangan dengan koma atau bukan bilangan bulat. Anda dapat menambahkan fitur-fitur tambahan atau error handling sesuai dengan kreatifitas Anda. Selamat belajar

Contoh solution dari aplikasi kalkulator sederhana yang telah kita buat dapat di-download di sini.

Belum lama ini Microsoft telah meluncurkan produk barunya yang bernama Office Live yang merupakan aplikasi yang mirip sekali dengan Microsoft Office 2010, tetapi bedanya aplikasi ini dapat langsung berjalan tanpa di-install terlebih dahulu. Office Live ini berjalan pada web browser. Selain itu, perbedaan lainnya yang menjadi favorit saya adalah aplikasi ini GRATIS

Untuk menggunakan Office Live ini sangat mudah, tetapi terlebih dahulu Anda harus membuat account Windows Live jika Anda belum memilikinya.

Pada address bar web browser Anda ketikkan http://office.live.com/

Apabila Anda telah memiliki Windows Live account, Anda dapat langsung login dengan mengisi kolom “Windows Live ID” dan “Sandi”, kemudian menekan tombol “Masuk”.

Apabila Anda belum memiliki account Window Live, Anda dapat menekan tombol “Daftar” untuk menuju ke halaman pembuatan account baru.

Jika proses pembuatan account baru berhasil, Anda akan dibawa ke halaman utama account Windows Live Anda.

Pada kolom “Pribadi” pilih “Dokumen Saya”.

Anda dapat memilih jenis dokumen apa yang ingin dibuat dengan memilih menu “Baru”.

Pilih “Dokumen Word”.

Ketikkan nama file Microsoft Word yang ingin dibuat pada kolom “Nama”.

Tampilan dari Microsoft Word pada Office Live ini sangat mirip dengan Microsoft Word yang terdapat pada Microsoft Office 2010. Salah satu kesamaannya adalah tampilan menu yang berbentuk ribbon.

Secara umum fungsionalitas yang diberikan sama, dari mulai fungsi untuk menyimpan, mencetak, melihat properti dari suatu dokumen, dll.

Screenshot ketika Microsoft Word pada Office Live sedang digunakan

Office Live ini sudah saya coba pada web browser Mozilla Firefox, sampai saat ini belum ada masalah jika Office Live digunakan pada web browser tersebut.

Ada beberapa fitur baru yang dimiliki oleh Microsoft Word 2010, salah satunya yang baru saja saya ketahui adalah fitur untuk mengirimkan blog post ke blog yang kita miliki. Kebetulan blog yang saya miliki menggunakan engine WordPress, dan ternyata Microsoft Word 2010 ini mendukung dengan baik engine blog tersebut. Contohnya ketika saya mengirimkan post ini, saya hanya tinggal membuka aplikasi Microsoft Word seperti ketika saya ingin membuat dokumen biasa, hanya saja saya memilih “Blog Post” pada new document template.

Setelah saya memilih Blog Post Template dengan men-double klik iconnya, saya menambahkan berapa informasi yang dibutuhkan oleh Microsoft Word 2010 untuk berkomunikasi dengan blog saya, misalnya informasi alamat URL blog, username dan password.

Klik icon “Manage Account” pada ribbon menu.

Kemudian akan muncul window seperti ini

Klik tombol “New”, setelah itu akan muncul window seperti ini

Pilih blog engine yang kita gunakan pada dropdown “Blog”, setelah itu klik tombol “Next”.

Pada kolom “Blog Post URL” ganti tulisan “Enter your blog URL” dengan alamat blog kita, contohnya “raufan.com/blog” tanpa tanda kutip. Pada kolom “User Name” isikan dengan username administrator blog kita, dan pada kolom “Password” isikan dengan password account administrator blog kita. Setelah itu klik tombol “Picture Options” untuk mengatur bagaimana gambar akan diupload ke blog kita.

Pada drop down “Picture provider” pilih “My blog provider”, kemudian klik tombol “OK”. Pada window “New WordPress Account” klik tombol “OK”. Microsoft Word 2010 akan melakukan verifikasi apakah informasi yang telah kita berikan itu benar atau salah. Pada window “Blog Accounts” klik tombol “Close”.

Kita langsung dapat mengetikkan post title pada kolom yang berisikan “[Enter Post Title Here]“. Isi dari post dapat diketikkan pada kolom dibawah garis.

Setelah post yang kita buat telah selesai, untuk mempublikasikannya kita hanya perlu mengklik tombol “Publish”.

Bagi saya fitur otomatis mengupload gambar yang telah diinsert pada post sangat berguna sekali, daripada saya harus mengupload gambar satu persatu