Jigsaw adalah jenis game puzzle yang cukup populer dan mudah untuk dimainkan. Cara bermainnya adalah dengan menyusun potongan gambar ke posisi yang tepat sehingga menjadi bentuk gambar utuh. Permainan ini cukup menarik dan tidak membosankan serta dapat melatih otak kita untuk berfikir. Game ini juga banyak disukai oleh perempuan dan anak-anak.
Level: INTERMEDIATE
Game ini menggunakan beberapa fungsi advance dan diharapkan pembaca sudah memiliki kemampuan dasar Game Maker Language.
- Pembuatan potongan puzzle dari gambar utuh.
- Pembuatan progress bar puzzle yang benar.
- Pembuatan fungsi mengurutkan puzzle satu per satu.
- Penggunaan fungsi data struktur.
- Penggunaan fungsi Instance.
Tutorial yang akan saya berikan yaitu berupa game Puzzle Swap atau menukarkan potongan satu dengan potongan lainnya dengan jumlah potongan puzzle 36 buah (6 X 6). Oke! tanpa basa-basi lagi, mari kita langsung membuat game ini!
Persiapan asset game.
Untuk gambar puzzle sprite, saya menggunakan gambar dengan ukuran 480 X 480. Kalian bisa menggunakan gambar apa saja asalkan ukurannya sama.
Kita juga memerlukan 2 sebuah Sprite lagi. untuk menandai potongan puzzle yang sedang aktif nanti dan juga sebagai mask yang akan digunakan pada object potongan puzzle. Ukurannya adalah 80 X 80 (480 / 6) pixel.
Masukkan semua resource game.
Masukkan sprite-sprite tadi dengan origin 0, 0 dan namakan seperti tampak pada gambar berikut.
Pembuatan object untuk mengontrol game.
Setelah kita membuat atau meng-import sprite - sprite tadi, sekarang kita akan membuat object yang berguna untuk mengontrol jalannya game. Pilih menu Resources > Create Object. Kemudian beri nama object obj_control. Tambahkan event Create, isikan code berikut.
Create
data_puzzle = ds_list_create();
//Menambahkan value ke data_puzzle
for(i=0;i<36;i++){
ds_list_add(data_puzzle, i);
}
//Mengacak data_puzzle
randomize();
ds_list_shuffle(data_puzzle);
//Memunculkan obj_puzzle dan mengatur property-nya
for(i=0;i<36;i++){
puzzle = instance_create(160 + i mod 6 * 80, i div 6 * 80, obj_puzzle);
puzzle.goal_index = data_puzzle[| i];
puzzle.cur_index = i;
}
global.progress = 0;
menang = false;
}
Pembuatan object untuk potongan puzzle.
Pilih menu Resources > Create Object. Kemudian beri nama object obj_puzzle. Atur sprite-nya ke spr_mask. Tambahkan event-event, dan code seperti berikut ini.
EVENT CREATE
Create
goal_index = 0; //Posisi index yang benar
cur_index = 0; //Posisi index saat ini
selected = false;
EVENT STEP
Step
if(position_meeting(mouse_x, mouse_y, self)){
if(mouse_check_button_pressed(mb_left)){
selected = !selected;
}
}
else{
if(mouse_check_button_released(mb_left) && selected){
if(!position_empty(mouse_x, mouse_y)){
sel_puzzle = instance_position(mouse_x, mouse_y, obj_puzzle);
if(sel_puzzle != id){
//Menukar data index
temp_goal_index = sel_puzzle.goal_index;
sel_puzzle.goal_index = goal_index;
goal_index = temp_goal_index;
object_index.selected = false;
}
}
}
}
EVENT DRAW
Draw
draw_sprite_part(spr_puzzle, 0, goal_index mod 6 * 80, goal_index div 6 * 80, 80, 80, x, y);
draw_rectangle(x, y, x + 80, y + 80, true);
if(selected){
draw_sprite(spr_mark, 0, x, y);
}
Pembuatan room game.
Sekarang kita akan membuat room untuk game-nya. Pilih menu Resources > Create Room. Atur ukurannya menjadi 640 X 480. Terakhir masukkan obj_control ke dalam room tersebut.
Jalankan game untuk mengecek code telah berhasil.
Jalankan project game yang telah kita buat. Jika berhasil maka tampilannya akan tampak seperti gambar berikut.
Pembuatan script progress bar.
Game yang kita buat sudah hampir selesai, namun belum bisa mengecek jika puzzle telah selesai. Untuk mempermudah kita bisa membuat script baru yang berfungsi untuk menghitung berapa banyak posisi potongan puzzle yang benar. Pilih menu Resources > Create Script. Beri nama scr_progress_update. Lalu masukkan code berikut.
var temp_progress = 0;
for(i=0;i<instance_number(obj_puzzle);i++){
puzzle = instance_find(obj_puzzle, i);
if(puzzle.goal_index == puzzle.cur_index) temp_progress++;
}
global.progress = temp_progress;
Menambahkan fungsi obj_control untuk mengecek puzzle yang benar.
Buka kembali obj_control, lalu pada event Step tambahkan code berikut.
Step
scr_progress_update();
if(global.progress == 36 && menang == false){
alarm[0] = 8;
menang = true;
}
Kemudian untuk menampilkan pesan jika menang, masih pada obj_control, tambahkan event Alarm0 dan masukkan code sebagai berikut.
Alarm_0
pesan = show_question("Selamat kamu menang!#Mau maen lagi ?");
if(pesan) room_restart();
else game_end();
Menampilkan contoh gambar dan progress bar.
Contoh gambar puzzle digunakan untuk mempermudah pemain dalam menyelesaikan permainan. Buka kembali obj_control lalu tambahkan event Draw dan masukkan code sebagai berikut.
Draw
//Menampilkan gambar
draw_sprite_stretched(spr_puzzle, 0, 6, 16, 148, 148);
draw_rectangle(6, 16, 6 + 148, 16 + 148, true);
//Menampilkan progress bar
draw_text_colour(48, 178, "PROGRESS", c_silver, c_silver, c_silver, c_silver, 1);
draw_healthbar(6, 196, 6 + 148, 196 + 16, global.progress / 36 * 100, c_black, c_red, c_green, 0, true, true);
Untuk posisi koordinat, bisa kalian sesuaikan dengan keinginan masing-masing.
Membuat menu tambahan restart dan bantuan.
Sebagai catatan, menu ini hanyalah fitur tambahan untuk pengembangannya bisa kalian lakukan sendiri. Masih pada obj_control, tambahkan event-event berikut dan isikan dengan code berikut.
press R-key
room_restart();
press H-key
//Mencari goal_index yang posisinya belum tepat
//Dan menukar dengan potongan puzzle yang tepat
for(i=0;i<instance_number(obj_puzzle);i++){
search = instance_find(obj_puzzle, i);
if(search.goal_index != search.cur_index){
for(j=0;j<instance_number(obj_puzzle);j++){
replace = instance_find(obj_puzzle, j);
if(replace.cur_index == search.goal_index){
temp_goal_index = replace.goal_index;
replace.goal_index = search.goal_index;
search.goal_index = temp_goal_index;
break;
}
}
break;
}
}
Lakukan debugging untuk menguji keseluruhan sistem.
Jalankan project game yang telah kita buat. Silahkan pindahkan potongan puzzle dengan cara klik atau drag. Jalankan juga fitur yang telah kita buat tadi (restart dan bantuan).
Pengembangan sistem game.
Tutorial ini sangat sederhana baik tampilan maupun beberapa fitur. Kalian bisa menambahkan tombol atau tampilan GUI yang lebih bagus (dari pada menekan tombol keyboard).
Untuk pengembangan sistem puzzle, bisa kalian tambahkan pilihan gambar puzzle dengan menambahkan beberapa index pada sprite spr_puzzle dan mengubah argument pada obj_puzzle draw_sprite_part(spr_puzzle, index....
Unduh sampel game.
Demikianlah tutorial Membuat Game Puzzle Jigsaw ini. Saya mohon maaf jika ada salah-salah kata maupun code dalam tutorial kali ini. Jika ada saran atau pertanyaan, silahkan berkomentar. Jika kalian kesulitan, kalian bisa mengunduh file sample (source) dengan tombol di bawah ini.
Unduh Sample (.GMZ)