Pembuatan Tampilan pada game TICTACTOE Sepak Bola

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"?>

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/bg_maple"

>;

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: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"

/>;

Script di atas digunakan untuk memuat background dari menu utama aplikasi permainan Tic Tac Toe dan membuat button yang terdapat pada menu utama seperti Mulai Permainan, Pilihan, Petunjuk, 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 mulai permainan 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 “Mulai Permainan” di tekan, maka logika program yang menggunakan tombol tersebut akan menjalankan apa yang diperintahkan. Button pilihan yang terdapat pada menu utama memiliki id options, id tersebut juga digunakan pada script logika untuk memanggil sub menu dari menu pilihan. Setelah button “Pilihan” di tekan, maka sub menu yang ada di dalam Pilihan akan dipanggil. Button “Petunjuk” yang terdapat pada menu utama memiliki id help, id tersebut digunakan pada script logika untuk memanggil layout dari menu petunjuk. 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);

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 :

Gambar 3.17 Tampilan Menu Utama

Pembuatan Tampilan Mulai Permainan.

Pembuatan tampilan Mulai Permainan 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"

/>;

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"/>;

Script diatas digunakan untuk membuat layout berupa kolom untuk mengisi nama pemain 1 dan pemain 2 yang telah disesuaikan ukurannya dengan default isi pada layout kolom berupa tulisan “Pemain 1” dengan dan “Pemain 2”.

Pembuatan Tampilan Pilihan.

Tema disimpan dalam folder layout yang didalamnya tema disimpan dalam file xml yang merupakan file layout untuk bidak 3 x 3 TicTacToe untuk setiap tema. Berikut adalah potongan script untuk tema EL Clasicco yang berisi lambang dua buah klub sepakbola Spanyol Real Madrid dan Barcelona :

android:orientation="vertical"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:soundEffectsEnabled="true"

android:id="@+id/layout_id"

android:background="@drawable/bg_maple"

>

android:background="@drawable/title"

android:layout_width="wrap_content"

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" />

Gambar Tampilan Tema EL CLassicco

Disini saya menggunakan beberapa pilihan tema selain elcalssicco di atas saya juga menggunakan pilihan tema lainnya antara lain :

Gambar Tampilan tema Derby Manchester

Untuk ujicoba dan implementasi akan saya posting pada posting berikutnya