Merancang Aplikasi permainan Tic Tac Toe Mobile Android

Aplikasi permainan Tic Tac Toe ini adalah aplikasi berupa permainan yang terdiri dari 3 x 3 bidak yang pada umumnya lambang dari permainan Tic Tac Toe pada umumnya adalah O dan X. Pada kesempatan ini penulis membuat aplikasi permainan Tic Tac Toe dengan tampilan yang menarik sehingga tidak mengesankan permainan Tic Tac Toe adalah permainan yang sulit dan ditambah menu untuk mengubah tema sehingga pemain tidak merasa bosan dengan symbol O dan X. Simbol dapat dirubah sesuai tema yang disediakan dapat berupa lambang wajah, lambang sepakbola dalam negeri, lambang sepakbola Italia dan plush toy.

Dalam pembuatannya, aplikasi permainan ini harus dibuat dahulu rancangan tampilan awal yang berupa menu untuk memulai permainan, menu option untuk merubah settingan pada aplikasi permainan Tic Tac Toe dan menu bantuan untuk mengetahui bagaimana cara memainkan aplikasi Tic Tac Toe serta menu keluar untuk keluar permainan. Berikutnya mulai dilakukan pembuatan program dengan menggunakan editor ECLIPSE. Setelah proses pembuatan program selesai dilakukan proses pengujian program dengan menggunakan emulator Android (Android SDK) sampai program berhasil dicompile dan dijalankan dengan baik.

Rancangan Umum Aplikasi.

Aplikasi permainan Tic Tac Toe ini adalah aplikasi berupa permainan yang terdiri dari 3 x 3 bidak yang pada umumnya lambang dari permainan Tic Tac Toe pada umumnya adalah O dan X. Pada kesempatan ini penulis membuat aplikasi permainan Tic Tac Toe dengan tampilan yang menarik sehingga tidak mengesankan permainan Tic Tac Toe adalah permainan yang sulit dan ditambah menu untuk mengubah tema sehingga pemain tidak merasa bosan dengan symbol O dan X. Simbol dapat dirubah sesuai tema yang disediakan dapat berupa lambang wajah, lambang sepakbola dalam negeri, lambang sepakbola Italia dan plush toy

Pembuatan Aplikasi Permainan Tic Tac Toe.

Untuk membuat aplikasi permainan Tic Tac Toe ini, terlebih dahulu penulis harus menyiapkan Environtmentnya, terutama Android SDK, ADT ( Android Development Tools ) dan Eclipse.

1 Untuk menginstall Eclipse penulis akan menginstal Java JDK (java development kit) versi 5 atau diatasnya.

2 Install dan setting Android SDK.

3 Kemudian install & mengkonfigurasi Eclipse (kita akan menggunakan Eclipse 3.5 Galileo), juga menginstall ADT (kita akan menggunakan ADT 0.9.4 ).

Pertama, penulis jalankan eclipse terlebih dahulu. Penulis akan menggunakan Eclipse IDE for Java EE developers. Setiap ingin membuat project baru eclipse meminta penulis untuk membuat folder workspace dan di letakkan di salah satu Partisi hardisk computer. Kemudian lembar kerja eclipse dibuka dan penulis siap membuat aplikasi permainan Tic Tac Toe.

Sebelum membuat project, maka lebih dahulu penulis harus mengkonfigurasikan package android. Dengan mengkonfigurasikan package tersebut Google API dan SDK platform dari yang paling lama hingga versi terbarunya beserta AVD (Android Virtual Device). Jika sudah berhasil maka eclipse sudah terkonfigurasi dengan Android SDK dan AVD manager.

Pembuatan Tampilan Menu Utama.

Pembuatan halaman Menu Utama ini dengan menggunakan script xml yang disimpan pada welcome.xml. Berikut potongan script nya :

xml version="1.0" encoding="utf-8"?>

<="" span="" xmlns:android="http://schemas.android.com/apk/res/android">

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:background="@drawable/bg_maple"

    >

    <="" android:id="@+id/title" span="">

      android:background="@drawable/title"

      android:layout_width="wrap_content"

      android:layout_height="wrap_content"

      android:layout_alignParentRight="true"

      android:layout_marginRight="5dip"

      android:layout_marginTop="20dip"

      />

   

      <="" android:id="@+id/new_game" span="">

      android:background="@drawable/new_game"

      android:layout_width="wrap_content"

      android:layout_height="60dip"

      android:layout_alignParentRight="true"

      android:layout_marginRight="5dip"

      android:layout_below="@id/title"

      android:layout_marginTop="20dip"

      />

     

      <="" android:id="@+id/options" span="">

      android:background="@drawable/options"

      android:layout_width="wrap_content"

      android:layout_height="60dip"

      android:layout_alignParentRight="true"

      android:layout_marginRight="5dip"

      android:layout_below="@id/new_game"

      />

     

      <="" android:id="@+id/help" span="">

      android:background="@drawable/help"

      android:layout_width="wrap_content"

      android:layout_height="60dip"

      android:layout_alignParentRight="true"

      android:layout_marginRight="5dip"

      android:layout_below="@id/options"

      />

<="" android:id="@+id/quit" span="">

      android:background="@drawable/quit"

      android:layout_width="wrap_content"

      android:layout_height="60dip"

      android:layout_alignParentRight="true"

      android:layout_marginRight="5dip"

      android:layout_below="@id/help"

      />

   

Script di atas digunakan untuk memuat background dari menu utama aplikasi permainan Tic Tac Toe dan membuat button yang terdapat pada menu utama seperti Permainan baru, Menu option, Bantuan, Keluar. Pada background menu utama gambar yang dimuat diambil dari komponen folder drawable pada folder res dengan nama file bg_maple dan judul dari aplikasi dimuat dari gambar yang terdapat pada folder yang sama dengan nama file title.

Button Permainan baru yang terdapat pada menu utama memiliki id new_game , yang mana id tersebut digunakan pada script logika untuk menggunakan yang digunakan untuk menjalankan kelas yang lain. Setelah button “Permainan Baru” di tekan, maka logika program yang menggunakan tombol tersebut akan menjalankan apa yang diperintahkan. Button Menu option yang terdapat pada menu utama memiliki id options, id tersebut juga digunakan pada script logika untuk memanggil sub menu dari Menu option. Setelah button “Menu Option” di tekan, maka sub menu yang ada di dalam Menu option akan dipanggil. Button Bantuan yang terdapat pada menu utama memiliki id help, id tersebut digunakan pada script logika untuk memanggil layout dari menu Bantuan. Button Keluar pada menu utama memiliki id quit,  yang mana id tersebut digunakan pada script logika untuk menjalankan fungsi dari button tersebut yaitu keluar dari permainan Tic Tac Toe. Berikut potongan dari script Tictactoe.java :

public class TicTacToe extends Activity {

    /** Called when the activity is first created. */

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.welcome);

       

        final ImageView iv_new_game = (ImageView) findViewById(R.id.new_game);

        final ImageView iv_options = (ImageView) findViewById(R.id.options);

        final ImageView iv_help = (ImageView) findViewById(R.id.help);

        final ImageView iv_quit = (ImageView) findViewById(R.id.quit);

       

        iv_new_game.setOnClickListener(welcome_listener);

        iv_options.setOnClickListener(welcome_listener);

        iv_help.setOnClickListener(welcome_listener);

        iv_quit.setOnClickListener(welcome_listener);

    }

   

    /**

     * Common onClickListener for Welcome Screen Buttons

     * */

    OnClickListener welcome_listener = new View.OnClickListener() {

      public void onClick(View v) {

            final ImageView iv = (ImageView) v;

            if (iv.getId() == R.id.new_game) {

                  showDialog(NAME_DIALOG_ID);

            }

            else if(iv.getId() == R.id.options) {

                  options_menu();

            }

            else if (iv.getId() == R.id.help) {

                  showDialog(HELP_DIALOG_ID);

            }

            else if (iv.getId() == R.id.quit) {

                  finish();

            }

      }

    };

Perintah diatas menyatakan, bahwa logika program pada script tersebut berlaku untuk tampilan file welcome.xml. Kemudian pada layout welcome.xml gambar untuk tiap – tiap pilihan pada menu utama ditampilkan berdasarkan masing – masing id nya. Terdapat beberapa situasi kondisi pada setiap button yang dipilih yang kemudian diarahkan pada masing – masing fungsi pada script pilihan yang terdapat pada menu utama. Berikut tampilan halaman menu utama :

Tampilan Menu Utama

Pembuatan Tampilan Permainan Baru.

Pembuatan tampilan Permainan Baru ini dengan menggunakan script xml yang disimpan pada main.xml dan name_dialog_2.xml. Pada script xml name_dialog_2.xml berfungsi menampilkan dialog untuk memasukan nama pemain 1 dan pemain 2 sebelum permainan dimulai sedangkan pada script xml main.xml berfungsi untuk membuat area atau bidak dari permainan Tic Tac Toe yang berjumlah 3 x 3 bidak. Berikut potongan script nya :

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_alignParentRight="true"

      android:layout_marginLeft="0dip"

      android:layout_marginTop="60dip"

      android:layout_marginRight="10dip"

      android:src="@drawable/default_button"

      android:tag="3"

      />

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_toLeftOf="@id/b3"

      android:layout_marginTop="60dip"

      android:src="@drawable/default_button"

      android:tag="2"

      />

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_toLeftOf="@id/b2"

      android:layout_marginTop="60dip"

      android:src="@drawable/default_button"

      android:tag="1"

      />

     

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_alignParentRight="true"

      android:layout_marginLeft="0dip"

      android:layout_below="@id/b3"

      android:layout_marginRight="10dip"

      android:src="@drawable/default_button"

      android:tag="6"

      />

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_toLeftOf="@id/b6"

      android:layout_below="@id/b2"

      android:src="@drawable/default_button"

      android:tag="5"

      />

 

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_toLeftOf="@id/b5"

      android:layout_below="@id/b1"

      android:src="@drawable/default_button"

      android:tag="4"

      />

     

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_alignParentRight="true"

      android:layout_marginLeft="0dip"

      android:layout_below="@id/b6"

      android:layout_marginRight="10dip"

      android:src="@drawable/default_button"

      android:tag="9"

      />

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_toLeftOf="@id/b9"

      android:layout_below="@id/b5"

      android:src="@drawable/default_button"

      android:tag="8"

      />

     

      android:layout_width="100dip"

      android:layout_height="100dip"

      android:layout_toLeftOf="@id/b8"

      android:layout_below="@id/b4"

      android:src="@drawable/default_button"

      android:tag="7"

      />

 Perintah diatas menyatakan, bahwa logika program pada script tersebut berfungsi membentuk sebuah bidak yang berjumlah 3 x 3 bidak  yang telah disesuaikan ukurannya dan kemudian gambar dari background bidak Tic tac Toe diimport dari source program dengan nama file default_button.

xml version="1.0" encoding="utf-8"?>

              android:id="@+id/layout_root"

              android:orientation="horizontal"

              android:layout_width="fill_parent"

              android:layout_height="fill_parent"

              android:padding="10dp">

        

            android:id="@+id/namep1"

          android:layout_width="200dip"

          android:layout_height="wrap_content"

          android:layout_marginRight="10dp"

          android:layout_marginTop="10dip" android:text=" Pemain 1"/>

              

            android:id="@+id/namep2"

          android:layout_width="200dip"

          android:layout_height="wrap_content"

          android:layout_marginRight="10dp"

          android:layout_below="@id/namep1"

          android:autoText="true" android:text=" Pemain 2"/>