## Manajemen User Interface Pada Game 2D Berbasis Finite State Machine
Fajar Hariadi
Fakultas Sains dan Teknologi, Prodi Teknik Informatika, Universitas Kristen Wira Wacana Sumba, Kota Waingapu, Indonesia Email: fajar@unkriswina.ac.id

## Abstrak
User  interface  merupakan  tampilan  yang  pertama  kali  dilihat  dan  digunakan  oleh  user  untuk  berinteraksi  dalam  game. Banyaknya  menu  dan  fungsi  yang  berbeda  di  setiap  bagian  user  interface  memberikan  tantangan  tersendiri  melakukan manajemen. Pada tulisan ini kita akan melihat proses manajemen user interface dan fungsi-fungsi pada sub-menu menggunakan Finite State Machine (FSM) pada game 2 dimensi.
Kata Kunci: FSM, Finite State Machine, User Interface, Game 2 Dimensi, Manajemen Menu

## Abstract
User interface is very important in a game cause it manages how the player  interacts with the game itself. Managing a lot of menu in the user interface is quite challenging for the developer of the game. The menu can have a lot of different function in each  part  of  the  sub-menu.  So  in  this  article,  we  will  see  how  to  use  the  Finite  State  Machine  concept  for  solving  the management problems
Keywords : FSM, Finite State Machine, User Interface, 2D Game, Menu Management

## 1. PENDAHULUAN
User  Interface  atau  antarmuka  pemakai  merupakan  salah  satu  mekanisme  komunikasi  antara  pengguna  (user) dengan  sistem. Melalui user  interface  ini user  dapat berkomunikasi  dengan  sistem  yang  digunakan. Sistem  pun dapat menampilkan informasi dan atau feedback yang sesuai dengan yang diinginkan oleh user. Di dalam game user  interface  digunakan  agar  objek-objek  dalam  game  dapat  merespon  sesuai  dengan  keinginan  pemainnya. Namun adakalanya user interface dalam game tidak termanajemen dengan baik akibat banyaknya menu dan fungsi yang  berada  dalam  user  interface.  Oleh  karena  itu  tujuan  dari  penelitian  ini  adalah  membentuk  logika  yang digunakan dalam user  interface dalam  memanajemen setiap  fungsi dalam user  interface, dan salah satu metode yang  bagus  menangani  permasalahan  seperti  ini  adalah  Finite  State  Machine  (FSM)  yang  bekerja  berdasarkan kejadian-kejadian atau even yang terjadi di dalam sistem.

## 2. TEORITIS

## 2.1 Game
Game adalah suatu sistem formal tertutup yang melibatkan pemain dalam sebuah konflik yang berbeda-beda yang dedifinisikan  sebagai  salah  satu tipe  aktivitas,  dimana  terdapat  pemain  yang  berusaha  memenuhi  tujuan  sesuai dengan aturan yang dirancang[1]. Oleh karena itu setiap game memerlukan partisipan untuk membuat berbagai macam strategi dalam jangka pendek dan jangka panjang untuk mencapai tujuan dari game[2].
Pada awalnya game dibuat dan dibagi menjadi 3 jenis yang sering disebut dengan genre yaitu genre arcade yang merupakan game berdasarkan koordinasi mata dan tangan, genre strategi atau menajemen yang focus kepada kemampuan  berpikir  dan  mengelola  pola  permainan,  dan  yang  terakhir  adalah  genre  petualangan  yang mengutamakan  naratif  atau  pemaparan  cerita  dalam  game[3].  Seiring  perkembangan  genre  game  semakin berkembang dengan munculnya genre baru dan perpaduan antar genre yang disebut dengan sub-genre. Menurut Lars  Konzack  genre  game  telah  berkembang  menjadi  Strategy  game,  Simulator,  Action,  Edukasi,  Casual, Adventure & Role Playing Game[4].

## 2.2 User Interface
Antarmuka  pengguna  atau  User  Interface  memberikan  form  berbentuk  fisik  terhadap  informasi  digital dengan tujuan menjembatani jarak antara dunia digital dan dunia nyata[5]. User interface merupakan visualisasi yang  ditampilkan  pada  layar  dimana  di  dalamnya  terdapat  kurosr  yang  dapat  digeser  dan  menu  yang  dapat dipilih[6]. Menurut Anneta [7] pada penelitian tentang serious game ada enam elemen utama dalam membentuk game yaitu:
a. Identity , kemampuan untuk mempengaruhi pola pikir pemain seolah-olah berada dalam game.
b. Immersion , mendorong pemain untuk mencapai tingkat  keberhasilan yang makin tinggi dalam bermain game.
c. Interactivity , menggambarkan setiap komponen saling terhubung dan ada reaksi timbal balik diantaranya.
d. Increasing Complexity , kondisi dimana game memiliki beberapa level dengan tingkat kesulitan yang berbeda e. Informed Teaching ,  game  memberikan  feedback  tingkat  kemampuan  user  dan  atau  menambahkan  capaian seperti pemberian skor atau reward ketika pemain mencapai suatu tujuan dalam game.
f. Instuctional , kondisi dimana game dapat dipergunakan sebagai media pemberi atau penyeampaian instruksi. Pada  bagian  interactivity  inilah  user  interface  sangat  berperan  dalam  memberi  pengalaman  timbal  balik  yang menyenangkan antara user dan game.
Gambar 1. Contoh HUD (Heads-Up Display)
User interface yang paling sering ditampilkan adalah user interface berupa HUD (Heads-Up Display). HUD merupakan  tampilan  User  Interface  transparan  yang  merepresentasikan  data  tanpa  mengharuskan  user mengalihkan pandangannya. HUD seringkali digunakan untuk menampilkan beberapa informasi sekaligus seperti item, progress pemain dalam game, atau tujuan yang telah dicapai dalam game[8].

## 2.3 Finite State Machine (FSM)
Finite State Machine (FSM) merupakan metodologi perancangan system untuk memodelkan perilaku (behaviour) dari  system  atau  objek  yang  kompleks  dengan  kondisi  yang  telah  didefinisikan.  FSM  masuk  dalam  ranah pengambilan  keputusan  (Decision  Making)[9].  Oleh  karena  itu  FSM  merupakan  bagian  dari  ilmu  yang mempelajari kecerdasan buatan (Artificial Inteligence).

## Gambar 2. Contoh Finite State Machine
Dalam FSM terdapat state-state yang memiliki tindakan atau perilaku yang dapat berpindah dari satu state ke  state  lainnya  berdasarkan  input  atau  event  tertentu.  Di  dalam  setiap  state  terdapat  fungsi-fungsi  yang  akan dijalankan jika state tersebut aktif. Objek dalam game akan memulai dengan state awal (Initial State) kemudian akan  menunggu adanya  input atau event yang  memicu transisi ke state lainnya, setiap objek game  hanya dapat menjalankan satu state pada satu waktu[10].
JURNAL MEDIA INFORMATIKA BUDIDARMA, Vol 3, No 2, April 2019 ISSN 2614-5278 (media cetak) ISSN 2548-8368 (media online) Hal 144-152 | DOI: 10.30865/mib.v3i2.1159

## 3. METODE PENELITIAN

## 3.1 Alur Kerja
Penelitian ini dibuat mengikuti alur kerja dengan metode waterfall. Metode waterfall yang digunakan  terlihat pada gambar 3.1 di bawah ini:
Requirement
Design Implementation Verification Maintenance Gambar 3 Metode Waterfall
a. Requirement
Pada tahapan ini peneliti akan menganalisa kebutuhan-kebutuhan yang akan dipergunakan dalam penelitian ini.  Dimulai  dari  mencari  bahan  referensi,  kebutuhan  perangkat  lunak,  dan  hal-hal  lain  yang  mesti dipersiapkan.
b. Design
Proses  desain  dilakukan  dengan  mengambil  hasil  analisa  kebutuhan  dan  mendesain  alur  kerja,  arsitektur aplikasi yang mesti dibangun, algoritma dan metode yang digunakan.
c. Implementation
Proses  implementasi  dimulai  dengan  membuat  menerapkan  desain  user  interface  dan  metode  FSM  dan algoritma-algoritma  pendukung  lainnya  yang  sudah  dibuat  ke  dalam  aplikasi  menggunakan  unity  3D  dan bahasa pemograman.
d. Verification
Verifikasi akan dilakukan ketika proses implementasi selesai dilaksanakan untuk memastikan aplikasi yang dibangun telah berjalan dengan baik.
e. Maintenance
Setelah  melewati  proses  verifikasi  aplikasi  yang  dibangun  akan  dilakukan  perawatan  guna  memperbaiki proses  implementasi  yang  kurang  baik,  bug,  perbaikan  kinerja  aplikasi,  atau  pembaharuan  dari  sistem aplikasi.

## 3.2 Desain Sistem
Rancangan  yang dibuat terdiri dari dua  bagian utama  yaitu desain user  interface  yang dibuat dan desain proses kerja metode FSM dalam memanagement user interface yang dibuat.

## 3.2.1 User Interface
User  interface  (UI)  untuk  yang  dirancang  terdiri  dari  tiga  bagian  besar  user  interface  yaitu  UI  Utama (Main Menu), UI ketika game berjalan, dan UI untuk melakukan konfigurasi pengaturan dalam game.
Pada In Game UI terdapat tiga Sub-UI, user tidak dapat berpindah langsung antar sub-UI tersebut. Untuk dapat berpindah user harus kembali terlebih dahulu menuju Main Menu baru kemudian memilih bentuk In Game UI yang diinginkan.
3.2.2 FSM User Interface Manager
Pada bagian  Finite State Machine (FSM)  yang digunakan tiap state akan menampilkan UI yang sesuai dengan state tersebut dan tiap transisi dipicu oleh event yang terjadi saat tombol (button) ditekan.
Gambar 5 Finite State Machine (FSM) User Interface
MainUI  merupakan  state  yang  pertama  kali  dilaksanakan  ketika  game  berjalan.  Sedangkan  Exit  state merupakan  state  yang  dilaksanakan  ketika  game  dihentikan.  Sedangkan  ketiga  state  lainnya  akan dilaksanakan sesuai dengan pemicu yang terjadi dalam kasus ini pemicu adalah tombol dalam game. Jika tidak ada pemicu atau event yang terjadi maka state tersebut akan bertahan sambal menunggu terjadinya event pemicu untuk berpindah state.
Gambar 6 Behaviour dalam State
UI manager bertugas untuk menentukan transisi antar state, yang terjadi ketika pada saat state aktif terjadi event  yang  memicu  untuk  merubah  kondisi  state untuk  berpindah  ke  state  lainnya.  Setiap  state  dalam FSM untuk memanajemen User Interface memiliki tiga perilaku (Behaviour) utama yaitu:
a. OnStateEnter(), fungsi ini akan dijalankan pada saat proses awal ketika state dijalankan, dalam kasus ini digunakan untuk mengaktifkan User Interface pada state tersebut.
b. OnStateUpdate(),  fungsi  ini  dijalankan  tiap  frame  yang  terjadi  ketika  state  aktif.  Digunakan  untuk merespon elemen-elemen lainnya ketika user interface yang aktif.
c. OnStateExit()  yang  dijalankan  ketika  state  bertransisi  ke  state  lainnya,  digunakan  untuk menonaktifkan User Interface tersebut.
Fungsi-fungsi lain pada menu yang sedang aktif diletakkan pada bagian behaviour OnStateUpdate.

## 4. ANALISA DAN PEMBAHASAN
Penerapan FSM UI Manager yang mengatur menu yang berhak tampil di layer menggunakan animator sehingga dapat dilihat state atau menu mana yang sedang aktif dan yang tidak aktif.
State FSM yang pertama kali aktif adalah state entry. Setelah itu secara otomatis akan berpindah kepada state  MainUI.  Perpindahan  dilakukan  secara  otomatis  tanpa  trigger  atau  pemicu  apapun.  State  MainUI  akan mengaktifkan menu utama, sehingga menu utama akan muncul pada layer.
Dari  menu  utama  pemain  dapat  berpindah  state  untuk  mengaktifkan  menu  lainnya.  Perpindahan  ini menggunakan  pemicu  berupa  tombol  pada  menu  yang  sedang  aktif.  State  Exit  digunakan  untuk  menghandle fungsi-fungsi yang diperlukan ketika pemain keluar dari permainan.
Gambar 8. Menu Utama
Menu Utama memiliki 5 buah tombol yang dapat digunakan untuk mengakses fungsi yang berbeda. Tombol berurutan,  daftar,  dan  pengaturan  digunakan  untuk  beralih  ke  menu  lainnya.  Sedangkan  tombol  informasi digunakan untuk menampilkan informasi, dan tombol exit untuk keluar permainan.

## Gambar 9. Behaviour Menu Utama
Ketika state MainUI aktif akan memasuki tiga state utamnaya. Pada state enter, ketika pertama kali state ini mulai aktif, maka fungsi untuk mengaktifkan menu utama akan dipicu sehingga menu utama akan ditampilkan. Selama  menu utama aktif  maka state akan selalu melakukan state update untuk mengecek apakah ada interaksi baru dari user terhadap menu yang tampil.
Pada state update terdapat beberapa fungsi yang dapat dipicu jika menekan salah satu tombol pada menu. Tombol  berurutan  akan  mengaktifkan  fungsi  GoToBerurutan()  yang  mana  akan  menaktifkan  state SequenceUI kemudian state MainUI akan memasuki OnStateExit() dimana state MainUi akan diakhiri. Demikian pula kerja fungsi-fungsi lainnya bekerja dengan cara yang sama.
Gambar 10. Menu Berurutan
Pada menu ini terdapat 6 buah tombol. Satu buah tombol untuk kembali ke menu utama. Satu buah tombol untuk menampilkan pengaturan. Dua buah tombol untuk navigasi. Dua buah tombol untuk mengaktifkan audio nama  hewan.  Keenam  tombol  ini  memiliki  fungsi  yang  dapat  diaktifkan  ketika  state  berada  kondisi OnStateUpdate().
Tabel 1. Fungsi-fungsi pada State MainUI
Nama Fungsi Efek MenuUtamaAktif() Menampilkan Menu Utama MenuUtamaNonAktif() Menyembunyikan Menu Utama GoToBerurutan() Mengaktifkan State SequenceUI GoToDaftar() Mengaktifkan State ListUI GoToPengaturan() Mengaktifkan State ConfigUI TampilInfo() Menampilkan Pesan Informasi Keluar() Keluar Permainan
Selain mengaktifkan beberapa fungsi pada table 1 di atas. Tombol-tombol pada menu utama juga menjadi trigger  untuk  perpindahan  state  dari  state  MainUI  ke  state  lainnya.  Kecuali  tombol  informasi  yang  hanya menampilkan papan informasi tanpa merubah state.
Gambar 11. Behaviour Menu Berurutan
Memasuki  state  ini  akan  mengaktifkan  menu  berurutan  melalui  fungsi  MenuBerurutanAktif().  Fungsi- fungsi lain yang terdapat pada state ini, terlihat pada table 2 di bawah ini.
Tabel 2. Fungsi-Fungsi pada State ListUI
Nama Fungsi Efek MenuBerurutanAktif() Tampilkan Menu Berurutan MenuBerurutanNonAktif() Sembunyikan menu berurutan GoToPengaturan() Mengaktifkan State ConfigUI GoToMenuUtama() Mengaktifkan State MainUI PlayBahasaSumba() Memainkan Suara Nama Hewan PlayBahasaIndonesia() Memainkan Suara Nama Hewan
Selain  memiliki  fungsinya  masing-masing  tombol  juga  menjadi  trigger  transisi  state.  Trigger  yang digunakan untuk merubah state pada menu ini adalah tombol Home dan tombol pengaturan. Sedangkan tombol lainnya hanya menjalankan fungsinya tanpa merubah state.
Gambar 12. Menu List
Tampilan  pada  menu  ini  memiliki  lebih  banyak  tombol.  Tombol-tombol  ini  di-generate  secara otomatis dengan jumlah dua kali jumlah hewan. Tombol pertama untuk memilih hewan dan tombol kedua digunakan untuk memainkan suara nama hewan sesuai dengan nama hewan yang dipilih.
Gambar 13. Behaviour Menu List
Pada  state  ListUI  ini,  bagian  OnStateEnter  memiliki  dua  fungsi.  Fungsi  pertama  digunakan  untuk menampilkan menu daftar hewan. Fungsi kedua digunakan untuk membuat daftar tombol yang berisi nama dan tombol yang digunakan untuk memainkan suara nama hewan.
Tabel 3. Fungsi-Fungsi pada State DaftarUI Nama Fungsi Efek MenuDaftarAktif() Tampilkan Menu Daftar BuatDaftar() Membuat Daftar Hewan MenuDaftarNonAktif() Sembunyikan menu Daftar GoToPengaturan() Mengaktifkan State ConfigUI GoToMenuUtama() Mengaktifkan State MainUI PlayBahasaSumba() Memainkan Suara Nama Hewan PlayBahasaIndonesia() Memainkan Suara Nama Hewan
Tombol  yang  digunakan  sebagai  trigger  transisi  state  pada  menu  ini  hanya  tombol  home  dan  tombol pengaturan. Tombol lainnya hanya menjalankan fungsi yang sesuai dengan tombol itu sendiri saja.
Gambar 14. Menu Pengaturan
Menu pengaturan memiliki tiga buah slider yang masing-masing mengatur besarnya volume suara music, efek, dan audio pengucapan nama hewan. Serta satu buah tombol untuk kembali ke menu yang sebelumnya aktif.
Gambar 15. Behaviour Menu Pengaturan
Pada  state  ini  hanya  satu  buah  tombol  yang  dapat  digunakan  untuk  berpindah  state  menuju  state  yang sebelumnya  aktif,  baik  itu  menu  utama,  daftar  atau  menu  berurutan.  Sedangkan  slider  yang  digunakan  hanya mengaktifkan fungsi pengaturan volume mixer untuk mengatur suara music, efek, dan pengucapan nama hewan tanpa memicu perpindahan state.
Tabel 4. Fungsi-Fungsi pada State ListUI
Nama Fungsi Efek MenuAturAktif() Tampilkan Menu Pengaturan MenuAturNonAktif() Sembunyikan Menu Pengaturan SetVolumeMusik() Mengatur Suara Musik SetVolumeEfek() Mengatur Suara Efek SetVolumeUcap() Mengatur Suara Pengucapan
Hanya  satu  buah  tombol  yang  memiliki  kemampuan  sebagai  trigger  untuk  transisi  state,  yaitu  tombol kembali. fungsi-fungsi lain pada state ini digunakan untuk mengatur volume mixer.
Gambar 16. Behaviour Menu Berurutan
Volume mixer ini memiliki 4 buah kanal. Kanal master digunakan untuk mengatur besar kecilnya suara. Kanal musik mengatur besar kecilnya suara music. Sedangkan suara efek dan pengucapan diatur oleh kanal sfx dan  kanal  spelling.  Semua  kanal  ini  diatur  pada  menu  pengaturan  melalui  fungsi  SetVolumeMusik, SetVolumeEfek, dan SetVolumeUcap.
State  terakhir  yang  dapat  diaktifkan  adalah  state  exit.  Dimana  state  ini  akan  menutup  permainan  dan mengakhiri rangkaian state yang ada pada Finite State Machine yang digunakan sebagai manajemen user interface pada permainan ini.
Seluruh  fungsi-fungsi  yang  ada  pada  pemainan  ini  dapat  juga  digunakan  langsung  tanpa  FSM  atau menggunakan pemodelan lain sejenis FSM. Peran FSM disini adalah sebagai peng-organisir fungsi-fungsi tersebut dalam bentuk state-state yang dapat berpindah dari satu state ke state lainnya.
Setelah semua desain telah berhasil diimplementasikan, menu dan sub-menu di uji fungsinya satu per satu, dan kesemuanya dapat berjalan dengan baik di bawah manajemen metode Finite State Machine (FSM).

## 5. KESIMPULAN
Finite State Machine (FSM) merupakan model kecerdasan buatan yang dapat diimplementasikan di setiap bagian sistem  yang  dapat  direpresentasikan  sebagai  state.  Salah  satunya  adalah  user  interface.  Pendekatan  ini  dapat menyederhanakan berbagai macam fungsi yang ada menjadi kelompok-kelompok dalam state tanpa merubah pola atau pernyataan dalam setiap fungsi yang ada.
Proses penyederhanaan dilakukan dengan mengelompokkan fungsi-fungsi yang sudah ada menjadi sebuah state, kemudia membuat ketentuan atau aturan dalam perpindahan dari satu state ke state lainnya.
Setelah  di  uji  coba  seluruh  fungsi  pada  menu  dan  sub-menu  di  bawah  manajemen  Finite  State  machine (FSM) dapat berjalan dengan baik.

## REFERENCES
[1]  A. Chowanda and Y. L. Prasetio, “Perancangan Game Edukasi Bertemakan Sejarah Indonesia,” Proc. Semant. , pp. 151–155, 2012.
[2]  M. Sørensen, “Learning with simulation games,” Eval. Hotel Simul. Games’ Ef. High. Acad. Perform. within Serv. Hosp. Copenhagen Bus. Sch. Handel. , 2010.
[3]  G. Skirrow, “Hellivision: an analysis of video games,” High theory/low Cult. Anal. Pop. Telev. Film , pp. 115–142, 1986.
[4]  L. Konzack, “Video game genres,” in Encyclopedia of Information Science and Technology, Third Edition , IGI Global, 2015, pp.
3070–3076.
[5]  W. K. Bong, W. Chen, and A. Bergland, “Tangible User Interface for Social Interactions for the Elderly: A Review of Literature.,” Adv. Human-Computer Interact. , pp. 1–15, May 2018.
[6]  J. H. Lemelson and J. H. Hiett, “Selectively controllable heads-up display system.” Google Patents, 25-Jan-2005.
[7]  L. A. Annetta, “The ‘I’s’ have it: A framework for serious educational game design.,” Rev. Gen. Psychol. , vol. 14, no. 2, p. 105, 2010.
[8]  E. Fagerholt and M. Lorentzon, “Beyond the HUD-user interfaces for increased player immersion in FPS games,” 2009.
[9]  I. Millington and J. Funge, Artificial intelligence for games . CRC Press, 2009. [10]  A. Nareyek, “AI in computer games,” Queue , vol. 1, no. 10, p. 58, 2004.