PEMBUATAN GAME CARD PUZZLE


Open Construc 3
1. Buat project baru terlebih dahulu. Klik File > New > New Empty HD Landscape 720p project > Open.
Dalam tutorial ini akan menggunakan ukuran HD karena sudah menggunakan resolusi berukuran 1280x720. Resolusi ini digunakan agar permainan kita nantinya bisa support di berbagai ukuran layar smartphone Tizen.
Info: Device Tizen memiliki 2 ukuran resolusi. Tizen Z1 dan Z2 memiliki resolusi 800x480 pixel sedangkan Tizen Z3 dan Tizen Z4 memiliki resolusi 1280x720 pixel.


2. Tambahkan object Kartu, Klik kanan pada layout > Pilih Insert new object > Pilih Sprite > Beri nama Kartu. Lalu import ke-enam gambar itu  dengan Klik kanan pada Animation frames > Import frames > From files > select semua kartu.

3. Atur setting parameter "Animation Speed"  pada Animation Default menjadi 0.
Langkah ini bertujuan, ketika game dijalankan maka kartu tidak secara otomatis terbuka.

 Kemudian susun Kartu dengan cara salin (CTRL + C) pada kartu dan paste (CTRL + V) di posisi yang berbeda.

4. Kemudian susunlah seperti dibawah ini:
Untuk menambahkan "instance variable", pilih objectnya yang akan diberikan, lalu pada bagian Object "Properties", tepat di atas Behaviors, terdapat tulisan Instance variables, klik link tersebut.

5. Lalu tekan icon tambah “+” kemudian berikan nama variablenya dengan warna dan Type Number. lalu tekan OK.

6. tambahkan instance variable dengan Nama  buka dan type Number.
Maka hasilnya:
7. Berikutnya tambahkan beberapa "global variable" di "Event sheet 1" yang nanti akan digunakan pada materi selanjutnya. (Klik kanan pada Event sheet > pilih Add global variable)
·      acak, Number, 0 (menyimpan nilai sementara)
·      tahap, Number, 0 (0:Pilih kartu pertama, 1: Pilih kartu kedua, 2: Bandingkan kartu)
·      score, Number, 0 (keterangan nilai)
·      bukaKartu1, Number, 0 (menyimpan id kartu pertama yang dibuka)
·      bukaKartu2, Number, 0 (menyimpan id kartu kedua yang dibuka)
·      mulaiGame, Number, 0 (0:awal permaian, 1: pemainan dimulai, 2: permainan selesai)
Atau ikuti langkah berikut ini:
Sehingga tampilan di Event sheet 1 sebagai berikut:

Membuat Fungsi Pengacakan

Array digunakan untuk menyimpan sekumpulan nilai. Nanti akan digunakan untuk menyimpan daftar kartu yang akan dimunculkan.

8. Tambahkan object Array dengan nama “DaftarKartu” (Klik kanan di layout > pilih Add new object)

9. Buka kembali Event sheet 1. Kemudian tambahkan event sebagai berikut:
Condition:
·      System > On start of layout
Action:
·      DaftarKartu > Set size > Width: 10, Height: 1, Depth: 1
·      DaftarKartu > Set at X > X: 0, Value:
·      DaftarKartu > Set at X > X: 1, Value: 1
·      DaftarKartu > Set at X > X: 2, Value: 2
·      DaftarKartu > Set at X > X: 3, Value: 2
·      DaftarKartu > Set at X > X: 4, Value: 3
·      DaftarKartu > Set at X > X: 5, Value: 3
·      DaftarKartu > Set at X > X: 6, Value: 4
·      DaftarKartu > Set at X > X: 7, Value: 4
·      DaftarKartu > Set at X > X: 8, Value: 5
·      DaftarKartu > Set at X > X: 9, Value: 5
Maka hasilnya:
Karena kartu hanya berjumlah 10 dan jenis kartu ada 5. Maka setiap jenis kartu dipanggil 2 kali.

10. Untuk memberikan nilai acak pada warna kartu, maka perlu melakukan pengulangan sebanyak jumlah kartu dengan menambahkan sub-event pada baris  1 (System On start of layout) dengan ketentuan sebagai
Sub event(dari baris 1) - Condition:
·      System > For > Name: “SetWarnaKartu”, Start: 9, End: 0
Maka hasilnya:

Melakukan pengulangan dari 9 ke 0 karena nanti akan digunakan untuk pengambilan kartu dengan sistem acak dari 9 kartu, kemudian setelah didapat 1 kartu kemudian melakukan lagi dengan sisa 8 kartu, dan seterusnya sampai kartu habis. Jumlah sisa kartu didapat dari nilai loopindex. Pastikan event diatas merupakan sub event dari System On start of layout.

11. Kemudian melakukan pemberian kode warna pada kartu. Sehingga tambahkan Sub event pada  System for “SetWarnaKartu” from 9 to 0.
Sub action(2) - Condition
·      System > Pick nth instance > Object: Kartu
                                                                              Instance: loopindex
Action:
·      System > Set value > Variable: acak
                                                             Value: int(random(0,loopindex+1))
·      Kartu > Set value > Instance variable: warna
                                                          Value: DaftarKartu.At(acak)
·      DaftarKartu > Delete > Index: acak, Axis: X

Maka hasilnya:
Keterangan:
·      Pick Kartu instance looping adalah Kondisi pengambilan kartu dari kartu ke 9 sampai kartu ke 0.
·      System Set acak to int(random(0, loopindex + 1)), membuat nilai acak yang nantinya dijadikan nilai index pada DaftarKartu yang nanti keluar dengan mengambil nilai acak dari 0 sampai maksimal 10. Maksimal nilai 10 tersebut nanti akan didapat nilai maksimal 9,99 dan kemudian akan di bulatkan oleh fungsi int menjadi 9 sehingga didapat pengacakan kartu dari 0 sampai 9.
·      Kartu Set warna to DaftarKartu.At(acak), dari nilai acak didapat maka akan digunakan untuk mengambil warna/jenis kartu dari id kartu 1 sampai 5.
·       DaftarKartu Delete index acak from X axis, Setelah id warna kartu sudah didapat maka daftar kartu yang digunakan dihapus supaya tidak digunakan kembali.

Sekarang Anda dapat lihat kode warna pada masing masing kartu.
Hasilnya setiap kartu memiliki id warna yang berbeda. Jika hasil tidak seperti di atas, cek kembali pada event no. 2 dan pastikan itu merupakan sub event dari event no.1

Membuat Fungsi Kartu Dibuka

Kemudian logika permainan pencocokan kartu ada 3 tahap. Yang pertama, membuka salah satu kartu. Kemudian yang kedua, membuka kartu yang kedua. Lalu yang tahap yang ketiga mencocokan kedua kartu yang telah dibuka. Jika kartunya sama maka akan hilang, jika kartunya berbeda maka akan menutup kembali. Setelah itu kembali ke tahap pertama lagi.


12. Sebelumnya Anda sudah menambahkan Instance variable buka pada kartu seperti di bawah ini:
Instance Variable buka tersebut berfungsi untuk memberi indentitas jika bernilai 0 maka kartu dalam keadaan tertutup dan jika buka bernilai 1 maka kartu dalam keadaan terbuka.

13. Karena untuk membuka kartu memerlukan object Touch, maka buka Layout 1 kemudian tambahkan Object Touch dengan klik kanan pada layout > pilih Insert new object > Pilih Touch > Klik Insert.

14. Kemudian buka event sheet 1,  lalu tambahkan event sheet sebagai berikut:
Condition:
·      System > Compare variable > Variable: tahap, Comparison: Equal to, Value: 0
Hasilnya sebagai berikut:
Keterangan:
·      Tahap = 0, kondisi pada saat akan membuka kartu yang pertama.

15. Tambahkan sub event pada baris ke 4,  yaitu pada kondisi System tahap = 0. Maka eventnya sebagai berikut:
Sub event(4) - Condition:
·      Touch > On touched object > Object: Kartu
Maka hasilnya:
Keterangan:
·      Touch On touched Kartu, Merupakan sub event dari System tahap = 0, yang berfungsi ketika salah satu kartu dibuka dengan di sentuh/di klik akan menjalankan actionnya.

16. Tambahkan sub event pada baris event ke 5, yaitu pada kondisi Touch On touch Kartu, maka eventnya sebagai berikut:
Sub event(5) - Condition:
·      Kartu > Compare instance variable > Instance variable: buka
          Comparison: Equal to Value: 0
Event:
·      System > Set value > Variable: bukaKartu1, Value: Kartu.warna
·      Kartu > Set value > Instance variable: buka, Value: 1
·      Kartu  > Set frame > Frame number: Kartu.warna
·      System > Set value > Variable: tahap, Value: 1
Maka hasilnya:
Keterangan:
·      Kartu buka=0, memastikan kartu yang akan dibuka itu dalam keadaan tertutup (0=tertutup)
·      Set bukaKartu1 to Kartu.warna, menyimpan warna yang terpilih pada kartu pertama
·      Set buka to 1, memberi tanda pada kartu jika kartu tersebut sudah dibuka (1=buka)
·      Set animation frame to Kartu.warna, mengganti gambar kartu yang sesuai dengan id warnanya
·      Set tahap to 1, melanjutkan tahap selanjutnya yaitu memilih kartu ke dua

17. Salinlah pada event 4,5 dan 6 menjadi event baru dengan copy paste (Ctrl+C dan Ctrl+V) kemudian ubahlah event tersebut sebagai berikut:
·      ( Pada baris no. 7) System tahap = 0 menjadi  System tahap = 1
·      ( Pada baris no. 9) System Set bukaKartu1 to Kartu.warna menjadi System Set bukaKartu2 to Kartu.warna
·      ( Pada baris no. 9) System Set tahap to 1 menjadi System Set tahap to 2
·      Maka hasilnya:
Event di atas kondisi ketika memilih kartu yang kedua.

18.  Tambahkan event baru untuk membandingkan kedua kartu, sebagai berikut:
Condition:
·      System > Compare variable > Variable: tahap
                                                              Comparison: Equal to
                                                              Value: 2
Maka hasilnya:
Ketarangan:
·      System tahap = 2 adalah kondisi untuk mencocokkan kedua kartu yang telah terpilih

19. Tambahkan sub-event pada bari ke 10. Event tersebut sebagai berikut:
Sub event(10) - Condition:
·      System > Compare variable > Variable: bukaKartu1
                          Comparison: Equal to Value: bukaKartu2
·      Kartu > Compare instance variable > Instance variable: buka  Comparison: Equal to Value: 1
·      System > Trigger once while true
Action:
·      System > Wait > Seconds: 0.5
·      Kartu > Destroy










Maka hasilnya:
Keterangan:
·      System bukaKartu = bukaKartu2, Memastikan id warna kedua kartu adalah sama
·      Kartu buka = 1, Memastikan kartu yang akan diproses adalah kartu yang telah terbuka.
·      System Trigger once, Memastikan kondisi ini dijalankan cukup sekali
·      System Wait 0.5 seconds, memberi waktu untuk kartu tetap terbuka selama 0.5 detik
·      Kartu Destroy, Kedua kartu yang sedang dibuka kemudian dihapus/di-destroy
·      System Add 25 to score, memberi nilai 25 point karena kartu yang dipilih benar
·      System Set tahap to 0, kembali ke tahap awal yaitu untuk mengambil/membuka kartu baru

20. Salinlah baris no. 11 menjadi sub event baru dari System tahap = 2. Maka sub eventnya sebagai berikut:
·      (Pada baris event ke 12) ubah dari System bukaKartu1 = bukaKartu2 menjadi System bukaKartu1 != bukaKartu2
·      (Pada baris event ke 12) Hilangkan action Kartu Destroy
·      (Pada baris event ke 12) System Add 25 to score  menjadi System Subtract 5 from score
Maka hasilnya:

21. Kemudian tambahkan action baru untuk mengembalikan kondisi kartu kembali tertutup. Dengan Menambahkan action baru pada baris no. 12 sebagai berikut:
Action:
·      Kartu > Set value > Instance variable: buka, Value: 0
·      Kartu > Set frame > Frame Number >0
Maka hasilnya:
Keterangan:
·      Kartu Set buka to 0, mengembalikan nilai status kartu menjadi tertutup kembali (0: tertutup, 1: terbuka)
·      Kartu Set animation frame to 0, Mengembalikan tampilkan kartu yang semua terbuka kemudian menjadi tampilan tertutup kembali.

Seluruh Event Sheet 1 sebagai berikut:

Ketika dijalankan hasilnya sebagai berikut:

Menampilkan Score 

Score untuk menampilkan Nilai sedang diperoleh sedangkan Highscore untuk menampilkan nilai tertinggi setelah beberapa kali bermain. Untuk menambahkan sistem highscore, yang diperlukan hanya perbandingan antara Highscore dan Score. Jika nilai Score lebih tinggi dari pada nilai Highscore  maka sistem akan langsung menerapkan nilai Highscore berdasarkan nilai yang ada pada Score. Jika tidak maka sistem tidak akan menggantikan nilai Highscore tersebut.

22. Buka Layout 1, masukkan Object Text dengan nama TextScore (klik kanan pada layout > Pilih Insert new object > Pilih Text > Beri nama TextScore > Klik Insert)

23. Kemudian atur posisi object text tersebut pada layout dan atur properties object TextScore sebagai berikut:

24. Buka kembali Event sheet, kemudian tambahkan action untuk menampilkan score ketika melakukan penambahan atau pengurangan score.
Action:
·      TextScore > Set text > Text: score
Maka hasilnya:
·      TextScore -> Set text to score, menampilkan nilai score sebagai text dan pastikan setelah penambahan /pengurangan nilai variable score

Ketika dijalankan hasilnya sebagai berikut:

Membuat Timer

Setelah menampilkan score, sekarang Anda akan membuat kondisi Timer, dimana timer ini akan menentukan apakah permainannya telah usai atau masih berjalan.

25. Buka kembali Layout, lalu tambahkan objek "Tiled Background" dan beri nama "Timer".

26Selanjutnya ubah posisi object  "Timer" itu hingga tepat di atas Score. Agar score dapat terlihat maka klik kanan pada objek Timer > pilih Z Order > klik Send to bottom of layer.

27. Tambahkan condition baru pada Tahap 0, Tahap 1 dan Tahap 2. Dengan condition sebagai berikut:
Condition:
·      System > Compare variable > Variable: mulaiGame Comparison: Equal to Value: 2
(Kemudian di Invertkan dengan cara, Klik kanan > Pilih Invert)
Maka hasilnya:
Keterangan:
·      mulaiGame = 0, ketika diam
·      mulaiGame = 1, ketika game berjalan
·      mulaiGame = 2, ketika game berakhir

28. Kemudian ketika klik pertama kali kartu dibuka maka timer akan berjalan yang menandakan permainan dimulai, maka tambahkan action pada membuka kartu pada saat tahap = 0.
Action:
·      System > Set value > Variable: mulaiGame, Value: 1
Maka hasilnya:
System Set mulaiGame to 1, Ketika kartu dipilih maka game dimulai.

29. Kemudian selanjutnya memberikan event untuk memastikan permainan masih sedang berlangsung sehingga  tambahkan event sebagai berikut:
Condition:
·      System > Compare variable > Variable: mulaiGame Comparison: Equal to Value: 1
Maka hasilnya:

30. Membuat waktu berjalan setiap 0.3 detik sekali untuk Tambahkan sub-event  dari baris no. 13. Eventnya sebagai berikut:
Sub event(13) - Condition:
·      System > Every X seconds > Interval: 0.3
Action:
·      Timer > Set width > Width: Self.Width - 18
Maka hasilnya:
Maka setiap 0.3 detik, pada Lebar object Timer dikurangi 18 pixel.

31. Tambahkan sub-event  pada baris 13 untuk menangkap kondisi ketika waktu permainan habis. Eventnya sebagai berikut:
Sub event(13) - Condition:
Condition:
·      Timer > Compare width > Comparison: Less or equal, Width: 0
Action:
·      System > Set variable > variable: mulaiGame, value: 2
·      System > Wait > Seconds: 2
·      System > Restart layout
Maka hasilnya:
Keterangan:
·      Timer Width <= 0, Ketika panjang object Timer sama dengan 0 (Waktu habis)
·      System Set mulaiGame to 2, Permainan berhenti atau selesai
·      System Wait 2 seconds, tunggu selama 2 detik untuk melanjutkan langkah selanjutnya.
·      Restart layout, mengatur ulang layout termasuk object-object didalam game tetapi tidak termasuk variable.

32.Tambakan sub-event  pada baris 13  untuk memberikan kondisi ketika permainan selesai sebelum waktu habis, maka tambahkan event seperti berikut:
Sub event(13) - Condition:
·      System > Compare two values > First value: Kartu.Count Comparison: Equal to Second value: 0
Action:
·      System > Set value > variable: mulaiGame, value: 2
·      System > Wait > Seconds: 2
·      System > Restart layout
Maka hasilnya:
Count berfungsi sebagai expression untuk mengecek berapa total objek dimaksud yang masih ada di dalam layout.
Sehingga ketika condition Kartu.Count = 0 digunakan, maka artinya sistem mengecek apakah benar bahwa objek Kartu yang ada di dalam layout sudah 0 / tidak ada lagi, bila iya, maka sistem akan melanjutkan pada aksi/tujuan berikutnya.
Note : Expression Count hanya dapat digunakan pada objek yang menggunakan action Destroy, dan tidak dapat digunakan pada objek yang menggunakan action Visible/Invisible,Transparent/Opaque.

33. Kemudian supaya kondisi seperti semula ketika mengulang permainan, maka perlu ditambahkan action sebagai berikut:
Cari Condition:
·      System > On start of layout
Tambahkan Action paling atas:
·      System > Set value > Variable: mulaiGame, Value: 0
·      System > Set value > Variable: score, Value: 0
·      System > Set value > Variable: tahap, Value: 0
Maka hasilnya:
Keterangan:
·      System Set mulaiGame to 0, dimana kondisi timer belum berjalan
·      System Set score to 0, mengatur score kembali 0 karena permainan baru
·      System Set tahap to 0, memulai lagi untuk membuka kartu pertama

34. Ketika dijalankan hasilnya sebagai berikut:

Menambahkan Kondisi Game Over

Sebelumnya sudah membuat Text untuk Game Over. Sekarang kita akan membuat fungsi kondisi pengecekan apakah permainannya memang benar sudah selesai karena waktu habis atau permainannya selesai karena semua kartunya benar sudah tidak ada lagi.

35. Pada event sheet, tambahkan action  baru pada System > On start of layout seperti berikut:
Tambahkan aksi:
System > Set layer visible > Layer: 1, Visibility: Invisible
System >  Set layer opacity  > Layer: 0, Opacity: 100.
Maka hasilnya:
Keterangan: Layer 1 merupakan layer gameover, sehingga pertama kali harus Invisible (tidak ditampilkan) dan pada layer 0 pastikan jelas dengan memberi nilai opacity 100.

36. Kemudian pada bagian kondisi waktu permainan habis pada event mulaiGame = 1 dan Timer width <= 0, maka sebelum action Wait 2 seconds tambahkan action sebagai berikut:
Action:
·      TextGameover > Set text > Text:  “YOU LOSE!” 
·      System > Set layer visible > Layer: 1, Visibility: Visible
·      System >  Set layer opacity  > Layer: 0, Opacity: 40.
Maka hasilnya:
Keterangan:
·      TextGameover Set text to “YOU LOSE!”, menampilkan text  “YOU LOSE!” pada object TextGameover.
·      System Set layer 1 Visible, Memunculkan layer yang terdapat Font Gameover
·      System Set layer 0 opacity to 40, membuat layer pada gameplay menjadi gelap sebanyak 60% (semakin kecil nilainya semakin gelap).

37. Selanjutnya pada bagian kondisi permainan selesai pada event mulaiGame = 1 dan Kartu.Count = 0, maka sebelum action Wait 2 seconds tambahkan action sebagai berikut:
Action:
·      TextGameover > Set text > Text:  “YOU WIN!” 
·      System > Set layer visible > Layer: 1, Visibility: Visible
·      System >  Set layer opacity  > Layer: 0, Opacity: 40
Maka hasilnya:
38. Tambahkan background Select Layer 0 pada Kolom Layer dan pastikan Anda sudah membuka gembok, agar dapat mengedit Sprite yang akan ditambahkan.

39. Buka Layout 1, kemudian menambahkan Sprite baru dan beri Nama Background. (Klik kanan pada Layout > Pilih Insert new object)

40. Masukkan gambar dengan klik icon Folder tebuka dan cari file Background.png dari berkas yang sudah diunduh.

41. Kemudian atur posisi object Background dengan mengatur nilai Position menjadi 640,360 

42. Atur kedalaman object Background dengan klik Kanan pada object Background > Pilih Z Order > Pilih Send to buttom of layer.

Sehingga tampilannya sebagai berikut:

Export ke HTML5

Melakukan export game Card Match ke HTML5, langkah-langkahnya sebagai berikut:
43. Ubah dulu ukuran layoutnya menjadi 1280x720 agar lebih rapi, karena Anda sudah selesai membuat permainannya. Lalu pada bagian layout properties, ubah Unbounded Scrolling menjadi Yes.

44. Kemudian klik View pada project properties, isi semua kolom keterangan yang ada pada About, serta ubah first layout menjadi Layout 1, dan ubah pula Configuration settingnya sesuai dengan gambar berikut:



45. Kemudian export ke html5 dengan cara klik menu Fille > pilih Export project.. > lalu pilih HTML5.
SELESAI

Cara penggunaan game:
1.      Buka folder Card Puzzle
2.      Klik kanan pada file Index.html
3.      Pilih buka dengan Browser Firefox
4.      Jika ada notifikasi klik OK

Komentar

Postingan Populer