Tutorial membuat game edukasi sederhana

menggunakan Stencyl pada windows 7

Langkah langkahnya sebagai berikut :

Bila Program Stencyl telah terinstall pada windows 7 anda maka lakuakan instruksi berikut

Pada menu start kita cari aplikasi Stencyl yang sudah di install sebelumnya dengan
memasukan keyword “Stencyl” sesuai dengan petujuk ke 1 pada gambar diatas

Sesuai dengan Gambar diatas no ke 2 Setelah program di temukan, double klik icon stencyl untuk
membuka aplikasi Stancyl

Tunggu proses loading, sampai aplikasi stencyl terbuka

Setelah aplikasi stancyl terbuka maka tampilan awal pada menu game seperti yang ditunjukan pada gambar
diatas Namun, dalam gambar diatas kami mengunduh beberapa contoh game sebagai bahan ajar

Klik pada kotak yang ditunjukan pada gambar diatas Untuk membuat game baru

Ket: Untuk tampilan awal game yang disediakan oleh developer game stencyl hanya menyediakan tipe
game berupa blank game saja, karena pada tutorial ini penulis akan menggunakan tipe crash course maka
kita harus mendownload tamplate atau kit crash course yang tersedia di internet

Untuk mendownload tamplate kit yang diinginkan kita dapat mengunduh tamplete gratis dengan mengklik
sub menu Sample game pada side bar seperti tampak pada gambar diatas kemudian jika kita terhubung ke
internet kita akan diarahkan pada webpage stencyl, dimana seperti yang di tunjukan pada gambar yang
akan di terangkan di bawah, kita dapat men-download kit atau template serta sample game yang diingikan.
Cara lainnya adalah kita dapat mengunduh kit dengan menggunakan mesin pencari di laman google, di sini
kita hanya tinggal menuliskan keyword kit yang kita inginkan. Dalam hal ini penulis mengunduh tamplate
crash course yang penulis download menggunakan mesin pencari.

Lankah selanjutnya setelah kit di download seperti yang ditunjukan gambar dibawah, kemudian kita drag
file kit tersebut kesub menu kit yang ada pada sidebar stencyl).

Kembali melanjutkan tahapan pembuatan game seperti yang ditunjukan pada gambar yang telah di
tunjukan tadi, karena kit telah tersedia maka selanjutnya adalah klik tombol next.

Kemudian kita isi nama game yang akan di buat

Setelah mengisi Nama game yang akan dibuat, kemudian kita tentukan resolusi ukuran game yang akan di
buat (Gambar 2.12), dalam tutorial kali ini penulis menggunakan resolusi 640 px untuk Lebar (Width) dan
480 px untuk Tingginya (heigh).

1. Kemudian pilih tombol create

Munculah tampilan dasar game (Gambar 2.13), langkah pertama sebagai dasar pembuatan game tanpa
menggunakan coding ialah memahami fungsi icon yang berada pada side bar.

Hal pertama dalam membuat game adalah membuat scene atau tempat icon game bergerak
Pilih warna latar game di backround color didalam bar scene, pada tutorial ini penulis memilih  vartical
gradien untuk mendapatkan dua kombinasi warna dalam satu layar. Kemudian jika telah selesai klik
“create”

Dan muncul latar game yang siap untuk di kelola,

Langkah selanjutnya kita buat pijakan untuk objek seolah berjalan yaitu dengan cara

1. Pilih pijakan yang akan di gunakan

2. Klik lokasi tempat dimana pijakan akan di gunakan

Setelah pijakan di buat maka langkah selanjutnya adalah membuat objek atau animasi yang akan
memainkan peran, Caranya :

1. Klik “action” yang ada di samping tiles.

2. Pilih icon nya,
3. Letakan icon pemeran game di pojok awal mula permainan akan di mulai

Kemudian setelah itu, kita buat tulisan start sebagai home page game kita, caranya seperti tadi pas mau
buat pijakan.

Ini menandakan bahwa page ini awal mulai permainan.

Setelah selesai, kini kita akan menuju pada hal terpenting pada permainan yaitu bagaimana animasi itu
berjalan pada pijakan yang telah kita buat
Caranya :

1. Klik “Actors” sebelah tiles

2. Double klik pada animasi yang anda pilih sebagai pemeran utama dalam game

Maka akan muncul gambar dibawah,

Tunggu sampai muncul gambar dibawah

Pada gambar tersebut kita akan mulai coba memberikan gerakan pada animasi kita

Caranya :

1. Pilih “Walk Right”

2. Kemudian pilih “behaviour”
Maka akan muncul gambar di bawah , kemudian double klik pada gambar yang dilingkari

Maka akan muncul gambar dibawah, kemudian disana kita pilih “walking”

Maka setelah itu akan muncul gambar dibawah, disana kita akan menemukan “atribut” yang terdiri dari
move right key, left key dll… disana kita akan mengubah beberapa fungsi kontrol untuk menjalan animasi
yang kita telah buat tadi

Caranya cukup mudah

1. klik pada tabel yang ada tulisan no control dan ganti oleh anda jadi “right” sesuai nama perintah yg
dilaksanakan
2. begitu juga pada tabel berikutnya, klik tabel dan ganti “no control” dengan kata perintah yang akan
di lakukan jadi “left”
Lakukan hingga jadi seperti gambar di bawah ini

Setelah selesai, kita scrol kebawah untuk melanjutkan settingan, maka akan muncul gambar di bawah

Pada gambar diatas kita klik saja choose animation, kemudian akan muncul menu seperti gambar di
bawah, kemudian kita pilih gerakan animasi sesuai perintah

Begitupun dengan yang lainya, lakukan sehingga settingan selesai seperti pada gambar di bawah ini
Setelah settingan sama sperti gambar yg diatas maka selanjutnya kita akan menambahkan gerakan
tambahan ke animasi permainan kita agar lebih menarik

Caranya klik “add behaviour” yang ada di bawah ujung kiri maka kemudian akan ada menu chosse
behavior seperti gambar di bawah

Disini kita akan coba menambahkan gerakan untuk meloncat maka kita pilih di jumping double klik pada
jumping tersebut lakukan seperti gambar dibawah

Maka akan muncul gambar seperti ini

Setting table table diatas sesuai dengan perintah yang di ajukan hingga seperti gambar di bawah ini

Selanjutnya kita scrol untuk menyetting yang lainya..

Setting gambar yang dilingkari seperti hasil pada gambar di bawah ini..
Setelah kita menambah jumping sebagai tambahan gerakan untuk animasi kita, lebih menarik jikalau
waktu meloncat ada suara untuk mengiringi gerakan tersebut, supaya permainan lebih baik lagi, caranya
perhatikan gambar di bawah

1. kita masuk pada animasi kita yang telah kita berinama

2. jump sound klik tombol pilihan
3. pilih jump (untuk sound meloncat)

selesai, kembali aja

Maka selesai lah tambahan gerakan jumping  atau kita sebut juga dengan meloncat, tapi permainan tidak
akan menarik apa bila tidak ada rintangan atau penghalang untuk animasi kita, selanjutnya disini kita akan
mencoba untuk menambah gerakan atau rintangan buat animasi kita supaya game lebih menantang

sebelum kita memulai menambahkan gerakan atau tambahan dalam permainan ini alangkah baiknya kalo
kita mengetahui fungsinya supaya kita paham dan bisa untuk menjalankanya.

Gerakan tambahan “stomp on enemies” adalah gerakan seperti meloncat tapi berpungsi untuk mematikan
lawan dengan tinjakanya.

Cara untuk mensetting gerakan ini lebih jelasnya Perhatikan gambar berikut

Pertama caranya sama seperti tadi tinggal klik “add behaviour” kemudian disana kita pilih “Stomp om
enemies”

Setelah itu maka akan muncul gambar dibawah

Kemudian setelah muncul gambar klik properties

 

Maka akan muncul gambar seperti dibawah,

Kemudian klik “edit group”

Maka akan muncul gambar seperti dibawah,

Kemudian pilih create new

Setelah kita klik create new, maka disana akan ada menu seperti gampar di bawah ini,
pada menu name kita isi dengan kata “enimies”

Setelah itu klik “create”

Setelah itu maka akan muncul tampilan seperti di bawah..

Disitu kita klik pilih players dan tiles seperti pada gambar di bawah ini..

Kemudian close saja, maka akan kembali ke halaman sebelumnya, tapi disana langkah pertama kita ke
pilihan yang ada di sebelah edit group dan kedua kita pilih enimies
Setelah itu kita kembali ke menu behaviour, kemudian kita cari di “stompable group” enimies, bila tidak
ada maka kita remove dulu behaviour stomp on enemies

Setelah kita remove, kembali lagi kita klik “add behaviour kemudian pilih lagi “stomp on enimies”

Kemudian kita cari enimes di “stompable group” dan kalo udah ketemu langsung klik pilih dan jangan
lupa di menu “jump key” pilih UP

Penambahan gerakan jumping + meninjak musuh telah selesai, selanjutnya kita masuk lagi pada gerak
selanjutnya  untuk animasi kita yaitu di “Die in pit and reload”, gerakan ini fungsinya sebagai apa bila kita
gagal baik masuk jurang yang telah kita buat atau kena musuh maka permainan berakhir dan di ulang dari
awal,

Masuk ke langkahnya, ikuti hal hal berikut:

1. sama saja hal nya dengan yang lain, kita klik di “add behaviour”
2. trus setelah muncul menu kita pilih “Die in Pit Reload”
Maka akan muncul gambar di bawah

Setelah gambar di atas muncul maka close saja karna tidak ada settingan yang kita perlu atur di sana,
cukup mudahkan..

Selanjutnya setelah kita telah menambahkan “die in pit and reload” untuk animasi kita, langkah
selanjutnya adalah klik “game” yang ada di sebelah “noni” perhatikan gambar

Setelah gambar muncul, maka di menu game kita pilih physic, perhatikan gambar di bawah..
Di menu physic disana kita akan mendapati sebuah settingan yang mana itu berpengaruh pada animasi kita
untuk bergerak, baik untuk maju , mundur, ataupun jumping (meloncat)

#catatan: HAL INI WAJIB SETTING DI SETIAP SCENE

Lakukan settingan seperti gambar di bawah :

Setelah selesai, agar lebih menarik kita masukan sound atau music untuk menemani berjalanya game

Cara nya lakukan seperti gambar di bawah :

1. masuk dashbor
2. klik sound
3. klik “click here to a create new sound”

maka akan muncul gambar di bawah

 1. masukan nama buat sound yang akan di muat
2. klik “create”

setelah klik create maka akan muncul gambar di bawah

Setelah muncul gambar diatas, kita dapat lihat pada gambar pertama yang di lingkari, disana terlihat
gambar merah bertuliskan “mp3 is imported? (required for flash game)” serta dibawahnya juga sama ada
gambar merah dan tulisan, itu menandakan bahwa sound buat game belum ada,

Lalu kita liat kedua, disana ada dua tanda arah panah yang menunjukan artinya sebagai tempat sound di
upload atau disimpan sehingga sound game bisa berjalan, disana ada 2 tanda arah panah yang mana di
kedua arah panah itu memiliki format sound yang berbeda

Untuk itu kita harus mempersiapkan sound yang sama tapi tipe berbeda, contohnya perhatikan gambar
berikut :
Gambar (a) menunjukan tipe music bertipe mp3 dan gambar (b) menunjukan tipe music bertipe ogg

Untuk cara memasukan soundnya perhatikan gambar di bawah :

Perhatikan gambar “a dan b”, caranya drag sound yang telah disiapkan tadi sesuai dengan tipe soundnya

Maka sound untuk  halaman  permainan kita telah selesai, dan bila ingin menambah sound lakukan lagi
seperti hal tadi.

Selanjutnya kita masuk pada permainan level, pertama kita susun level pertama, sama halnya yang kita
perlu lakukan adalh menyiapkan tempat pijakan serta icon yang akan bergerak, perhatikan gambar contoh
di bawah

Caranya liat no diatas..

1. pilih “create new”

2. masukan nama dashbor contoh “level 1”
3. klik “create”

maka setelah itu muncul lah halaman buat permainan, perhatikan gambar di bawah:
Disitu kita kembali mengatur dari awal seperti halnya membuat dashbor atau halaman awal permainan

Contoh halaman level 1

Untuk membuat latar belakang, pijakan dan animasi utama dalam permainan, tidak jauh beda seperti
halnya saat kita membuat dashbor atau halaman awal utama game kita tadi, hanya yang membedakan
terdapat berupa lubang dan animasi lain yang berupa rintangan dan musuh animasi kita, yang mana apa
bila si animasi kita bila terjatuh, maka si animasi akan balik lagi ke awal pada level yang sama,sedangkan
bila si animasi kita kena pada musuh maka animasi kita akan terbang , untuk membuat lubangnya cukup
hanya lewati saat kita membuat pijakan, sedangkan untuk animasi musuhnya, perhatikan gambar berikut

1. klik “Actors” yang berada di samping tiles

2. double klik “clown” (animasi yang akan jadi musuh kita)

maka akan muncul gambar dibawah

Pada gambar diatas ada keterangan (a) itu artinya kita bisa menambahkan/mengupload animasi lain bila
kita punya untuk menjadi musuh animasi kita nantinya.

Untuk efek animasi musuh kita klik sajah di “behavior” perhatikan gambar dibawah:
Disana kita dapat mengubah efek animasi musuh kita,

1. kita klik behavior

2. kemudian kita klik “add behavior” untuk menambah animasi gerakan pada animasi itu sendiri
3. klik “motion”
4. dan untuk gerakan musuh kita pilih “Back and Forth Horizontaly” fungsinya agar musuh dapat
bergerak maju dan mundur

setelah selesai akan muncul gambar seperti di bawah

setelah itu kita back saja, karna otomatis settinganya seperti itu, kemudian selanjutnya, kita coba tambah
lagi efek buat animasi musuh ini supaya lebih menarik yaitu dengan efek agar waktu tertimpa animasi
musuh ini gepeng, untuk cara – caranya perhatikan gambar di bawah ini,

1. masih di menu “behavior”

2. kemudian “add behavior” untuk menambah
3. pilih di “all”
4. kemudian double klik di stompable

maka akan muncul gambar dibawah

Pada gambar diatas terdapat kotak yang mana, pada kotak terseut adalah hasil settingan yang harus di set
pada settingan – settingan di menu tersebut, lakukanlah settingan seperti pada gambar diatas, kemudian
back dan animasi musuh telah selesai kita buat dan kita atur efeknya.

Cara memindahkan animasi pada pijakan Selain cara diatas, ada acara lain untuk mengubah posisi dari
animasi itu, perhatikan gambar di bawah ini :

Langkahnya.

1. double klik pada animasi yang kita pilih

2. maka munculah kotak, yang berisi tentang pengaturan ukuran, dan letak penyimpanan animasi,
disana kita bisa ubah posisi tempat animasi secara manual menggunakan beberapa angka.

Langkah selanjutnya adalah cara menambahkan sound untuk level pertama kita, perhatikan gambar:

1. klik “behavior” yang ada di sebelah scene

2. pilih “add behavior”
3. pilih “background sound” maka akan muncul gambar seperti di bawah
Pada gambar tersebut, kita akan melihat sebuah sell yang berisi tadinya “no sound” kemudian kita setting
pada sell tersebut dengan isian “nama sound” yang telah kita input atau uplod tadi di “dashboard”. Contoh
“backsound”

Setelah selesai kita back saja.

Selanjutnya disini kita akan mempelajari bagaimana caranya untuk pindah scene atau adegan animasi kita,
caranya perhatikan gambar berikut :

1. kita klik menu “behavior”

2. ‘’ add behavior”
3. Pilih “all”
4. Double klik di “switch scene on enter region” maka akan muncul gambar di bawah

Cara settingnya lakukan cara berikut

1. Pertama di menu “actor” kita klik di “choose actor” maka akan muncul gambar seperti di bawah”
Di situ kita pilih animasi utama kita klik di iconya

2. Kedua di menu “region” klik disanah, kemudian akan muncul gambar seperti di bawah

Kita simpan kotak kecil disanah di ujung kanan permainan tepat dimana nanti animasi kita berhenti di
sanah

3. Selanjutnya kita pilih “next scene” untuk animasi kita melanjutkan masuk ke scene selanjutnya

Perhatikan gambar di bawah.

Pada gambar di atas (no 1), pilih salah satu scene untuk jadi tujuan animasi kita selanjutnya, kemudian
pada (no 2) klik ok bila sudah di pilih, kemudian back dan selesai.

Setting animasi permainan kita untuk pindah scene pun telah selesai.

Untuk selanjutnya setiap scene pun tak jauh beda settinganya dengan cara yang telah di sampaikan, tugas
atau hal yang akan membuat permainan ini menarik adalah imajinatif, kreasi kita sendiri, sehingga
permainan ini menjadi lebih seru dan menarik, untuk contoh permainan yang telah jadi bisa dilihat pada
gambar di bawah ini..
Gambar 1.1 level 1

Gambar 1.2 materi 1

Gambar 2.1 level 2

Gambar 2.2 materi 2

Gambar 3.1 level 3

Gambar 3.2 materi 3

Gambar 4.1 level 1

Gambar 4.2 materi 4

  

Gambar 5.1 level 5

Gambar 5.2 materi 5

Gambar 6.1 level 6

Gambar 6.2 materi 6

Gambar 7.1 level 7

Gambar 7.2 materi 7

Gambar 8.1 level 8

gambar 8.2 materi 8

 Gambar 9.1 level 9

Gambar 9.2 materi 9

gambar 10.1 level 10

gambar 10.2 materi 10

Gambar 11 finish