Membuat Game Match-3 di Construct 2: Dasar

() translation by (you can also view the original English article)

Selamat datang di rangkaian tutorial baru di mana saya akan menunjukkan cara membangun permainan puzzle Match-3, dari awal, di Construct 2. Di bagian pertama ini, kita akan meletakkan dasar permainan dan mendapatkan kotak teka-teki dasar pada layar.

Pendahuluan

Permainan Match-3 adalah teka-teki berbasis blok dimana Anda memindahkan blokade di area permainan untuk membuat grup dengan tiga atau lebih atribut umum (seperti warna atau bentuk). Pada kebanyakan game match-3 pemain juga diberi bonus untuk pencocokan lebih dari tiga blok sekaligus.

Sebagian besar permainan puzzle Match-3 bersifat kompetitif, dan tujuan pemain umumnya hanya untuk mendapatkan nilai tertinggi sebelum waktu habis, atau kondisi kehilangan lainnya terpenuhi. Beberapa contoh permainan Match-3 game termasuk Pokemon Puzzle League, Bejeweled, dan hit terbaru Candy Crush Saga.

Game yang Akan Kita Buat

Saya memutuskan untuk mendasarkan permainan Match-3 yang akan kita buat di Pokemon Puzzle League:

Jika Anda belum pernah memainkannya sebelumnya, PPL adalah permainan Match-3 yang cukup sederhana di mana balok naik dari bagian bawah layar permainan dan pemain harus menciptakan kecocokan untuk menghindari layar terisi. Jika blok mencapai puncak, pemain kalah dan dipaksa untuk memulai dari awal lagi.

Berikut adalah demo permainan yang akan kita jalani sepanjang seri:

Dalam artikel pertama ini kita akan fokus untuk meletakkan dasar permainan kita. Artikel ini akan berfokus secara khusus pada pengaturan proyek dan pemijahan kotak blok acak untuk pemain.

Sebelum Kita Mulai

Sebelum memulai tutorial ini, Anda harus memastikan untuk menginstal versi terbaru dari Construct 2 (C2). Ketika saya membuat versi asli permainan, saya menggunakan Release 122, jadi selama Anda memiliki versi yang lebih baru dari itu, Anda seharusnya akan baik-baik saja. Selain itu, jika Anda belum pernah menggunakan C2 sebelumnya Anda harus memeriksa panduan ini yang menjelaskan dasar-dasar penggunaan C2 dan bagaimana membuat sebagian besar jenis objek.

Anda juga harus mendownload paket grafis yang saya buat untuk tutorial ini. Sementara tentu saja Anda dapat menggunakan grafis apa pun yang Anda inginkan, saya akan memberikan posisi tertentu untuk banyak item dalam tutorial ini, dan posisi tersebut didasarkan pada gambar yang saya gunakan. Jika Anda menggunakan grafis lain, Anda perlu memperhitungkan perbedaan ukuran pada grafis tersebut saat mengikuti tutorial ini.

Setelah Anda mengatur dan memiliki pemahaman yang baik tentang C2, tetaplah membaca!

Menyiapkan Proyek

Sebelum kita benar-benar membangun semua gameplay, kita perlu mengatur proyek itu sendiri. Bukalah C2 dan ikuti langkah berikut:

Buatlah sebuah proyek baru.
Pada Project Properties, atur Window Size menjadi 600x600.
Isi kolom Name dan Author.
Masuklah ke panel Layers dan tambahkan dua layer baru.
Ubah nama layer terendah menjadi Background, middle layer menjadi Blocks, dan layer teratas menjadi Game Field.
Masuklah ke Layout 1 dan masukkan objek Tiled Background.
1. Untuk objek Tiled Background, gunakan BG Images / StandardBGTile.bmp dari paket grafis.
2. Pergi ke properti objek dan ubahlah namanya menjadi GameBG.
3. Atur layer objek Layar ke Background.
4. Atur ukuran objek menjadi 650, 650.
5. Posisikan objek sehingga mengisi seluruh area tampilan tata letak dan terlihat seperti ini:
Sekarang buatlah objek Tiled Background lainnya.
1. gunakan gambar Game Field Images/GameFieldBorder.bmp.
2. Beri nama objek menjadi GameFieldBorder.
3. Atur Posisi menjadi 9, -12.
4. Atur ukuran menjadi 16, 732.
5. Atur Layer menjadi Game Field.
7. Buatlah salinan objek GameFieldBorder.
1. Aturan Posisi salinan menjadi 368, -12 .
Selanjutnya, buatlah sebuah objek Sprite.
1. Gunakan gambar Game Field Images/GameFieldBottom.png.
2. Berilah nama GameFieldBottom.
3. Atur Posisi menjadi 197, 625.
4. Atur Ukuran menjadi 344, 150.
5. Atur Layer menjadi Game Field.
Buatlah salinan dari objek GameFieldBottom.
1. Aturlah Posisi menjadi 196, -30.
2. Aturlah Sudut menjadi 180.

Hal terakhir yang perlu kita lakukan adalah membuat latar belakang untuk area aktual blok akan muncul.

Buatlah objek Sprite baru.
1. Pergilah ke Color Picker dan atur Red, Green, dan Blue menjadi 0, dan Alpha menjadi 200.
2. gunakanlah Paint Bucket untuk mengisi seluruh gambar dengan warna ini.
3. Tutuplah editor animasi.
4. Aturlah ukurannya menjadi 359, 570.
5. Aturlah Posisi menjadi 195,294.
6. Atur Layer menjadi Background

Bidang permainan sekarang sudah selesai, tapi kita masih harus membuat Sprite yang bisa digunakan untuk Blokir.

Buatlah ojek Sprite baru.
1. Dengan keadaaan editor animasi yan terbuka, klik kanan jendela Animation Frames dan pilihlah "Import frames...".
2. Pilihlah setiap gambar pada folder Blocks dari folder graphics pack, dan import semuanya.
3. Hapuslah Frame 0, sehingga gambar blok abu-abu menjadi Frame 0 dan pastikan tidak ada blank frame.
4. Periksa untuk memastikan bahwa frame Anda berada dalam urutan yang sama seperti blok saya pada gambar di bawah ini:

Sebelum kita melangkah maju, saya ingin menjelaskan blok gambarnya. Blok abu-abu ada untuk mewakili blok "tidak aktif", yang akan diimplementasikan dalam tutorial yang akan datang. Gambar yang tersisa dikelompokkan ke dalam set tiga untuk setiap blok: bingkai pertama adalah untuk saat blok tidak digunakan, yang kedua adalah saat pemain memanipulasi blok, dan yang ketiga adalah saat balok dicocokkan menjadi satu kelompok.

Akhirnya, ambil blok yang telah kita buat dan letakkan di suatu tempat di tata letak yang akan mencegah pemain melihatnya pada permainan yang sebenarnya. Selain itu, atur ukuran Block menjadi 40, 40.

Kami sekarang membawa semua gambar yang kami butuhkan untuk artikel ini dan mencoba agar permainan benar-benar bekerja.

Memijahkan sebuah kotak acak

Pada versi final game, blok akan bergerak setiap saat, dan blok baru akan didorong ke layar dari bawah. Untuk saat ini, kita perlu mendapatkan mekanika dasar yang bekerja, jadi kita hanya akan menelurkan kotak blok 8x8 dan membiarkannya begitu saja.

Buka Lembar Kejadian 1 dan tambahkan variabel global ini untuk menentukan posisi pemijahan awal Blok:

  Global Variable: SPAWNX
		Value = 49
		Constant = True
	Global Variable: SPAWNY
		Value = 526
		Constant = True

Kita juga perlu melakukan satu hal lagi sebelum kita membuat event pertama: kita perlu membuat variabel instance untuk Block yang memberitahukan blok warna apa itu.

Buatlah variabel contoh baru untuk objek Blokir, beri nama Warna dan jangan ubah pengaturan lainnya.

Sekarang kita akan membuat event pertama kita. Tujuan dari event ini adalah membuat blok statis untuk tujuan pengujian:

	Event :
		Condition: System>On start of layout
		Condition: System>For
			Name: "Y"
			Start index = 0
			End index = 7
		Sub-Event: System>For
			Name: "X"
			Start index = 0
			End index = 7
			Action: System>Create Object
				Object: Block
				X = (SPAWNX + (loopIndex("X"))*(Block.Width + 2))
				Y = (SPAWNY - (loopIndex("Y"))*(Block.Width + 2))

Kedua formula ini pada dasarnya mengatakan hal yang sama. Pertama, kita tambahkan 2 ke lebar blok sehingga masing-masing blok memiliki buffer 2px di antara keduanya dan blok didekatnya untuk mencegah false positive saat menggunakan deteksi tabrakan. Kemudian, kita kalikan angka tersebut dengan indeks saat ini untuk loop, dan tambahkan ke posisi awal X atau Y. Selain itu, kita akan mengurangkan nilai Y karena di C2, 0 titik pada sumbu Y ada di bagian atas layar permainan, jadi dengan menurunkan nilai posisi Y kita meletakkan benda lebih dekat ke bagian atas layar.

Jadi apa yang dicapai? Ini berarti bahwa saat loop X dan Y beriterasi, dan nilai X dan Y meningkat, posisi yang menempatkan setiap blok akan berubah yang akhirnya akan menghasilkan kotak persegi:

Jika Anda menjalankan permainan pada saat ini, Anda akan memiliki kotak blok - tapi, daripada warnanya yang berbeda, mereka semua hanya akan melewati setiap gambar blok secara berturut-turut.

Untuk memperbaikinya kita perlu melakukan dua hal.

Pertama, kita perlu menetapkan setiap blok nilai warna menggunakan variabel contoh yang kita buat tadi. Untuk melakukan ini, tambahkan Tindakan lain:

1	Action: Block>Set value
2	Color = floor(Random(1,7))

Ini akan menetapkan blok nilai warna acak dari 1 sampai 6. (Alasannya bukan dari 1 sampai 7 dijelaskan dalam penjelasan fungsi Acak.)

Fungsi Anda sekarang harus terlihat seperti ini:

Kita juga perlu menambahkan sistem yang mengubah citra blok berdasarkan nilainya. Untuk melakukan ini, mulailah dengan menambahkan Variabel Instance baru ke objek Blok:

1	Instance Variable for Block
2	Name: "IsMatched"
3	Type: Boolean
4	initial value = false

Sekarang, tambahkan event baru:

1	Event: System>Every Tick
2	Action: Block>Set Frame
3	Value = (Block.Color-1)*3 + 1

Rumus ini pertama-tama mengurangi 1 dari nilai warna blok untuk menjelaskan fakta bahwa nilainya mulai dari 1 daripada 0. Kemudian, ia mengalikan angka tersebut dengan 3 untuk menjelaskan fakta bahwa masing-masing blok memiliki 3 frame animasi. Akhirnya, tambahkan 1 ke nilai itu karena gambar standar dari sebuah blok adalah gambar pertama dalam himpunan gambar.

Mari kita lihat contoh cepat dengan Blok yang memiliki nilai warna 4, untuk melihat bingkai animasi apa yang akan digunakannya. Pertama, kurangi 1 dari nilai warna untuk mendapatkan 3. Selanjutnya mengalikan angka itu dengan 3 menjadi 9. Akhirnya tambahkan 1 ke nilai itu untuk membuat 10. Ini berarti bahwa Blok dengan nilai warna 4 akan menggunakan bingkai 10 sebagai bingkai animasi bawaannya, dan akan menjadi blok ungu / persegi.

Jika Anda menjalankan permainan Anda sekarang, Anda akan melihat bahwa setiap blok memiliki warna yang berbeda, namun kami masih belum menerapkan animasi saat mouse Anda melayang di atas blok atau saat dicocokkan. Ini akan dibahas di tutorial berikutnya, bersama dengan cara menukar dua blok yang bersebelahan.

Berikut adalah demo kecil dari apa permainan seharusnya terlihat pada saat ini (temukan sumbernya disini):

Jika Anda ingin terus mengerjakannya sendiri, mulailah melihat perubahan bingkai animasi Blok berdasarkan pevent "Mouse> Cursor is over object". Anda juga bisa mulai melihat menggunakan "Drag & Drop" untuk memanipulasi Blokir, dan mempertimbangkan bagaimana menentukan apa yang pemain coba lakukan dengan Blok saat mereka mulai menyeretnya atau saat mereka menjatuhkannya.

Kesimpulan

Terima kasih telah membaca bagian tutorial ini, di mana kami menetapkan dasar dasar untuk game Match-3 kami. Kembalilah lagi segera untuk bagian selanjutnya dari seri ini! Anda dapat terus mengikuti perkembangan melalui Facebook, Twitter, Google+, RSS, atau email.