Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. From Scratch
Gamedevelopment

Membuat Game Match-3 dalam Construct 2: Gerakan Blok

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Make a Match-3 Game in Construct 2.
Make a Match-3 Game in Construct 2: More Swapping, Points, and Matching
Make a Match-3 Game in Construct 2: Eliminating Pre-Made Matches

Indonesian (Bahasa Indonesia) translation by Sap (you can also view the original English article)

Dalam bagian sebelumnya dari seri ini, kita membuat beberapa perubahan kecil tapi penting untuk banyak dari sistem yang dibuat untuk game Match-3. Dengan perbaikan ini dilaksanakan, sekarang kita akan kembali ke jalur dan melaksanakan salah satu dua sistem besar untuk permainan: sistem Gerakan Blok.

Tutorial ini akan membawa Anda melalui seluruh pengembangan sistem yang memungkinkan blok untuk naik ke bagian atas layar, dan juga akan mencakup pembuatan semua sistem yang lebih kecil yang perlu kita terapkan untuk mendukung sistem gerakan. Meskipun topik yang saya bahas dalam tutorial ini tidak terlalu rumit, ada banyak hal yang harus dibahas - jadi mari kita lanjutkan.


Demo Game Final

Berikut ini adalah demo game yang sedang kita kerjakan di seluruh seri ini:




1. Memindahkan Blok

Sebelum kita mulai memindahkan blok-blok itu, kita harus membuat perubahan kecil pada event-event yang menelurkan Blok. Buka System > On Start of Layout event dan ubah Y for loop menjadi 0 hingga 3, daripada 0 hingga 7 seperti yang semula dilakukan.

Event sekarang seharusnya terlihat seperti ini:

ModifiedStartingBlockSpawn

Alasan melakukan perubahan ini karena kita ingin game dimulai dengan lebih sedikit blok di layar, sehingga tidak berakhir secepat ketika kita menambahkan Game Over di tutorial berikutnya.

Selanjutnya, kita akan membuat variabel yang akan mewakili kecepatan blok:

Sekarang kita akan membuat event yang benar-benar memindahkan blok:

Event akan terlihat seperti ini:

Match3_Part6_BlockMovementEvent1

Jika Anda menjalankan game setelah menambahkan event ini, hal pertama yang harus Anda lihat adalah blok-blok jatuh, karena gravitasi yang diterapkan dalam tutorial sebelumnya. Setelah itu, Blok perlahan harus naik sampai mereka berada di posisi semula, dan kemudian turun lagi. Ini akan berulang tanpa batas selama Anda tidak melakukan apa pun pada Blok.

Ini terjadi karena Blok bergerak melewati titik di mana gravitasi seharusnya mengeluarkan, dan mereka menemukan bahwa tidak ada blok di bawahnya, menyebabkan semuanya jatuh. Meskipun ini masalah, ini bukan pertama yang ingin saya lihat.


2. Memperbaiki Swapping

Jalankan game, dan cobalah membuat swap dalam bentuk apa pun. Ketika Anda melakukan ini, Anda harus melihat bahwa blok-blok itu mulai terjebak di belakang satu sama lain, terjebak dalam posisi yang tidak selaras dengan grid, dan hanya umumnya nakal. Ada dua alasan untuk masalah ini.

Masalah pertama adalah bahwa, meskipun kita bergerak blok sendiri, kita tidak bergerak, LeftBlock, RightBlock, TopBlock, dan BottomBlock objek dengan mereka, yang berarti bahwa blok yang Anda gunakan untuk mendeteksi swap tidak bergerak dengan grid blok - mereka hanya duduk dalam posisi mereka ditetapkan untuk ketika Anda pertama kali mengambil blok.

Jadi, ketika Anda mencoba untuk membuat swap, blok-blok tersebut tidak digunakan karena blok deteksi swap belum disesuaikan sama sekali ke grid. (Ini juga alasan untuk masalah kedua yang dialami, yaitu tidak memodifikasi posisi yang disimpan dalam larik BlockPositions juga.)

GIF di bawah ini menunjukkan masalah ini:

UnmovingSwapBlocks

Seperti yang Anda lihat di GIF, swap deteksi blok tidak bergerak, meskipun blok sendiri.

Untuk mengatasi kedua masalah ini, kita akan menambahkan beberapa Tindakan untuk Event yang baru saja dibuat:

Event sekarang harus terlihat seperti ini:

Match3_Part6_BlockMovementEvent2

Empat Tindakan pertama yang baru saja ditambahkan menyesuaikan posisi objek LeftBlock, TopBlock, RightBlock, dan BottomBlock sehingga mereka tetap sejajar dengan kotak blok. Kedua peristiwa kedua menyesuaikan nilai Y yang telah disimpan dalam larik BlockPositions sehingga mereka juga tetap sejajar dengan kotak blok.

Jika Anda menguji permainan lagi pada titik ini, swapping sebagian besar harus diperbaiki.

Pada titik ini, masih ada satu masalah lain yang perlu dihadapi untuk melakukan pertukaran pekerjaan dengan benar. Jalankan game dan coba buat pertukaran ke bawah dengan salah satu blok di baris bawah sementara baris itu sebagian berada di bawah area bawah bidang game:

Match3_Part6_BlocksBehindField
Buatlah swap sementara Blok berada di belakang perbatasan, seperti yang disorot pada gambar di atas.

Jika Anda melakukan ini dengan benar, Anda akan melihat bahwa tidak ada yang terjadi dan blok tidak bertukar. Jika Anda menunggu terlalu lama, blok mungkin telah bertukar karena mereka telah bergerak di atas batas lapangan permainan lagi, jadi jika ini terjadi coba lagi setelah jatuh dan Anda akan melihat masalah ini terjadi.

Masalah ini agak mudah untuk dipecahkan dan dimengerti. Jika Anda melihat kode untuk swap ke bawah, Anda harus menemukan Event yang kita tambahkan di tutorial sebelumnya yang mencegah pemutar melakukan swaps ke bawah yang menyebabkan Blok jatuh dari bagian bawah bidang game. Karena pernyataan ini mencegah pemain untuk melakukan swaps ke bawah ketika objek BottomBlock lebih rendah dari posisi Y awal blok, ini mencegah blok ditukarkan setelah jatuh dan hanya memungkinkan Anda untuk melakukan swap lagi setelah mereka pindah melewati posisi semula lagi.

Untuk memperbaiki pernyataan ini kita akan membuat satu perubahan kecil pada kondisi:

Kondisi sekarang seharusnya terlihat seperti ini:

Match3_Part6_ModifiedBottomSwap

Modifikasi ini berarti bahwa pertukaran ke bawah hanya dapat terjadi saat objek BottomBlock paling banyak setengah blok di bawah posisi Y yang dimulai dengan blok. Ini juga berarti bahwa, begitu kita mulai memunculkan baris baru dari blok dan mendorongnya ke layar dari bagian bawah, blok-blok itu hanya akan dapat ditukarkan dengan cara ini sekali setidaknya setengah blok terlihat.

Kita juga akan menempatkan pembatasan yang sama ke semua Event swapping untuk memastikan bahwa semuanya dapat digunakan pada saat yang sama, dan bahwa blok tidak dapat ditukarkan sama sekali sampai setidaknya setengah dari itu terlihat. Sekali lagi, ini juga akan membantu ketika kita mengintegrasikan sistem yang memunculkan barisan blok baru. Untuk melakukan ini, kita akan menambahkan ketentuan baru untuk masing-masing dari tiga swap lainnya.

Kondisi yang kita tambahkan akan sama persis dengan yang baru saja dimodifikasi di event BottomBlock, kecuali bahwa mereka akan mereferensikan objek TopBlock, RightBlock, dan LeftBlock sebagai ganti objek BottomBlock, tergantung pada event di mana itu berada.

Kondisi baru untuk Acara TopBlock harus:

Kondisi baru untuk Event LeftBlock seharusnya:

Kondisi baru untuk Acara RightBlock seharusnya:

Seluruh Event Drop DragDrop Anda akan terlihat seperti ini:

Match3_Part6_ModifiedDragDropEvent

Dengan kondisi baru ini, kita telah memperbaiki mekanika swapping kemudian mulai mempersiapkan sistem yang ada untuk sistem berikutnya yang ditambahkan: yang akan menelurkan deretan blok baru.


3. Swapning Lebih Banyak Blok

Sekarang kita memiliki blok bergerak naik pada tingkat yang konstan, kita perlu membuat barisan baru dari pembuahan spawn pada waktu yang tepat, dan memungkinkan pemain untuk terus bermain selama yang mereka inginkan. Kita akan menggunakan fungsi untuk spawn baris baru dari blok, dan kita akan menggunakan suatu peristiwa yang mendeteksi ketika blok-blok tersebut sejalan dengan SPAWNY untuk memicu fungsi itu.

Jadi pertama, mari kita buat fungsi itu sendiri.

Event baru Anda akan terlihat seperti ini:

Match3_Part6_SpawnNewBlocks

Saat digunakan, fungsi ini akan membuat deretan blok di bawah baris bawah blok di bidang game. Seperti sekarang, kita sebenarnya tidak menggunakan fungsi ini pada titik mana pun, jadi mari kita membuat Event yang melakukan itu:

Event baru Anda akan terlihat seperti ini:

Match3_Part6_CallSpawnNewBlocks

Event yang baru saja kita buat memeriksa posisi Y dari blok setiap kali mereka dipindahkan. Jika menemukan blok yang sejajar dengan SPAWNY, itu memicu fungsi SpawnNewBlocks() seperti yang telah kita bahas sebelumnya. Ini juga memeriksa untuk memastikan bahwa blok itu menemukan bukan yang diseret oleh pemain.

Jika Anda menguji permainan Anda pada titik ini, itu akan berhasil, tetapi Anda harus memperhatikan satu masalah aneh. Saat Anda memulai permainan, blok Anda akan jatuh seolah-olah tidak ada blok di bawah mereka, tetapi setelah itu semuanya bekerja dengan sempurna, dan blok baru muncul kapan pun dibutuhkan.

Ini terjadi karena, ketika game pertama dimulai, ia memproses kode gravitasi sebelum kode yang memunculkan baris baru dari blok. Untuk memperbaikinya kita akan membuat penyesuaian kecil pada kode yang memunculkan kelompok awal blok sehingga mereka menelurkan di bawah titik di mana baris baru akan diperlukan. Hal ini memungkinkan untuk menghindari kode gravitasi segera, dan memungkinkan untuk membuat baris baru dari blok setelah blok yang ada berada di lokasi yang tepat.

Pergi ke Event yang memunculkan kelompok awal blok dan memodifikasi Tindakan yang benar-benar menciptakan blok. Ubah Tindakan menjadi ini:

Event seharusnya sekarang terlihat seperti ini:

Match3_Part6_ModifiedInitialBlockSpawn

Modifikasi ini berarti bahwa blok akan menelurkan lima piksel di bawah SPAWNY. Ini berarti bahwa blok-blok tersebut akan benar-benar harus naik lima kali sebelum baris baru akan muncul, dan memecahkan masalah kita.


4. Sedikit Animasi

Pada titik ini Blok bergerak, dan kita memiliki baris baru yang dibuat. Di atas itu, ingat bahwa sebelumnya kita mencegah pemain menggunakan blok apa pun hingga setidaknya setengah dari blok terlihat. Meskipun ini fitur yang bagus, pemain mungkin tidak mengerti mengapa blok tidak dapat digunakan dengan segera ketika itu menjadi terlihat, bahkan jika tidak banyak yang terlihat pada saat itu.

Karena masalah UI yang potensial ini, kita akan membuat setiap blok menggunakan sprite blok abu-abu (pada awal frame animasi blok) ketika berada dalam keadaan tidak dapat digunakan ini. Ini akan membuatnya jelas bagi pemain ketika blok menjadi dapat digunakan, dan itu akan memberi kita kesempatan untuk akhirnya menggunakan gambar blok terakhir kita.

Anda dapat melihat contoh apa yang akan terlihat ketika Blok berubah dari tidak aktif menjadi aktif di GIF di bawah ini:

BlockColorChange

Event yang dibuat juga akan menyertakan Kondisi kedua yang memeriksa untuk memastikan blok yang dilihatnya tidak diseret. Kondisi ini memungkinkan kita untuk memastikan bahwa ketika pemain menyeret blok di bawah titik di mana blok menjadi dapat digunakan, itu tidak akan mengubah gambarnya sehingga abu-abu, dan akan tetap warna yang seharusnya.

Untuk membuat animasi ini berfungsi, pertama-tama kita perlu menambahkan Event baru:

Event baru akan terlihat seperti ini:

InactiveBlockAnimation

Anda sekarang harus dapat menguji permainan Anda dan Anda akan melihat bahwa blok menggunakan gambar abu-abu ketika mereka berada di bawah titik mereka menjadi dapat digunakan.


5. Mengaktifkan dan Menonaktifkan Drag/Drop

Jika Anda menjalankan permainan sekarang, Anda akan melihat bahwa meskipun blok tidak dapat ditukar satu sama lain ketika mereka abu-abu, blok abu-abu masih bisa diseret dan dimanipulasi. Ini karena kita tidak pernah menonaktifkan kemampuan Drag/Drop dari blok ketika mencegah pemain untuk bertukar dengan mereka.

Agar blok abu-abu tidak dapat dipindahkan, kita akan memodifikasi Acara yang kita buat di bagian sebelumnya. Pertama kita akan menambahkan Aksi baru yang mematikan menyeret ketika Blok di bawah titik itu menjadi dapat digunakan.

Tambahkan Action ini ke Event yang dibuat sebelumnya:

Kita juga akan menambahkan pernyataan Else untuk Event ini yang memungkinkan blok diseret lagi setelah berada di atas titik blok tersebut dapat digunakan:

Dengan kedua perubahan ini, Event akan terlihat seperti ini:

Match3_Part6_ModifiedInactive

Jika Anda menguji permainan pada titik ini, blok seharusnya tidak lagi dapat digunakan ketika mereka abu-abu, dan harus bekerja dengan cara yang sama seperti yang selalu mereka miliki ketika tidak.


6. Perubahan Kecepatan

Hal terakhir yang ingin saya bahas dalam artikel ini adalah sistem yang akan memungkinkan kita untuk mengubah kecepatan permainan dari waktu ke waktu. Secara khusus, ini adalah sistem yang akan membuat blok bergerak lebih cepat karena pemain menghilangkan lebih banyak dari mereka.

Sistem yang akan kita buat relatif sederhana: setiap kali pemain mendapat sejumlah poin, kecepatan permainan akan meningkat berdasarkan pada modifikator yang akan kita buat, dan jumlah poin yang dibutuhkan pemain untuk mendapatkan peningkatan kecepatan berikutnya akan berubah berdasarkan pengubah kedua.

Sebelum kita benar-benar dapat mulai membuat Event untuk sistem ini, kita akan membuat beberapa Variabel Global guna menangani fitur-fitur baru untuk kita:

Variabel baru Anda akan terlihat seperti ini:

Match3_Part6_GlobalVariables

Sekarang kita memiliki variabel di tempat, saya akan menjelaskan apa yang masing-masing.

  • SPEEDMOD adalah variabel yang akan kita kalikan kecepatannya dengan memodifikasinya setiap kali pemain mencapai jumlah poin yang mereka butuhkan untuk menyebabkan peningkatan kecepatan.
  • PointsForSpeedUp adalah jumlah poin yang dibutuhkan pemain untuk mencapai kecepatan berikutnya.
  • PointsBetweenSpeedUps merepresentasikan berapa banyak variabel PointsForSpeedUp akan meningkat ketika Player mendapat kecepatan, untuk menyesuaikannya sehingga kecepatan berikutnya mengambil lebih banyak poin. Sekarang ini adalah 400, seperti PointsForSpeedUp, tetapi ketika pemain benar-benar mendapat peningkatannya akan dikalikan dengan POINTSFORSPEEDUPMOD sebelum ditambahkan ke PointsForSpeedUp.
  • Akhirnya, POINTSFORSPEEDUPMOD adalah variabel yang akan kita gunakan untuk mengubah jumlah poin yang dibutuhkan pemain untuk meningkatkan kecepatan mereka di waktu lain melewati yang paling mereka dapatkan.

Seiring dengan pengaturan variabel, kita juga perlu membuat objek sprite baru yang akan bertindak sebagai peringatan untuk pemain ketika kecepatan meningkat.

Pergi ke Layout 1 dan ikuti langkah-langkah ini untuk membuat sprite baru:

  1. Masukkan objek Sprite baru di Layout 1.
  2. Dengan Editor Animasi, buka gambar SpeedIncImage.png.
    1. Setel Nama menjadi SpeedIncreaseIndicator.
    2. Setel Layer ke Game Field.
    3. Atur Posisi ke 188, 329.
    4. Setel Initial visibility ke Invisible.
      1. Tambahkan Fade Behavior ke Sprite.
      2. Setel Active at Start untuk No.
      3. Atur Fade out time menjadi 2.5.
      4. Set Destroy ke No.

Layout Anda seharusnya sekarang terlihat seperti ini:

Match3_Part6_SpeedLayout

Sekarang kita akan benar-benar membuat Event yang mengubah Kecepatan:

Event Anda akan terlihat seperti ini:

Match3_Part6_CheckForSpeedUp

Ketika fungsi ini dipanggil, ia memeriksa untuk melihat apakah pemain telah mencetak poin yang cukup untuk menjamin peningkatan kecepatan. Jika mereka punya, maka:

  • ini mengaktifkan sprite yang memberi tahu pemain bahwa kecepatan telah meningkat dengan membuatnya terlihat dan memulai Fade
  • ini meningkatkan kecepatan dengan mengalikannya dengan pengubah
  • ini menentukan jumlah poin yang diperlukan sebelum mempercepat berikutnya, dan
  • ia menambahkan nilai itu ke jumlah total poin yang perlu dimiliki pemain sebelum kecepatan meningkat lagi.

Dengan fungsi ini selesai, kita hanya perlu memastikannya dipanggil. Buka fungsi GivePoints() dan tambahkan Action ini ke akhir event utama dan sub-event:

Fungsi GivePoints() seharusnya sekarang terlihat seperti ini:

Match3_Part6_ModifiedGivePoints

Dengan Event itu selesai Anda harus dapat menguji permainan Anda dan melihat sistem mempercepat dalam tindakan.

Tips: Semakin saya memainkannya, saya menemukan bahwa nilai-nilai ini terasa sedikit, jadi saya sarankan Anda meluangkan waktu untuk bereksperimen dengan sistem, dan temukan nilai-nilai yang paling nyaman bagi Anda.


Kesimpulan

Kita telah membahas banyak topik yang berbeda dalam artikel ini, tetapi semua yang ditangani secara langsung atau tidak langsung terkait dengan mendapatkan sistem gerakan untuk bekerja seperti yang diinginkan. Meskipun butuh beberapa waktu, dan mengharuskan kita untuk membuat lebih banyak sistem daripada yang diperkirakan sebelumnya, hasilnya sangat berharga dan pada akhirnya kita memiliki sistem yang sangat kuat.

Karena seberapa banyak yang sudah kita bahas, saya pikir ini adalah tempat yang bagus untuk mengakhiri artikel ini. Artikel selanjutnya adalah tutorial terakhir dalam seri ini dan kita akan membahas banyak topik yang lebih kecil di dalamnya, tetapi hal terbesar yang dibahas adalah penghapusan pertandingan yang sudah dibuat sebelumnya.

Jika Anda ingin mulai mencoba mencari tahu bagaimana cara menghilangkannya, lihatlah bagaimana kita mendeteksi kecocokan untuk memulai. Sistem yang kita buat akan sangat mirip dengan sistem itu, kecuali sistem itu akan menggunakan kecocokan yang ditemukannya dengan cara yang berbeda. Mulailah memikirkannya dan lihat apa yang bisa Anda hasilkan, dan saya akan melihat Anda kembali ke sini nanti untuk tutorial utama terakhir dalam seri ini.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.