rancang bangun aplikasi game edukasi pengenalan bentuk, warna, dan...
TRANSCRIPT
RANCANG BANGUN APLIKASI GAME EDUKASI PENGENALAN
BENTUK, WARNA, DAN ANGKA UNTUK PENDIDIKAN ANAK USIA
DINI MENGGUNAKAN CONSTRUCT 2
TUGAS AKHIR
Diajukan sebagai salah satu syarat untuk menyelesaikan Studi
Program Studi Teknik Informatika
Jenjang Program Strata-1
Oleh :
AHMAD DENE ANDRIYANTO SUSILO
13.01.53.0088
20035
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS STIKUBANK (UNISBANK)
SEMARANG
2020
PERNYATAAN KESIAPAN UJIAN TUGAS AKHIR
Saya, Ahmad Dene Andriyanto Susilo, dengan ini menyatakan bahwa Laporan Tugas Akhir yang berjudul:
RANCANG BANGUN APLIKASI GAME EDUKASI PENGENALAN BENTUK, WARNA, DAN ANGKA UNTUK PENDIDIKAN ANAK USIA
DINI MENGGUNAKAN CONSTRUCT 2
Adalah benar hasil karya saya dan belum pernah diajukan sebagai karya ilmiah, sebagian atau seluruhnya, atas nama saya atau pihak lain.
NIM : 13.01,53,0088
Disetujui oleh Pembimbing
Kami setuju Laporan tersebut diajukan untuk Ujian Tugas Akhir
Semarang, 19 Agustus 2020
Pembimbing
UNIVERSITA STIKUBANK “UNISBANK" SEMARANG
Be) FAKULTAS TEKNOLOGI INFORMASI 2% lorn@a Juang No | soza) J Kenaeng ¥ berdan gnc benaa Wem (O24) 6451976 83) 1o08 8454746. Fox (24) 6443340 ew 24) 6414970 Fon O34) 8441738 Emad infourunabort oc toot lwawebomcc
Yang bertanda tangan di bawah ini, saya menyatakan bahwa TUGAS AKHIR / SKRIPS!
dengan Judul :
RANCANG BANGUN APLIKASI GAME EDUKAS! MOTORIK UNTUK PENDIDIKAN ANAK
BERKEBUTUHAN KHUSUS ( ABK ) MENGGUNAKAN GMSTUDIO
yang telah diuji di depan tim penguji pada tanggal 10 Agustus 2020, adalah benar hasil karya saya dan dalam TUGAS AKHIR /SKRIPS! ini tidak terdapat keseluruhan atau sebagian tulisan
orang lain yang saya ambil dengan cara menyalin, atau meniru dalam bentuk rangkaian kalimat atau simbol yang saya aku seolah-olah sebagai tulisan saya sendiri dan atau tidak
terdapat bagian atau keseluruhan tulisan yang saya salin, tiru atau yang saya ambil dari tulisan orang lain tanpa memberikan pengakuan pada penulis aslinya.
Apabila saya melakukan ha! tersebut diatas, baik sengaja maupun tidak, dengan ini saya
menyatakan menarik TUGAS AKHIR / SKRIPS! yang saya ajukan sebagai hasil tulisan saya
sendiri.
Bila kemudian terbukti bahwa saya ternyata melakukan tindakan menyalin atau meniru
tulisan orang lain seolah-olah hasil pemikiran saya sendiri, berarti gelar dan ijazah saya yang
telah diberikan oleh Universitas Stikubank (UNISBANK) Semarang batal saya terima.
a4 NIM -13.01.53.0088
SAKS!I 2
Tim Penguji
HALAMAN PENGESAHAN
Tugas Akhir dengan judul:
RANCANG BANGUN APLIKASI GAME EDUKASI PENGENALAN BENTUK, WARNA, DAN ANGKA UNTUK PENDIDIKAN ANAK USIA
DINI MENGGUNAKAN CONSTRUCT 2
Ditulis oleh :
NIM _ : 13.01.53.0088
NAMA : Ahmad Dene Andriyanto Susilo
Telah dipertahankan di depan Tim Dosen Penguji Tugas Akhir dan diterima
sebagai salah satu syarat guna menyelesaikan Jenjan Program Strata | Program Studi Teknik Informatika pada Fakultas Teknologi Informasi Universitas
Stkubank (UNISBANK) Semarang.
Semarang, 19 Agustus 2020
Budi Hartono, S.Kom, M.Kom) (Kristophorus Hadiono, S.Kom., Ph.D) ' NIDN : 0608057401 NIDN : 622027601
Mengetahui, Universitas a (UNISBANK) Semarang
Syhno0, S.Kom., Ph.D) 622027601
v
MOTTO DAN PERSEMBAHAN
MOTTO
Sebuah Masalah ada Untuk Mendewasakanmu
Jadi Jangan Lari Dari Sebuah Masalah
Tetapi Cobalah Untuk Menyelesaikanya Meskipun Itu Berat
PERSEMBAHAN
Kupersembahkan karya yang sederhana ini kepada:
Kedua orang tua dan kakak, dan adik Saya,
Semua orang yang telah membantu dalam membuat skripsi ini,
Serta Almamaterku, Fakultas Teknologi Informasi Universitas Stikubank
(UNISBANK)
Semoga selalu mendapat ridho dan perlindungan Allah SWT Aamiin.
KATA PENGANTAR
Alhamdulillah, puji syukur atas kehadirat Allah SWT yang senantiasa
memberikan segala rahmat, nikmat dan karunia-Nya, Sehingga penulis dapat
menyelesaikan Tugas Akhir yang berjudul “RANCANG BANGUN APLIKASI
GAME EDUKASI PENGENALAN BENTUK, WARNA, DAN ANGKA
UNTUK PENDIDIKAN ANAK USIA’ DINI MENGGUNAKAN
CONSTRUCT 2”. Shalawat serta salam senantiasa penulis panjatkan kepada Nabi
Agung Muhammad SAW, yang telah memberi syafaat dan hidayahnya. Tujuan dari
penulisan tugas akhir ini adalah untuk melengkapi salah satu syarat memperoleh
Derajat Sarjana Komputer di Fakultas Teknologi Informasi Universitas Stikubank
(UNISBANK) Semarang.
Penulis sangat menyadari bahwa dalam proses menyelesaikan tugas akhir
ini tidak luput dari bimbingan, dukungan, bantuan, serta dorongan dari semua
pihak. Oleh sebab itu, pada kesempatan ini penulis mengucapkan banyak terima
kasih yang sebesar-besarnya kepada seluruh pihak yang secara langsung maupun
tidak langsung telah membantu dalam proses penyusunan tugas akhir ini, kepada:
1. Dr. Safik Faozi, SH., M.Hum selaku Rektor Universitas Stikubank
(UNISBANK) Semarang.
2. Kristophorus Hadiono, $.Kom., Ph.D selaku Dekan Fakultas Teknologi
Informasi Universitas Stikubank (UNISBANK) Semarang.
3. Dr. Drs. Eri Zuliarso, M.Kom selaku Ketua program studi Teknik Informatika
Universitas Stikubank (UNISBANK) Semarang.
4. Jati Sasongko Wibowo, M.Cs selaku Dosen Pembimbing yang bersedia
memberi arahan, bimbingan dan nasehat selama penulis melakukan penelitian
dan penyusunan tugas akhir ini.
5. Bapak/Ibu Dosen Penguji yang telah bersedia menguji dan memberikan arahan,
masukan, kritik dan saran dalam penyusunan tugas akhir ini.
6. Bapak dan Ibu Dosen semua yang berada di Universitas Stikubak
(UNISBANK) Semarang.
7. Kedua Orang tua, serta kakak dan adik yang senantiasa memberikan inspirasi
serta dukungan doa, materi dan moril bagi penulis.
8. Sahabat “Royal Tamyiz” yang sudah saya anggap sebagai keluarga kedua dan
selalu menemani dan memotivasi untuk menyelesaikan tugas akhir ini.
9. Calon istri saya Shanum Geeta Sanjaya yang selalu memberi dukungan dan
bantuan dalam proses penyusunan tugas akhir ini.
10. Teman-teman satu angkatan saya yang masih bertahan, selalu bertukar pikiran,
saling memberi dukungan untuk menyelesaikan skripsi.
11. Terima kasih untuk kalian seluruh sahabat kontrakan saya, selalu memberi
petuah dan dukungan.
12. Semua pihak yang tidak dapat disebutkan namanya satu persatu, yang telah
senantiasa memotivasi, membantu, dan memberi dukungan hingga tugas akhir
ini dapat terselesaikan.
Penulis berharap Allah SWT dengan sedala kuasanya dapat membalas
semua kebaikan bagi seluruh pihak yang telah membantu hingga skripsi ini
diselesaikan. Hanya sebuah karya sangat kecil ini yang dapat penulis
persembahkan, namun peulis berharap dapat menjadi manfaat untuk sekarang atau
di masa yang akan datang.
Semarang, 19 Agustus 2020
L (Ahmad Dene A
drivanto Susilo)
DAFTAR ISI
HALAMAN JUDUL 00 eee tet end tieidtendanenaetiaes i
HALAMAN PERNYATAAN KESIAPAN UJIAN TUGAS AKHIR ..... ee il
SURAT PERNYATAAN KEASLIAN TUGAS AKHIR/SKRIPSI oo. ili
HALAMAN PENGESAHAN 00. teeta tite tne tteaetieeaeteae te iv
MOTTO DAN PERSEMBAHAN |i ect cee ete e etd eet nd eaten teeta t teens Vv ABSTRAKS 1. ee ede e tide tine t tie tices teaete vi
KATA PENGANTAR ooo ne ee teenie tide ttaaetiaeeteaetnenae viii DAFTAR IST oc eerie tie tite tice a tiaeeteaete x
DAFTAR GAMBAR ooo ce eet e ened estat tected aetna et aetteaetneaeee xii DAFTAR TABEL oo. te ite dete dee ted e ete det neeaetnaeeteaetneeae XIV
BAB I. PENDAHULUAN oo eee tte t nae tiaee tenet 1 1.1 Latar Belakang Penelitian oo... eeeceeeeeeeeeeeeeeeeeeaeeeeetaaees 1
1.2 Perumusan Masalah 0000.0... te ete eee teen ee etna ered ete 3
1.3 Batasan Masalabh ui... eee eee teeter ae etd aetna nete 3
1.4 Tujuan dan manfaat Penelitian 0.000 cece ee eeeneeeeeeeeetaeeeeeteeees 4
V4 TUfU ad oo ec e eee e een eeccaeee een aeeeeneecaeaeeseneeeeeeened 4
1.4.2 Manfaat Penelitian .0..... eee ecteeeeeeeeeeeeeeetaeeeseteeeeeneeea 4
1.5 Metodologi Penelitian occ eee tenet treet ae etna te 5
1.5.1 Perumusan Obyek Penelitian 2.00000 eee eee eee 5 1.5.2 Metode Pengumpulan Data wo... eee eset eeeees 5
1.5.3 Metode Penelitian Terapan........ eee eeeeeeeeeaes 5 1.5.4 Metode Pengembangan System... cece eee 6
1.5.5 Metode Collision detection ...ecccccccccccececcescteteetcteeeteteeeeeeeees 8 1.6 Sistemaika Penulisan 00.00... ee eee eee e tees ences tenes trae te 9
BAB II. TINJAUAN PUSTAKA wooo. te tne nett eetttetteatetteaae 12
2.1 Pustaka Yang Terkait dengan penelitian........ ec eeeeeeeeeeees 12
BAB IIT. LANDASAN TEORL o.oo ee teeta ete eet nt ee tite tte aetnnaee 15
3.1 Pengemrtian Game oo... ec cee ieee nee inet need tneetteaeetel 15
3.2 Jemis-Jemis GaMe we. eee eee need net tend tneaeeteeetee 15
3.3 Definisi Menurut ADM... eee ene eden ee teaeetel 19
3.4 Aplikasi Mobile ou... eee eee ea ee nee nena teeeadeeneteel 21
3.5 Pengertian ANdrOid 0.000 eee cnet need tneetteeeete 22
3.6 Perkembangan versi ANdr0id o.0.....c lect ee eee et eea ett 22 3.6.1 Sejarah Androd ...0..00 cece cee teeter teat etree teeetel 22
3.6.2 Jenis-Jenis Android 0... ee eet ee neee annette 23 3.7 COMStiCUt 2 oo. cee eee ere ene nee idee tenet need aneaae annette 28
3.8 Coreldraw X7 oii. .iecceeeee ee tee ieee nee inet neeeteeaeanaeeee 29 3.9 Perancangan Sistem... cee cece een ee eae enced tee eeteaeeeel 29
3.9.1 Flowchart 000.000 eee e eee eee ee eeeae eerste teeta eeeeee tas 29
3.9.2 Use Case ooo. cc teeter d etn tetnde ete aetnaae 32
3.9.3 Activity Diagram oct cee ete eticaeeteee teens 33
3.10 Collision ACteCtion .occcccccccccccccccescecteeeseeeeetecneeetteeeeeeeeseiaaeeteneaes 34
3.11 Animation Frame Matching [D wicicecccccc ccc ects tee 36
BAB IV. ANALISIS DAN PERANCANGAN SISTEM uu... ccc ccecccceeeeeeaes 37
4.1 Analsis Sistem 00.0. eet e tee e et net ee te ee tttee tae tnenae 37
4.1.1 Deskripsi Game Motorik untuk ABK ..... ee 37
4.1.2 Analsis Kebutuhan Sistem... eee eee eee 38
4.2 Perancangan Sistem 0... cece este tee tee ee tnt ee tetetnnae 43
4.2.1 Perancangan Algoritma Collision detection........00000000. 43
4.2.2 Perancangan Proses Terjadinya Collision detection........ 46 4.2.3 Perancangan Alur Game w......ce cece ects ete eeeeeeeeee 48
4.2.4 Perancangan Diagram Aktifitas Tombol Play .........00..... 50 4.2.5 Perancangan Perancangan Antarmuka Aplikasi.............. 53
4.3 Tahapan Proses Build File Html 5 Menjadi Apk ....0....00 56 BAB V. IMPLEMENTAS I] 0... ce teen e neta tte e et neaetaetteaettegae 57
5.1 Implementasi Sistem... cee rere eee tee teee ents 57 5.2 Implementasi Collision detection dan Animation Frame Matching
DD ieee EEE Eee ee eed ae tede tenes 57
5.3 Tampilan Implementasi Antar Muka Game......00.cccccce ees 60
5.3.1 Tampilan Implementasi Main Ment ..........0 0 60
5.3.2 Tampilan Implementasi Kategori Game... 61
5.3.3 Tampilan Implementasi Game Bentuk .......000 61
5.3.4 Tampilan Implementasi Game Warna........0000 cee 62
5.3.5 Tampilan Implementasi Game Angka ........000 eee 63 5.3.6 Tampilan Implementasi Berhasil Menyelesaikan Game 63
5.3.7 Tampilan Implementasi PetunjukGame......000 ee 64 5.4 ObjekK Game ooo. eee ee eee eet nte ete aetteeetnenaee 65
5.5 Implementasi Proses build File Html5 Menjadi Apk ..........00000.. 65 BAB VI. HASIL PENELITIAN DAN PEMBAHASAN o.oo 71
6.1 Hasil Penelitiane.. 0 ee ree tetera ette etna tneaae 71
6.1.1 Pengujian Instalasi Game Pada Smartphone Xiaomi Redmi
Note 4X0. ee ee eet ne tied tae d teed aneeaeanneeee 71
6.1.2 Uji Coba Memainkan Game Pada Smartphone Xiaomi
Redmi Note 4X0 0... e cessed eee eeetneee natant 71
6.2 Pembahasan Game 0... teeta ete tne eet ee teeeetnaaee 76
6.2.1 Pemasangan Game Pada Beberapa Versi Android......... 76
6.3 Hasil Pengujian Pada Androd 0.00... cece ee teceeteeeetteeees 77
6.3.1 Pengujian Menu Sistem oo... eee eeeee eee 77 6.3.2 Pengujian Game Secara Keseluruhan..........0000 cee 78
BAB VIL PENUTUP ooo tee rere nite e titted net aetna et aeeteaetneaees 80 TA Kesimpulan o0..c ce eee nee teeta neeetnte ete aetteaetnegae 80
7 BOESY: Vi: 1) pSEPESEEEEUEETEEEETE LESTE LEDUC TEOTEEEETEEEOTEOEECTEEETTOEOSESEEESTSEEOEOSEOSESEE 81 DAFTAR PUSTAKA ooo te need eet tet ned aetna etiaetteaetneaeee 82
LAMPIRAN oii ee EERE EE Eee eden e atte e tate tnaaee 84
DAFTAR GAMBAR
Gambar 1.1 Model Prototype 00.0.0. ee nett tenet et nt ee titetteeaetnnae 7
Gambar 1.2 Contoh Collision detection.....0ccccccccccccctctc tet et tees ett ceeetecaettetettentes 8
Gambar 1.3 Contoh ActionScript Collision detection w......cccccccccecccece tte e tees 8 Gambar 3.1 Aspek Game iii tee eee teeta tice et aeeteaetneaate 20
Gambar 3.2 Simbol Flowchatt .00..0000 coc tee eee teeta teed et aeenenetneeate 32 Gambar 3.3 Algoritma Collision Bounding BoX.......... cece eee eeeeeeeeee 35
Gambar 3.4 Bounding Circle Collision 00.0000 ecc ccc cee eet t tenes teeaee teas teenies 36 Gambar 4.1 Min-max bounding boX .00......o cece ee etcetera ete eetncaeeteaetneaees 44
Gambar 4.2 Bound Bertabrakan ou... ee eee teeta terete etna ened eteeae 45
Gambar 4.3 Bound Tidak Bertabrakan 0.0.00 eee eceeeeeeteeeeeteeaeeneaaee 46
Gambar 4.4 Proses Terjadinya Collision detection dan Animation Frame
Matching ID ciccecccccccccceccce eect cece ened ene tees ade d ded ncee eee ca aaeeee tiene 47
Gambar 4.5 Proses Terjadinya Collision detection dan Animation Frame ID
yang tidak tepate.. ee needed e ete e tte t ieee tide eteaetneeeee 48
Gambar 4.6 Alur Game wo... ieee eee tite e neta tiene taeeteaeeneaae 49
Gambar 4.7 Diagram Aktifitas Tombol Play .00.....00ccccccceecc cece tect teeeeteeeeneaaes 50
Gambar 4.8 Diagram Aktifitas Kategori Game .......0ccccccccccc cece et eeee tee eeeaes 31 Gambar 4.9 Diagram Aktifitas Tombol Back .0.....eccccecccccc ete e ce eeteeeeteeaeenenaes 31
Gambar 4.10 Diagram Aktifitas Help ....ceccccccecc te ee cee ececaeeeeeeteeaeeteaetneeaes 52 Gambar 4.11 Diagram Aktifitas Quit... ececc cee ete eeceeaetteae tease eeaeeneeaes 53
Gambar 4.12 Perancangan Main Menuia....eccccccccceccccecc cette ete cet teceetesee tenes tneaaes 54 Gambar 4.13 Perancangan Menu Kategori Game w0......ccceccc cece ee teeee teats 54
Gambar 4.14 Perancangan Tampilan UI Game Mencocokkan Objek ........0..0.... 55
Gambar 4.15 Perancangan Tampilan Game Selesai........cc cece 55
Gambar 4.16 Perancangan Tampilan Menu Help u.......0ccccccccec ete teeeeeeees 56
Gambar 5.1 Event Objek Collision dan Matching ID yang Sesuai .............000.. 58
Gambar 5.2 Event Objek Collision dan Matching ID yang Tidak Sesuai........... 59
Gambar 5.3 Tampilan Main Menu... tee ete e terete etna eteaetneeate 60
Gambar 5.4 Tampilan Menu Kategori Game .00......c cece cece tect teeeeteeaeeeenaes 61
Gambar 5.5 Tampilan In Game Bentuk 0.0000 e eee cece teeceeteeaeeteeaeeneaaes 62
Gambar 5.6 Tampilan In Game Watina......eccccccccecc eect eee cece tteeeteeaee teas tnenaes 62 Gambar 5.7 Tampilan In Game Angka......ecceccceccc eet eee cece teeeeteeaee teas tneeaes 63
Gambar 5.8 Tampilan Berhasil Menyelesaikan Game ......0000cccicct eee tees 64 Gambar 5.9 Tampilan Petunjuk Game o0....0c cect t tect cece eeeetecaee tena tnenaes 64
Gambar 5.10 Export HTML 5 ooo... te eee teeta tite tae eteaeeneeate 66
Gambar 5.11 Penyimpanan File Export... ccc ee eee ceeeeceeteeaee teas eneeaee 67
Gambar 5.12 Export File oo. ee ee ee eet ete a taeeteaeenenate 67
Gambar 5.13 Tampilan Export Selesai o....000ccc cece ete cece eeeceeteeeeeteaeeneaes 68 Gambar 5.14 Tampilan File Project ....000cceccccecccecc ete tte cette et tee et naetteaetneaete 68
Gambar 5.15 Tampilan Aplikasi Website 2 Apk Builder 0.0.00 70 Gambar 5.16 Hasil Build ApK oo... tee eee teenie tine etaeenenae 70
Gambar 6.1 Tampilan Main Ment ......ecccceccccccccecc tte cette e ete et teeetiaeeteaetneeate 72 Gambar 6.2 Tampilan Menu Help 0.0... ence teeta tte e etic aeeteaetneaate 72
Gambar 6.3 Tampilan Menu Kategori Game .00.....0c cece ee teceeteeeeteeaeeneeaes 73
Gambar 6.4 Tampilan In Game Bentuk 0.00 cece ee ceeeeeeceetecaee teens enenaes 73
Gambar 6.5 Tampilan In Game Watina.......ccccccccecc eect ee tecaeteeeeteeaee teas tneeaes 74
Gambar 6.6 Tampilan Berhasil Menyelesaikan Game ......0000cccciccct eee tees 74
Gambar 6.7 Tampilan In Game Angka.......cccccceccce ete eteceteeceetneaee tena enenaes 75
Gambar 6.8 Tampilan Berhasil Menyelesaikan Semua Kategori Game ............. 75
Gambar 6.9 Tampilan Tampilan Main Menu pada Redmi Note 4X ou... 76
Gambar 6.10 Tampilan In Game Bentuk pada Redmi Note 4X oe 77
DAFTAR TABEL
Tabel 4.1 Kebutuhan Collision detection dan Animation Frame Matching ID.....38
Tabel 4.2 ODjeCt icici eee deena tat dette ete e tine tteaeetneatee 40 Tabel 4.3 Menut Button ...ceccccccccccccccccsseeeecccneeeetecneeeee encase eeeeeeeeeeesiaaeeeteenieeeesiea 41
Tabel 4.4 Background wicca ened eee deta dette etna tteaetneeeee 42 Tabel 5.1 Objek Game woe eee nee ned e eae eet ne deen aeetnaetteaetteeees 65
Tabel 6.1 Pengujian Sistem Menu oo... ce teeter teen ee tttetteeetnenae 77 Tabel 6.2 Pengujian Sistem Game... ete ete ete eet nt ee tntetteete tenes 78