Multimedia 1 15 Game

Game Puzzle

15 GAME Setelah mempelajari bagian ini, diharapkan dapat: 1. Memahami pembuatan game puzzle 2. Memahami pembuatan timer untuk game 3. Memahami pemnbuatan game puczzle

Game MULTIMEDIA I - GAME

1

Game Puzzle

1. Puzzle Puzzle merupakan game yang sederhana, yaitu menggeser keping puzzle ke dalam suatu lokasi. Bila lokasi sesuai dengan ketentuan, maka keping puzzle tersebut dapat diletakkan, tetapi keping puzzle kembali ke posisi semula bila tidak sesuai. Dengan demikian harus ditentukan koordinat dari masing-masing lokasi. Dalam puzzle yang menggunakan banyak keping puzzle, perlu ditentukan kordinat semua lokasi tersebut.

Gambar 6.1 Konsep pembuatan puzzle

Scene 2 Untuk membuat game puzzle, dapat dilakukan dengan mengikuti langkah-langkah berikut: 1. Buka file source_puzzle.fla yang terdapat dalam CD pada direktori game. Dalam Library terdapat beberapa simbol image “model.jpg”, “puzzle1.jpg”, ..., “puzzle9.jpg”, simbol graphic “tekspuzzle”, “indikator”, “teksgameOver”, dan “display”, simbol movie clip “judulMc”, “game_overMc” dan simbol audio “Giggle”.

Membuat keping puzzle 2. Buat simbol graphic “puzzleGraf_01”. Pada editing simbol graphic drag simbol image “puzzle1.jpg”. 3. Buat simbol movie clip “puzzleMc_01”. Pada editing simbol movie clip drag simbol graphic “puzzleGraf_01”. Dalam panel Instance, pada field Behavior pilih “Button”, dan pada field Option pilih “Track as Button”. Pilihan ini akan memungkinkan user dapat menggeser keping puzzle dengan mouse. 4. Ulangi nomor 2 dan 3 untuk membuat simbol movie clip “puzzleMc_02”, ... “puzzleMc_09”.

Game MULTIMEDIA I - GAME

2

Game Puzzle

Gambar 6.2 Layout keping dan papan puzzle

5. Kembali ke Scene 1, pada layer “Puzzle” drag semuasimbol movie clip “puzzleMc_01”, ... “puzzleMc_09” ke stage.

Membuat papan puzzle 6. Buat simbol graphic “lokasi”. Pada editing simbol graphic buat kotak yang ukurannya sama dengan ukuran keping puzzle, karena akan digunakan untuk menempatkannya. 7. Buat simbol movie clip “lokasiMc”, kemudian drag simbol graphic “lokasi” ke dalam editing simbol. 8. Kembali ke Scene 1, kemudian drag simbol movie clip “lokasiMc” ke stage dan berikan nama instance “lokasi_01”. 9. Dengan cara yang sama buat instance “lokasi_02”, ... “lokasi_09”. Letakkan sedemikian semua instance lokasi sedemikian rupa sehingga membentuk papan puzzle.

Membuat timer 10. Buat simbol movie clip “timemeterMc”. Pada layer pertama “Grafik” drag simbol graphic “display” dari Library. Buat panjang gambar 35 frame. 11. Buat layer “Indikator”, kemudian drag simbol graphic “Indikator” dan buat animasi tweening sehingga warna dari frame 1 ke frame 35 berubah. 12. Buat layer “Kotak”, kemudian buat animasi tweening berupa gambar kotak dan pada frame terakhir kotak tersebut menutupi seluruh indikator. 13. Dengan layer “Kotak” aktif, klik kanan kemudian pilih Mask.

Game MULTIMEDIA I - GAME

3

Game Puzzle

Gambar 6.3 Editing simbol "timemeterMc".

14. Buat layer “Action”, kemudian buat action stop() pada setiap frame. 15. Buat layer “Suara” , kemudian drag symbol audio “Giggle” dari Library.

Membuat script pada keping puzzle 16. Pada simbol movie clip “puzzleMc_01” klik gambar keping puzzle, kemudian buat script sebagai berikut: on(press){ startDrag(puzzleMC_01); } on(release){ stopDrag(); if(this._droptarget==”/lokasi_01"){ this._visible=1; // bila sesuai keping puzzle berhenti // pada kotak lokasi dengan tepat setProperty(this,_x,50); setProperty(this,_y,40); } else{ // bila tidak sesuai, maka keping puzzle // kembali ke tempat semula setProperty(this,_x,450); setProperty(this,_y,125); } }

Game MULTIMEDIA I - GAME

4

Game Puzzle

Gambar 6.4 Script pada keping puzzle

17. Dengan cara yang sama pada nomor 16, buat script untuk setiap movie clip dengan diperhatikan koordinat kotak lokasi dan posisi keping puzzle di stage.

Mengatur timeline utama 18. Buat layer pertama “Background”, kamudian buat kotak dengan warna gradasi yang panjangnya 16 frame. 19. Pada layer “Lokasi” dan “Puzzle” buat panjang dari frame 2 sampai 15.

Gambar 6.5 Layout pada timeline utama

Game MULTIMEDIA I - GAME

5

Game Puzzle

20. Buat layer “Timemeter”, kemudian drag simbol movie clip “timmeterMc” ke stage, dari frame 2 sampai frame 15. 21. Buat layer “Model”, kemudian drag simbol image “model.jpg” ke stage pada frame 1 dan 16. 22. Buat layer “Action”, kemudian buat script pada: frame 1: timelimit = 0; time_meter.gotoAndStop (1); stop (); frame 2: timelimit = timelimit+1; time_meter.nextFrame (); if (timelimit>=36) { gotoAndPlay (16); } else { gotoAndPlay (2); } frame 15: gotoAndPlay (2); frame 16: stop();

Scene 1 dan 3 Scene pertama ini merupakan tampilan awal untuk masuk ke dalam sistem yang berisi animasi judul, model puzzle, dan button Start. 23. Buat layer “Button”, kemudian buat button “Start” pada frame 1 dan 16 dengan script sebagai berikut: on (release) { gotoAndPlay (2); } 24. Buat layer “Info”, kemudian pada frame 16 drag simbol movie clip “game_overMc” ke dalam stage. 25. Buat layer “Judul”, kemudiam pada frame 1 dan 16 drag simbol movie clip “judulMc”. 26. Simpan file dengan nama puzzle.fla puzzle.fla, kemudian Test Movie untuk menjalankan puzzle tersebut.

Game MULTIMEDIA I - GAME

6

Game Puzzle

2. Mendeteksi Tabrakan Method dari objek movie clip hitTest digunakan untuk mendeteksi tabrakan, dan memeriksa apakah suatu objek bertabrakan dengan movie clip.

Membuat Flash movie 1. Buat file baru. 2. Buat simbol movie clip kotakMc kotakMc. Pada editing simbol buat gambar persegi empat, kemudian buat animasi tweening motion sampai frame 10. Buat layer Action, kemudian buat action stop() pada frame 1 dan 10. Animasi ini dibuat untuk mendapatkan gerakan bila terjadi tabrakan. 3. Buat simbol movie clip bolaMc bolaMc. Pada editing simbol buat gambar lingkaran. 4. Klik Scene 1, kemudian drag simbol movil clip kotakMc ke stage, kemudian buat nama instance kotak kotak. 5. Buat layer "Bola", kemudian drag simbol movie clip bolaMc ke dalam stage, kemudian buat nama instance bola bola. 6. Agar bola dapat digerakkan dengan mouse, buat layer "Action" kemudian pada frame 1 buat script sebagai berikut: startDrag ("bola", true); Mouse.hide();

Gambar 6.6. (kiri) Editing simbol kotakMc. Gambar 6.7. (kanan) Editing simbol bolaMc

Game MULTIMEDIA I - GAME

7

Game Puzzle

Gambar 6.8 Layout pada stage dan timeline

7. Buat layer “Button”, kemudian buat button "Reset" dengan script sebegai berikut: on (release) { with (_root.kotak) { gotoAndStop(1); } } 9. Untuk mendeteksi tabrakan, buat script pada instance kotak. Klik pada kotak di stage kemudian buat script sebagai berikut: onClipEvent (enterFrame) { if (_root.kotak._currentframe == 1) { if (_root.bola.hitTest(_root.kotak)) { with (_root.kotak) { gotoAndPlay(2); } } } } 10. Simpan file dengan nama collision.fla collision.fla. ol —> Test Movie untuk melihat hasilnya. 11. Pilih Contr Control

Game MULTIMEDIA I - GAME

8

Kuis

6.3.8 Assembly Untuk membuat game kuis telah disediakan file berisi beberapa symbol yang yang digunakan untuk proses selanjutnya, yaitu file source_kuis.fla dalam CD pada directory game game. Setelah file tersebut dibuka, langkah selanjutnya adalah membuat dua macam symbol yang diperlukan, yaitu button dan movie clip clip.

Membuat symbol Pada pembuatan kuis ini diperlukan symbol button: 1. “Mulai” - digunakan untuk memulai program dimana ditentukan nilai score dan nomor pertanyaan sama dengan 0 2. “level Dasar” - digunakan untuk memilih level dasar dari kuis 3. “level Sedang” - digunakan untuk memilih level sedang dari kuis 4. “level Lanjut” - digunakan untuk memilih level lanjut (genius) dari kuis

9

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

5. “jawab A” - digunakan untuk memilih jawaban A 6. “jawab B” - digunakan untuk memilih jawaban B 7. “jawab C” - digunakan untuk memilih jawaban C 6. “pertanyaan” - mengakses tampilan pertanyaan dan pilihan jawaban

Pada pembuatan kuis ini diperlukan symbol movie clip: 1. “levelMC” - digunakan memberikan informasi level yang dipilih 2. “questionMc” - digunakan menampilkan pertanyaan dan pilihan jawaban 3. “timemeterMc” - digunakan memperlihatkan batas waktu yang diperlukan untuk memikirkan apa yang harus dilakukan oleh user

Symbol button “Mulai” Symbol button “Mulai” dibuat menggunakan salah satu button yang terdapat dalam Common Libraries.

Symbol button “ level Dasar”, “level Sedang”, dan “level Lanjut” Symbol button “level Dasar” dapat dibuat seperti berikut: 1. Pada frame 1 (up) buat elips warna orange dengan label “DASAR” warna hitam. 2. Pada frame 2 (over) buat elips diganti warna hijau dan warna teks “DASAR” menjadi putih. Gambar 6.13 Editing symbol button "level Dasar"

10

Kuis

3. Buat layer “Sound”, pada frame 3 dan 4 ditempatkan suara “nice ding”. 4. Ulangi nomor 1 sampai 3 untuk pembuatan button “level Sedang” dan “level Lanjut”.

Symbol button “ jawab A”, “jawab B”, dan “jawab C” Symbol button “jawab A”, “jawab B”, dan “jawab C” dibuat seperti pada pembuatan button “level Dasar”, “level Sedang”, dan “level Lanjut”.

Gambar 6.14 (kiri) Editing symbol button "jawab A" Gambar 6.15 (kanan) Editing synbol buton "pertanyaan" Gambar 6.16 Editing symbol movie clip "levelMc"

Symbol button “ pertanyaan” Symbol button “pertanyaan” dibuat seperti pembuatan button “level Dasar”, “level Sedang”, dan “level Lanjut”.

Symbol movie clip “levelMc” Symbol movie clip “levelMC” terdiri dari tiga frame dengan tiga buah oval dengan label “DASAR”, “SEDANG”, dan “LANJUT” sebagai berikut: 1. Buat gambar oval dengan label “DASAR”, “SEDANG”, dan “LANJUT”. Pada frame 1 diberikan effect untuk oval “SEDANG” dan “LANJUT” sebesar alpha 20%. 2. Buat effect alpha 20% untuk oval “DASAR” dan “LANJUT” pada frame 2. 3. Pada frame 3 buat effect alpha 20% untuk oval “DASAR” dan “SEDANG”. 4. Buat layer “Action”, kemudian pada frame 1, 2, dan 3 dibuat action stop() stop().

11

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

Symbol movie clip “questionMc” Pada movie clip ini diperlukan satu dynamic text untuk menampilkan pertanyaan dan tiga dynamic text untuk menampilkan pilihan jawaban. Pembuatan movie clip dapat dilakukan sebagai beriku: 1. Buat layer “Pertanyaan”, kamudian buat field dynamic text dengan nama variabel quizquestion dari frame 8 sampai 34. 2. Buat layer “Jawab A”, kemudian buat field dynamic text dengan nama variabel answera dari frame 15 sampai 34. Buat label A. 3. Buat layer “Jawab B”, kemudian buat field dynamic text dengan nama variabel answerb dari frame 18 sampai 34. Buat label B. 4. Buat layer “Jawab C”, kemudian buat field dynamic text dengan nama variabel answerc dari frame 21 sampai 34. Buat label C. 5. Buat layer “Kotak”, untuk menempatkan kotak warna biru sebagai dasar pada field dynamic text untuk pertanyaan dan pilihan jawaban. 6. Buat layer “Sound”. Pada frame 5 drag symbol sound Arc short , dan Swishes pada frame 15, 18, dan 21 dari Library. 7. Buat layer “Action”. Pada frame 1 dibuat script stop( stop(). 8. Pada frame 2 dalam layer Action buat script yang akan mengambil file text berisi pertanyaan secara random, sebagai berikut: question_num = _root.qarray[_root.currentq]; filename = _root.gamelevel add "/q" add question_num add ".txt"; question = "Loading..."; loadVariablesNum (filename, 0); Operator add dapat ditulsikan dengan +, yaitu concenate character. 9. Pada frame 4 buat script sebagai berikut: if (_root.question eq “Loading...”) { gotoAndPlay (3); } 10. Pada frame 5 buat script sebagai berikut: quizquestion = _root.question;

12

Kuis

Gambar 6.17 Editing symbol clip "questionMc"

11. Pada frame 15 buat script sebagai berikut: answera = _root.a1; 12. Pada frame 18 buat script sebagai berikut: answerb = _root.a2; 13. Pada frame 21 buat script sebagai berikut: answerc = _root.a3; 14. Pada frame 34 buat script stop() stop().

Symbol movie clip “timemeterMc” Untuk membuat ukuran waktu yang diperlukan bagi user dapat dilakuikan sebagai berikut: 1. Pada layer pertama " Grafik" drag synbol graphic "display" dari Library. Buat panjang gambar dari frame 1 sampai 26.

13

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

2. Buat layer "Indikator", kemudian drag symbol graphic "Indikator" dan buat animasi tweening sehingga warna dari frame 1 ke frame 26 berubah. 3. Buat layer “Kotak”, kemudian buat animasi tweening dari kotak, sehingga kotak tersebut akan menutupi indikator pada frame 26. Buat mask pada layer tesebut. 4. Buat layer “Action”, kemudian berikan action stop() pada setiap frame.

Scene1 - Mulai kuis Untuk memulai game dapat dilakukan dengan menekan button, dapat dibuat sebagai berikut: 1. Buat ukuran movie 650 x 400 pixel. 2. Buat layer “Button level”. Pada frame 1, buat button dari Common Libraries untuk memulai game. 3. Buat layer “Score”, kemudian buat dynamic text dengan nama variabel score mulai dari frame 1 sampai frame 66. Buat static text “Score”, dan ditempatkan di sebelah kiri dynamic text tersebut.

Gambar 6.18 Editing symbol "timemeterMc"

14

4. Buat layer “No pertanyaan”, kemudian buat dynamic text dengan nama variabel numq mulai dari frame 1 sampai frame 66. Buat static text “Pertanyaan ke” dan "Nilai" untuk menerangkan field dynamic text. Pada awal game, score ditentukan 0 dan numq (nomor pertanyaan ) sama dengan 00, sehingga script pada button "Mulai" dapat dibuat sebagai berikut:

Kuis

Gambar 6.19 Layout pada awal movie

on (release) { gotoAndPlay (2); score = 0; numq = 0; } 5. Buat layer “Timer”, kemudian drag symbol “timetimerMc” dari Library ke dalam stage, dan berikan nama instance time_timer mulai dari frame 1 sampai frame 66. Buat static text “Timer” dan ditempatkan di atas instance tersebut.

Scene 2 - Membuat pilihan level Pilihan game memerlukan tiga buah button dan movie clip untuk Informasi level. Untuk itu dapat dilakukan beberapa urutan aktivitas sebagai berikut:

15

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

Gambar 6.20 (kiri) Layout pada button pilihan level Gambar 6.21 (kanan) Instance levelselector" dengan button "pertanyaan"

1. Pada layer “Button level” frame 2, drag symbol button “level Dasar” dan buat script sebagai berikut: on (release) { gamelevel = “dasar”; gotoAndPlay (“Get question”); } 2. Drag symbol button “level Sedang” dan buat script sebagai berikut: on (release) { gamelevel = “sedang”; gotoAndPlay (“Get question”); } 3. Drag symbol button “level Lanjut” dan buat script sebagai berikut: on (release) { gamelevel = “lanjut”; gotoAndPlay (“Get question”); } 6. Buat layer “Info level”, drag symbol “levelMc”dari Libabry dan berikan nama instance levelselector mulai dari frame 3 sampai frame 24.

Membuat pertanyaan dan jawaban Untuk membuat pertanyaan diperlukan movie clip pertanyaan/jawaban, button, dan informasi nomor pertanyaan.

16

Kuis

1. Buat layer "Info level", kemudian drag symbol "levelMc" ke dalam stage, dan tempatkan dari frame 3 sampai frame 24. Buat nama instance "levelselector". 2. Buat layer “Pertanyaan_jawab”. Pada frame 2 drag symbol “questionMc” ke dalam stage dan buat nama instance questionslate questionslate. Buat instance tersebut sampai frame 24. Pada stage kotak pertanyaan dan jawaban tidak kelihatan karena frame 1 dari movie clip “questionMc” kosong. 3. Buat layer “Button pertanyaan”. Pada frame 3 drag button “pertanyaan” ke dalam stage, dan diletakkan di bawah pilihan level level. Script pada button digunakan untuk menampilkan numor urut pertanyaan serta pertanyaan dan jawaban, sebagai berikut: on (release) { getquestion = true; numq = numq + 1; questionslate.play (); gotoAndPlay (“play”); } 4. Buat layer “Pilihan jawab”. Pada frame 3 drag symbol button “jawab A”, “jawab B”, “jawab C”, dan symbol garphic “pilihan_jawab” ke dalam stage. Symbol graphic “pilihan_ jawab” dibuat merupakan kotak yang digunakan untuk menempatkan button “jawab A”, “jawab B”, dan “jawab C”. Pada kotak tersebut dibuat label teks “Pilih jawaban”. Buat symbol button dan graphic tersebut sampai frame 66.

Scene 4 dan 5 - Info benar dan salah Untuk menampilkan informasi jawaban, diperlukan frame yang memberikan informasi bahwa jawaban benar atau salah. 1. Buat layer “Info benar”, kemudian buat animasi dari frame 25 sampai 37 yang memberikan informasi bahwa jawaban benar. 2. Buat layer “Info salah”, kemudian buat animasi dari frame 45 sampai 66 yang memberikan informasi bahwa jawaban salah. 3. Buat layer “Sound”, kemudian pada frame 25 sampai 37 drag symbol suara “Uh huh!”, dan “death chord” dari frame 45 sampai 66.

17

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

Gambar 6.22 (kiri) Informasi jawaban benar Gambar 6.23 (kanan) Informasi jawaban salah

Action dan label pada frane Untuk membuat action dan label pada frame dapat dilakukan sebagai berikut: 1. Buat layer “Action”. 2. Pada frame 1 buat action stop() stop(). 3. Pada frame 2 buat script sebagai berikut: // Clear random array - diperlukan untuk memulai game ... qarray = new Array(); total_questions = 15; array_length = total_questions; count = 1; while (count<=array_length) { qarray[count]=0; count =count+1; } // Membuat array yang diakses secara random count = 1; while (count<=array_length) { item = (random(number(total_questions)))+1; while (qarray[item]>0) { item = (random(array_length))+1; } qarray[item]=count; count = count+1; }

18

Kuis

// Set variabel game getquestion = false; total_questions = 15; currentq = 1; pertanyaan = false; num_questions = 10; level1_limit = 50; level2_limit = 70; level3_limit = 90; knowledge_factor = 20; stop (); 4. Pada frame 3 buat buat label “Get question” dan script sebagai berikut: if (gamelevel eq “sedang”) { levelselector.gotoAndStop (2); } if (gamelevel eq “lanjut”) { levelselector.gotoAndStop (3); } stop (); 5. Pada frame 4 buat label “playquiz” dan script sebagai berikut: if (pertanyaan == true) { questionslate.play (); } else { timelimit = 0; time_meter.gotoAndStop (1); } 6. Pada frame 5 buat label “play”. 7. Pada frame 15 buat script sebagai berikut: if (getquestion == true) { timelimit = timelimit+1; time_meter.nextFrame (); } if (timelimit>=25) { gotoAndPlay (“salah”); } else { gotoAndPlay (“play”); }

19

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

8. Pada frame 16 buat script sebagai berikut: answera = a1; answerb = a2; answerc = a3; // Tentukan jawaban ..... test = random(100); if (gamelevel eq “dasar”) { limit = level1_limit; } if (gamelevel eq “sedang”) { limit = level2_limit; } if (gamelevel eq “lanjut”) { limit = level3_limit; } 9. Pada frame 17 buat label “pertanyaan” 10. Pada frame 24 buat script sebagai berikut: gotoAndPlay (2); 11. Pada frame 25 buat label “benar” 12. Pada frame 37 buat script sebagai berikut: gotoAndPlay (2); 13. Pada frame 44 buat script sebagai berikut: pertanyaan = false; getquestion = false; currentq = currentq+1; score = score+2; if (score>24) { score = 24; } gmeter.gotoAndStop (_root.score+1); if (currentq>num_questions) { gotoAndStop (“Quiz”, “Start Quiz”); } else { gotoAndPlay (“Get question”); }

20

Kuis

14. Pada frame 45 buat label “salah” 15. Pada frame 66 buat script sebagai berikut: gotoAndPlay (2);

Mnggunakan button untuk menentukan jawaban Pembuatan button dan menggunakannya untuk menentukan pilihan jawaban, dapat dilakukan sebagai berikut: 1. Buat layer “PIlihan jawab”. Kemudian pada frame 4 drag symbol graphic “pilihan_jawab” serta button “jawab A”, “jawab B”, dan “jawab C”. 2. Buat script pada button “A” sebagai berikut: on (release) { if (getquestion == true) { if (ca == 1) { gotoAndPlay ("benar"); score=score+2; } else { gotoAndPlay ("salah"); score=score-1; } } }

Gambar 6.23 Tampilan movie kuis bila movie dijalankan

21

MULTIMEDIA I - PENGANTAR - MULTIMEDIA

Script pada button “B” sebagai berikut: on (release) { if (getquestion == true) { if (ca == 2) { gotoAndPlay ("benar"); score=score+2; } else { gotoAndPlay ("salah"); score=score-1; } } } Script pada button “C” sebagai berikut: on (release) { if (getquestion == true) { if (ca == 3) { gotoAndPlay ("benar"); score=score+2; } else { gotoAndPlay ("salah"); score=score-1; } } } 3. Simpan file dengan nama kuis.fla. ol —> Test Movie untuk melihat hasilnya. 4. Pilih Contr Control

22