Membuat Game Puzzle

Game puzzle salah satu permainan yang dapat merangsang otak agar konsentrasi kita lebih baik. Beberapa waktu lalu teman kita, Bapak Anggi juga pernah membagikan tutorial mengenai pembuatan game puzzle dengan flash. Kesempatan kali ini, saya ingin berbagi tutorial yang sama tapi dengan menggunakan program swishmax. Simak yaa dan jangan lupa habis itu dipraktekkan supaya makin pintar.

Langkah 1

Pertama yang kita butuhkan dalam pembuatan game puzzle ini adalah gambar yang bisa dijadikan puzzle. Dalam hal ini gambar yang bisa dijadikan puzzle adalah gambar yang dapat dibagi 16 sama besar, misalkan : gambar ukuran 100 x 100 mm, maka 25 mm x 25 mm tiap bagiannya. Gunakan Photoshop dengan menggunakan slice tool dan ruler agar ukuran tiap potongan slice tepat, dan simpan sebagai potongan gambar ( “Save for Web & Devices” dan Save “Images Only”.

Langkah 2

Setelah selesai dengan proses pemotongan gambar. Selanjutnya buka program SWiSHmax. Nah, disini kita tentukan ukuran luas Movie stage sebesar 200 x 300 pixel.

Langkah 3

Lanjutkan dengan memilih Panel Guides dan tentukan ukuran Vertikal dan Horizontalnya 50 x 50 lalu aktifkan panel Guides GRID dan SNAP TO GRID yang dapat membantu kita membuat puzzle dengan posisi yang tepat (kesalahan dalam penentuan posisi gambar akan menyebabkan kegagalan dalam membuat puzzle).

Langkah 4

Setelah semua setting di atas dilakukan, masukkan semua gambar yang telah dipotong ke dalam SWiSHmax dan atur semua gambar pada posisinya masing-masing. Nah, salah satu yang terpenting sebelum menyusun gambar, pastikan semua gambar memiliki posisi “Anchor Point di Top Left” lalu letakkan gambar dengan menyesuaikan “posisi dan besar gambar.”

Langkah 5

Convert semua gambar menjadi Sprite dan beri nama semua sprite tersebut Sprite1, Sprite 2, Sprite3, dan seterusnya sampai Sprite15. Gambar ke-16 akan dibuat jadi salah satu gambar flexible yang dapat digerakkan nantinya. Beri nama “Move.”

Langkah 6

Lanjutkan dengan membuat Puzzle Control. Mulailah dengan membuat Button Control : btnUp, btnDown, btnLeft, dan btnRight sesuai dengan posisi masing-masing disekitar “Sprite Move,” dan beri tanda centang pada “Target” setiap Button Control. Selesaikan dengan menggabungkan /Group as Sprite semua tombol dan “Sprite Move” menjadi sebuah Sprite dan beri nama Sprite tersebut menjadi “spButtons.”

Langkah 7

Di sini kita akan membuat Masking agar hanya area gambar puzzle saja yang menjadi area permainan game puzzle. Buat “Rectangle Shape” sebesar area/luas gambar yang akan dijadikan puzzle dan beri nama Mask. Group sprite ”spButtons” dengan shape “Mask” menjadi sebuah sprite dan beri nama “spButtonArea” (pastikan posisi shape “Mask” berada di posisi paling bawah) dan beri tanda centang pada “Use bottom object as mask” pada sprite tersebut.

Langkah 8

Jika sudah sampai dengan tahap di atas maka Design puzzle telah selesai. Ada baiknya pada bagian shape “Control Button” warna buttonnya di perkecil alphanya sampai dengan 40 % sehingga warna button tidak menghalangi gambar puzzle nantinya. Sisanya memberikan script pada setiap “Control Button” dan sprite “spButtons”

Pada tiap Control Button masukkan script :

on (release) {
fn_Move”arah tombol”();
}

Contoh :

Pada button kiri/btnLeft masukkan script :

on (release) {
fn_MoveLeft();
}

Dan pada sprite spButtons masukkan script:

function fn_MoveLeft() {
PieceMoved = "N";
TMP_COUNTER = 1;
while (PieceMoved == "N" ) {
if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnLeft._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnLeft._y + this._y)) {
("_parent._parent.Sprite"+TMP_COUNTER)._x += 50;
PieceMoved = "Y";
this._x -= 50;
} else {
TMP_COUNTER += 1;
}
}
}
function fn_MoveRight() {
PieceMoved = "N";
TMP_COUNTER = 1;
while (PieceMoved == "N" ) {
if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnRight._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnRight._y + this._y)) {
("_parent._parent.Sprite"+TMP_COUNTER)._x -= 50;
PieceMoved = "Y";
this._x += 50;
} else {
TMP_COUNTER += 1;
strong>}
}
}
function fn_MoveUp() {
PieceMoved = "N";
TMP_COUNTER = 1;
while (PieceMoved == "N" ) {
if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnUp._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnUp._y + this._y)) {
("_parent._parent.Sprite"+TMP_COUNTER)._y += 50;
PieceMoved = "Y";
this._y -= 50;
} else {
TMP_COUNTER += 1;
}
}
}
function fn_MoveDown() {
PieceMoved = "N";
TMP_COUNTER = 1;
while (PieceMoved == "N" ) {
if (("_parent._parent.Sprite"+TMP_COUNTER)._x == (btnDown._x + this._x) && ("_parent._parent.Sprite"+TMP_COUNTER)._y == (btnDown._y + this._y)) {
("_parent._parent.Sprite"+TMP_COUNTER)._y -= 50;
PieceMoved = "Y";
this._y += 50;
} else {
TMP_COUNTER += 1;
}
}
}

Langkah 9

Nah, jika sudah sampai pada tahap ini, maka setting desain dan script puzzle telah selesai dan siap dicoba. Agar menjadi sebuah puzzle dari awal, maka acaklah gambarnya. Selebihnya percantik tampilan puzzle.

Langkah 10

Selesai dan siap dimainkan. Jangan lupa disimpan hasil kerja kalian.