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

Mewujudkan Dunia Isometrik: Sebuah Primer untuk Pemaju Permainan, Terus

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Aisyah Arrafah (you can also view the original English article)

Dalam tutorial ini, kami akan membina buku asas Creating Isometric World yang asal, dan belajar tentang melaksanakan pickup, jubin pencetus, pertukaran tahap, mencari jalan dan mengikuti, menatal tahap, ketinggian isometrik dan projektil isometrik.


1. Pickup

Pickup adalah item yang boleh dikumpulkan dalam tahap, biasanya dengan hanya berjalan di atasnya - sebagai contoh, duit syiling, permata, wang tunai, dan peluru.

Data pikap juga boleh ditempatkan terus ke dalam data tahap kami seperti di bawah:

Dalam data tahap ini, kita menggunakan 8 untuk menandakan pickup (1 dan 0 mewakili dinding dan walkable ubin masing-masing, seperti sebelumnya).

Adalah penting untuk memahami bahawa 8 sebenarnya menandakan dua jubin, bukan hanya satu: ini bermakna kita perlu terlebih dahulu meletakkan jubin rumput yang boleh dilalui dan kemudian meletakkan jemput di atas. Ini bermakna bahawa setiap pickup akan sentiasa berada di jubin rumput. Jika kita mahu ia berada di jubin bata yang boleh dilalui, maka kita memerlukan satu lagi jubin yang dilambangkan oleh nombor lain, katakan 9, yang mewakili "pickup pada jubin bata".

Seni isometrik biasa akan mempunyai pelbagai jubin yang boleh dilalui - katakan kita mempunyai 30. Pendekatan di atas bermaksud bahawa jika kita mempunyai N pickups kita akan memerlukan (N * 30) jubin sebagai tambahan kepada 30 jubin asli, kerana setiap jubin perlu mempunyai satu versi dengan pickup dan satu tanpa. Ini tidak begitu berkesan; Sebaliknya, kita harus cuba membuat kombinasi ini secara dinamik.

Untuk melakukan ini, kita boleh menggunakan array lain dengan data pickup sahaja, dan menggunakan ini untuk meletakkan jubin pikap di atas data susun atur tahap:

... more:

...keputusan dalam:

pickups in level

Pendekatan ini memastikan bahawa kita hanya memerlukan 30 jubin asli selain jubin N pickup, kerana kita boleh membuat apa-apa gabungan dengan menggabungkan kedua-dua kepingan seni ketika membuat rendering.

Picking Up Pickups

Mengesan pickup dilakukan dengan cara yang sama seperti mengesan jubin perlanggaran, tetapi setelah menggerakkan karakter.

Dalam fungsi isPickup (koordinat jubin), kita periksa sama ada nilai array data piksel pada koordinat yang diberikan adalah jubin pikap atau tidak. Nombor dalam julat pikap pada koordinat jubin itu menandakan jenis pikap.

Kami memeriksa perlanggaran sebelum memindahkan watak itu tetapi periksa untuk pickup selepas itu, kerana dalam hal pelanggaran watak tidak boleh menduduki tempat jika ia telah diduduki oleh jubin tabrakan, tetapi dalam hal pickup watak itu bebas bergerak di atasnya .

Perkara lain yang perlu diperhatikan ialah data perlanggaran biasanya tidak pernah berubah, tetapi data pickup berubah setiap kali kita mengambil item. (Ini biasanya hanya melibatkan mengubah nilai dalam pelbagai pickup dari, katakan, 8 hingga 0.)

Ini membawa kepada masalah: apa yang berlaku apabila kita perlu memulakan semula tahap, dan dengan itu menetapkan semula semua pick kembali ke kedudukan asal mereka? Kami tidak mempunyai maklumat untuk melakukan ini, kerana pelbagai pickup telah berubah ketika pemain mengambil item. Penyelesaiannya ialah menggunakan pelbagai pendua untuk pickup semasa bermain dan untuk memastikan pilihan pickup asal utuh - contohnya, kami menggunakan pickupsArray[] dan pickupsLive[], clone yang terakhir dari yang pertama pada permulaan tahap, dan hanya menukar pickupsLive[] semasa bermain.


Klik untuk memberi tumpuan SWF, kemudian gunakan kekunci anak panah. Klik di sini untuk versi bersaiz penuh.

Anda harus perhatikan bahawa kami menyemak pickup setiap kali watak berada di ubin itu. Ini boleh berlaku beberapa kali dalam masa yang kedua (kita semak hanya apabila pengguna bergerak, tetapi kita boleh pergi bulat dan bulat dalam jubin) tetapi logik di atas tidak akan gagal; kerana kami menetapkan data piksel pickup ke 0 pada kali pertama kami mengesan pikap, semua pemeriksaan isPickup (jubin) berikutnya akan kembali palsu untuk jubin itu.


2. mencetuskan jubin

Seperti namanya, mencetuskan jubin menyebabkan sesuatu berlaku apabila pemain melangkah ke atasnya atau menekan kunci ketika melangkah ke arahnya. Mereka mungkin teleport pemain ke lokasi yang berbeza, membuka pintu masuk, atau menembak musuh, untuk memberikan beberapa contoh. Dalam erti kata, pickup hanyalah satu bentuk khas jubin pencetus: apabila pemain melangkah pada jubin yang mengandungi duit syiling, koin hilang dan kaunter duit syiling mereka meningkat.

Mari lihat bagaimana kita dapat melaksanakan pintu yang membawa pemain ke tahap yang berbeza. Jubin di sebelah pintu akan menjadi jubin pencetus; apabila pemain menekan bar Space, mereka akan meneruskan ke peringkat seterusnya.

hero at door

Untuk menukar tahap, semua yang perlu kita lakukan ialah menukar arus data peringkat semasa dengan tahap baru, dan tetapkan kedudukan dan arah jubin baru untuk watak pahlawan.

Katakan terdapat dua peringkat dengan pintu untuk membolehkan lulus antara mereka. Oleh kerana jubin tanah di sebelah pintu akan menjadi jubin pencetus di kedua-dua peringkat, kita boleh menggunakan ini sebagai kedudukan baru untuk watak apabila mereka muncul di peringkat.

Logik pelaksanaan di sini adalah sama seperti untuk pickup, dan sekali lagi kami menggunakan array untuk menyimpan nilai pencetus. Ini tidak cekap dan anda harus mempertimbangkan struktur data lain untuk tujuan ini, tetapi hendaklah simpan ini mudah demi tutorialnya. Biarkan aras peringkat baru seperti di bawah (7 menandakan pintu):

Biarkan tahap mempunyai beberapa piksel, seperti yang terperinci oleh tatasusunan piksel di bawah:

Biarkan susunan jubin yang sesuai untuk setiap peringkat adalah seperti di bawah:

Nilai-nilai (1 dan 2) menunjukkan tahap yang akan dimuatkan apabila pemain menekan Space.

Inilah kod yang berjalan apabila pemain memukul kunci itu:

Fungsi isTrigger() memeriksa sama ada nilai array data yang mencetuskan pada koordinat yang diberikan lebih besar daripada sifar. Jika ya, kod kami melepasi nilai itu untuk melakukanRelevantAction(), yang menentukan fungsi yang akan dipanggil seterusnya. Untuk tujuan kami, kami akan menggunakan peraturan mudah bahawa jika nilai terletak di antara 1 dan 10, ia adalah pintu, dan oleh itu fungsi ini akan dipanggil:

Oleh kerana nilai jubin dalam array pencetus juga menunjukkan tahap yang perlu dimuatkan, kita boleh lulusnya ke swapLevel(). Ini bermakna, gilirannya, permainan kami mempunyai sepuluh tahap.

Berikut adalah demo kerja. Cuba pilih barang-barang dengan berjalan di atasnya dan bertukar tahap dengan berdiri di sebelah pintu dan memukul Ruang.


Klik untuk memberi tumpuan SWF, kemudian gunakan kekunci anak panah. Klik di sini untuk versi bersaiz penuh.

Saya telah membuat pencetus diaktifkan apabila Space dilepaskan; jika kita hanya mendengar kekunci yang ditekan maka kita akan berakhir dalam gelung di mana kita menukar antara tahap selagi kunci ditekan, kerana watak itu sentiasa menanam di tahap baru di atas jubin pencetus.

Berikut adalah kod penuh (dalam AS3):


3. Mencari jalan

Tuntutan jalan dan laluan berikut adalah proses yang agak rumit. Terdapat pelbagai pendekatan menggunakan algoritma yang berbeza untuk mencari laluan di antara dua titik, tetapi data tahap kami adalah perkara array 2D adalah lebih mudah daripada yang mereka mungkin - kita mempunyai nod yang jelas dan unik yang boleh dimiliki oleh pemain dan kita dapat dengan mudah memeriksa sama ada mereka boleh dilalui.

Gambaran keseluruhan mengenai algoritma pathfinding adalah di luar skop artikel ini tetapi saya akan cuba menerangkan cara yang paling biasa ia berfungsi: algoritma jalan terpendek, yang algoritma A * dan Dijkstra adalah pelaksanaan yang terkenal.

Kami berhasrat untuk mencari nod yang menyambungkan nod awal dan simpulan nod. Dari nod yang bermula, kita lawati semua lapan nod jiran dan tandakan semuanya seperti yang dikunjungi; proses teras ini diulang untuk setiap nod yang baru dilawati, secara rekursif. Setiap benang menjejaki nod yang dilawati. Apabila melompat ke nod jiran, nod yang telah dilawati nod dilangkau (rekursi berhenti); jika tidak, proses itu berterusan sehingga kita mencapai nod yang berakhir, di mana rekursi berakhir dan laluan penuh diikuti dikembalikan sebagai array nod. Kadang-kadang nod akhir tidak pernah dicapai, dalam hal ini penemuan jalan gagal. Kita biasanya akan menemui pelbagai laluan antara kedua-dua nod, di mana kita mengambil yang mempunyai bilangan nod-kurangnya.

Terdapat banyak penyelesaian standard yang tersedia untuk penemuan laluan berdasarkan susunan 2D, jadi kami akan melangkau mencipta semula roda itu. Mari gunakan penyelesaian AS3 ini (saya cadangkan anda menyemak demo penerangan yang hebat ini)).

Penyelesaian itu mengembalikan array dengan titik membentuk jalan dari titik permulaan hingga titik akhir:

Laluan Mengikuti

Sebaik sahaja kita mempunyai jalan sebagai array nod, kita perlu membuat watak mengikutnya.

Katakanlah kita mahu membuat watak berjalan ke jubin yang kita klik. Kita perlu terlebih dahulu mencari laluan yang watak yang kini diduduki dan nod yang kita klik. Sekiranya laluan yang berjaya dijumpai, maka kita perlu memindahkan watak ke node pertama dalam array nod dengan menetapkan sebagai destinasi. Sebaik sahaja kita sampai ke nod destinasi, kita periksa di mana terdapat lebih banyak nod dalam array nod dan, jika ya, tetapkan nod seterusnya sebagai destinasi - dan sebagainya sehingga kita mencapai nod akhir.

Kami juga akan mengubah arah pemain berdasarkan nod semasa dan nod destinasi baru setiap kali kita mencapai nod. Antara nod, kita hanya berjalan mengikut arah yang diperlukan sehingga kita mencapai nod destinasi. Ini adalah AI yang sangat mudah.

Lihat contoh kerja ini:


Klik untuk memindahkan watak. Klik di sini untuk versi bersaiz penuh.

Inilah sumber penuh:

Anda mungkin perasan bahawa saya mengeluarkan logik pemeriksaan perlanggaran; ia tidak lagi diperlukan kerana kami tidak dapat memindahkan watak kami secara manual menggunakan papan kekunci. Walau bagaimanapun, kami perlu menapis mata klik yang sah dengan menentukan sama ada kami telah mengklik di kawasan yang boleh dilayari, bukannya jubin dinding atau jubin lain yang tidak dapat dilayari.

Satu lagi titik yang menarik untuk pengekodan AI: kita tidak mahu wataknya beralih ke muka jubin seterusnya dalam array nod sebaik sahaja dia tiba di saat ini, kerana giliran segera menghasilkan watak kita berjalan di sempadan jubin. Sebaliknya, kita harus menunggu sehingga watak itu beberapa langkah di dalam jubin sebelum kita mencari destinasi seterusnya. Ia juga lebih baik untuk menempatkan wira secara manual di tengah-tengah jubin semasa sebelum kita berpaling, untuk menjadikannya semua yang sempurna.

Selain itu, jika anda meneroka demo di atas, anda mungkin dapati bahawa logik undian kita akan terganggu apabila wira bergerak menyerong berhampiran dengan jubin dinding. Ini adalah kes yang melampau di mana, untuk satu bingkai, wira kita nampaknya berada di dalam jubin dinding. Anda akan melihat warna kategori sebagai persegi di sebelah kanan untuk penghantar mesej dalam peti masuk anda. Dalam tubuh mesej itu sendiri muncul di bawah nama penghantar.


4. Projektil

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

Segala-galanya mengenai peluru itu sama dengan watak pahlawan, selain dari ketinggian: bukannya bergulir di sepanjang tanah, projektil sering terapung di atasnya pada ketinggian tertentu. Peluru akan bergerak di atas paras pinggang watak, dan bahkan bola mungkin perlu melantun.

Satu perkara yang menarik untuk diperhatikan ialah ketinggian isometrik adalah sama seperti ketinggian dalam paparan sisi 2D. Tiada penukaran yang rumit yang terlibat. Sekiranya bola adalah 10 piksel di atas tanah di koordinat Cartesian, ia adalah 10 piksel di atas tanah dalam koordinat isometrik. (Dalam kes kita, paksi yang berkaitan adalah sumbu-y.)

Mari kita cuba untuk melancarkan bola melayang di padang rumput kita. Kami akan mengabaikan kesan redaman (dan menjadikannya melantun terus tanpa henti), dan untuk sentuhan realisme, kami akan menambahkan bayangan ke bola. Kami menggerakkan bayangan sama seperti kita memindahkan watak pahlawan (iaitu tanpa menggunakan nilai ketinggian), tetapi untuk bola kita mesti menambah nilai ketinggian ke nilai isometrik Y. Nilai ketinggian akan berubah dari bingkai ke bingkai bergantung pada graviti, dan apabila bola menjatuhkan tanah, kita akan membalikkan halaju arus sepanjang paksi-y.

Sebelum kita melantun dalam sistem isometrik, kita akan melihat bagaimana kita dapat melaksanakannya dalam sistem Cartesian 2D. Marilah kita mewakili ketinggian bola oleh zValue variabel. Bayangkan, bermula dengan, bola sepuluh piksel tinggi, jadi zValue = 10. Kami akan menggunakan dua lagi pembolehubah: incrementValue, yang bermula pada 0, dan graviti, yang mempunyai nilai 1.

Setiap bingkai, kami menambah incrementValue kepada zValue, dan tolak graviti dari incrementValue. Apabila zValue mencapai 0, ia bermakna bola telah mencapai tanah; pada ketika ini, kita membalikkan tanda incrementValue dengan mendarabkannya dengan -1 menjadikannya nombor positif. Ini bermakna bola akan bergerak ke atas dari bingkai seterusnya, dengan itu memantul.

Inilah caranya dalam kod:

Kami sebenarnya akan menggunakan versi yang sedikit diubahsuai itu:

Ini menghilangkan kesan redaman, dan membolehkan bola melantun selama-lamanya.

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


Klik untuk memberi tumpuan SWF, kemudian gunakan kekunci anak panah. Klik di sini untuk versi bersaiz penuh.

Berikut ialah kod AS3 penuh:

Adakah anda faham bahawa peranan yang dimainkan oleh bayangan adalah sesuatu yang sangat penting yang menambah realisme ilusi ini. Dalam contoh di atas, saya telah menambah setengah ketinggian bola ke kedudukan y-bola, sehingga ia melantun di posisi yang tepat sehubungan dengan bayangan.

Ini termasuk e-mel Outlook versi percuma ini yang saya dapat dari Outlook.com. Lihatlah Peti Masuk yang Fokus dengan tab Fokus terbuka:


5. Menatal Isometrik

Apabila kawasan tahap jauh lebih besar daripada kawasan skrin yang kelihatan, kita perlu membuatnya tatal.

Kawasan skrin yang boleh dilihat boleh dianggap sebagai segi empat yang lebih kecil dalam segiempat yang lebih besar dari kawasan tahap lengkap. Menggulung adalah, pada dasarnya, hanya memindahkan segi empat dalam dalam yang lebih besar:

Scrolling Start

Biasanya, apabila penggiliran itu berlaku, kedudukan pemain tetap sama dengan segi empat tepat skrin, biasanya di pusat skrin. Apa yang kita perlukan, untuk melaksanakan menatal, adalah untuk mengesan titik sudut segiempat dalam:

Scrolling Next

Titik sudut ini, yang terdapat dalam koordinat Cartesian (dalam imej kita hanya boleh menunjukkan nilai isometrik), akan jatuh dalam jubin dalam data tahap. Untuk menatal, kami menambah kedudukan x- dan y- dari titik sudut dalam koordinat Cartesian. Sekarang kita boleh menukar titik ini ke koordinat isometrik dan menggunakannya untuk menarik skrin.

Nilai yang baru ditukar, dalam ruang isometrik, perlu menjadi sudut skrin kami juga, yang bermaksud mereka adalah yang baru (0, 0). Jadi, semasa menghuraikan dan menarik data tahap, kita tolak nilai ini dari kedudukan isometrik bagi setiap jubin, dan hanya lukis jika jawatan baru jubin itu berada dalam skrin. Kita dapat menyatakannya dalam langkah seperti ini:

  • Kemas kini koordinat x- dan y- titik sudut Cartesian.
  • Tukar ini ke ruang isometrik.
  • Kurangkan nilai ini dari kedudukan cabutan isometrik bagi setiap jubin.
  • Lukis jubin hanya jika jawatan isometrik menarik baru berada dalam skrin.

Lihat contoh ini (gunakan anak panah untuk menatal):


Klik untuk memberi tumpuan SWF, kemudian gunakan kekunci anak panah. Klik di sini untuk versi bersaiz penuh.

Inilah kod sumber AS3 yang lengkap:

Sila ambil perhatian bahawa titik sudut bertambah di arah yang bertentangan dengan kemas kini kedudukan pahlawan ketika dia bergerak. Ini memastikan bahawa wira kekal di mana dia berkaitan dengan skrin:

Logik undian hanya berubah dalam dua baris, di mana kita menentukan koordinat Cartesian bagi setiap jubin. Kami hanya lulus titik sudut ke titik asal yang sebenarnya menggabungkan mata 1, 2 dan 3 di atas:

Beberapa nota:

  • Semasa menatal, kami mungkin perlu membuat ubin tambahan di sempadan skrin, atau kami mungkin melihat jubin menghilang dan muncul di skrin ekstrem.
  • Jika anda mempunyai jubin yang mengambil lebih dari satu ruang, maka anda perlu menarik lebih banyak jubin di sempadan. Sebagai contoh, jika jubin terbesar di seluruh langkah ditetapkan X oleh Y, maka anda perlu menggambar X lebih banyak jubin ke kiri dan kanan dan Y lebih banyak jubin ke bahagian atas dan bawah. Ini memastikan bahawa sudut jubin yang lebih besar masih akan kelihatan apabila menatal masuk atau keluar dari skrin.
  • Kami masih perlu memastikan bahawa kami tidak mempunyai ruang kosong di skrin semasa kami melangkah berhampiran sempadan peringkat.
  • Tahap hanya perlu tatal sehingga jubin paling ekstrim akan ditarik pada skrin yang sama ekstrem - selepas ini, watak itu harus terus bergerak dalam ruang skrin tanpa tahap menatal. Untuk ini, kita perlu mengesan semua empat sudut persegi panjang skrin dalaman, dan mendirikan logik pergerakan dan pergerakan pemain dengan sewajarnya. Adakah anda menghadapi cabaran untuk mencuba melaksanakannya untuk diri sendiri?

Kesimpulan

Siri ini terutamanya bertujuan untuk pemula yang cuba meneroka dunia permainan isometrik. Banyak konsep yang dijelaskan mempunyai pendekatan alternatif yang agak rumit dan saya sengaja memilih yang paling mudah. Mereka mungkin tidak memenuhi semua senario yang mungkin anda hadapi, tetapi pengetahuan yang diperoleh dapat digunakan untuk membina konsep-konsep ini untuk membuat penyelesaian yang 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.