IMPLEMENTASI DAN PEMBAHASAN
5.1 Tahap Produks
5.1.1 Proses Pembuatan Background , Karakter, Icon , Aset Alat dan Button
Dalam proses pembuatan background, karakter, icon, aset alat dan button pada perancangan game edukasi pengenalan alat listrik ini keseluruhan menggunakan software CorelDRAW X4. Langkah pertama yang dilakukan sebelum membuat background, karakter, icon, aset alat dan button adalah melakukan proses pengaturan dalam area kerja CorelDRAW X4. Ukuran kertas yang digunakan adalah 1160 x 720 pixel dengan orientasi landscape. Tampilan area kerja awal pada CorelDRAW X4 dapat dilihat pada gambar 5.1.
Gambar 5.1 Tampilan area kerja awal CorelDRAW X4
Proses selanjutnya adalah pembuatan background, karakter, icon, aset alat dan button yang akan digunakan pada edukasi pengenalan alat listrik. Untuk pembuatan background, proses pembuatannya dimulai dengan proses tracing dari gambar bitmap yang telah ada sehingga menghasilkan gambar vector. Gambar background yang dipilih adalah gambar yang berpola serat kayu, lalu ditambah degan beberapa aset tambahan.Background ini akan digunakan diseluruh interface game kecuali pada menu utama. Background pada menu utama menggunakan background ruangan. Background dibuat dengan menggunakan bezier tool, rectangle tool dan ellipse tool sampai terbentuk pola gambar yang diinginakan selanjutnya akan diberi warna.
Gambar 5.3 Background ruangan.
Setelah pembuatan background, selanjutnya adalah pembuatan aset berupa aset pendukung background dan aset alat listrik. Untuk aset pendukung background yang akan dibuat meliputi buku catatan dengan halaman kosong yang terbuka, teks pendukung dengan materi alat yang terkait dan kotak tempat gambar alat listrik. Sedangkan untuk aset alat listrik dibuat berdasarkan gambar alat listrik yang berupa foto.Semua aset dibentuk polanya dengan menggunakan bezier tool, rectangle tool dan ellipse tool sampai terbentuk pola gambar kartun yang diinginakan. Setelah semua aset siap maka semua aset dikombinasikan dengan background dan disimpan dengan format *.PNG.
Gambar 5.4 Aset pendukung background dan aset alat listrik
Setelah pengkombinasian background dan aset, selanjutnya akan dibuat karakter. Karakter yang dipilih adalah sosok Albert Einstein dengan bentuk kartun yang dibuat dengan menggunakan bezier tool dan ellipse tool. Lalukarakter ini disimpan untuk nantinya dapat dikombinasikan lagi dengan background ruangan dan intro fase belajar.
Gambar 5.6 Karakter Albert Einstein
Terakhir adalah pembuatan icon dan button. Icon yang digunakan berupa kepala dari Albert Einstein sebagai simbol aplikasi setelah terinstal di perangkat Android. Button yang dibuat terdiri dari button bermain, belajar, next, previous, menu, restart, home dan button alat listrik.
Gambar 5.7 Gambar icon dan button 5.1.2 Proses Pembuatan Script
Setelah semua aset disiapkan, maka proses berikutnya adalah pembuatan script agar aset tersebut nantinya dapat diberikan perintah dan aksi sesuai tindakan pengguna. Software yang digunakan dalam perancangan game edukasi pengenalan alat listrik ini adalah Corona SDK.
Gambar 5.8 Tampilan awal Corona SDK
Langkah pertama untuk memulai pembuatan script adalah dengan memilih New Project yang akan menjadi aplikasi dari game
edukasi pengenalan alat listrik. Kemudian dilakukan pengaturan project agar tampilan game yang tercipta nantinya sesuai dengan yang diharapkan. Aplikasi ini diberi nama Profesor Albert & Alat Listrik. Project Template yang digunakan adalah Blank, Upright Screen Size yang digunakan adalah Phone Preset dan Default Orientation yang dipilih adalah Sideways agar tampilan game nantinya berupa Landscape. Contoh tampilan awal pembuatan game Profesor Albert & Alat Listrik dapat dilihat pada gambar 5. 9
Gambar 5.9 Tampilan awal pembuatan game Profesor Albert & Alat Listrik
Setelah selesai melakukan pengaturan, maka secara otomatis akan terbentuk tiga file berbeda dari Corona SDK. File yang digunakan dalam membuat game Profesor Albert & Alat Listrik ini adalah main.lua. Untuk dua file lain yaitu config.lua dan build.settings merupakan file pendukung yang tidak boleh dihapus. Kemudian untuk menambahakan fungsi dan efek ke dalam game diperlukan beberapa file pendukung lainnya. Dalam folder project yang telah dibuat lalu ditambahkan beberapa file pendukung berupa template.lua yang berfungsi sebagai pembuat scene baru dalam game. Contohnya scene intro game, menu utama, belajar, pilih alat dan lain – lain.
Setelah menyiapkan semua wadah berupa scene yang tersusun sesuai nama yang diinginkan, maka tahap selanjutnya adalah menyiapkan semua aset pendukung seperti sound dan gambar kedalam
folder baru yang diciptakan sebagai penampung aset. Segala jenis gambar akan ditampung pada folder images dan segala jenis efek suara akan ditampung dalam folder sounds. Semua folder tersebut haruslah berada didalam projek yang dibuat. Untuk lebih jelasnya tentang penempatan aset dan scene dapat melihat gambar 5.10
Gambar 5.10 File dan folder dalam dalam projek Profesor Albert & Alat Listrik
1. Opening Screen
Setelah semua aset dan file pendukung yang dibutuhkan dalam perancangan siap, maka selanjutnya adalah proses pembuatan script yang akan dimulai dari pembuatan script opening screen sesuai dengan rancangan antar muka yang telah dijabarkan pada bab IV . File template.lua di-copy dan di-paste, kemudian di- rename menjadi introstudio.lua. selanjutnya file introstudio.lua dibuka dengan aplikasi text editor Notepad++ dan diberikan script berupa logo studio. Untuk script dari opening screen dapat dilihat pada gambar 5. 11.
Gambar 5.11 Script untuk opening screen yang terdiri dari coding untuk memuat audio, background dan transisi ke scene berikutnya. 2. Menu Utama
Untuk membuat scene menu utama yang berupa home.lua, ada beberapa script yang dibutuhkan. Langkah pertama adalah membuat background yang telah disipakan khusus untuk menu utama. Untuk script dari background menu utama dapat dilihat pada gambar 5. 12.
Gambar 5.12 Script untuk background menu utama.
Setelah memasukkan gambar background, selanjutnya adalah memberikan button yang nantinya mengarah ke scene yang diinginkan pengguna. Untuk script dari button pada menu utama dapat dilihat pada gambar 5. 13.
Setelah memasukkan button, selanjutnya adalah membuat script untuk backsound untuk menu utama dan fungsi transisi dari scene menu utama dan scene selanjutnya.
Gambar 5.14 Script untuk memuat backsound padamenu utama.
Gambar 5.15 Script untuk button menu utama. 3. Fase Belajar
Dalam proses perancangan pada fase belajar yaitu belajar.lua, ada beberapa script yang memiliki fungsi yang sama dengan fungsi pada script pada main menu. Script tersebut antara lain, memuat audio atau suara, memuat background, efek transisi dan fungsi button. Untuk lebih jelasnya, script dari masing – masing fungsi dapat dilihat pada gambar 5.16, 5.17, 5.18 dan 5.19.
Gambar 5.16 Script untuk memuat audio padafase belajar.
Gambar 5.18 Script untuk memuat button padafase belajar.
Gambar 5.19 Script untuk efek transisi padafase belajar. 4. Pemilihan Alat
Dalam proses proses perancangan pemilihan alat dengan nama file pilihbelajar.lua diperlukan beberapa pemanggilan aset berupa audio, button, background dan efek transisi. Masing – masing button nantinya akan mengarah pada materi alat listriknya masing – masing sedangkanaudio disini hanya untuk efek suara pada saat menekan tombol, sedangkan efek transisi akan aktif saat user menekan salah satu button. Untuk lebih jelasnya, script dari masing – masing fungsi dapat dilihat pada gambar 5.20, 5.21, dan 5.22 .
Gambar 5.20 Script untuk memuat audio dan background pada pemilihan alat.
Gambar 5.22 Script untuk efek transisi ke setiap materi alat listrikpada pemilihan alat.
5. Materi Alat Listrik
Setiap materi alat listrik memiliki file dengan nama yang berbeda, sebagai contoh untuk materi mengenai steker dinamakan steker.lua dalam perancangannya diberikan struktur script yang mirip dengan alat listrik lain karena hanya berupa halaman materi. Dalam kasus ini, user hanya dituntut untuk membaca materi tentang alat listrik tersebut lalu menekan tombol next atau previous untuk kembali ke halaman sebelumnya atau tombol menu untuk kembali ke pemilihan alat. Berikut merupakan script dari salah satu alat listrik yaitu steker.
Gambar 5.23 Script untuk memuat background padamateri alat listrik (steker).
Gambar 5.24 Script untuk memuat button padamateri alat listrik (steker).
Gambar 5.25 Script untuk efek transisi ke halaman selanjutnya pada setiap materi alat listrik.
6. Fase Bermain Pertama
Fase bermain pertama dibuat dengan nama bermain1.lua. Disini berisi kumpulan script yang berfungsi sebagai memuat background dan button, fungsi complete dan fungsi drag and drop. Karena pada fase bermain pertama ini user harus melakukan drag and dropbutton ke ruang kosong. Script dari fase belajar pertama yaitu sebagai berikut:
Gambar 5.26 Script untuk memuat audio padafase bermain pertama.
Gambar 5.27 Script untuk memuat background padafase bermain pertama.
Gambar 5.30 Script untuk fungsi Drag and Drop padafase bermain pertama.
7. Fase Bermain Kedua
Fase bermai kedua dinamakan bermain2.lua yang berisi satu button sebagai penghapus (busa )dan beberapa button lainnya sebagai wadah (kotoran) yang nantinya akan hilang jika button tersebut mendekati wadahnya. Dan saat semua wadah terhapus, maka user akan dapat melihat gambar backgroud selama beberapa detik.
Gambar 5.31 Script untuk pendeklarasian aset pada fase bermain kedua.
Gambar 5.32 Script untuk membuat audio dan background pada fase bermain kedua.
Gambar 5.33 Script untuk memuat button berupa busa dan kotoranpada fase bermain kedua.
Gambar 5.34 Script membuat busa bergerak pada fase bermain kedua.
Gambar 5.35 Script untuk efek transisi pada fase bermain kedua.
Gambar 5.37 Script untuk fungsi usappadafase bermain kedua. 8. Fase Bermain Ketiga
Pada fase bermain ketiga yang diberi nama bermain3.lua, akan ada puzzle yang berupa button ditaruh secara acak, disini user harus menaruh button tersebut dengan cara drag and drop agar sesuai
pada wadah yang disediakan dan maju ke permainan selanjutnya. Untuk scriptnya dapat dilihat pada gambar berikut:
Gambar 5.38 Script untuk pendeklarasian aset pada fase bermain ketiga.
Gambar 5.39 Script untuk memuat audio dan background pada fase bermain ketiga.
Gambar 5.43 Script untuk fungsi Drag and Drop padafase bermain ketiga.
9. Fase Bermain Keempat
Pada perancangan fase bermain keempat yang diberi nama bermain4.lua user akan memilih salah satu jawaban dari empat button yang tersedia berdasarkan apa yang ada pada background, untuk itu background harus dimuat terlebih dahulu dan button dengan fungsi lainnya juga setelahnya. Untuk lebih jelasnya script dari fase bermain keempat dapat dilihat pada gambar berikut:
Gambar 5.44 Script untuk memuat audio dan background pada fase bermain keempat.
Gambar 5.45 Script untuk memuat button pilihan pada fase bermain keempat.
Gambar 5.46 Script untuk memuat tampilan pop up pada fase bermain keempat.
Gambar 5.47 Script untuk fungsi complete padafase bermain keempat. 10. Fase Bermain Kelima
Fase bermain kelima diberi nama bermain5.lua, sama seperti fase bermain keempat, user memilh satu jawaban yang benar dari tiga pilihan yang ada menurut petunjuk dari gambar. Berikut gambar dari script fase bermain kelima:
Gambar 5.48 Script untuk memuat audio dan background pada fase bermain kelima.
Gambar 5.49 Script untuk memuat button pilihan pada fase bermain kelima.
Gambar 5.50 Script untuk memuat tampilan pop up pada fase bermain kelima.
Gambar 5.51 Script untuk fungsi complete padafase bermain kelima. 5.1.3 Tampilan Game
1. Opening Screen
Pada opening screen, terdapat logo studio yang muncul selama 4 detik setelah itu akan secara otomatis bertransisi ke menu utama pada game. Untuk tampilan opening screen dapat dilihat pada gambar 5. 52.
Gambar 5. 52 Tampilan opening screen 2. Menu Utama
Pada menu utama terdapat dua buah tombol, yaitu tombol belajar dan bermain. Masing – masing dari tobol tersebut mengarah pada fase yang sesuai dari nama tombol tersebut. Pada sisi kanan terdapat nama dari game dan pada sisi kiri merupakan gambar
karakter. Untuk tampilan menu utama dapat dilihat pada gambar 5.53.
Gambar 5.53 Tampilan menu utama 3. Fase Belajar
Fase belajar dimulai dengan pengenalan tokoh kartun Albert Einstein yang terletak pada sisi kiri layar. Pada bagian pojok kanan bawah terdapat button next, dimana setelah user membaca teks (sebagai teks intro) maka akan langsung tampil scene pemilihan alat. Untuk tampilan fase belajar dapat dilihat pada gambar 5. 54.
Gambar 5. 54 Tampilan fase belajar 4. Pemilihan Alat
Pada pemilihan alat, akan menampilkan menu sembilan alat litsrik yang hanya berupa button dengan gambar siluet yang menyerupai alat tersebut. Pada pojok kiri bawah terdapat tombol home jika user ingin kembali ke tampilan menu utama. Jika user memilih salah satu alat, maka akan langsung menuju penjelasan tentang alat listrik tersebut. Untuk tampilan pemilihan alat dapat dilihat pada gambar 5. 55.
5. Materi Alat Listrik
Pada tampilan materi alat listrik, pada sisi kiri terdapat gambar alat listrik yang berupa gambar dalam bentuk kartun. Pada sisi kanan terdapat teks yang berkaitan dengan alat yang dibahas. Pada pojok kiri bawah terdapat button menu untuk kembali ke halaman pilih alat atau button previous untuk kembali ke halaman sebelumnya dan button next pada pojok kanan bawah yang berfungsi meneruskan materi. Sedangkan pada akhir materi nanti tombol next akan tertuju pada menu pemilihan alat. Tampilan materi alat listrik dapat dilihat pada gambar 5. 56.
Gambar 5. 56 Tampilan materi alat listrik 6. Fase Bermain Pertama
Pada fase bermain pertama terdapat tiga gambar alat listrik yang pada bagian bawahnya terdapat tiga kotak/ruang kosong yang berupa ruang nama dari gambar tersebut. Disini user/pengguna akan berusaha men-drag atau menggeser nama yang berupa button hingga nama yang digeser nantinya sesuai dengan gambar yang dimaksud.
Gambar 5. 57 Tampilan fase bermain pertama 7. Fase Bermain Kedua
Pada fase bermain kedua terdapat gambar noda hijau dan busa putih sebagai media pembersih kotoran tersebut. Pada kotoran terdapat tulisan “USAP LAYAR DENGAN BUSA” yang bertujuan menuntun pengguna agar dapat membersihkan kotoran terlebih dahulu untuk melihat gambar yang ada pada bagian bawah kotoran. Tampilan fase bermain kedua dapat dilihat pada gambar 5. 58.
Gambar 5. 58 Tampilan fase bermain kedua 8. Fase Bermain Ketiga
Pada fase bermain kedua, pengguna akan diberikan sebuah gambar yang dipecah sehingga menyerupai puzzle. Dari sini, pengguna akan menyusun puzzle tersebut menjadi gambar yang sebelumnya telah dilihat pada fase bermain kedua. Tampilan fase bermain ketiga dapat dilihat pada gambar 5. 59.
Gambar 5. 59 Tampilan fase bermain ketiga 9. Fase Bermain Keempat
Pada fase bermain keempat, pengguna harus memilih jumlah yang tepat dari sejumlah alat listrik yang ada pada sisi kiri. Keempat pilihan tersebut merupakan button yang dapat di tap oleh pengguna Tampilan fase bermain keempat dapat dilihat pada gambar 5. 60.
Gambar 5. 60 Tampilan fase bermain keempat 10. Fase Bermain Kelima
Pada fase bermain kelima, pengguna akan memilih diantara ketiga stop kontak untuk mendapatkan stop kontak yang sesuai dari steker yang dipegang. Ketiga gambar stop kontak tersebut merupakan button yang dapat di tap oleh pengguna. Tampilan fase bermain kelima dapat dilihat pada gambar 5. 61.