Pemodelan Visual Menggunakan UML

Activity Diagram untuk Mulai Bermain dapat dilihat pada Gambar 3.10. Menekan tombol Mulai Bermain Menampilkan halaman Permainan Gambar 3.10 Activity Diagram Mulai Bermain Use Case Specification Bermain dapat dilihat pada Tabel 3.8. Tabel 3.8 Use Case Specification Bermain Nama Use Case Bermain Aktor Pemain Deskripsi Use case ini berfungsi untuk memulai game dengan meletakkan kotak miliknya ke papan game Summy Pre Condition Papan game sudah ditampilkan di layar Flow Of Events Kegiatan Aktor Respons Sistem Pemain dan komputer mulai meletakkan kotak miliknya ke papan game Sistem meng-update papan game Post Condition Papan game Summy telah terisi kotak milik pemain dan game berlanjut Activity diagram untuk use case Bermain dapat dilihat pada Gambar 3.11. Pemain Meletakkan Kotak Mengupdate papan permainan Gambar 3.11 Activity Diagram Bermain Use Case Specification Evaluasi Langkah dapat dilihat pada Tabel 3.9. Tabel 3.9 Use Case Specification Evaluasi Langkah Nama Use Case Evaluasi Langkah Aktor AI Deskripsi Use case ini berfungsi untuk mengevaluasi langkah AI yang akan dijalankan pada gilirannya. Pre Condition Pemain telah meletakkan kotak-kotak miliknya Flow Of Events Kegiatan Aktor Respon Sistem - AI mengecek papan game - AI menyusun langkah yang mungkin - AI memilih langkah dengan nilai terbesar - AI meletakkan kotak- kotak miliknya Sistem mengupdate papan game Post Condition Papan game Summy telah terisi kotak milik AI dan game berlanjut Activity Diagram untuk Evaluasi Langkah dapat dilihat pada Gambar 3.12. Cek Papan Permainan Evaluasi Penyusunan Langkah Memilih Bentuk Terbaik Meletakkan Kotak Mengupdate Papan Permainan Gambar 3.12 Activity Diagram Evaluasi Langkah Use Case Specification Lihat Tentang dapat dilihat pada Tabel 3.10. Tabel 3.10 Use Case Specification Lihat Tentang Nama Use Case Lihat Tentang Aktor Pemain Deskripsi Use case ini berfungsi untuk melihat halaman tentang Pre Condition Pemain memilih menu Tentang pada halaman Menu Utama Flow Of Events Kegiatan Aktor Respons Sistem Pemain menekan tombol Tentang pada halaman Menu Utama - Menampilkan halaman Tentang - Menutup halaman Tentang Post Condition - Activity Diagram untuk Lihat Tentang dapat dilihat pada Gambar 3.13. Menekan Tombol Tentang Manampilkan halaman Tentang Menekan Tombol Back Menutup halaman Tentang Gambar 3.13 Activity Diagram Lihat Tentang Use Case Specification Lihat Bantuan dapat dilihat pada Tabel 3.11. Tabel 3.11 Use Case Specification Lihat Bantuan Nama Use Case Lihat Bantuan Aktor Pemain Deskripsi Use case ini berfungsi untuk melihat halaman bantuan dan tata cara bermain aplikasi Summy Pre Condition Pemain memilih menu Bantuan pada halaman Menu Utama Flow Of Events Kegiatan Aktor Respons Sistem Pemain menekan tombol Bantuan pada halaman Menu Utama - Menampilkan halaman Bantuan - Menutup halaman Bantuan Post Condition - Activity Diagram untuk Lihat Bantuan dapat dilihat pada Gambar 3.14. Menekan Tombol Bantuan Manampilkan halaman Bantuan Menekan Tombol Back Menutup halaman Bantuan Gambar 3.14 Activity Diagram Lihat Bantuan

3.4 Perancangan Transisi Halaman dan Antarmuka

Perancangan antarmuka dan transisi halaman aplikasi game merupakan tahap penting, karena akan menentukan interaksi yang akan dilakukan oleh pemain dengan aplikasi game ini.

3.4.1 Transisi Halaman

Transisi halaman merupakan pergantian halaman game dari satu halaman ke halaman lain pada layar. Transisi halaman terjadi sesaat setelah pemain menekan tombol yang tampak di layar. Pada antarmuka halaman aplikasi yang dibangun terdapat empat halaman aplikasi, yaitu halaman Menu Utama, halaman Game, halaman Tentang, dan halaman Bantuan. Pada halaman Menu Utama terdapat tiga tombol yaitu tombol Mulai Bermain, tombol Tentang, dan tombol Bantuan yang jika diklik akan muncul animasi transmisi ke halaman yang dituju. Berikut ini adalah transisi halaman pada game Summy seperti pada Gambar 3.15. Menu Utama Tentang Permainan Bantuan Gambar 3.15 Transisi Halaman

3.4.2 Antarmuka

Berdasarkan transisi halaman pada Gambar 3.15, penulis membuat antarmuka dari empat halaman. Berikut ini adalah perancangan antarmuka tiap halaman yang digambarkan secara sederhana. 1. Halaman Menu Utama Halaman ini adalah halaman yang pertama kali muncul saat aplikasi dijalankan. Pada halaman ini terdapat tulisan logo Summy dan beberapa tombol seperti tombol Mulai Bermain, tombol Bantuan, tombol Tentang, dan tombol Keluar. Berikut ini adalah rancangan antarmuka halaman Menu Utama seperti pada Gambar 3.16. SUMMY Mulai Bermain Bantuan Tentang Keluar 1 2 3 4 5 Gambar 3.16 Antarmuka Halaman Menu Utama Komponen yang digunakan pada rancangan pada Gambar 3.16 adalah: 1 Objek gambar Sprite yang digunakan sebagai judul game 2 Sprite yang digunakan sebagai tombol menu Main yang berfungsi untuk menampilkan halaman Main ketika diklik. 3 Sprite yang digunakan sebagai tombol menu Bantuan yang berfungsi untuk menampilkan halaman Bantuan ketika diklik. 4 Sprite yang digunakan sebagai tombol menu Tentang yang berfungsi untuk menampilkan halaman Tentang ketika diklik. 5 Sprite yang digunakan sebagai tombol menu Keluar yang berfungsi untuk keluar dari aplikasi ketika diklik. 2. Halaman Game Halaman ini berisi papan game Summy, kotak-kotak milik pemain dan AI, skor milik pemain dan AI, langkah terbaik dan histori langkah yang telah dibuat, menu Remove Swap untuk menukar kotak milik pemain dengan kotak yang ada pada tumpukkan, menu Cancel untuk mengembalikan kotak yang telah diletakkan pemain pada papan game pada saat gilirannya, menu Next untuk mengakhiri giliran pemain, informasi sisa kotak yang tersisa dan informasi waktu. Berikut ini adalah rancangan antarmuka halaman Game seperti pada Gambar 3.17.