T0__BAB III Institutional Repository | Satya Wacana Christian University: Perancangan Game Edukasi Pembelajaran Bahasa Inggris untuk Anak TK dan PAUD T0 BAB III
BAB III. PERANCANGAN SISTEM
3.1 Flowchart
End
Launch game
yes
Do you want to
exit?
Exit
Start screen
Report
no
Start
Main menu
My house
My school
garden
transportation
Play Lesson
Play Lesson
Play Lesson
Play Lesson
Play game 1
Play game 1
Play game 1
Play game 1
Play game2
Play game2
Play game2
Play game2
Play game3
Play game3
Play game3
Play game3
Gambar 3.1 Flowchart Game Edukasi Pembelajaran Bahasa
Inggris
3.2 Desain Antarmuka
1
2
a. Lembar kerja tampilan awal
Gambar 3.2 Design tampilan awal game
Keterangan:
-
Pada tampilan awal terdapat 3 button yaitu start,
report, dan exit.
-
Button start link ke tampilan menu utama yang berisi
tema-tema lingkungan di sekitar anak-anak.
-
Button report link ke halaman tampilan report yang
berisi kalkulasi hasil belajar anak yang dikemas dalam
2 aspek yaitu kognitif dan motorik.
-
Button exit melakukan eksekusi keluar dari game yang
dijalankan.
3
b. Lembar kerja tampilan menu utama
Gambar 3.3 Design tampilan menu utama
Keterangan:
-
Pada tampilan menu utama akan terdapat 5 button
yaitu menu utama, tema 1, tema 2, tema3, dan tema 4.
-
Button menu utama link ke tampilan awal game.
-
Button tema 1 link ke tampilan submenu yang terdapat
lesson dan game dengan tema My Home.
-
Button tema 2 link ke tampilan submenu yang terdapat
lesson dan game dengan tema My School.
-
Button tema 3 link ke tampilan submenu yang terdapat
lesson dan game dengan tema Garden.
-
Button tema 4 link ke tampilan submenu yang terdapat
lesson dan game dengan tema Transportation
.
4
c. Lembar kerja tampilan submenu
Gambar 3.4 Design Tampilan submenu
Keterangan :
-
Terdapat text area yang menunjukkan tema yang
sedang diakses dan 5 button yaitu back, lesson, game
1, game 2, dan game.
-
Button back kembali ke tampilan menu utama dimana
terdapat kumpulan berbagai macam tema lingkungan
-
Button lesson link ke tampilan lesson dimana terdapat
gambar, keterangan gambar yang berupa nama benda,
dan suara yang merupakan pelafalan dari nama benda
tersebut dalam bahasa inggris.
-
Button game 1 link ke tampilan game 1 yang berisi
game tentang mencocokkan suara dengan gambar.
5
-
Button game 2 link ke tampilan game 2 yang berisi
game tentang mencocokkan gambar dengan suara.
-
Button game 3 link ke tampilan game 2 yang berisi tentang
mencocokkan bentuk suatu benda.
d. Lembar kerja tampilan report
Gambar 3.5 Design Tampilan report
Keterangan:
-
Terdapat 2 text area . Text area 1 menunjukkan bahwa
halaman report yang sedang diakses. Text area 2
berisi 2 aspek yaitu kognitif dan motorik yang masingmasing diengkapi dengan dinamic text yang akan
menampung score penilaian game.
-
Terdapat 1 button back link ke tampilan awal game.
6
e. Lembar kerja tampilan lesson
Gambar 3.6 tampilan lesson
Keterangan:
-
Terdapat 2 text area . Text area 1 menunjukkan
halaman yang sedang diakses. Text area 2
menunjukkan teks nama gambar yang sedang
ditampilkan dalam bahasa inggris.
-
Terdapat gamabr yang menunjukkan gambar disekitar
anak-anak sesuai dengan tema lingkungan yang
sedang diakses.
-
Terdapat 3 button. Button 1 kembali ke tampilan
submenu tema lingkungan yang sedang diakses.
Button 2 menuju ke gambar benda selanjutnya. Button
3 menuju ke gambar benda sebelumnya.
7
f. Lembar kerja tampilan game 1
Gambar 3.7 tampilan game 1
Keterangan:
-
Terdapat 1 text area yang menunjukkan halamanyang
sedang diakses.
-
Terdapat 5 button.
-
Button back menuju ke submenu tema yang sedang
diakses.
-
Button sound menampilkan nama benda berupa suara.
-
Button 1, 2, 3 berupa gambar yang sesuai dengan
tema lingkungan yang sedang diakses.
8
g. Lembar kerja tampilan game 2
Gambar 3.8 tampilan game 2
Keterangan:
-
Terdapat 1 text area yang menunjukkan halaman yang
sedang diakses.
-
Terdapat 1 gambar yang sesuai dengan tema
lingkungan yang sedang diakses.
-
Terdapat 5 button yaitu 1 button back dan 4 button
sound
-
Button back menuju ke submenu tema lingkungan
yang sedang diakses.
-
Button sound 1,2,3 dan 4 menampilkan nama benda
sesuai dengan tema lingkungan yang sedang diakses.
9
h. Lembar kerja tampilan game 3
Gambar 3.9 tampilan game 3
Keterangan:
-
Terdapat 1 text area yang menunjukkan halaman yang
sedang diakses.
-
Terdapat 1 button back menuju ke submenu tema
lingkungan yang sedang diakses.
-
Terdapat 5 area gambar
-
Gambar 5 berupa gambar benda sesuai dengan tema
lingkungan yang sedang diakses.
-
Gambar 1,2,3 dan 4 berupa button yang dapat di drag
and draw. Yang harus di cocokkan bentuknya dengan
gambar 5
3.3 Jaringan Semantik Tampilan
back
T2
exit
T1
T4
no
report
T9
T24
back start
back
T23
lesson
game3
back
T10
game2
back
back
back
game1
transportation
T5
My house
T3
T8
game1
back
back
game2
backgame3
T22
backlesson
T11
back
My school
T12
garden
back
T21
game3
back
back
T13
T6
lesson
back
game1
T14
T7
game3
back
T20
game2
back
T16
back
lesson
game2
back
T15
T17
Gambar 3.10 Jaringan semantik tampilan Game
Edukasi Pembelajaran Bahasa Inggris
back
game1
T18
T19
T1
T2
T3
T4
T5
T6
T7:
T8
T9
T10
T11
T12
T13
T14
T15
T16
T17
T18
T19
T20
T21
T22
T23
T24
3.1 Flowchart
End
Launch game
yes
Do you want to
exit?
Exit
Start screen
Report
no
Start
Main menu
My house
My school
garden
transportation
Play Lesson
Play Lesson
Play Lesson
Play Lesson
Play game 1
Play game 1
Play game 1
Play game 1
Play game2
Play game2
Play game2
Play game2
Play game3
Play game3
Play game3
Play game3
Gambar 3.1 Flowchart Game Edukasi Pembelajaran Bahasa
Inggris
3.2 Desain Antarmuka
1
2
a. Lembar kerja tampilan awal
Gambar 3.2 Design tampilan awal game
Keterangan:
-
Pada tampilan awal terdapat 3 button yaitu start,
report, dan exit.
-
Button start link ke tampilan menu utama yang berisi
tema-tema lingkungan di sekitar anak-anak.
-
Button report link ke halaman tampilan report yang
berisi kalkulasi hasil belajar anak yang dikemas dalam
2 aspek yaitu kognitif dan motorik.
-
Button exit melakukan eksekusi keluar dari game yang
dijalankan.
3
b. Lembar kerja tampilan menu utama
Gambar 3.3 Design tampilan menu utama
Keterangan:
-
Pada tampilan menu utama akan terdapat 5 button
yaitu menu utama, tema 1, tema 2, tema3, dan tema 4.
-
Button menu utama link ke tampilan awal game.
-
Button tema 1 link ke tampilan submenu yang terdapat
lesson dan game dengan tema My Home.
-
Button tema 2 link ke tampilan submenu yang terdapat
lesson dan game dengan tema My School.
-
Button tema 3 link ke tampilan submenu yang terdapat
lesson dan game dengan tema Garden.
-
Button tema 4 link ke tampilan submenu yang terdapat
lesson dan game dengan tema Transportation
.
4
c. Lembar kerja tampilan submenu
Gambar 3.4 Design Tampilan submenu
Keterangan :
-
Terdapat text area yang menunjukkan tema yang
sedang diakses dan 5 button yaitu back, lesson, game
1, game 2, dan game.
-
Button back kembali ke tampilan menu utama dimana
terdapat kumpulan berbagai macam tema lingkungan
-
Button lesson link ke tampilan lesson dimana terdapat
gambar, keterangan gambar yang berupa nama benda,
dan suara yang merupakan pelafalan dari nama benda
tersebut dalam bahasa inggris.
-
Button game 1 link ke tampilan game 1 yang berisi
game tentang mencocokkan suara dengan gambar.
5
-
Button game 2 link ke tampilan game 2 yang berisi
game tentang mencocokkan gambar dengan suara.
-
Button game 3 link ke tampilan game 2 yang berisi tentang
mencocokkan bentuk suatu benda.
d. Lembar kerja tampilan report
Gambar 3.5 Design Tampilan report
Keterangan:
-
Terdapat 2 text area . Text area 1 menunjukkan bahwa
halaman report yang sedang diakses. Text area 2
berisi 2 aspek yaitu kognitif dan motorik yang masingmasing diengkapi dengan dinamic text yang akan
menampung score penilaian game.
-
Terdapat 1 button back link ke tampilan awal game.
6
e. Lembar kerja tampilan lesson
Gambar 3.6 tampilan lesson
Keterangan:
-
Terdapat 2 text area . Text area 1 menunjukkan
halaman yang sedang diakses. Text area 2
menunjukkan teks nama gambar yang sedang
ditampilkan dalam bahasa inggris.
-
Terdapat gamabr yang menunjukkan gambar disekitar
anak-anak sesuai dengan tema lingkungan yang
sedang diakses.
-
Terdapat 3 button. Button 1 kembali ke tampilan
submenu tema lingkungan yang sedang diakses.
Button 2 menuju ke gambar benda selanjutnya. Button
3 menuju ke gambar benda sebelumnya.
7
f. Lembar kerja tampilan game 1
Gambar 3.7 tampilan game 1
Keterangan:
-
Terdapat 1 text area yang menunjukkan halamanyang
sedang diakses.
-
Terdapat 5 button.
-
Button back menuju ke submenu tema yang sedang
diakses.
-
Button sound menampilkan nama benda berupa suara.
-
Button 1, 2, 3 berupa gambar yang sesuai dengan
tema lingkungan yang sedang diakses.
8
g. Lembar kerja tampilan game 2
Gambar 3.8 tampilan game 2
Keterangan:
-
Terdapat 1 text area yang menunjukkan halaman yang
sedang diakses.
-
Terdapat 1 gambar yang sesuai dengan tema
lingkungan yang sedang diakses.
-
Terdapat 5 button yaitu 1 button back dan 4 button
sound
-
Button back menuju ke submenu tema lingkungan
yang sedang diakses.
-
Button sound 1,2,3 dan 4 menampilkan nama benda
sesuai dengan tema lingkungan yang sedang diakses.
9
h. Lembar kerja tampilan game 3
Gambar 3.9 tampilan game 3
Keterangan:
-
Terdapat 1 text area yang menunjukkan halaman yang
sedang diakses.
-
Terdapat 1 button back menuju ke submenu tema
lingkungan yang sedang diakses.
-
Terdapat 5 area gambar
-
Gambar 5 berupa gambar benda sesuai dengan tema
lingkungan yang sedang diakses.
-
Gambar 1,2,3 dan 4 berupa button yang dapat di drag
and draw. Yang harus di cocokkan bentuknya dengan
gambar 5
3.3 Jaringan Semantik Tampilan
back
T2
exit
T1
T4
no
report
T9
T24
back start
back
T23
lesson
game3
back
T10
game2
back
back
back
game1
transportation
T5
My house
T3
T8
game1
back
back
game2
backgame3
T22
backlesson
T11
back
My school
T12
garden
back
T21
game3
back
back
T13
T6
lesson
back
game1
T14
T7
game3
back
T20
game2
back
T16
back
lesson
game2
back
T15
T17
Gambar 3.10 Jaringan semantik tampilan Game
Edukasi Pembelajaran Bahasa Inggris
back
game1
T18
T19
T1
T2
T3
T4
T5
T6
T7:
T8
T9
T10
T11
T12
T13
T14
T15
T16
T17
T18
T19
T20
T21
T22
T23
T24