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: 1
·
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".
26. Selanjutnya
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
Posting Komentar