LAPORAN PRAKTIKUM

GAME EDUKASI

MODUL 9

USER INTERFACE

Oleh :

IKHWAN CAESAR AMRI PRADANA A710170079

Program Studi Pendidikan Teknik Informatika

Fakultas Keguruan dan Ilmu Pendidikan

Universitas Muhammadiyah Surakarta

2020
 Mata Kuliah : Praktikum Game Edukasi Acc :
Prodi : Pendidikan Teknik Informatika
Nama : Ikhwan Caesar Amri Pradana
NIM : A710170079
Tgl. Praktikum : 6 Juni 2020

BAB IX

USER INTERFACE

A. DASAR TEORI
Antarmuka pengguna (bahasa Inggris : user interface) merupakan
bentuk tampilan grafis yang berhubungan langsung dengan pengguna
(user). Antarmuka pengguna berfungsi untuk menghubungkan antara
pengguna dengan sistem operasi, sehingga komputer tersebut bisa
digunakan. Pengertian antarmuka (interface) adalah salah satu layanan
yang disediakan sistem operasi sebagai sarana interaksi antara pengguna
dengan sistem operasi. Antarmuka adalah komponen sistem operasi
yang bersentuhan langsung dengan pengguna. Terdapat dua jenis
antarmuka, yaitu Command Line Interface (CLI) dan Graphical User
Interface (GUI). Kekuatan utama dalam sebuah game yaitu graphical user
interface (GUI) yang interaktif dan menarik. Dengan adanya GUI yang
menarik ini, pemain game akan merasa betah dan senang untuk tetap
memainkan sebuah game. Selain itu, GUI ini juga akan memberikan
informasi apa saja yang bisa dilakukan didalamnya sehingga pemain
dapat dengan mudah menjalankan dan mengoperasikan game yang akan
dimainkan. Pembuatan user interface game dalam Unity 3D dapat
dilakukan dengan beberapa cara, antara lain menggunakan script
langsung, atau menggunakan properties yang dimiliki Unity.
User Interface jika diartikan dalam bahasa Inggris adalah
tampilan antar muka pengguna.  Fungsi dari UI sendiri sebagai mediator
antara user dengan komputer.  User Interface sangat berperan penting
dalam dunia komputer, karena dengan adanya UI maka user/pengguna
menjadi lebih mudah mengoperasikan suatu perangkat komputer. User
interface dibagi menjadi 2 yaitu :
a. Command Line Interface (CLI)
Merupakan user interface berupa text ataupun perintah-
perintah yang diketikkan langsung oleh user untuk melakukan atau
mengeksekusi sesuatu. Contoh dari text interface : Command Line
Interface (Unix, Linux) dan juga Command Prompt (Windows).
b. Graphical User Interface (GUI)
GUI merupakan user interface berupa tampilan grafis ataupun
gambar yang dipergunakan untuk melakukan komunikasi dengan
komputer. Contoh Graphical User Interface : Button, Toolbox,
Textarea, dan masih banyak lagi.

Sedangkan antarmuka pada sistem operasi atau komputer terbagi

menjadi 2 yaitu GUI dan CLI.
a. GUI (Graphical User Interface) adalah antarmuka pada sistem operasi
atau komputer yang menggunakan menu grafis agar mempermudah
para penggunanya untuk berinteraksi dengan komputer atau sistem
operasi. Jadi, GUI merupakan antarmuka pada sistem operasi
komputer yang menggunakan menu grafis. Menu grafis ini
maksudnya terdapat tampilan yang lebih ditekankan untuk membuat
sistem operasi yang user-friendly agar para pengguna lebih nyaman
menggunakan komputer. Menu grafis itu ya seperti ada grafis-grafis
atau gambar-gambar dan tampilan yang tujuannya untuk
memudahkan para pengguna menggunakan sistem operasi. Interaksi
bisa dikatakan dialog antara user dengan komputer. Contoh sistem
operasi yang menggunakan GUI adalah Linux dengan distro Mandriva
menggunakan Desktop Environment KDE (Lihat juga Pengertian
Desktop Environment), dan juga sistem operasi Wndows 7 Ultimate
yang menggunakan GUI-nya sendiri.
b. CLI (Command Line Interface), adalah antarmuka pada sistem
operasi atau komputer yang menggunakan menu baris perintah atau
 text atau ketikkan dari keyboard untuk berinteraksi dengan sistem
operasi atau komputer tersebut. Jadi, CLI merupakan antarmuka yang
menggunakan input dari keyboard untuk bisa berinteraksi dengan
komputer tersebut. CLI lebih ditujukan kepada sistem operasi yang
digunakan sebagai komputer server. Karena menggunakan CLI dirasa
lebih efisien dan cepat daripada menggunakan GUI. Untuk
berinteraksi dengan komputer, harus menggunakan baris perintah
yang bisa dikenali oleh komputer.jadi, untuk orang yang masih awam
menggunakan mode CLI, masih dirasa cukup repot untuk
menggunakannya. Contoh sistem operasi yang menggunakan CLI
adalah Ubuntu Server dan Windows Server 2008.
Dapat disimpulkan bahwa GUI dan CLI merupakan tampilan
antarmuka yang digunakan sesuai kebutuhan para penggunanya.
Pada GUI menggunakan mode grafis, dan pada CLI menggunakan
mode baris perintah dan text.
Model atau jenis interaksi, anntara lain :
- Command Line Interface (perintah baris tunggal)
Contoh : unix, linux, dos
- Menu (menu datar dan menu tarik)
Contoh : hampir semua software menggunakan menu
- Natural language (bahasa alami)
Contoh : bahasa pemograman terstruktur (belum objek)
- Question/answer and query dialogue
Contoh : mysql, dbase interaktif, dll
- Form-fills and spreadsheets
Contoh : excel, lotus,dll
- WIMP
Windows Icon Menu Pointer
Windows Icon Mouse Pulldown Menu yang termasuk komponen
WIMP : button, dialogue boxes, pallettes, dll
B. TUJUAN PRAKTIKUM
 1. Mahasiswa dapat membuat Graphichal User Interface (GUI) game
pada Unity 3D.
2. Mahasiswa dapat melakukan manipulasi GUI dan menambahkan HUD
(Head-Up Display) pada game yang dirancang.

C. HASIL DAN ANALISA

Kegiatan 1 : Membuat GUI Menu Utama
 Gambar 9.1 Membuat Menu Utama GUI
Pada gambar diatas adalah GUI Menu Utama yang saya buat
berdasarkan panduan modul praktikum. GUI tersebut berupa tampilan
menu utama pada game. Terdapat dua tombol yaitu tombol Start Game
dan Setting. Tombol Start Game nantinya akan digunakan untuk menuju
ke scene game, sedangkan tombol Setting akan menuju ke scene setting.
Untuk bias membuat GUI seperti diatas sebelumnya kita harus
mendownload assets berupa gambar-gambar dan font pendukung. Untuk
mendownload assets tersebut dapat dilakukan melalui website.

kegiatan 2 : Event Handler

 Gambar 9.2 Event Handler
Pada gambar diatas adalah script UI Manager yang saya buat
berdasarkan panduan modul praktikum. Saat membuat button untuk
menangani event (event handler), perlu menentukan fungsi (method)
mana yang digunakan untuk memanggilnya. Karena tidak mungkin
menggunakan fungsi/method statis, maka perlu membuat method yang
bersifat public agar dapat diakses kelas lain. Script UIManager diatas
nantinya akan digunakan untuk melakukan pemanggilan method/fungsi
ketika button Start Game di klik maka akan menuju ke scene game.

Kegiatan 3 : Menambahkan HUD

 Gambar 9.3 Menambah HUD
Pada gambar diatas adalah tampilan HUD yang saya buat
berdasarkan pada modul praktikum. HUD atau Head-up Display
merupakan user interface suatu game yang memberikan informasi
tentang kondisi game saat itu, misalnya skor, health dan komponen lain.
HUD ini akan selalu berada pada koordinat yang sama meskipun
karakter game bergerak menelusuri seluruh area. HUD dalam game ini
dipasang pada GameScene. script HUD yang saya buat berdasarkan pada
modul praktikum. Script HUD ini akan dipasangkan pada objek main
camera. Ketika game dijalankan dan jika tombol spasi ditekan, maka nilai
counter akan bertambah satu. Sementara jika tombol panah kanan dan
kiri ditekan, maka kamera akan bergerak dan posisi nilai counter akan
tetap. Dan pada bagian Console aka muncul beberapa komen yang
menandakan tombol yang di tekan.

D. TUGAS
1. Lakukan modifikasi HUD kegiatan 3 agar tampilannya menjadi lebih
menarik seperti pada kegiatan 1 dan 2.
Jawab :
 Gambar 9.4 Modifikasi HUD
Pada gambar di atas adalah hasil dari modifikasi HUD kegiatan
3. Modifikasi tersebut berupa penambahan background pada HUD
yang saya buat dengan menggunakan UI – Image. Kemudian saya
tambahkan source image dari asset rocket mouse dan saya tempatkan
di pojok kiri atas agar tampilannya menjadi lebih menarik sehingga
warna pada tulisan skor dapat terlihat jelas dan dapat di baca dengan
mudah.

2. Buat beberapa HUD baru untuk menampilkan prperty health atau

properti yang lain.
Jawab :

\
 Gambar 9.5 Menampilkan Health
Pada gambar di atas adalah properti health yang saya
tambahkan dalam scene game. Properti health tersebut saya buat
dengan menggunakan menggunakan tools yang berada pada bagian
menu UI pilih Slide yang sudah memiliki fungsi sebagai menu sehingga
dapat dengan mudah diatur warna dan tampilan sehngga terlihat
menarik. Dan dapat dia aplikasikan sebagai menu health pada game.

3. Tambahkan tombol stop atau exit GameScene, artinya jika tombol

tersebut ditekan maka akan keluar dari GameScene dan kembali ke
menu utama (MenuScene).
Jawab :

Gambar 9.6 Menambahkan Tombol Stop dan Exit

Pada gambar di atas adalah tombol exit yang saya tambahkan
pada scene game. Tombol exit ini digunakan untuk keluar dari scene
game dan akan menuju ke scene menu. Untuk membuat tombol exit
 ini saya menggunakan Canvas – UI – Button, kemudian saya
tambahkan script exit di dalamnya. Seperti dapat dilihat di bawah
adalah script yang saya gunakan sebagai bagian untuk membuat
tombol exit.

4. Lakukan eksperimen untuk GUI selain Button dan label, misalnya Box,
Text, Toggle, dll
Jawab :

Gambar 9.7 Melakukan Experiment

Pada gambar di atas adalah eksperimen GUI yang saya
tambahkan pada scene game. GUI tersebut antara lain teks, input field
dan dropdown. Teks digunakan untuk menambahkan teks pada game,
input field digunakan sebagai inputan dari user, dropdown untuk
menampilkan pilihan kepada user. Isi dari dropdown ini bisa kita
ganti sesuai keinginan melalui inspector window. Untuk
menambahkan GUI yang lain dapat dilakukan dengan cara klik kanan
Canvas – UI.

E. KESIMPULAN DAN SARAN

a. Kesimpulan
1) UI adalah tampilan antar muka pengguna.  Fungsi dari UI sendiri
sebagai mediator antara user dengan komputer. User interface
 sendiri dibagi menjadi dua, yaitu Text Interface dan Graphic User
Interface (GUI).
2) Dalam perkembangannnya UI berbasis GUI lebih banyak
dipergunakan dibanding yang berbasis teks.  Hal ini dikarenakan
GUI lebih menarik dan komunikatif dibandingkan basis teks.
3) Suatu game dapat dikatakan bagus dan menarik apabila
mempunyai tampilan GUI yang menarik pula. Orang akan tertarik
memainkan game dan akan bermain dalam waktu yang lama
ketika tertarik oleh user interface dari game itu sendiri. Jadi user
interface suatu game sangat mempengaruhi daya tarik
pemainnya.
b. Saran
Disarankan untuk melakukan eksperimen membuat user
interface game semenarik mungkin, agar game yang kita buat
menjadi menarik dan banyak peminatnya.Di harapkan untuk latihan
menggunakan bahasa pemrograman C# dan JavaScript dalam
membuat game. Tidak hanya itu, latihan juga dalam mengatasi error
yang terjadi pada script saat membuat game. Serta pahami langkah
dalam modul yang di sediakan agar tidak bingung saat melakukan
praktikum.

F. DAFTAR PUSTAKA
[1] Sukirman. [2017]. Praktikum Game Edukasi. Surakarta : Universitas
Muhammadiyah Surakarta
[2] Fungsi Sistem Operasi Sebagai User Interface. [2012]. Diakses pada
Sabtu, 07 Juli 2018.
[3] Pengertian, Contoh dan Fungsi dari GUI. [2014]. Diakses pada Sabtu,
07 Juli 2018.