July 13, 2024

Membuat Game Puzzle dengan SwishMax

3 min read

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”.

clip_image002

clip_image004

clip_image005

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.

clip_image006

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).

gmbr

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.”

clip_image013

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.”

clip_image014

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.

clip_image016

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.

clip_image017

Langkah 10

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

0 thoughts on “Membuat Game Puzzle dengan SwishMax

  1. pas aku run.. koq ga tau ya kpn selesainya neh games… :amazed: ntah itu “selamat anda betul” atau “selamat anda dapat kaus cantik” atau next levelnya muncul.. atau msh perlu pengembangan ya.. :Yb .. selamat ya.. dikembangkan lg.. muantepp !!! :thumbup:

  2. pak alangke susah mainnyo dak selesai2 dri tdi mainkenyo…
    😎
    penasaraan gan..
    :Yb
    dak yng sudah berhasil lum mainkenyo…

    siip mantap pak gamenyo…
    :ngakaks
    lanjutkan :tabrakan:

  3. waw keren banget neh gem, selamat mas terry andalah orang pertama yang membuat gem di swish max…anda layak dapat bintang…

    bener kato ussok kapan kelar na maen gem ini…

    kalau diperhatike script itu…cak na pernah kenal deh dak di swishzone ndak tu di pixel2life…

    hmmm…ntar ane coba cari tau neh penjelasan skrip na

  4. 🙁 yah, begitulah… namanya juga masih game experiment (Kalau gambarnya udah pas seperti gambar contoh, oke deh sudah selesai gamenya… rencananya mo di buat seperti itu) :nohope: . Harap maklum, masih butuh penelitian lebih lanjut, terima kasih semuanya telah memberikan komentarnya. :thumbup:

  5. wew, keren plus mantap tombol mulainya…om request…
    gmana kalau pake drag be…jd qt bsa tata sndri..tarik tarik gituuuu….slnya dr td dag slsai-slsai lari2 trus… :Peace:

  6. Mangstap gan, teknik puzzle yang berbeda.. tapi apa perasaan saya aja ya? klak klik dari tadi kok cuma objek yang sama aja yang bisa berpindah..

  7. Pak.. saya sudah ikutin semua petunjuknya.. tapi koq gak bisa di mainkan yah puzzle nya? ketika saya jalankan file.swf nya sprite move ny masih tampak, sehingga tidak ada ruang utk perpindahan antar sprite..
    mohon pencerahan.
    terima kasih

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.