RSS
email

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

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.


Bookmark and Share

2 komentar:

Anugrah Nur Permatasari mengatakan...

assalamu'alaikum...
Pak, script di sprite spButtons nya ada masalah.. kira2 apa yg mesti saya perbaiki..?
terima kasih

Anugrah Nur Permatasari mengatakan...

Pak, masalah script di spButtons telah terdeteksi. tetapi di file swf nya ketika jadi belum bisa dimainkan. sprite move keberadaanny masih ada di puzzle, sehingga tidak ada ruang untuk perpindahan antar sprite...
solusi nya gimana Pak?
terima kasih

2 comments

Membuat Game Puzzle

Published on Sabtu, 16 April 2011 in

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.

Spread The Love, Share Our Article

Related Posts

2 Response to Membuat Game Puzzle

29 April 2012 pukul 13.39

assalamu'alaikum...
Pak, script di sprite spButtons nya ada masalah.. kira2 apa yg mesti saya perbaiki..?
terima kasih

29 April 2012 pukul 14.13

Pak, masalah script di spButtons telah terdeteksi. tetapi di file swf nya ketika jadi belum bisa dimainkan. sprite move keberadaanny masih ada di puzzle, sehingga tidak ada ruang untuk perpindahan antar sprite...
solusi nya gimana Pak?
terima kasih

 
offsetWidth); }