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

Gerakan Heksagonal Karakter Menggunakan Aksial Kordinat

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Pada bagian pertama dari seri, kami mengeksplorasi sistem koordinat yang berbeda untuk heksagonal ubin berbasis permainan dengan bantuan permainan Tetris heksagonal. Satu hal yang Anda mungkin telah memperhatikan adalah bahwa kami masih bergantung pada koordinat offset untuk menggambar tingkat ke layar menggunakan levelData array.

Anda juga mungkin ingin tahu bagaimana kita bisa menentukan koordinat aksial genteng heksagonal dari koordinat piksel pada layar. Metode yang digunakan dalam tutorial heksagonal minesweeper bergantung pada offset koordinat dan tidak solusi sederhana. Setelah kita mencari hal ini, kita akan melanjutkan untuk menciptakan solusi untuk gerakan heksagonal karakter dan pathfinding.

1. mengkonversi koordinat antara Pixel dan aksial

Ini akan melibatkan beberapa matematika. Kita akan menggunakan tata letak horisontal untuk seluruh tutorial. Mari kita mulai dengan mencari sangat membantu hubungan heksagon biasa lebar dan tinggi. Silakan lihat gambar di bawah.

Hexagonal tile its angles lengths are displayed

Pertimbangkan heksagon biasa biru di sebelah kiri gambar. Kita sudah tahu bahwa semua sisi sama panjang. Semua sudut interior adalah 120 derajat. Menghubungkan setiap sudut pusat hexagon akan menghasilkan enam segitiga, salah satu yang ditampilkan dengan menggunakan garis merah. Segitiga ini memiliki sudut internal setara dengan 60 derajat.

Seperti jalur merah perpecahan dua sudut sudut di tengah, kita mendapatkan 120/2 = 60. Sudut ketiga adalah 180-(60 + 60) = 60 sebagai jumlah dari semua sudut dalam segitiga harus 180 derajat. Jadi pada dasarnya segitiga adalah sebuah segitiga sama sisi, yang lebih jauh berarti bahwa setiap sisi segitiga memiliki panjang yang sama. Jadi di hexagon biru dua garis merah, jalur hijau dan setiap segmen garis biru adalah sama panjang. Dari gambar, itu jelas bahwa jalur hijau hexTileHeight/2.

Melanjutkan hexagon di sebelah kanan, kita dapat melihat bahwa sebagai sisi panjang sama dengan hexTileHeight/2, ketinggian bagian segitiga atas harus hexTileHeight/4 dan ketinggian bagian bawah segitiga harus hexTileHeight/4, yang luas totalnya mencapai ketinggian penuh hexagon, hexTileHeight.

Sekarang perhatikan segitiga right-angled kecil di atas kiri dengan satu hijau dan satu sudut biru. Sudut biru adalah 60 derajat karena setengah dari sudut sudut, yang pada gilirannya berarti bahwa sudut hijau 30 derajat (180-(60+90)). Menggunakan informasi ini, kami tiba pada hubungan antara tinggi dan lebar heksagon biasa.

Mengkonversi aksial Pixel Koordinat

Sebelum kita mendekati konversi, mari kita kembali gambar tata letak heksagonal horisontal yang mana kami telah menyoroti baris dan kolom di mana salah satu koordinat tetap sama.

Horizontal hexagonal layout with rows and columns highlighted where coordinates remain same

Mengingat nilai y layar, kita dapat melihat bahwa setiap baris memiliki offset y 3 * hexTileHeight/4, sementara turun di jalur hijau, nilai yang hanya bahwa perubahan adalah i. oleh karena itu, kita dapat menyimpulkan bahwa nilai pixel y hanya tergantung pada aksial i saya mengkoordinasikan.

Mana s adalah panjang sisi, yang ditemukan untuk menjadi hexTileHeight/2.

Layar x nilai sedikit lebih rumit daripada ini. Ketika mempertimbangkan ubin dalam satu baris, setiap ubin memiliki offset x hexTileWidth, yang jelas tergantung hanya pada koordinat j aksial. Tetapi setiap baris alternatif memiliki tambahan offset hexTileWidth/2 tergantung pada aksial i saya mengkoordinasikan.

Lagi mengingat garis hijau, jika kita membayangkan itu adalah kotak persegi maka garis akan telah vertikal, memuaskan persamaan x = j * hexTileWidth. Seperti koordinat hanya bahwa perubahan sepanjang jalur hijau saya adalah i, offset akan tergantung pada hal itu. Ini membawa kita ke persamaan berikut.

Jadi di sini kita telah mereka: persamaan untuk mengkonversi koordinat aksial ke koordinat layar. Fungsi konversi yang sesuai adalah sebagai berikut.

Kode direvisi untuk menggambar grid heksagonal adalah sebagai berikut.

Mengkonversi Pixel ke koordinat aksial

Membalikkan mereka persamaan dengan substitusi sederhana satu variabel akan membawa kita ke layar untuk persamaan aksial konversi.

Meskipun koordinat aksial diperlukan bilangan bulat, persamaan akan mengakibatkan mengambang titik angka. Jadi kita perlu untuk melengkapi mereka dan menerapkan beberapa koreksi, bergantung pada persamaan utama kami x y + z = 0. Fungsi konversi adalah sebagai berikut.

Periksa elemen interaktif, yang menggunakan metode ini untuk menampilkan ubin dan mendeteksi keran.

2. Karakter Gerakan

Konsep inti karakter gerakan di grid apapun serupa. Kami polling untuk input pengguna, menentukan arah, menemukan posisi dihasilkan, periksa jika air terjun posisi yang dihasilkan di dalam dinding di grid, lain memindahkan karakter untuk posisi itu. Anda dapat merujuk kepada saya isometrik karakter gerakan tutorial untuk melihat hal ini dalam tindakan terhadap konversi koordinat isometrik.

Satu-satunya hal yang berbeda di sini adalah konversi koordinat dan arah gerak. Untuk grid heksagonal horizontal selaras, ada enam tersedia arah gerak. Kita bisa menggunakan tombol keyboard A, W, E, D, X, dan Z untuk mengendalikan setiap arah. Default keyboard layout sesuai petunjuk sempurna, dan fungsi-fungsi terkait sebagai berikut.

Petunjuk diagonal gerak membuat sudut 60 derajat dengan Arah horizontal. Jadi kita dapat langsung menghitung posisi baru menggunakan trigonometri dengan menggunakan Cos 60 dan sinus 60. Dari movementVector ini, kita mengetahui posisi dihasilkan baru dan periksa jika jatuh di dalam dinding di grid sebagai di bawah ini.

Kami menambahkan movementVector ke vektor posisi pahlawan untuk mendapatkan posisi baru pahlawan sprite Centre. Kemudian kita menemukan posisi keempat penjuru pahlawan sprite dan memeriksa jika mereka bertabrakan. Jika tidak ada tabrakan, kemudian kita mengatur posisi baru untuk pahlawan sprite. Mari kita melihat bahwa dalam tindakan.

Biasanya, gerakan bebas-mengalir semacam ini tidak diperbolehkan dalam grid berbasis permainan. Biasanya, karakter bergerak dari ubin untuk ubin, ubin, Pusat untuk ubin pusat, berdasarkan perintah atau tekan. Saya percaya bahwa Anda dapat mencari solusi keluar sendiri.

3. Pathfinding

Jadi di sini kita berada di topik pathfinding, sebuah topik yang sangat menakutkan bagi beberapa orang. Dalam tutorial sebelumnya saya aku tidak pernah mencoba untuk menciptakan solusi pathfinding baru tetapi selalu memilih untuk menggunakan solusi tersedia yang pertempuran yang diuji.

Kali ini, saya sedang membuat pengecualian dan akan harus menemukan kembali roda, terutama karena ada berbagai permainan mekanik yang mungkin dan tidak ada solusi tunggal akan menguntungkan semua. Jadi sangat berguna untuk mengetahui bagaimana semuanya dilakukan untuk churn keluar solusi kustom Anda sendiri untuk mekanik permainan.

Algoritma yang paling dasar yang digunakan untuk pathfinding di grid adalah Algoritma Dijkstra. Kita mulai di node pertama dan menghitung biaya yang terlibat dalam bergerak ke semua node tetangga mungkin. Kami menutup node pertama dan pindah ke node tetangga dengan biaya terendah terlibat. Ini diulang untuk semua ditutup bebas node sampai kita mencapai tujuan. Varian ini adalah A * algoritma, yang mana kami juga menggunakan tag heuristic selain biayanya.

Heuristic digunakan untuk menghitung perkiraan jarak dari saat ini node ke node tujuan. Seperti yang kita tidak benar-benar tahu jalan, perhitungan jarak ini adalah selalu perkiraan. Jadi lebih baik heuristic akan selalu menghasilkan jalan yang lebih baik. Sekarang, yang sedang berkata, solusi terbaik tidak perlu yang menghasilkan jalur terbaik seperti yang kita perlu mempertimbangkan penggunaan sumber daya dan kinerja dari algoritma juga, ketika semua perhitungan perlu dilakukan secara real time atau sekali per update loop.

Heuristic termudah dan paling sederhana adalah Manhattan heuristic atau jarak Manhattan. Dalam kotak 2D, ini adalah benar-benar jarak antara simpul awal dan simpul akhir sebagai gagak lalat, atau jumlah blok kita harus berjalan.

Varian Heksagonal Manhattan

Untuk grid heksagonal kami, kita perlu menemukan varian untuk heuristic Manhattan untuk perkiraan jarak. Seperti kita berjalan pada ubin heksagonal, ide adalah untuk menemukan jumlah ubin kita perlu berjalan di atas untuk mencapai tujuan. Mari saya tunjukkan solusi pertama. Harap menggerakkan mouse ke elemen interaktif di bawah ini untuk melihat seberapa jauh ubin lain dari ubin di bawah mouse.

Dalam contoh di atas, kita menemukan ubin di bawah mouse dan mencari jarak dari semua ubin lain dari itu. Logika adalah untuk menemukan perbedaan i dan j aksial koordinat ubin kedua pertama, mengatakan di dan dj. Menemukan nilai-nilai absolut perbedaan ini, absi dan absj, sebagai jarak selalu positif.

Kita melihat bahwa ketika di dan dj yang positif dan ketika di dan dj yang negatif, jarak absi + absj. Ketika di dan dj tanda berlawanan, jarak adalah nilai yang lebih besar antara absi dan absj. Ini mengarah ke heuristik perhitungan fungsi getHeuristic sebagai berikut.

Satu hal perlu diperhatikan adalah bahwa kami tidak mempertimbangkan jika jalan yang dicapai benar-benar atau tidak; kami hanya berasumsi bahwa walkable dan menetapkan nilai jarak.

Menemukan Hexagonal Path

Mari kita lanjutkan dengan pathfinding untuk grid heksagonal kami dengan metode heuristic baru. Seperti yang kita akan menggunakan rekursi, akan lebih mudah untuk memahami sekali kami rincian logika inti dari pendekatan kami. Setiap ubin heksagonal akan memiliki jarak heuristic dan nilai biaya yang terkait dengan itu.

  • Kami memiliki fungsi rekursif, mengatakan findPath(tile), yang mengambil dalam satu ubin heksagonal, yang saat ini ubin. Awalnya ini akan menjadi awal ubin.
  • Jika ubin sama dengan ubin akhir, ujung rekursi dan kami telah menemukan jalan. Lain kita lanjutkan dengan perhitungan.
  • Kita menemukan semua tetangga walkable ubin. Kami akan loop melalui semua ubin tetangga dan menerapkan lebih lanjut logika untuk masing-masing dari mereka kecuali mereka ditutup.
  • Jika tetangga yang sebelumnya tidak dikunjungi dan tidak ditutup, kita menemukan jarak ubin tetangga untuk ubin akhir menggunakan heuristic kami. Kami menetapkan biaya ubin tetangga untuk ubin saat ini biaya + 10. Kami menetapkan ubin tetangga seperti dikunjungi. Kami menetapkan ubin tetangga sebelumnya ubin sebagai ubin saat ini. Kita melakukan ini untuk tetangga yang dikunjungi sebelumnya juga jika ubin saat ini biaya + 10 kurang dari biaya bahawa sesamamu manusia.
  • Kita menghitung total biaya seperti jumlah ubin tetangga biaya nilai dan nilai heuristic jarak. Di antara semua tetangga, kita memilih tetangga yang memberikan total terendah biaya dan panggilan findPath ubin yang tetangga.
  • Kami menetapkan ubin saat ini ditutup sehingga hal ini tidak akan dianggap lagi.
  • Dalam beberapa kasus, kita akan gagal untuk menemukan apapun ubin memenuhi kondisi, dan kemudian kita menutup ubin saat ini, membuka ubin sebelumnya, dan mengulang.

Ada kondisi kegagalan jelas dalam logika ketika lebih dari satu ubin memenuhi kondisi. Algoritma yang lebih baik akan menemukan semua jalan yang berbeda dan memilih salah satu dengan panjang terpendek, tapi kita tidak akan melakukan itu di sini. Periksa pathfinding dalam aksi di bawah ini.

Untuk contoh ini, saya sedang menghitung tetangga berbeda daripada dalam contoh Tetris. Bila menggunakan aksial koordinat, ubin tetangga memiliki koordinat yang lebih tinggi atau lebih rendah dengan nilai 1.

Fungsi rekursif findPath adalah sebagai berikut.

Ini mungkin membutuhkan lebih lanjut dan membaca beberapa untuk benar memahami apa yang terjadi, tapi percayalah, itu bernilai usaha. Ini adalah hanya solusi yang sangat dasar dan bisa meningkat banyak. Untuk memindahkan karakter sepanjang jalan dihitung, Anda dapat merujuk ke jalanku isometrik mengikuti tutorial.

Menandai jalan dilakukan dengan menggunakan fungsi rekursif sederhana yang lain, paintPath(tile), yang pertama disebut dengan ubin akhir. Kami hanya menandai previousNode ubin jika ada.

Kesimpulan

Dengan bantuan dari semua tiga heksagonal tutorial saya telah berbagi, Anda harus mampu memulai dengan Anda berikutnya heksagonal ubin berbasis permainan mengagumkan.

Harap diperhatikan bahwa ada pendekatan-pendekatan lain juga, dan ada banyak lebih lanjut membaca luar sana jika Anda bangun untuk itu. Tolong beritahu saya melalui komentar jika Anda memerlukan sesuatu yang lebih untuk dieksplorasi dalam kaitannya dengan heksagonal ubin berbasis permainan.

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.