bab iii perancangan sistem 3.1 ruang lingkup...

17
11 BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Game Berdasarkan kebutuhan pengguna, perancangan aplikasi ini ditujukan kepada anak-anak yang membutuhkan media atau sarana pembelajaran mencari kata melalui media game berupa gambar dan kata, sehingga memudahkan anak dalam belajar. 3.2 Flowchart Flowchart adalah bagan atau chart yang menunjukkan alir atau flow didalam program atau prosedur sistem secara logika. Berikut adalah gambaran Flowchart game “Mencari Kata”:

Upload: dinhdiep

Post on 29-Aug-2019

231 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

11

BAB III

PERANCANGAN SISTEM

3.1 Ruang Lingkup Game

Berdasarkan kebutuhan pengguna, perancangan

aplikasi ini ditujukan kepada anak-anak yang

membutuhkan media atau sarana pembelajaran mencari

kata melalui media game berupa gambar dan kata,

sehingga memudahkan anak dalam belajar.

3.2 Flowchart

Flowchart adalah bagan atau chart yang

menunjukkan alir atau flow didalam program atau prosedur

sistem secara logika. Berikut adalah gambaran Flowchart

game “Mencari Kata”:

Page 2: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

12

Gambar 3.2.1 Flowchart Mencari Kata

Keterangan:

1. Ketika pemain membuka permainan pertama kali akan

muncul main menu

2. Pertama tombol untuk memulai permainan

Page 3: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

13

3. Kedua ketika mengklik tombol Play akan masuk ke level

permainan

4. Ketiga tombol keluar untuk keluar dari permainan atau

browser

5. Ketika masuk ke tampilan level maka ada 5 level. Dan akan

muncul level 1, kemudian klik level 1.

6. Ketika masuk ke tampilan level maka, pemain mencari kata

yang sudah ada pada gambar

7. Pemain harus mencari kata yang ada pada gambar, pemain

harus mencari kata yang sudah ditentukan

8. Saat pemain sudah menemukan kata yang tersembunyi pada

gambar, maka pemain mengklik level 2.

9. Pemain harus mencari kata yang sudah ditentukan pada

gambar, sampai ke level 5.

3.3 Lembar Kerja Tampilan

Perancangan antarmuka game mencari kata

digambarkan seperti ini:

3.3.1 Lembar Kerja Tampilan Awal

Berikut adalah gambar untuk tampilan awal,

seperti pada gambar berikut ini:

Gambar 3.3 Tampilan utama

Main Menu

Play Exit

Page 4: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

14

Keterangan:

1. Main Menu ketika diklik akan masuk ke tampilan awal

2. Play ketika diklik akan masuk ke halaman level

3. Exit untuk keluar dari permaianan atau browser

3.3.2. Lembar Kerja Tampilan Level

Berikut adalah gambar tampilan level

seperti pada gambar berikut ini.

Gambar 3.2 Tampilan Level

3.3.2 Lembar Kerja Tampilan Level

Gambar 3.4 Lembar Kerja Tampilan Level

Keterangan:

1. Level 1 : Ketika diklik akan masuk ke level 1

Mencari 6 kata dalam gambar.

2. Level 2 : Ketika diklik akan masuk ke level 2

Mencari 5 kata dalam gambar.

3. Level 3 : Ketika diklik akan masuk ke level 3

Mencari 4 kata dalam gambar.

4. Level 4 : Ketika diklik akan masuk ke level 4

Level 1

Level 5

Level 3 Level 4

Level 2

Page 5: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

15

Mencari 10 kata dalam gambar.

5. Level 5 : Ketikadilkik akan masuk ke level 5

Mencari 8 kata dalam gambar.

3.3.3. Lembar Kerja Tampilan Level 1(T1)

Berikut adalah gambar tampilan level 1,

seperti pada gambar:

Gambar 3.5 Lembar Kerja Tampilan Level 1

Navigasi:

- Klik Pohon

Untuk menambahkan skor pemain

- Klik Bola

Untuk menambahkan skor pemain

- Klik Luncur

Untuk menambahkan skor pemain

- Klik Sepeda

Untuk menambahkan skor pemain

Luncur

Bola

Sepeda

Pasir

Pohon

Ayunan

Temukan 6 Kata Dalam Gambar

Skor

Page 6: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

16

- Klik Pasir

Untuk menambahkan skor pemain

- Klik Ayunan

Untuk menambahkan skor pemain

Keterangan:

Halaman ini berisikan untuk mencari kata, ketika

setiap kata diklik akan otomatis menambah skor

pemain.

3.3.4. Lembar Kerja Tampilan Level 2(T2)

Berikut adalah gambar tampilan level 2,

seperti pada gambar:

Lembar Kerja Tampilan Level 2

Gambar 3.6 Lembar Kerja Tampilan Level 2

Navigasi:

- Klik Bunga

Untuk menambahkan skor pemain

Bunga

Buah Stroberry

Batu

Pohon

Sungai

Temukan 5 Kata dalam gambar

Skor

Page 7: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

17

- Klik Batu

Untuk menambahkan skor pemain

- Klik Pohon

Untuk menabahkan skor pemain

- Klik Sungai

Untuk menambahkan skor pemain

Keterangan:

Halaman ini berisikan untuk mencari mencari kata,

ketika kata diklik maka otomatis akan

menambahkan skor pemain.

3.3.5. Lembar Kerja Tampilan Level 3(T3)

Berikut adalah gambar tampilan level 3,

seperti pada gambar :

Gambar 3.7 Lembar Kerja Tampilan Level 3

Pohon Awan

Gunung Rumput

Temukan 4 kata dalam gambar

Skor

Page 8: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

18

Navigasi:

- Klik Pohon untuk menambahkan skor pemain

- Klik Gunung untuk menambahkan skor pemain

- Klik Awan untuk menambahkan skor pemain

- Klik Rumput untuk menambahkan skor pemain.

Keterangan:

Halaman ini berisikan mencari kata, ketika kata diklik

otomatis akan menambahkan skor pemain.

3.3.6. Lembar Kerja Tampilan Level 4 (T4)

Berikut adalah gambar tampilan level 4,

seperti pada gambar:

Gambar 3.8 Lembar Kerja Tampilan Level 4

Burung Pohon

Kaos kaki Pagar Buah

Tempat Sampah

Bola Basket

Bunga

Pot Kuas

Temukan 10 kata dalam gambar

Skor

Page 9: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

19

Navigasi:

- Klik Burung untuk menambahkan skor pemain

- Klik Pagar untuk menambahkan skor pemain

- Klik Bola Basket untuk menambahkan skor

pemain

- Klik Buah untuk menambahkan skor pemain

- Klik Kaos Kaki untuk menambahkan skor pemain

- Klik Pohon untuk menambahkan skor pemain

- Klik Kuas untuk menambahkan skoe pemain

- Klik Pot untuk menambahkan skor pemain

- Klik Tempat Sampah untuk menambahkan skor

pemain

- Klik Bunga untuk menambahkan skor pemain.

Keterangan:

Halaman ini berisikan mencari kata, ketika kata diklik

otomatis akan menambahkan skor pemain.

Page 10: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

20

3.3.7. Lembar Kerja Tampilan Level 5 (T5)

Berikut adalah gambar tampilan level 5,

seperti pada gambar:

Gambar 3.9 Lembar Kerja Tampilan Level 5

Navigasi :

- Klik Bunga untuk menambahkan skor pemain

- Klik Rumput

Untuk menambahkan skor pemain

- Klik Jungkajangkling untuk menambahkan skor

pemain

- Klik Daun untuk menambahkan skor pemain

- Klik Ayunan untuk menambahkan skor pemain

- Klik Meluncur untuk menambahkan skor pemain

Bunga Meluncur

Layang-layang Rumput Daun

Lompat Tali Jungngjang

king

Ayunan

Temukan 8 kata dalam gambar

Skor

Page 11: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

21

- Klik Layang-layang untuk menambahkan skor

pemain

- Klik Lompat Tali untuk menambahkan skor anda

Keterangan:

Halaman ini berisikan mencari kata, ketika diklik otomatis

kata diklik otomatis menambahkan skor pemain.

3.4 Jaringan Semantik Tampilan

Gambar 4.0 Jaringan Semantik Tampilan

Page 12: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

22

3.5 Desain Layout Game

Layout adalah penyusunan dari setiap elemen desain

yang berhubungan dengan sebuah bidang sehingga

membentuk susunan arsistik bias juga disebut sebagai

manajemen bentuk dan bidang. Tujuan utama dari layout

adalah menampilkan elemen gambar dan teks sehingga

menjadi komunikatif dalam sebuah cara yang dapat

memudahkan pembaca menerima informasi. Layout juga

dapat diartikan dan fungsi dari pada layout berikut adalah

pnejelasan fungsi dari layout dan Event Sheet:

1. Layout adalah sebuah kanvas kerja dalam

membuat game, dan biasa disebut sebagai tata

letak objek-objek yang dapat digunakan dalam

sebuah game seperti Background,

karakter/Sprite,button dan lain sebagainya.

2. Fungsi Event Sheet adalah suatu tabel yang dapat

memasukkan atau memberikan perintah dalam

sebuah game sehingga dapat berjalan. Dalam

Event Sheet terdapat global variable, local

variable, group,comment.didalam Event Sheet

dapat menambahkan perintah tanpa menggunakan

coding.

Page 13: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

23

Berikut adalah gambar tampilan layout game:

1. Tampilan utama game

Pada tampilan utama game ini berupa petunjuk

yang menjelaskan bagaimana langkah dalam

permainan. Tombol bermain saat diklik akan masuk

ke halaman level dan tombol keluar saat diklik akan

keluar dari browser.

Gambar 4.1 LKT Tampilan Main menu game

2. Tampilan Taman Bermain

Pada halaman ini penulis memilih taman bermain

karena taman bermain adalah tempat daya tarik yang

terdiri atas wahana permainan seperti wahana main

ayunan, main bola dan bermain sepeda dan biasanya

taman hiburan memiliki pilihan sejumlah jenis wahana

permainan yang berbeda.

Page 14: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

24

Gambar 4.2 LKT Tampilan taman bermain

3. Tampilan sungai

Pada halaman ini penulis memilih sungai karena

merupakan suatu bentuk hiburan yang sering dijadikan

sebagai penyegar pikiran dan sebagai penghilang rasa

jenuh dan hampir setiap orang senang bermain game

disungai baik anak kecil maupun orang dewasa, dan

mungkin hanya berbeda dari yang dimainkan.

Gambar 4.3 LKT Tampilan sungai

Page 15: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

25

4. Tampilan Taman

Pada halaman ini penulis memilih taman karena taman

adalah tempat bermain untuk anak diusia dini dan anak

dapat mengembangkan daya imaginative dan kreativitas

saat bermain ditaman.

Gambar 4.4 LKT Tampilan taman

5. Tampilan taman bola basket

Pada halaman ini penulis memilih taman bermain

bola basket ditaman karena bermain adalah sebuah

aktifitas yang murni untuk mencari kesenangan dan

kepuasan diusia anak dini.

Page 16: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

26

Gambar 4.5 LKT Tampilan lapangan basket

6. Tampilan Taman bermain

Tampilan Taman bermain Pada halaman ini

penulis memilih taman bermain karena taman bermain

adalah tempat daya tarik pada anak-anak, yang terdiri atas

wahana permainan seperti wahana main ayunan,main

ayunan dan bermain meluncur, bermainlompat tali dan

biasanya taman hiburan memiliki pilihan sejumlah jenis

wahana permainan yang berbeda.

Page 17: BAB III PERANCANGAN SISTEM 3.1 Ruang Lingkup Gamerepository.uksw.edu/bitstream/123456789/16194/3/T0_562014047_BAB III.pdf · Flowchart adalah bagan atau chart yang menunjukkan alir

27

Gambar 4.6 LKT Tampilan taman bermain