BAB IV IMPLEMENTASI DAN PENGUJIAN

(1)

4.1 Implementasi Aplikasi

Setelah melakukan analisa dan perancangan aplikasi Game Edukasi Mengenal alfabet untuk pra sekolah/TK, maka langkah selanjutnya adalah implementasi dan pengujian. Implementasi merupakan desain (perancangan) aplikasi dengan kode-kode tertentu yang dapat dimengereti oleh mesin dengan spesifikasi perangkat lunak (software) dan perangkat keras (Hardware) yang digunakan.

Setelah perancangan aplikasi dan pengkodean dilakukan, baru kemudian ketahap pengujian. Pengujian dilakukan untuk menemukan kesalahan-kesalahan dan memastikan bahwa keluaran (output) sesuai dengan yang direncanakan.

4.2 Batasan Implementasi

Game ini dirancang menggunakan Blender 2.75. Game ini menggunakan objek multimedia yang tersedia didalam Blender 2.75 seperti teks, grafis animasi, suara, dan interaksi user terhadap tombol yang ditekan sesuai dengan program yang sudah dirancang sebelumnya.

4.3 Perangkat Pendukung Pengembangan

Untuk melaksanakan dan menunjang penelitian ini tentunya membutuhkan alat pendukung berupa perangkat keras dan perangkat lunak, alat-alat yang digunakan dijelaskan sebagai berikut.

4.4 Tahap Pembuatan Proses

Pada tahap pembuatan proses tugas akhir ini penulis akan menjelaskan tahapan-tahapan pembuatan aplikasi Game Edukasi Mengenal alfabet untuk pra sekolah/TK berawal dari modeling objek, game logic, hingga script yang menjalankan permainan

(2)

kuis dengan memunculkan jawaban benar/ salah sesuai perintah user hingga akhir menjadi program exe.

4.4.1 Halaman Menu Utama

Pada tampilan pertama yaitu dihalaman Menu Utama, user akan melihat kata ”GAME ALFABET UNTUK PRA SEKOLAH” kemudian ada tujuan dari permainan dan tombol interaksi ”Mulai”, ”Panduan”, ”Keluar”.

Dihalaman Menu Utama user hanya menggunakan kiri mouse dengan cara mengklik pada salah satu menu dihalaman Menu Utama (Mulai, Panduan, dan Keluar).

Adapun langkah-langkahnya pembuatan seperti dibawah ini :

 Dengan menggunakan aplikasi Adobe Photoshop membuat

Background.

 mengeksport gambar tersebut ke dalam bentuk .jpg dan diberi nama

”bc.jpg”

 Masuk ke Blender, membuat scene yang diberi nama ”Menu Utama”.

 Membuat plane dan menyisipkan kamera yang diarahkan tegak

lurus kearah plane.

 Plane diberi texture matrial ”bc.jpg”.

 Kemudian membuat Text.003, Plane.008, Plane.009, Plane.010

diletakkan didepan plane.

 Plane.008, Plane.009, Plane.010 diberi properties ”text”. Plane.008 diberi value ”Mulai”, Plane.009 diberi value ”panduan”, Plane.010 diberi value ”Keluar”.

 Memberi texture matrial pada Text.003 ”Game Mengenal Alfabet”, Text.004 ”Mulai”, Text.012 ”panduan”, Text.005 ”keluar”.

 Memberi Animasi pada Plane.008, Plane.009, Plane.010 dan

(3)

 Plane.008 ”Mulai” diberi logic brick supaya berhubungan ke halaman Mulai (Scene Mulai). Adapun bentuk logic-nya sebagai berikut :

Gambar 4.1 Bentuk Logic brick Pada Menu Mulai

 Plane.009 ”Petunjuk” diberi logic brick supaya berhubungan ke halaman Panduan (Scene Panduan). Adapun bentuk logic-nya sebagai berikut :

(4)

 Plane.010 ”Keluar” diberikan logic brick dan dihubungkan ke Quit Game. Bentuk logic bricknya seperti dibawah ini :

Gambar 4.3 Bentuk Logic brick Pada Menu Keluar

 Membuat script phyton dengan memberi nama tampilkan mouse.py

dan ditempatkan pada Plane

Tabel 4.1 script phyton tampilkan mouse.py

import Rasterizer

Rasterizer.showMouse(1)

 Plane diberikan logic brick dan dimasukan script phyton untuk menampilkan Mouse.

(5)

 Hasil yang diperoleh dari langkah-langkah yang sudah dilakukan pada Halaman Menu Utama sebagai berikut :

Gambar 4.5 Tampilan Halaman Menu Utama

4.4.2 Halaman Mulai

Pada tampilan ketiga yaitu dihalaman panduan, user akan melihat panduan menggunakan aplikasi. Kemudian ada tulisan aturan permainan dan tombol interaksi ”Mengenal Huruf”, ”Mengenal Angka”, ”Acak Huruf” dan ”menu” untuk kembali ke halaman Menu Utama.

Adapun langkah-langkahnya pembuatan seperti dibawah ini :

Background.

”bc.jpg”

 Masuk ke Blender, membuat scene yang diberi nama ”Mulai”.

 Membuat plane.001 dan menyisipkan kamera yang diarahkan tegak lurus kearah plane.001.

(6)

 Plane.001 diberi texture matrial ”bc.jpg”.

 Kemudian membuat Plane.004, Plane.005, Plane.06, Plane.07

diletakkan didepan plane.001.

 Plane.004, Plane.005, Plane.06, Plane.07 diberi properties ”text”. Plane.005 diberi value ”Mengenal Huruf”, Plane.004 diberi value ”Mengenal Angka”, Plane.06 diberi value ”Acak Huruf”, Plane.07 diberi value ”Menu”.

 Memberi texture matrial pada Text.006 ”Mengenal Huruf”, Text.014

”Mengenal Angka”, Text.022 ”Acak Huruf”, Text.008 ”menu”.

 Memberi Animasi pada Plane.004, Plane.005, Plane.006, Plane.007 dan kemudian diinvissible pada properties.

 Plane.005 ”Mengenal Huruf” diberi logic brick supaya berhubungan

ke halaman huruf (Scene Huruf). Adapun bentuk logic-nya sebagai berikut :

Gambar 4.6 Bentuk Logic brick Pada Menu Mengenal Huruf

 Plane.004 ”Mengenal Angka” diberi logic brick supaya berhubungan

ke halaman Angka (Scene Angka). Adapun bentuk logic-nya sebagai berikut :

(7)

Gambar 4.7 Bentuk Logic brick Pada Menu Mengenal Angka

 Plane.006 ”Acak Huruf” diberi logic brick supaya berhubungan ke halaman Acak Huruf (Scene Acak Huruf). Adapun bentuk logic-nya sebagai berikut :

Gambar 4.8 Bentuk Logic brick Pada Menu Acak Huruf

 Plane.007 ”Menu” diberi logic brick supaya berhubungan ke halaman

Menu Utama (Scene Menu Utama). Adapun bentuk logic-nya sebagai berikut :

(8)

Gambar 4.9 Bentuk Logic brick Pada Menu

 Membuat script phyton diberi nama tampilkan mouse.py dan

ditempatkan pada Plane

import Rasterizer

 Hasil yang diperoleh dari langkah-langkah yang sudah dilakukan pada Halaman Mulai sebagai berikut :

(9)

Gambar 4.10 Tampilan Halaman Mulai

4.4.3 Halaman Panduan

Pada tampilan ketiga yaitu dihalaman panduan, user akan melihat panduan menggunakan aplikasi. Kemudian ada tulisan aturan permainan dan tombol interaksi ”menu”. Tombol menu untuk kembali ke halaman Menu Utama.

Adapun langkah-langkanya pembuatan seperti dibawah ini:

Background.

”bc.jpg”

 Masuk ke Blender, membuat scene yang diberi nama ”Panduan”.

 Membuat plane.003 dan menyisipkan kamera yang diarahkan tegak lurus kearah plane.003.

 Plane.003 diberi texture matrial ”bc.jpg”.

 Kemudian membuat Text.015, Plane.011 diletakkan didepan

plane.003.

(10)

 Memberi texture matrial pada Text.015 ”Menu”.

 Memberi Animasi pada Plane.011 dan kemudian diinvissible pada

properties.

 Plane.011 ”Menu” diberi logic brick supaya berhubungan ke halaman

Menu Utama (Scene Menu Utama). Adapun bentuk logic-nya sebagai berikut :

Gambar 4.11 Bentuk Logic brick Pada Menu

 Membuat script phyton diberi nama tampilkan mouse.py dan

ditempatkan pada Plane

import Rasterizer

 Hasil yang diperoleh dari langkah-langkah yang sudah dilakukan pada Halaman panduan sebagai berikut :

(11)

Gambar 4.12 Tampilan Halaman Menu panduan

4.4.4 Halaman Huruf

Pada halaman huruf, User mulai memainkan Game dengan menggunakan keyboard seperti yang sudah dijelaskan dihalaman panduan.

Langkah-langkah pembuatan akan dijelaskan sebagai berikut :

 Dengan menggunakan Blender, terlebih dahulu membuat Scene

Huruf.

 Didalam Scene Huruf dibuat komponen gambar 3 Dimensi.

Berikut akan dibahas langkah-langkah pembuatannya.

 Landscape rumput : menggunakan menu Add_plan dibuat selebar mungkin dan kemudian diberi texture rumput.

 Karakter : menggunakan menu Add_cube dibuat sedetail mungkin dan

kemudian diberi texture Material.

 Pohon : menggunakan menu Add_Cylinder dan Add_Plane, Cylinder

untuk membuat batang pohon dan plane untuk membuat daun, setelah terbentuk pohon, melalui edit mode batang pohon diberi texture batang

pohon.jpg dan daun diberi texture daun.png dan diletakan diberbagai

(12)

 Batu : menggunakan menu Add_Cube setelah terbentuk batu memalui

edit mode dan Sculpt Mode batu diberi texture batu.jpg dan diletakan

diberbagai tempat.

 Air : menggunakan Add_Plane setelah terbentuk air melalui Edit Mode dan Grease Pencil air di beri texture water.jpg.

 Awan : Menggunakan Add_Circle setelah terbentuk lingkaran

setengah menggunakan Edit Mode awan di beri texture awan.jpg.

 Kemudian membuat Text.020 dan Text.021 kemudian diletakan

didepan kamera.

 Text.020 diberi properties ”CARILAH HURUF”. Text.021 diberi

properties ”A”.

 Membuat Huruf A-Z dan dibernama a-z.

 Membuat script phyton ALFABET.py berguna untuk mengurutkan

huruf dari a-z.

Tabel 4.4 script phyton ALFABET.py

alfabet_raw = "abcdefghijklmnopqrstuvwxyzA" def alfabet(): x = [] for i in alfabet_raw: x.append(i) return x

 Membuat script phyton pada Text.021 diberi nama

SELAJUTNYA_HURUF.py berguna untuk membuat Text.021 yang sebelumnya ”A” akan berubah sesuai huruf yang telah dibuat di ALFABET.py

(13)

Tabel 4.5 script phyton SELAJUTNYA_HURUF.py

import bge

from ALFABET import alfabet huruf = alfabet() kamus = bge.logic.globalDict own = bge.logic.getCurrentController().owner cont = bge.logic.getCurrentController() aktif = True for i in cont.sensors: if i.positive == 0: aktif = False

if 'sebelumnya' in kamus and aktif == True: sebelumnya = kamus['sebelumnya'] selanjutnya = int(sebelumnya) + 1 own.text = str(huruf[selanjutnya]) own['selanjutnya'] = selanjutnya

own['huruf_sementara'] = str(huruf[sebelumnya])

 Text.021 ”A” diberi logic brick dan properties pada Game Logic agar dapat berubah sesuai apa yang diperintahkan pada ALFABET.py. Adapun bentuk logic-nya sebagai berikut :

(14)

Gambar 4.13 Bentuk Logic brick properties Pada Text.021

Gambar 4.14 Bentuk Logic brick Pada Text.021

 Menggabungkan objek Text.020 dan Text.021 pada kamera sehingga

kemanapun Text.020 dan Text.021 digerakan akan mengikuti kamera.

 Menggabungkan kamera pada karakter sehingga kemanapun karakter

digerakan maka kamera akan mengikuti karakter.

(15)

Gambar 4.15 Dope Sheet Diam pada Karakter

 Membuat animasi gerakan lari pada karakter sebagai berikut :

Gambar 4.16 Dope Sheet Lari pada Karakter

(16)

Tabel 4.6 script phyton get_sebelumnya.py import bge cont = bge.logic.getCurrentController() own = cont.owner kamus = bge.logic.globalDict if 'sebelumnya' in kamus: own['sebelumnya'] = kamus['sebelumnya']

 Membuat penggerak pada karakter untuk kedepan, kekanan, dan kekiri menggunakan Game Logic sebagai berikut :

Gambar 4.17 Bentuk Logic brick pada Karakter

 Membuat script phyton yg_sebelumnyaALF.py berfungsi untuk jika

(17)

Tabel 4.7 script phyton yg_sebelumnyaALF.py

import bge

from ALFABET import alfabet

huruf = alfabet()

cont = bge.logic.getCurrentController() own = cont.owner

kamus = bge.logic.globalDict

ini = own.name

if 'sebelumnya' not in kamus: kamus['sebelumnya'] = '-1'

if 'sebelumnya' in kamus:

sebelumnya = kamus['sebelumnya'] sInt = huruf.index(ini)

print("sebelumnya ialah : " + str(sebelumnya)) print("ini ialah : " + str(sInt - 1))

if int(sebelumnya) != sInt - 1: print('gagal')

cont.activate(cont.actuators['gagal'])

(18)

 a-z diberi logic brick supaya berhubungan ke halaman Menu gagal (Scene gagal) dan jika karakter mengenai a-z maka a-z akan hilang. Adapun bentuk logic-nya sebagai berikut :

Gambar 4.18 Bentuk Logic brick pada huruf a

(19)

4.4.5 Halaman Angka

Pada halaman huruf, User mulai memainkan Game dengan menggunakan keyboard seperti yang sudah dijelaskan dihalaman panduan.

 Dengan menggunakan Blender, terlebih dahulu membuat Scene

Huruf.

 Didalam Scene Huruf dibuat komponen gambar 3 Dimensi.

untuk membuat batang pohon dan plane untuk membuat daun, setelah terbentuk pohon, melalui edit mode batang pohon diberi texture batang pohon.jpg dan daun diberi texture daun.png dan diletakan diberbagai tempat.

didepan kamera.

 Text.028 diberi properties ”CARILAH ANGKA”. Text.029 diberi

properties ”0”.

(20)

 Membuat script phyton pada Text.029 diberi nama selanjutnya.py berguna untuk membuat Text.029 ”0” akan bertambah 1 jika karakter mengenai angka.

Tabel 4.8 script phyton selanjutnya.py

import bge kamus = bge.logic.globalDict own = bge.logic.getCurrentController().owner cont = bge.logic.getCurrentController() aktif = True for i in cont.sensors: if i.positive == 0: aktif = False

if 'sebelumnya' in kamus and aktif == True:

selanjutnya = int(kamus['sebelumnya']) + 1 own.text = str(selanjutnya)

own['selanjutnya'] = selanjutnya

 Text.029 ”0” diberi logic brick dan properties pada Game Logic agar dapat berubah sesuai apa yang diperintahkan. Adapun bentuk logic-nya sebagai berikut :

(21)

Gambar 4.20 Bentuk Logic brick properties Pada Text.029

(22)

 Membuat animasi gerakan lari pada karakter sebagai berikut :

(23)

 Membuat script Pyhton get_sebelumnya.py

(24)

 Membuat script phyton yg_sebelumnya.py berfungsi untuk jika user menjawab pertanyaan yang salah maka user akan gagal.

Tabel 4.10 script phyton yg_sebelumnya.py import bge

ini = int(str(own))

if 'sebelumnya' not in kamus: kamus['sebelumnya'] = -1

if 'sebelumnya' in kamus:

sebelumnya = kamus['sebelumnya']

print("sebelumnya ialah : " + str(sebelumnya)) print("ini ialah : " + str(ini - 1))

if int(sebelumnya) != ini - 1: print('gagal')

kamus['sebelumnya'] = str(own) print('mendapatkan hasil sebelumnya')

(25)

 0-9 diberi logic brick supaya berhubungan ke halaman Menu gagal (Scene gagal) dan jika karakter mengenai 0-9 maka 0-9 akan hilang. Adapun bentuk logic-nya sebagai berikut :

Gambar 4.25 Bentuk Logic brick pada huruf 0

(26)

4.4.6 Halaman Acak Huruf

Pada halaman Acak huruf, User mulai memainkan Game dengan menggunakan keyboard seperti yang sudah dijelaskan dihalaman panduan.

 Dengan menggunakan Blender, terlebih dahulu membuat Scene Acak

Huruf.

 Didalam Scene Acak Huruf dibuat komponen gambar 3 Dimensi.

untuk membuat batang pohon dan plane untuk membuat daun, setelah terbentuk pohon, melalui edit mode batang pohon diberi texture batang pohon.jpg dan daun diberi texture daun.png dan diletakan diberbagai tempat.

didepan kamera.

 Text.010 diberi properties ”CARILAH HURUF”. Text.007 diberi

properties ”A”.

(27)

 Membuat script phyton quis.py berguna untuk mengurutkan huruf dari a-z.

Tabel 4.11 script phyton quis.py

alfabet_raw = "AIUEOa" def alfabet(): x = [] for i in alfabet_raw: x.append(i) return x

 Membuat script phyton pada Text.007 diberi nama kuis.py berguna

untuk membuat Text.007 yang sebelumnya ”A” akan berubah sesuai huruf yang telah dibuat di quis.py

Tabel 4.12 script phyton kuis.py

import bge

from quis import alfabet huruf = alfabet() kamus = bge.logic.globalDict own = bge.logic.getCurrentController().owner cont = bge.logic.getCurrentController() aktif = True for i in cont.sensors: if i.positive == 0: aktif = False

(28)

if 'sebelumnya' in kamus and aktif == True: sebelumnya = kamus['sebelumnya'] selanjutnya = int(sebelumnya) + 1 own.text = str(huruf[selanjutnya]) own['selanjutnya'] = selanjutnya own['huruf_sementara'] = str(huruf[sebelumnya])

 Text.007 ”A” diberi logic brick dan properties pada Game Logic agar dapat berubah sesuai apa yang diperintahkan pada quis.py. Adapun bentuk logic-nya sebagai berikut :

(29)

 Membuat animasi gerakan diam pada karakter sebagai berikut :

(30)

Gambar 4.30 Dope Sheet Lari pada Karakter

 Membuat script Pyhton get_sebelumnya.py

(31)

Gambar 4.31 Bentuk Logic brick pada Karakter

 Membuat script phyton yg_sebelumnyakuis.py berfungsi untuk jika

user menjawab pertanyaan yang salah maka user akan gagal. Tabel 4.14 script phyton yg_sebelumnyakuis.py

import bge

from quis import alfabet

huruf = alfabet()

ini = own.name

(32)

kamus['sebelumnya'] = '-1' if 'sebelumnya' in kamus: sebelumnya = kamus['sebelumnya'] if ini in huruf: sInt = huruf.index(ini) print("sebelumnya ialah : " + str(sebelumnya))

print("ini ialah : " + str(sInt - 1))

kamus['sebelumnya'] = sInt else:

print(str(ini) + " tak ada di dalam daftar alfabet")

print('gagal')

 a-z diberi logic brick supaya berhubungan ke halaman Menu gagal (Scene gagal) dan jika karakter mengenai a-z maka a-z akan hilang. Adapun bentuk logic-nya sebagai berikut :

(33)

Gambar 4.33 Tampilan Halaman Menu Acak Huruf

4.5 Export File Ke Executable (.exe)

Program Blender 2.75 sebenarnya mempunyai menu fungsi untuk membuat hasil file blender dalam blender game menjadi program executable, namun secara default menu tersebut di tiadakan. Dibawah ini akan dijelaskan bagaimana membuat file berextension .exe itu dibuat.

1. Masuk ke dalam menu user preferences.

(34)

2. Masuk ke tab Addons, lalu pilih Game Engine. Berikan tanda centang pada ”Game Engine Save As Game Engine Runtime”. Lalu keluar dengan memberi klik kiri pada tanda close.

Gambar 4.35 Addons Game Engine

3. Masuk kembali ke file menu lalu ”External Data”, pilih ”Pack into .blend file”. Hal ini dimaksudkan agar gambar / texture, suara, script, dan lain-lain bisa dimasukan kedalam satu file, sehingga file bisa dijalankan difolder yang berbeda atau bahkan di komputer yang berbeda.

(35)

4. Masuk kembali ke file menu lalu ”Export”, pilih ”Save As Game Engine Runtime”.

Gambar 4.37 Menu Export

5. Lalu pilih folder untuk tempat save file tersebut setelah itu klik tombol ”Save As Engine Runtime”.

(36)

4.6 Pengujian

4.5.1 Pengujian BlackBox

Pengujian dilakukan untuk memastikan respons atas masukan akan menjalankan proses yang sesuai dengan renaca dan menghasilkan output dengan hasil sebagai berikut :

Tabel 4.15 Hasil Uji BlackBox

Item Input Output Hsail Uji

Menu Klik Tombol Menu

Mulai

Menampilkan Halaman Mulai

Sesuai

Panduan

Menampilkan Halaman

panduan

Sesuai

Keluar

Keluar Aplikasi Sesuai

Mengenal Huruf

Menampilkan Halaman Huruf

Sesuai

Mengenal Angka

Menampilkan Halaman Angka

Sesuai

Menu Klik Tombol Menu Acak

Huruf

Menampilkan Halaman Acak

Huruf

Sesuai

Menu Klik Tombol Menu Kembali ke

Halaman Menu Utama

(37)

Item Input Output Hsail Uji

Sensor Menyentuh huruf

sesuai perintah

Huruf hilang dan melanjutkan

permainan

sesuai

tidak sesuai perintah

Ke scane gagal sesuai

terakhir sesuai perintah

Ke scane Berhasil sesuai

Sensor Menyentuh Angka

sesuai perintah

Angka hilang dan melanjutkan

permainan

sesuai

Sensor Menyentuh Angka

tidak sesuai perintah

Ke scane gagal sesuai

Sensor Menyentuh angka

terakhir sesuai perintah

Ke scane Berhasil sesuai

Dari hasil pengujian dapat disimpulkan bahwa ”APLIKASI GAME EDUKASI UNTUK MENGENAL HURUF ALFABET UNTUK PRA SEKOLAH/TK MENGGUNAKAN APLIKASI BLENDER BERBASIS DESKTOP” untuk pengujian blackbox yang meliputi uji input proses dan output dengan acuan rancangan perangkat lunak telah terpenuhi dengan hasil sesuai dengan rancangan.