Membuat Game Gunting Kertas Batu dengan Construct 2 (Part III – GamePlay)

Dari tutorial sebelumnya kita telah berhasil membuat Layout untuk StartScreen dan berpindah antar dua layout (Layout StartScreen – Layout Game). Di tutorial kali ini, kita akan masuk ke inti dari gameplay yang akan kita buat, yaiutu game HomPimPa yang berbasis pada permainan gunting kertas batu.

Tahap 1 – Persiapan

Di tutorial sebelumnya, kita telah memiliki dua layout, yaitu Layout1_StartScreen dan Layout2_Game dan satu Event Sheet. Sekarang, kita harus menghubungkan Layout2_Game ke Event Sheet agar Layout2_Game dapat berjalan dan menggunakan Event Sheet yang sama.

Buka properties Layout2_Game lalu ubah properties Event Sheet menjadi Event sheet 1.

Sekarang Layout2_Game telah memiliki Event Sheet yaitu Event sheet 1 sehingga kita sudah bisa memberikan event terhadap layout ini.

Layout2_Game akan berisi gameplay utama dari game kita.

Langkah 2 – GamePlay Layout

Terlebih dahulu kita harus mempersiapkan tampilan layout game kita.

Pertama adalah menambahkan background. Foto background telah terdapat di project kita. Untuk menambahkannya ke Layout2_Game kita dapat langsung men-drag background ke layout dan memposisikannya di 0, 0.

Pada tutorial kali ini, kita juga akan mempelajari tentang Layers. Layers ibarat selembar kertas transparan dimana pada kertas tersebut kita bisa menggambarkan banyak hal. Layer dapat digunakan untuk memperlihatkan objek mana yang ada di atas atau di bawah, seperti foreground dan background. Suatu layout dapat terdiri dari lebih dari satu layers.

Untuk melihat layer pada layout kita, klik tab Layers pada windows Proects.

Saat ini kita hanya memiliki satu layer, yaitu Layer 0 yang telah kita tambahkan Background. Layer 0 ini akan kita jadikan sebagai layer background dan untuk mempermudah kita, kita tidak akan bekerja pada layer ini karena layer ini hanya berfungsi sebagai penampil background tapi bekerja pada layer baru.

Kita harus mengubah nama Layer 0 menjadi Layer0_Background agar lebih mempermudah kita. Cara mengubah nama Layer adalah dengan klik kanan pada Layer 0 dan pilih Rename lalu beri nama Layer0_Background.

Selanjutnya, agar Layer 0_Background tidak dapat kita ganggu gugat lagi, kita harus mengunci layout ini agar tidak bisa diubah lagi. Perhatikan icon-icon di atas nama layer kita, terdapat satu ikon gembok, klik icon gembok tersebut untuk mengunci Layer0_Background.

Oke, selanjutnya kita akan menambhakn layer baru tempat kit aakan bekerja. Klik icon + untuk menambah Layout baru lalu beri nama Layer1_Gameplay.

Pastikan Layer1_Gameplay selalu terpilih (berwarna biru) karena ini menunjukan status layer yang aktif (kita hanya akan bekerja pada Layer1_Gameplay).

Menambahkan Tangan Pemain

Kita akan menambahkan tiga buah gambar ke layout kita.

  1. gunting.png
  2. kertas.png
  3. batu.png

Gunakan object type TiledBackground untuk menambahkan 3 objek tersebut. Cara menambahkan objek telah ada di tutorial sebelumnya. Tampilan dari Layout2_Game akan seperti berikut :

Properties player_gunting, player_kertas, player_batu :

Menambahkan Tangan Musuh

Untuk tangan musuh, kita akan memakai cara yang sedikit berbeda yaitu dengan menggunakan object Sprite. Dengan Sprite, kita dapat memberikan animasi pada objek gambar kita.

Klik dua kali pada Layout1_Game dan pada Windows Insert New Object pilih Sprite. Lalu klik pada sembarang area pada Layout1_Game untuk menambahkan objek Sprite tersebut.

Akan muncul jendela edit yang hamper sama dengan jendela Edit TiledBackground, namun pada Edit Sprite akan muncul tambahan jendela kecil baru yaitu Animation frames. Animation frames inilah yang akan menampilkan frames-frames untuk animasi kita.

Kita akan membuat animasi tangan musuh yang berubah-ubah mulai dari gunting-kertas-batu terus sampai selesai. Untuk menambahkannya, klik kanan pada jendela Animation frames lalu pilih Import Frames.

Akan muncul sebuah jendela baru berupa jendela Open File Dialog. Pilih foto yang akan kita gunakan yaitu 3 sekaligus, gunting.png, kertas.png, dan batu.png. Klik Open.

Jendela Animation frames akan berubah menjadi seperti berikut :

Hapus frame nomor 0, karena kita tidak memerlukannya. Klik kanan pada frames tersebut lalu pilih delete. Kita dapat mengubah posisi urutan frame kita dengan cara langsung men-drag frame yang kita ingin ubah posisinya. Tampilan Animation frames kita sekarang :

Sekarang kita harus merotasikan tiga frame tersebut agar sesuai menjadi tangan musuh yang berada di atas layar berhadapan dengan tangan pemain. Kita harus mengedit satu per satu frame tersebut. Klik frame 0 (gunting), lalu pada jendela edit, klik tombol rotate 90 clockwise sebanyak dua kali. Lakukan juga hal yang sama dengan frame 1 dan frame 2.

Animation frames kita akan seperti berikut :

Selanjutnya kita akan mengedit Animations. Pada jendela Animations, klik Default. Ubah nama default menjadi Ilusi. Cara mengubahnya sama saja pada umumnya, yaitu klik kanan pada Deafult lalu pilih Rename. Berikutnya, pada properties Animations Ilusi pada layar sebelah kiri, ubah Speed menjadi 2 dan Properties Loop menjadi Yes. Hal ini berarti Animasi Ilusi akan terus diulangi tanpa berhenti.

Klik kanan pada Ilusi pada windows Animations lalu klik Preview untuk melihat hasil animasi. Akan muncul sebuah jendela kecil bernama Preview yang akan menampilkan animasi tangan musuh.

Selanjutnya kita akan menambahkan 3 animasi lagi. Namun setiap animasi ini hanya akan memiliki satu frame yaitu berupa satu gambar tangan. Animasi ini digunakan untuk menampilkan status dari tangan musuh yang akan diadu dengan tangan pemain.

Klik kanan pada jendela Animations lalu pilih Add animations. Lalu beri nama Gunting.

Pada jendela Edit Image, klik icon Load an image from file lalu pilih gunting.png. Rotasi kan juga gambar tersebut.

Lakukan hal yang sama untuk menambahkan animasi Kertas dan Batu yang meload gambar kertas.png dan batu.png.

Close windows Edit image. Selanjutnya atur posisi tangan musuh menjadi 240, 187.

Menambahkan Text untuk Score dan Pesan

Tambahkan object baru berupa Text beri nama TextScore, lalu pada propertiesnya ubah properties Text menjadi Pemain : 0 – 0 – : Musuh, atur posisinya agar berada di tengah-tengah layar.

Tambahkan object baru berupa Text beri nama TextPesan, lalu pada propertiesnya ubah properties Text menjadi Pilih Tangan Kamu, atur posisinya agar berada di tangan musuh.

Klik F5 untuk menjalan Layout2_Game dan melihat hasilnya.

Game Event

3 thoughts on “Membuat Game Gunting Kertas Batu dengan Construct 2 (Part III – GamePlay)

  1. Good, saya suka ide, konsep, dan grafis’a, simple..hhehe. Dan cara menerangkannya cukup jelas, bagi saya sudah cukup mudah untuk di pahami, dan di ikuti. Ayo terus buat game-game sederhana lainnya.. Semangaat

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s