Belajar Stencyl - Bagian 2

Hai kawan! /hihi

Sekarang mari kita lanjutkan belajar membuat game flash dengan menggunakan Stencyl, yang mana dalam bagian 1 telah kita pelajari sedikit tentang antar muka dan pembuatan Sprite. Sekarang kta tunda dulu sejenak ngoprek sang aktor, kita akan mempelajari tentang Background Image, Tileset dan Scene.

Dalam sebuah game, diperlukan adanya minimal 1 buah background image alias gambar latar untuk memperindah game yang kita buat juga untuk memperkuat cerita yang diusung oleh game tersebut, namun hal ini tidak selalu diharuskan, dan wajib memiliki 1 buah Scene alias Panggung atau ruangan.
Gambar latar bisa berupa gambar apa saja, baik itu yang digambar secara manual atau berupa sebuah foto, itu semua tergantung dari selera masing masing pencipta dan sesuai dengan kebutuhan gamenya.
Sementara Scene atau panggung bisa dibuat dalam Stencyl dengan mudah.

Lalu apa itu Tileset? Tileset adalah sebuah gambar berisi sekumpulan gambar kecil yang berukuran sama (misalnya 32x32 px) dan bisa disusun sedemikian rupa untuk membangun sebuah gambar besar.

Untuk lebih jelasnya silahkan lihat pada gambar dibawah:

Pada gambar tersebut adalah gambaran dari sebuah game sederhana yang terdiri dari:

1. 1 buah Scene
2. 2 buah Background image (pohon dekat dan jauh)
3. 1 set Tileset
4. 1 buah aktor (yes guys, this is our fellow, TutMan)

Untuk melanjutkan, buka Stencyl (jika belum), dan muat game yang telah kamu buat dalam bagian 1, lalu dengan klik 2x pada thumbnail game kamu di halaman Welcome Screen Stencyl.

Background

Untuk background image, didalam sebuah scene, kita bisa menambahkan satu hingga beberapa background, tergantung kebutuhan dan tingkat kerumitan pemandangan yang ingin kita ciptakan. Dalam contoh diatas, saya menggunakan 2 buah background pepohonan, 1 pohon jauh, dan 1 pohon dekat. Seperti dalam dunia nyata, pohon pohon yang jauh terlihat bergerak sangat lambat dan yang dekat sangat cepat, ini dinamakan efek Parallax.

Background 1

Background 2

Untuk memasukan background image kedalam projek:

1. klik tab "Dashboard"

2. klik "Backgrounds" di Project Explorer

3. klik tombol hijau "Create New" disebelah kanan atas.

4. pada window kecil yang muncul, beri nama dan klik Create

5. Setelah masuk ke tab Background nya, klik pada kotak sebelah kiri dengan tulisan "Click here to add a frame"

6. pada window kecil yang muncul setelahnya, klik "Choose Image".

7. cari dan temukan file background yang telah kamu simpan, lalu klik pada file tersebut dan klik Open.

8. klik pada tombol "Add" untuk memasukan gambar tersebut.

9. Pada bagian kanan di Background properties ini, ada pilihan Scrolling speed, Repeat background dan Parallax Scrolling. Centang pada Repeat background jika gambar yang kamu pakai lebih kecil dari panjang Scene untuk membuatnya berulang sepanjang scene, terkecuali jika kamu memang menginginkannya tampil kecil seperti itu. Jika kamu ingin mendapat efek parallax, kamu bisa mengatur kecepatan horizontal dan vertical parallax factor. Semakin kecil nilainya maka akan semakin lambat background itu bergerak, begitu juga dengan sebaliknya. Pada projek saya, bg01 diberi nilai 0.5 dan bg02 saya beri nilai 0.7.

10. tutup tab background ini untuk menyimpan perubahan.

12 ulangi langkah-langkah diatas jika kamu ingin menambah background lainnya, namun beri nama yang berbeda, misalnua bg01 dan bg02

12. Selesai!

Tileset

Tileset yang saya gunakan disini adalah tileset buatan saya sendiri, dengan ukuran per-tile nya 32x32 pixel, dan berisi 16 buah tile. Dalam sebuah scene, kita bisa menambahkan beberapa tileset sekaligus, misalnya, tileset tanah (seperti nampak dalam gambar) dan tileset jenis lainnya untuk menciptakan lingkungan yang kita inginkan.

Tileset

Untuk memasukan Tileset kedalam projek:

1. klik tab "Dashboard"

2. klik "Tilesets" di Project Explorer

3. klik tombol hijau "Create New" disebelah kanan atas.

4. pada window kecil yang muncul, beri nama dan klik Create.

5. pada window kecil yang muncul setelahnya, klik "Choose Image".

6. cari dan temukan file tileset yang telah kamu simpan, lalu klik pada file tersebut dan klik Open.

7. pastikan ukuran tile nya sama dengan yang kamu inginkan, misalnya disini Width: 32 dan Height: 32

8. Jika tileset yang kamu buka memiliki jarak antara tile satu dengan lainnya, isi X Spacing dan Y Spacing dengan ukuran jaraknya, umumnya jarak antar tile itu hanya 1px saja.

9. Jika tileset yang kamu buka memiliki border atau garis pinggir, isi X border dan Y border dengan ukuran garis pinggirnya.

10. Jika gambar tileset yang kamu buka tidak memiliki bagian transparan, misalnya format file yang kamu pakai adalah BMP, maka kamu bisa menghilangkan bagian warna latar dari tileset tersebut dengan mengklik pada warna yang akan dihilangkan.
11. Untuk pengaturan pada bagian atas, pastikan Scale: 1x dan Resize Method: No Smoothing yang terpilih.
12. Klik tombol "Add" untuk memasukan tileset tersebut kedalam projek.
13. Untuk pengaturan selanjutnya pada tab tileset ini akan kita bahas nanti, sekarang biarkan seadanya dan tutup tab tileset yang baru kamu buat untuk menyimpan perubahan.
14. Selesai!

Untuk membuat sprite, background image dan tileset, kamu bisa gunakan macam macam perangkat lunak pengolah gambar, misalnya Photoshop, Gimp, atau cukup dengan menggunakan Microsoft Paint bawaan Windows. Namun sangat direkomendasikan jika kamu pakai perangkat lunak yang mumpuni agar bisa memaksimalkan kreatifitas kamu dalam membuat sebuah gambar. Ada beberapa aplikasi yang dikhususkan untuk membuat Tileset dan atau Sprite, namun akan saya ulas pada waktu yang akan datang, untuk sementara ini, kita pergunakan saja apa yang ada dalam aplikasi Stencyl untuk membuat Sprite kecuali untuk membuat Tileset dan background (saya menggunakan Microsoft Paint) /blush

Catatan: Untuk belajar membuat Tileset dan Background akan saya ulas dalam artikel tersendiri.

Untuk mendapatkan Background dan Tileset yang saya gunakan dalam artikel ini, kamu bisa mengunduhnya disini: bg01, bg02 dan Tile01

Scene

Dalam sebuah game, kita bisa membuat scene sebanyak yang kita butuhkan, misalnya, scene pertama adalah ruangan dimana sang lakon menempuh perjalanan ke barat untuk mengambil kitab suci /wahaha dan ditengah perjalanan, pahlawan kita singgah dan masuk ke sebuah rumah dimana didalamnya si pahlawan bisa beristirahat, membeli senjata dan lain lain. Nah, scene 1 adalah pemandangan diluar ruangan, sementara scene 2 adalah pemandangan didalam toko, scene 3 pemandangan terowongan dibawah tanah, dan seterusnya.

Setelah kamu memiliki minimal 1 buah background dan 1 buah Tileset, sekarang saatnya kamu bisa mulai bentuk panggung pertama dari game kamu.

Klik pada "Scenes" di bagian Project explorer, lalu klik pada tulisan "This game contains no scene. Click here to create one." (jika project kamu belum memiliki 1 scene pun) atau klik pada kotak kecil bertuliskan "Click here to create a new scene", atau kamu bisa klik tombol hijau diatas kanan bertuliskan "Create new", maka akan muncul sebuah window kecil untuk menentukan properti awal dari scene yang kamu buat.

• Beri nama scene yang kamu buat, disini saya membuatnya dengan nama "Level Test", saya sarankan kamu memberi nama yang sama agar tidak bingung dalam mengikuti tulisan saya ini nantinya.
• Beri nilai 40 untuk Width, artinya ukuran scene yang dibuat adalah sepanjang 40 tiles, dan 1 tile berukuran 32px, jadi scene ini berukuran 40x32 = 1280 pixel.
• Pada pilihan Color, klik pada tulisan "Solid Color" lalu pilih "Vertical Gradient", lalu pada 2 kotak warna disebelahnya, pilih warna biru tua pada kotak pertama dan warna putih pada kotak kedua. hal ini untuk memberikan gradasi warna pada scene seperti warna langit.
• Untuk nilai pada kotak dan pilihan lainnya, biarkan seadanya.
• Klik "Create" untuk membuat scene nya.

Setelah selesai, maka kamu akan dibawa masuk ke tab Scene editor, disana kamu akan lihat sebuah kotak besar dengan gradasi warna biru-putih, dan beberapa panel di sekelilingnya.

Pada sebelah kiri adalah toolbox, disebelah kanan ada panel object selector, untuk memilih objek apa yang akan masukan kedalam scene, dibawahnya ada Tileset selector, jika pada bagian atas kamu memilih tab Tileset, dan tepat dibawahnya ada Layer panel, dimana kamu bisa membuat beberapa layer dalam satu scene yang akan menentukan sebuah objek ada diatas atau dibawah dari objek lainnya.

Sekarang kamu bisa mulai mencurahkan segala kreatifitas dan imajinasi dalam membetuk tampilan dari game kamu dengan mulai meletakan objek-objek didalam scene yang baru saja kamu buat. Mulailah dengan memasang Background terlebih dahulu dengan mengklik tombol + di bagian kanan bawah, dibawah Layers panel, lalu pilih "New Background Layer", kemudian pilih gambar background yang ingin kamu simpan paling bawah (artinya berada paling belakan dan  tertutup oleh gambar lainnya). Lakukan lagi jika kamu ingin menambah background lainnya, seperti dalam projek saya ini, saya menambahkan 2 buah background kedalam scene ini. Setelah menambahkan beberapa background, kamu lihat bahwa layer bawaan (Layer 0) ada dibawah layer background. Untuk menaikannya klik layer tersebut dan klik tombol panah atas disamping tombol + barusan. Jadikan Layer 0 ini selalu ada diatas semua layer, karena aktor utama kita akan kita simpan disini, dan beri nama baru Layer 0 ini dengan nama Player, caranya dengan mengklik 2x pada nama layernya, beri nama dan tekan Enter.

Sekarang kamu tambahkan sebuah layer baru, untuk meletakan gambar tileset, caranya sama dengan diatas yaitu dengan mengklik tombol +, namun pilih "New Tile Layer" pada pilihan yang muncul. Maka kamu akan mendapat 1 layer baru diatas layer Player, dan naikan kembali layer Player ke paling atas, lalu beri nama layer yang baru dengan nama Tile 01.

Mulai mendesain levelnya! Klik Layer Tile 01, dan klik tab Tiles pada Object Seletor sebelah atas, dan klik pada salah satu bagian gambar tileset yang ada di sebelah kanan untuk memilihnya, dan klik pada bagian layer kosong (yang sekarang ada backgroundnya) untuk meletakan tile pada scene. Lakukan sesuka hati, namun harus diingat, sesuaikan dengan kemampuan sang aktor utama, jangan terlalu tinggi atau berjarak terlalu jauh hingga akhirnya sang aktor tidak bisa melewatinya.

Untuk selanjutnya, kamu bisa tambahkan aktor utama kedalam Scene

Ini adalah hasil dari curat coret saya dalam menghias scene yang saya buat dengan penampakan yang diperkecil:

Scene ini ditujukan untuk percobaan dan melihat sejauh dan setinggi apakah lompatan TutMan.

Baiklah! Tuntas sudah bahasan kita tentang dasar dasar Background, Tileset dan Scene, semoga bermanfaat dan memberikan pengetahuan serta pengalaman baru bagi kita semua. Pada artikel selanjutnya, saya akan menulis tentang cara memberi nyawa pada aktor utama, hingga dia bisa kita gerakan, jadi tetap panteng blog ini, ikuti twitter saya atau jempolin Fans page facebook nya /please untuk mendapat kabar update artikel terbaru dari saya. terima kasih sudah mengunjungi dan membaca.

Sampai jumpa lagi! /bye