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

Menciptakan Dunia Isometrik: Primer untuk Pengembang Game, Lanjutan

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Dalam tutorial ini, kita akan membangun yang asli Menciptakan Dunia Isometrik primer, dan belajar tentang menerapkan pickup, trigger tiles, tingkat swapping, menemukan jalan dan mengikuti, tingkat bergulir, tinggi isometrik dan proyektil isometrik.


1. Pickups

Pickup adalah barang yang dapat dikumpulkan dalam level, biasanya dengan hanya berjalan di atasnya - misalnya, koin, permata, uang tunai, dan amunisi.

Data Pickup juga dapat diakomodasi langsung ke data level kami seperti di bawah ini:

Dalam data tingkat ini, kami menggunakan 8 untuk menunjukkan pickup (1 dan 0 mewakili dinding dan ubin walkable masing-masing, seperti sebelumnya).

Sangat penting untuk memahami bahwa 8 sebenarnya menunjukkan dua ubin, bukan hanya satu: itu berarti kita harus terlebih dahulu menempatkan ubin rumput walkable dan kemudian menempatkan pickup di atas. Ini berarti bahwa setiap pikap akan selalu berada di atas ubin rumput. Jika kita ingin berada di ubin bata walkable, maka kita akan membutuhkan ubin lain yang dilambangkan dengan nomor lain, katakanlah 9, yang mewakili 'pickup on brick tile'.

Seni isometrik yang khas akan memiliki beberapa ubin walkable - misalkan kita memiliki 30. Pendekatan di atas berarti bahwa jika kita memiliki N pickup kita akan membutuhkan (N * 30) ubin di samping 30 ubin asli, karena setiap ubin akan perlu memiliki satu versi dengan pickup dan satu tanpa. Ini tidak terlalu efisien; sebagai gantinya, kita harus mencoba membuat kombinasi ini secara dinamis.

Untuk melakukan ini, kita dapat menggunakan larik lain dengan data pengambilan saja, dan gunakan ini untuk menempatkan ubin pikap di atas data tata letak tingkat:

... ditambah:

.. .results di:

pickups in level

Pendekatan ini memastikan bahwa kita hanya membutuhkan 30 ubin asli di samping ubin N pickup, karena kita dapat membuat kombinasi apa pun dengan memadukan kedua karya seni saat merender level.

Picking Up Pickups

Mendeteksi pickup dilakukan dengan cara yang sama seperti mendeteksi ubin tabrakan, tetapi setelah memindahkan karakter.

Pada fungsi isPickup(tile coordinate), kami memeriksa apakah nilai array data pikap pada koordinat yang diberikan adalah ubin pikap atau bukan. Nomor dalam array pickup pada koordinat ubin menunjukkan jenis pickup.

Kami memeriksa tabrakan sebelum memindahkan karakter tetapi memeriksa pickup setelahnya, karena dalam kasus tabrakan, karakter tidak boleh menempati tempat jika sudah ditempati oleh tabrakan, tetapi dalam kasus pickup, karakter bebas bergerak di atasnya. .

Hal lain yang perlu diperhatikan adalah data tabrakan biasanya tidak pernah berubah, tetapi data pickup berubah setiap kali kita mengambil item. (Ini biasanya hanya melibatkan perubahan nilai dalam array pickup dari, katakanlah, 8 ke 0.)

Ini mengarah ke masalah: apa yang terjadi ketika kita perlu me-restart level, dan dengan demikian mengatur ulang semua pickup kembali ke posisi semula? Kami tidak memiliki informasi untuk melakukan ini, karena array pickup telah diubah saat pemain mengambil item. Solusinya adalah dengan menggunakan array duplikat untuk pickup saat bermain dan untuk menjaga array pickup asli utuh - misalnya, kita menggunakan pickupArray [] dan pickupLive [], mengkloning yang terakhir dari yang pertama pada awal level, dan hanya ubah pickupLive [] selama bermain.


Klik untuk memberi fokus SWF, lalu gunakan tombol panah. Klik di sini untuk versi ukuran penuh.

Anda harus memperhatikan bahwa kami memeriksa pickup kapan pun karakter berada di ubin itu. Ini bisa terjadi beberapa kali dalam satu detik (kami hanya memeriksa saat pengguna bergerak, tetapi kami dapat berputar-putar dalam ubin) tetapi logika di atas tidak akan gagal; karena kami mengatur data array pickup ke 0 saat pertama kali kami mendeteksi pickup, semua pemeriksaan ispickup (tile) berikutnya akan mengembalikan false untuk ubin itu.


2. Trigger Tiles

Seperti namanya, pemicu ubin menyebabkan sesuatu terjadi ketika pemain menginjaknya atau menekan tombol sambil menginjaknya. Mereka mungkin memindahkan pemain ke lokasi yang berbeda, membuka gerbang, atau menelurkan musuh, untuk memberikan beberapa contoh. Dalam arti, pickup hanya bentuk khusus dari ubin pemicu: ketika pemain menginjak ubin berisi koin, koin menghilang dan counter koin mereka meningkat.

Mari kita lihat bagaimana kita bisa mengimplementasikan pintu yang membawa pemain ke level yang berbeda. Ubin di sebelah pintu akan menjadi ubin pemicu; ketika pemain menekan spasi, mereka akan melanjutkan ke tingkat berikutnya.

hero at door

Untuk mengubah level, yang perlu kita lakukan adalah menukar susunan data tingkat saat ini dengan tingkat yang baru, dan mengatur posisi dan arah ubin baru untuk karakter pahlawan.

Misalkan ada dua tingkat dengan pintu untuk memungkinkan lewat di antara mereka. Karena ubin tanah di sebelah pintu akan menjadi ubin pemicu di kedua tingkat, kita dapat menggunakan ini sebagai posisi baru untuk karakter ketika muncul di tingkat.

Logika implementasi di sini sama seperti untuk pickup, dan sekali lagi kami menggunakan larik untuk menyimpan nilai pemicu. Ini tidak efisien dan Anda harus mempertimbangkan struktur data lain untuk tujuan ini, tapi mari kita tetap sederhana ini demi tutorial. Biarkan aras tingkat baru seperti di bawah ini (7 menunjukkan pintu):

Biarkan tingkat memiliki beberapa pickup, seperti yang dijelaskan oleh susunan penjemputan di bawah ini:

Biarkan array ubin picu yang sesuai untuk setiap level adalah seperti di bawah ini:

Nilai-nilai (1 dan 2) menunjukkan tingkat yang akan dimuat ketika pemain menekan Space.

Berikut kode yang berjalan saat pemain menyentuh kunci itu:

Fungsi isTrigger () memeriksa apakah nilai array data pemicu pada koordinat yang diberikan lebih besar dari nol. Jika demikian, kode kami melewati nilai itu ke doRelevantAction (), yang memutuskan fungsi mana yang harus dipanggil berikutnya. Untuk tujuan kita, kita akan menggunakan aturan sederhana bahwa jika nilai terletak antara 1 dan 10, pintu, dan jadi fungsi ini akan disebut:

Karena nilai ubin dalam array memicu juga menunjukkan tingkat yang perlu diisi, kita hanya dapat menyebarkannya ke swapLevel(). Ini berarti, pada gilirannya, bahwa permainan kami memiliki sepuluh tingkat.

Ini demo kerja. Cobalah mengambil item dengan berjalan di atas mereka dan tingkat swapping dengan berdiri di samping pintu dan memukul Space.


Klik untuk memberi fokus SWF, lalu gunakan tombol panah. Klik di sini untuk versi ukuran penuh.

Saya telah membuat pemicu diaktifkan ketika Space dilepaskan; jika kita hanya mendengarkan kunci yang ditekan, maka kita akan berakhir dalam satu lingkaran di mana kita bertukar antara level selama kunci ditekan, karena karakter selalu memunculkan di tingkat baru di atas ubin pemicu.

Berikut adalah kode lengkap (dalam AS3):


3. Path Finding

Path finding dan path following adalah proses yang cukup rumit. Ada berbagai pendekatan menggunakan algoritme yang berbeda untuk menemukan jalur di antara dua titik, tetapi data tingkat kami adalah hal-hal 2D array yang lebih mudah daripada yang seharusnya - kami memiliki node yang terdefinisi dengan baik dan unik yang dapat ditempati oleh pemain dan kami dapat dengan mudah memeriksa apakah mereka bisa berjalan.

Gambaran rinci tentang algoritma pathfinding berada di luar ruang lingkup artikel ini tetapi saya akan mencoba untuk menjelaskan cara paling umum kerjanya: algoritma jalur terpendek, di mana algoritma A * dan Dijkstra adalah implementasi yang terkenal.

Kami bertujuan untuk menemukan simpul yang menghubungkan simpul awal dan simpul akhir. Dari node awal, kami mengunjungi kedelapan node yang berdekatan dan menandai semuanya sebagai dikunjungi; Proses inti ini diulang untuk setiap node yang baru dikunjungi, secara rekursif. Setiap thread melacak simpul yang dikunjungi. Ketika melompat ke node tetangga, node yang telah dikunjungi node dilewati (rekursi berhenti); jika tidak, proses berlanjut sampai kita mencapai simpul akhir, di mana rekursi berakhir dan jalur lengkap yang diikuti dikembalikan sebagai susunan simpul. Kadang-kadang ujung node tidak pernah tercapai, dalam hal ini path path gagal. Kami biasanya akhirnya menemukan beberapa jalur antara dua node, dalam hal ini kita mengambil satu dengan sedikitnya jumlah node.

Ada banyak solusi standar yang tersedia untuk mencari jalan berdasarkan pada 2D array, jadi kita akan melewatkan menciptakan kembali roda itu. Mari gunakan solusi AS3 ini (saya sarankan Anda memeriksa demo penjelasan yang hebat ini)).

Solusinya mengembalikan array dengan titik-titik yang membentuk jalur dari titik awal ke titik akhir:

Path Mengikuti

Setelah kita memiliki jalur sebagai array simpul, kita perlu membuat karakter mengikutinya.

Katakanlah kita ingin membuat karakter berjalan ke ubin yang kita klik. Pertama-tama kita perlu mencari jalan antara node yang karakter saat ini menempati dan node di mana kita mengklik. Jika jalur yang berhasil ditemukan, maka kita perlu memindahkan karakter ke node pertama dalam array node dengan pengaturan sebagai tujuan. Setelah kami sampai ke node tujuan, kami memeriksa di mana ada lebih banyak node dalam array node dan, jika demikian, atur node berikutnya sebagai tujuan - dan seterusnya sampai kita mencapai node terakhir.

Kami juga akan mengubah arah pemain berdasarkan node saat ini dan node tujuan baru setiap kali kami mencapai node. Di antara node, kita hanya berjalan di arah yang diperlukan sampai kita mencapai node tujuan. Ini adalah AI yang sangat sederhana.

Lihat contoh kerja ini:


Klik untuk memindahkan karakter. Klik di sini untuk versi berukuran penuh.

Berikut adalah sumber lengkap:

Anda mungkin telah memperhatikan bahwa saya menghapus logika pemeriksaan tabrakan; itu tidak lagi diperlukan karena kami tidak dapat memindahkan karakter secara manual menggunakan keyboard. Namun, kami perlu memfilter poin klik yang valid dengan menentukan apakah kami telah mengeklik di dalam area berjalan kaki, daripada ubin dinding atau ubin tidak dapat dijelajahi.

Hal lain yang menarik untuk pengkodean AI: kita tidak ingin karakter untuk menghadap ke ubin berikutnya di array node segera setelah ia tiba di yang saat ini, karena suatu hasil giliran segera dalam karakter kita berjalan di perbatasan ubin. Sebagai gantinya, kita harus menunggu sampai karakter tersebut berada beberapa langkah di dalam ubin sebelum kita mencari tujuan berikutnya. Juga lebih baik menempatkan pahlawan secara manual di tengah-tengah ubin saat ini tepat sebelum kita berbelok, untuk membuatnya terasa sempurna.

Juga, jika Anda menjelajahi demo di atas, Anda mungkin memperhatikan bahwa logika undian kami terganggu ketika pahlawan bergerak secara diagonal mendekati ubin dinding. Ini adalah kasus ekstrim di mana, untuk satu frame, pahlawan kita tampaknya berada di dalam ubin dinding. Ini terjadi karena kami telah menonaktifkan pemeriksaan benturan. Satu solusi adalah dengan menggunakan algoritma pathfinding yang mengabaikan solusi diagonal. (Hampir semua algoritma pencarian jalan memiliki opsi untuk mengaktifkan atau menonaktifkan solusi berjalan diagonal.)


4. Projectiles

Proyektil adalah sesuatu yang bergerak ke arah tertentu dengan kecepatan tertentu, seperti peluru, mantra sihir, bola, dan sebagainya.

Segala sesuatu tentang proyektil adalah sama dengan karakter pahlawan, selain dari ketinggian: daripada berguling di tanah, proyektil sering mengapung di atasnya pada ketinggian tertentu. Peluru akan bergerak di atas tingkat pinggang karakter, dan bahkan bola mungkin perlu terpental.

Satu hal yang menarik untuk dicatat adalah bahwa tinggi isometrik sama dengan tinggi dalam tampilan sisi 2D. Tidak ada konversi rumit yang terlibat. Jika bola adalah 10 piksel di atas tanah dalam koordinat Cartesian, itu adalah 10 piksel di atas tanah dalam koordinat isometrik. (Dalam kasus kami, sumbu yang relevan adalah sumbu y.)

Mari mencoba menerapkan bola yang terpental di padang rumput kami yang berdinding. Kami akan mengabaikan efek redaman (sehingga memantul terus tanpa henti), dan untuk sentuhan realisme kami akan menambahkan bayangan ke bola. Kami memindahkan bayangan seperti kita memindahkan karakter pahlawan (yaitu tanpa menggunakan nilai tinggi), tetapi untuk bola kita harus menambahkan nilai tinggi ke nilai Y isometrik. Nilai ketinggian akan berubah dari frame ke frame tergantung pada gravitasi, dan setelah bola menyentuh tanah, kita akan membalik kecepatan saat ini sepanjang sumbu y.

Sebelum kita mengatasi memantul dalam sistem isometrik, kita akan melihat bagaimana kita dapat menerapkannya dalam sistem 2D Cartesian. Mari kita merepresentasikan tinggi bola dengan zValue variabel. Bayangkan bahwa, untuk memulai dengan, bola adalah sepuluh piksel tinggi, jadi zValue = 10. Kita akan menggunakan dua variabel lagi: incrementValue, yang dimulai pada 0, dan gravitasi, yang memiliki nilai 1.

Setiap frame, kami menambahkan incrementValue ke zValue, dan kurangi gravitasi dari incrementValue. Ketika nilai z mencapai 0, itu berarti bola telah mencapai tanah; pada titik ini, kita membalik tanda incrementValue dengan mengalikannya dengan -1 mengubahnya menjadi angka positif. Ini berarti bola akan bergerak ke atas dari frame berikutnya, sehingga memantul.

Beginilah yang terlihat dalam kode:

Kami benar-benar akan menggunakan versi yang sedikit dimodifikasi dari itu:

Ini menghilangkan efek redaman, dan memungkinkan bola memantul selamanya.

Menerapkan ini ke bola kami, kami mendapatkan demo di bawah ini:


Klik untuk memberi fokus SWF, lalu gunakan tombol panah. Klik di sini untuk versi ukuran penuh.

Berikut adalah kode AS3 lengkap:

Memahami bahwa peran yang dimainkan oleh bayangan yang sangat penting yang menambahkan realisme ilusi ini. Dalam contoh di atas, saya telah menambahkan ketinggian setengah bola ke bola y-posisi, sehingga Bounce di posisi yang tepat sehubungan dengan bayangan.

Juga, perhatikan bahwa kita sekarang menggunakan dua layar Koordinat (x dan y) untuk mewakili tiga dimensi di isometrik koordinat - sumbu y di layar koordinat juga terhadap paksi di isometrik koordinat. Hal ini dapat membingungkan!


5. Isometric Scrolling

Ketika area level jauh lebih besar dari area layar yang terlihat, kita perlu membuatnya menggulir.

Area layar yang terlihat dapat dianggap sebagai persegi panjang yang lebih kecil di dalam persegi panjang yang lebih besar dari area level lengkap. Menggulir pada dasarnya hanya memindahkan persegi panjang bagian dalam di dalam yang lebih besar:

Scrolling Start

Biasanya, ketika bergulir seperti itu terjadi, posisi pemain tetap sama terhadap layar persegi panjang, biasanya di pusat layar. Yang kita butuhkan, untuk mengimplementasikan pengguliran, adalah untuk melacak titik sudut persegi panjang bagian dalam:

Scrolling Next

Titik sudut ini, yang dalam koordinat Cartesian (dalam gambar kita hanya bisa menunjukkan nilai isometrik), akan jatuh dalam ubin di data level. Untuk menggulir, kami menaikkan posisi x dan y dari titik sudut dalam koordinat Cartesian. Sekarang kita dapat mengonversi titik ini menjadi koordinat isometrik dan menggunakannya untuk menggambar layar.

Nilai-nilai yang baru dikonversi, di ruang isometrik, perlu menjadi sudut layar kami juga, yang berarti mereka yang baru (0, 0). Jadi, saat menguraikan dan menggambar data level, kami mengurangi nilai ini dari posisi isometrik setiap ubin, dan hanya menggambarnya jika posisi baru ubin berada di dalam layar. Kami dapat mengungkapkan ini dalam langkah-langkah seperti:

  • Perbarui koordinat x dan y sudut Cartesian.
  • Ubah ini menjadi ruang isometrik.
  • Mengurangi nilai dari posisi isometrik menarik setiap ubin.
  • Gambarkan ubin hanya jika posisi isometrik baru jatuh di dalam layar.

Lihat contoh ini (gunakan panah untuk menggulir):


Klik untuk memberi fokus SWF, lalu gunakan tombol panah. Klik di sini untuk versi ukuran penuh.

Berikut adalah kode sumber AS3 penuh:

Harap dicatat bahwa titik sudut bertambah ke arah yang berlawanan dengan pembaruan posisi pahlawan saat dia bergerak. Ini memastikan bahwa pahlawan tetap di tempatnya pada layar:

Logika gambar hanya berubah dalam dua garis, di mana kami menentukan koordinat Cartesian dari setiap ubin. Kami baru saja melewati titik sudut ke titik awal yang sebenarnya menggabungkan poin 1, 2, dan 3 di atas:

Beberapa catatan:

  • Saat menggulir, kita mungkin perlu menggambar ubin tambahan di batas layar, atau kita bisa melihat ubin menghilang dan muncul di layar ekstrem.
  • Jika Anda memiliki ubin yang mengambil lebih dari satu ruang, maka Anda perlu menggambar lebih banyak ubin di perbatasan. Misalnya, jika ubin terbesar di seluruh set ukuran X oleh Y, maka Anda akan perlu menggambar X lebih banyak ubin ke kiri dan kanan dan Y lebih banyak ubin ke atas dan bawah. Ini memastikan bahwa sudut ubin yang lebih besar akan tetap terlihat ketika menggulir masuk atau keluar dari layar.
  • Kami masih perlu memastikan bahwa kami tidak memiliki area kosong di layar saat kami mendekati batas tingkat.
  • Tingkat hanya harus menggulir hingga ubin paling ekstrem digambar di layar ekstrim yang bersangkutan - setelah ini, karakter harus terus bergerak di ruang layar tanpa menggulir tingkat. Untuk ini, kita perlu melacak keempat sudut layar dalam persegi panjang, dan mencekik gerakan bergulir dan logika gerakan yang sesuai. Apakah Anda siap menghadapi tantangan untuk mencoba menerapkan itu untuk diri Anda sendiri?

Kesimpulan

Seri ini terutama ditujukan untuk pemula yang mencoba menjelajahi dunia permainan isometrik. Banyak konsep yang dijelaskan memiliki pendekatan alternatif yang sedikit lebih rumit dan saya sengaja memilih yang paling mudah. Mereka mungkin tidak memenuhi semua skenario yang mungkin Anda temui, tetapi pengetahuan yang diperoleh dapat digunakan untuk membangun konsep-konsep ini untuk menciptakan solusi yang jauh lebih rumit.

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.