Pong Droid Series–Part 2

Oleh: Krishna.W

Hi all… kali ini gw akan melanjutkan pembahasan tentang tutorial pembuatan game Pong pada platform android. Di postingan gw sebelumnya, Pong Droid Series Part 1 gw sudah membahas secara singkat tentang apa itu platform android. Di postingan kali ini gw akan membahas tentang pembuatan layar menu awal untuk game Pong Droid ini.

Oiya.. sebelumnya siapkan terlebih dulu development environment dan tools yang dibutuhkan, antara lain:

– Eclipse IDE. Yang bisa didownload disini http://www.eclipse.org/downloads/

– Android SDK. Yang bisa didownload disini Android SDK

Untuk settingan eclipse dan android SDK bisa dipelajari disini Installing the Android SDK. Dan kalau ingin beradaptasi terlebih dulu dengan pemrograman di platform android, kalian bisa mencoba tutorial HelloWord untuk android yang bisa dipelajari disini Tutorial Hello World Android

Oke, setelah development environmentnya disiapkan kita bisa langsung terjun ke coding.. =)

Membuat Layar Menu

Tampilan layar menu awal untuk game Pong Droid ini cukup sederhana, hanya terdiri dari nama aplikasi, dan tiga buah tombol yaitu: Start Game, About Game, dan Exit Game.

Pertama, kita buat dulu project baru di Eclipse dengan nama Pong Droid. Untuk build targetnya kita buat saja untuk Android 2.2.  Lalu untuk nama aplikasinya, kita buat sama dengan nama project. Jangan lupa membuat activity dan menentukan versi SDK minimalnya. Oiya, untuk nama package kalian bisa mengisinya sesuai dengan keinginan masing-masing ^_^ . Form pembuatan project baru tersebut bisa dilihat pada screenshot berikut ini:

new_project

Setelah itu klik tombol Finish.

Sekarang, buka file PongDroid.java yang ada di folder src. Sourcecode yang sudah digenerate oleh eclipse adalah seperti berikut ini:

package krs.tutorial;

import android.app.Activity;
import android.os.Bundle;

public class PongDroid extends Activity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
}

Seperti yang telah gw bahas di Pong Droid Series Part 1, kita akan menggunakan objek dari class Activity untuk merepresentasikan layar dan user interface dalam game Pong Droid ini. Nah, tugas dari class Pong Droid ini adalah membuat layar menu utama dan mendefinisikan tampilan layar tersebut dengan menggunakan XML yang diakses melalui method setContentView(R.layout.main).

Oiya.. sebelum kita melihat file XML yang digunakan untuk mendefinisikan tampilan dari layar awal ini, perlu diketahui kalau dalam platform android ada dua metode untuk membuat layout tampilan layar yaitu metode prosedural dan metode deklaratif. Berikut ini penjelasan singkat dari dua metode tersebut:

  • Metode Prosedural:

     Metode ini menggunakan manipulasi kode Java untuk meyusun tampilan layout. Contohnya adalah ketika kita melakukan pemrograman aplikasi Java menggunakan Swing, kita memanipulasi objek user interface seperti misalnya JFrame, JDialog dengan menggunakan kode Java untuk menyusun tampilan layout.

  • Metode Deklaratif:

     Dalam metode ini, kita tidak menggunakan manipulasi kode Java untuk menyusun tampilan layout, melainkan mendeklarasikan tampilan seperti apa yang kita inginkan untuk layout yang akan kita buat. Contoh simple-nya adalah penggunaan HTML untuk pembuatan layout web.

Nah, di android kita bisa memilih metode yang mana yang akan kita gunakan untuk menyusun tampilan layout yang kita inginkan. Walaupun begitu, Google menyarankan agar developer sebisa mungkin menggunakan metode deklaratif untuk menyusun tampilan layoutnya. Untuk penjelasan lebih detil tentang user interface di platform android, bisa dipelajari disini: topik User Interface di situs developer android.

Oke.. sekarang buka file main.xml yang ada di direktori res/layout untuk menyusun tampilan layout menu awal game Pong Droid ini. Isi dari file main.xml adalah seperti berikut ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

Pada file maiin.xml tersebut, sudah dibuat deklarasi untuk menampilkan objek TextView ke layar. Apabila kita menjalankan aplikasi ini di emulator maka tampilannya akan seperti ini:

hellopong

Untuk membuat tampilan menu awal game Pong seperti yang gw sebutkan di atas tadi, kita akan mengubah file main.xml tersebut menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="@string/main_title"
    />
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/start_game"
    />
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/about_game"
    />
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/exit_game"
    />        
</LinearLayout>

Setelah itu save, upss.. ternyata eclipse memberitahukan bahwa ada error pada file xml yang kita modifikasi tadi. Kenapa error tersebut bisa muncul? Karena kita belum mendeklarasikan string yang ada pada file main.xml untuk mnampilkan teks pada layar menu awal. Sekarang kita akan memodifikasi file string.xml yang ada di direktori res/values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, PongDroid!</string>
    <string name="app_name">Pong Droid</string>
</resources>

Kita modifikasi file xml tersebut menjadi seperti ini:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Pong</string>
    <string name="main_title">Pong Tutorial</string>
    <string name="start_game">Start Play</string>
    <string name="about_game">About Game</string>
    <string name="exit_game">Exit Game</string>
</resources>

Setelah itu save file string.xml tersebut. Nah, error yang muncul di file main.xml tadi sekarang sudah hilang. Kemudian run project Pong Droid ini, maka tampilannya akan menjadi seperti berikut:

menu_pong

Nah, kita sudah selesai membuat tampilan layar menu awal untuk game Pong Droid ini. Cukup mudah kan? ^_^

Gw akan memberikan penjelasan singkat tentang modifikasi yang kita lakukan pada dua file xml tadi.

  • Modifikasi file main.xml

     Pada file xml ini, gw mendeklarasikan tampilan layout untuk layar menu awal Pong Droid. Layout yang gw gunakan adalah Linear Layout, berikut ini syntax untuk deklarasinya:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

     Kemudian gw menambahkan deklarasi untuk menampilkan nama aplikasi, syntaxnya adalah seperti berikut:

<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:text="@string/main_title"
    />

     Untuk tombol-tombol yang ada di layar menu, syntax untuk deklarasinya adalah seperti berikut:

<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/start_game"
    />
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/about_game"
    />
<Button
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/exit_game"
    />
  • Modifikasi file string.xml

     Dalam file string.xml ini, gw melakukan modifikasi untuk mendeklarasikan elemen-elemen teks yang digunakan dalam  tampilan layar menu Pong Droid. Elemen-elemen teks yang digunakan adalah nama aplikasi, judul game, teks untuk tombol Start Game, About Game dan Exit Game.

Oke.. di postingan selanjutnya gw akan membahas tentang pemrograman untuk tombol-tombol yang ada di layar menu awal game Pong Droid ini..

See you all in the next post .. Happy coding.. (O-O,)