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

Mewujudkan Dunia Isometric: Primer untuk Pemaju Permainan

by
Difficulty:IntermediateLength:LongLanguages:

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

Dalam tutorial ini, saya akan memberikan gambaran keseluruhan tentang apa yang anda perlu ketahui untuk mencipta dunia isometrik. Anda akan mempelajari apa unjuran isometrik, dan bagaimana untuk mewakili tahap isometrik sebagai array 2D. Kami akan merumuskan hubungan antara pandangan dan logik, supaya kami dapat dengan mudah memanipulasi objek pada skrin dan mengendalikan pengesanan perlanggaran berasaskan jubin. Kami juga akan melihat pengasingan kedalaman dan animasi watak.

Post Berkaitan

Mahu lebih banyak tip untuk mewujudkan dunia isometrik? Lihat siaran susulan, Mewujudkan Dunia Isometric: A Primer untuk Gamedevs, Lanjutan, dan buku Juwal, Essentials Game Development Starling.


1. Dunia Isometrik

Pandangan isometrik adalah kaedah paparan yang digunakan untuk mencipta ilusi 3D untuk permainan 2D lain - kadang-kadang disebut sebagai pseudo 3D atau 2.5D. Imej-imej ini (diambil dari Diablo 2 dan Age of Empires) menggambarkan maksud saya:

diablo

Diablo 2
AOE

Age of Empires

Melaksanakan pandangan isometrik boleh dilakukan dalam banyak cara, tetapi demi kesederhanaan saya akan memberi tumpuan kepada pendekatan berasaskan ubin, yang merupakan kaedah yang paling berkesan dan digunakan secara meluas. Saya telah melangkau setiap tangkapan skrin di atas dengan grid berlian yang menunjukkan bagaimana rupa bumi berpecah kepada jubin.


2. Permainan berasaskan Tile

Dalam pendekatan berasaskan jubin, setiap elemen visual dipecah menjadi kepingan yang lebih kecil, yang dipanggil jubin, saiz standard. Jubin-jubin ini akan diatur untuk membentuk dunia permainan mengikut data tahap pra-ditentukan - biasanya array 2D.

Post Berkaitan

Contohnya mari kita pertimbangkan pandangan 2D atas bawah standard dengan dua jubin - jubin rumput dan jubin dinding - seperti yang ditunjukkan di sini:

base 2d tiles

Beberapa jubin mudah

Jubin-jubin ini masing-masing mempunyai saiz yang sama antara satu sama lain, dan masing-masing segi empat sama, jadi ketinggian jubin dan lebar jubin adalah sama.

Untuk tahap dengan padang rumput yang tertutup di semua sisi oleh dinding, array 2D tahap data akan kelihatan seperti ini:

Di sini, 0 menandakan jubin rumput dan 1 menunjukkan jubin dinding. Menyusun jubin mengikut data tahap akan menghasilkan imej tahap bawah:

2d level simple

Tahap mudah, dipaparkan dalam paparan atas.

Kita boleh meningkatkan ini dengan menambahkan jubin sudut dan jubin dinding menegak dan mendatar berasingan, yang memerlukan lima jubin tambahan:

2d level complex

Tahap yang dipertingkatkan dengan nombor jubin

Saya harap konsep pendekatan berasaskan jubin kini jelas. Ini adalah pelaksanaan grid 2D yang mudah, yang mana kita boleh kod seperti:

Di sini kita menganggap bahawa lebar jubin dan ketinggian jubin adalah sama (dan yang sama untuk semua jubin), dan sepadan dengan dimensi imej jubin '. Jadi, lebar jubin dan ketinggian jubin untuk contoh ini adalah 50px, yang membentuk saiz keseluruhan 300x300px - iaitu enam baris dan enam tiang jubin berukuran 50x50px setiap satu.

Dalam pendekatan berasaskan jubin biasa, kami sama ada melaksanakan pandangan atas atau bawah; untuk pandangan isometrik kita perlu melaksanakan unjuran isometrik.


3. Unjuran Isometrik

Penjelasan teknikal yang terbaik tentang apa yang dimaksudkan dengan ''unjuran isometrik'', sejauh yang saya ketahui, adalah dari artikel ini oleh Clint Bellanger:

Kami sudut kamera kami bersama dua paksi (ayun kamera 45 darjah ke satu sisi, maka 30 darjah ke bawah). Ini mewujudkan grid berbentuk berlian (rhombus) di mana ruang grid dua kali lebih luas kerana ia tinggi. Gaya ini dipopulerkan oleh permainan strategi dan RPG tindakan. Jika kita melihat kiub dalam pandangan ini, tiga sisi kelihatan (atas dan dua menghadap ke sisi).

Walaupun bunyi agak rumit, sebenarnya menerapkan pandangan ini adalah mudah. Apa yang perlu kita fahami adalah hubungan antara ruang 2D dan ruang isometrik - iaitu, hubungan antara tahap data dan pandangan; transformasi dari koordinat ''Cartesian'' ke atas ke koordinat isometrik.

the_isometric_grid

Grid Cartesian vs grid isometrik.

(Kami tidak mempertimbangkan teknik berasaskan jubin heksagon, yang merupakan cara lain untuk melaksanakan dunia isometrik.)

Meletakkan Jubin Isometric

Biar saya cuba menyederhanakan hubungan antara data tahap yang disimpan sebagai array 2D dan pandangan isometrik - iaitu, bagaimana kita mengubah koordinat Cartesian ke koordinat isometrik.

Kami akan cuba untuk membuat pandangan isometrik untuk data peringkat padang rumput yang diliputi dinding:

Dalam senario ini kita dapat menentukan kawasan yang boleh dilalui dengan memeriksa sama ada elemen array adalah 0 pada koordinat itu, dengan itu menunjukkan rumput. Pelaksanaan pandangan 2D tahap di atas adalah lelaran yang lurus dengan dua gelung, meletakkan jubin persegi mengimbangi setiap dengan ketinggian jubin tetap dan nilai lebar jubin.

Untuk pandangan isometrik, kod tetap sama, tetapi fungsi PlaceTile () berubah.

Untuk pandangan isometrik kita perlu mengira koordinat isometrik yang bersamaan di dalam gelung.
Persamaan untuk melakukan ini adalah seperti berikut, di mana isoX dan isoY mewakili koordinat x- dan y isometrik, dan cartX dan cartY mewakili Koordinat x- dan y Cartesian:

Fungsi ini menunjukkan bagaimana anda boleh menukar dari satu sistem ke yang lain:

Pseudocode untuk gelung kemudian kelihatan seperti ini:

isolevel screenshot

Rumput yang diliputi dinding kami dalam pandangan isometrik.

Sebagai contoh, mari kita lihat bagaimana kedudukan 2D biasa akan ditukarkan kepada kedudukan isometrik:

Begitu juga, input [0, 0] akan menghasilkan [0, 0], dan [10, 5] akan memberi [5, 7.5].

Kaedah di atas membolehkan kami membuat korelasi langsung antara data tahap 2D dan koordinat isometrik. Kita boleh mencari koordinat jubin dalam data peringkat dari koordinat Cartesiannya menggunakan fungsi ini:

(Di sini, kita pada dasarnya menganggap bahawa ketinggian jubin dan lebar jubin adalah sama, seperti dalam kebanyakan kes.)

Oleh itu, dari sepasang skrin (isometrik) koordinat, kita boleh mencari koordinat jubin dengan menelefon:

Titik skrin ini boleh, katakan, posisi klik tetikus atau kedudukan pick-up.

Petua: Kaedah lain adalah penempatan model Zigzag, yang mengambil pendekatan yang berbeza sama sekali.

Bergerak dalam Koordinat Isometric

Pergerakan sangat mudah: anda memanipulasi data dunia permainan anda dalam koordinat Cartesian dan hanya gunakan fungsi di atas untuk mengemas kini pada skrin. Sebagai contoh, jika anda ingin memindahkan watak ke hadapan dalam arah positif y, anda boleh menaikkan y hartanya dan kemudian menukar kedudukannya menjadi koordinat isometrik:

Penyortiran Kedalaman

Sebagai tambahan kepada penempatan biasa, kita perlu menjaga pemisahan mendalam untuk menarik dunia isometrik. Ini memastikan item yang lebih dekat kepada pemain ditarik di atas item lebih jauh.

Kaedah penyisihan mendalam yang paling mudah adalah dengan menggunakan nilai koordinat y-Cartesian, seperti yang disebutkan dalam Petua Pantas ini: lebih jauh lagi pada skrin objek itu, yang lebih awal ia harus ditarik. Kerja ini selagi kita tidak mempunyai apa-apa sprite yang menduduki lebih daripada satu ruang jubin.

Cara yang paling cekap pengasingan kedalaman untuk dunia isometrik adalah untuk memecahkan semua jubin ke dalam dimensi jubin tunggal standard dan tidak membenarkan imej yang lebih besar. Contohnya, di sini ialah jubin yang tidak sesuai dengan saiz jubin standard - lihat bagaimana kami dapat membahagikannya kepada jubin berganda yang masing-masing sesuai dengan dimensi jubin:

split big tile

Imej besar dipecah menjadi beberapa jubin dimensi isometrik standard

4. Mewujudkan Seni

Seni isometrik boleh menjadi seni piksel, tetapi ia tidak perlu. Apabila berurusan dengan seni pixel isometrik, panduan RhysD memberitahu anda hampir semua yang anda perlu ketahui. Sesetengah teori boleh didapati di Wikipedia juga.

Apabila mencipta seni isometrik, peraturan umum adalah

  • Mulakan dengan grid isometrik kosong dan patuhi ketepatan sempurna piksel.
  • Cuba untuk memecah seni ke dalam imej jubin isometrik tunggal.
  • Cuba pastikan setiap jubin sama ada boleh dilayari atau tidak boleh dilalui. Ia akan menjadi rumit jika kita perlu menampung jubin tunggal yang mengandungi kedua-dua kawasan walkable dan tidak boleh dilalui.
  • Kebanyakan ubin perlu jubin dengan lancar dalam satu atau lebih arah.
  • Bayang-bayang boleh menjadi sukar untuk dilaksanakan, melainkan jika kita menggunakan pendekatan berlapis di mana kita menggambar bayang-bayang di lapisan tanah dan kemudian menarik pahlawan (atau pokok, atau objek lain) pada lapisan atas. Sekiranya pendekatan yang anda gunakan tidak multi-layered, pastikan bayang-bayang jatuh ke bahagian depan supaya mereka tidak akan jatuh, katakan, wira apabila dia berdiri di belakang pokok.
  • Sekiranya anda perlu menggunakan imej jubin yang lebih besar daripada saiz jubin isometrik standard, cuba gunakan dimensi yang merupakan pelbagai saiz jubin iso. Adalah lebih baik untuk mempunyai pendekatan berlapis dalam kes-kes seperti itu, di mana kita boleh memecah seni menjadi kepingan yang berbeza berdasarkan ketinggiannya. Sebagai contoh, pokok boleh dibahagikan kepada tiga bahagian: akar, batang, dan dedaunan. Ini menjadikannya lebih mudah untuk mengisih kedalaman kerana kita dapat menarik kepingan dalam lapisan yang sepadan yang sesuai dengan ketinggian mereka.

Jubin isometrik yang lebih besar daripada dimensi jubin tunggal akan menghasilkan masalah dengan penyisihan mendalam. Beberapa isu dibincangkan dalam pautan ini:


5. Watak Isometrik

Melaksanakan aksara dalam pandangan isometrik tidak rumit kerana ia mungkin berbunyi. Seni watak perlu diwujudkan mengikut piawaian tertentu. Mula-mula kita perlu menetapkan berapa banyak arah gerak dibenarkan dalam permainan kami - selalunya permainan akan memberikan pergerakan empat hala atau pergerakan lapan arah.

Eight-way navigation directions in top-down and isometric views

Arah navigasi lapan arah dalam pandangan atas dan bawah isometrik.

Untuk pandangan atas ke bawah, kita boleh membuat satu set animasi karakter yang menghadap ke satu arah, dan hanya memutarnya untuk semua yang lain. Untuk seni watak isometrik, kita perlu membuat semula setiap animasi dalam setiap arahan yang dibenarkan - jadi untuk gerakan lapan arah kita perlu membuat lapan animasi untuk setiap tindakan. Untuk memudahkan pemahaman, kami biasanya menandakan arahan seperti Utara, Utara-Barat, Barat, Selatan-Barat, Selatan, Tenggara, Timur, dan Timur Tengah, mengikut arah jam, dalam perintah itu.

spriteSheet

Watak isometrik yang menghadap ke arah yang berbeza.

Kami meletakkan watak-watak dengan cara yang sama yang kami meletakkan jubin. Pergerakan watak dicapai dengan mengira pergerakan dalam koordinat Cartesian dan kemudian menukar kepada koordinat isometrik. Mari kita anggap kita menggunakan papan kekunci untuk mengawal watak itu.

Kami akan menetapkan dua pembolehubah, dx dan dY, berdasarkan kekunci arah yang ditekan. Secara lalai pembolehubah ini akan menjadi 0, dan akan dikemas kini mengikut carta di bawah, di mana U, D, R dan L menandakan kekunci anak panah Up, Down, Right dan Kiri. Nilai 1 di bawah kekunci mewakili kekunci yang ditekan; 0 menunjukkan bahawa kunci tidak ditekan.

Sekarang, menggunakan nilai dx dan dY, kita boleh mengemas kini koordinat Cartesian seperti:

Jadi dX dan DY berdiri untuk perubahan dalam x-dan y-kedudukan watak, berdasarkan kunci yang ditekan.

Kita boleh dengan mudah mengira koordinat isometrik baru, seperti yang telah kita bahas:

Apabila kita mempunyai kedudukan isometrik baru, kita perlu memindahkan watak ke kedudukan ini. Berdasarkan nilai yang kami miliki untuk dx dan dY, kami boleh menentukan arah mana watak itu menghadap dan menggunakan seni watak yang sepadan.

Pengesanan Perlanggaran

Pengesanan perlanggaran dilakukan dengan memeriksa sama ada jubin pada kedudukan baru yang dikira adalah jubin yang tidak dapat dilalui. Oleh itu, sebaik sahaja kita mencari kedudukan baru, kita tidak segera menggerakkan watak di sana, tetapi terlebih dahulu semak untuk melihat apa jubin itu menduduki ruang itu.

Dalam fungsi isWalkable(), kami periksa sama ada nilai array data tahap pada koordinat yang diberikan adalah jubin yang boleh dilalui atau tidak. Kita mesti berhati-hati untuk mengemaskini arah di mana watak itu dihadapi - walaupun dia tidak bergerak, seperti dalam kes dia memukul jubin yang tidak boleh dilalui.

Penyebaran Kedalaman Dengan Watak

Pertimbangkan watak dan jubin pokok dalam dunia isometrik.

Untuk pemahaman mendalam dengan tepat, kita mesti faham bahawa apabila koordinat x-dan y watak kurang daripada pokok, pokok itu bertindih dengan watak. Setiap kali koordinat x-dan y watak lebih besar daripada pokok itu, watak itu bertindih dengan pokok itu.

Apabila mereka mempunyai koordinat x yang sama, maka kita membuat keputusan berdasarkan koordinat y sahaja: mana-mana koordinat y yang lebih tinggi bertindih yang lain. Apabila mereka mempunyai koordinat y yang sama maka kami membuat keputusan berdasarkan koordinat x sahaja: mana-mana yang mempunyai koordinat x lebih tinggi yang bertindih yang lain.

Versi mudah ini adalah untuk merangka secara serentak tahap-tahap bermula dari jubin paling jauh - iaitu jubin [0] [0] - kemudian lukis semua jubin di setiap baris satu demi satu. Jika wataknya menduduki jubin, kita melukis jubin tanah terlebih dahulu dan kemudian menjadikan jubin watak. Ini akan berfungsi dengan baik, kerana watak itu tidak dapat menduduki jubin dinding.

Penyortiran mendalam mesti dilakukan setiap kali sebarang perubahan jubin kedudukan. Sebagai contoh, kita perlu melakukannya apabila setiap watak bergerak. Kami kemudian mengemas kini adegan yang dipaparkan, selepas melakukan jenis kedalaman, untuk mencerminkan perubahan mendalam.


6. Pergi!

Kini, letakkan pengetahuan baru anda dengan baik dengan mencipta prototaip kerja, dengan kawalan papan kekunci dan penyortiran kedalaman yang betul dan pengesanan perlanggaran. Inilah demo saya:

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

Anda mungkin mendapati berguna kelas utiliti ini (saya telah menulisnya di AS3, tetapi anda sepatutnya dapat memahaminya dalam bahasa pengaturcaraan yang lain):

Jika anda benar-benar terperangkap, inilah kod penuh dari demo saya (dalam bentuk kod waktu Flash dan AS3):

Titik Pendaftaran

Berikan pertimbangan khusus kepada titik pendaftaran jubin dan wira. (Titik pendaftaran boleh dianggap sebagai titik asal bagi setiap sprit tertentu.) Ini secara amnya tidak akan jatuh ke dalam imej, tetapi akan menjadi sudut kiri atas kotak terikat sprite.

Kami perlu mengubah kod lukisan kami untuk menetapkan titik pendaftaran dengan betul, terutamanya untuk wira.

Pengesanan Perlanggaran

Satu lagi perkara yang menarik untuk diperhatikan ialah kita mengira pengesanan perlanggaran berdasarkan titik di mana wira itu.

Tetapi wira mempunyai kelantangan, dan tidak boleh diwakili dengan tepat oleh satu titik, jadi kita perlu mewakili wira sebagai segi empat dan periksa perlanggaran terhadap setiap sudut segiempat ini sehingga tidak ada tumpang tindih dengan ubin lain dan karenanya tidak ada artefak kedalaman .

Pintasan

Dalam demo itu, saya hanya menggambar semula tempat kejadian setiap bingkai berdasarkan kedudukan baru wira. Kami dapati jubin yang mana wira menduduki dan melukis wira di atas jubin tanah apabila gelung rendering menjangkau jubin tersebut.

Tetapi jika kita melihat lebih dekat, kita akan mendapati bahawa tidak ada keperluan untuk melengkung melalui semua jubin dalam kes ini. Jubin rumput dan jubin dinding atas dan kiri sentiasa ditarik sebelum wira ditarik, jadi kita tidak perlu meniru mereka sama sekali. Selain itu, jubin dinding bawah dan kanan sentiasa berada di hadapan wira dan dengan itu ditarik selepas wira ditarik.

Pada asasnya, kita hanya perlu melakukan penyisihan mendalam antara dinding di dalam kawasan aktif dan wira - iaitu, dua jubin. Melihat jenis pintasan ini akan membantu anda menjimatkan banyak masa pemprosesan, yang boleh menjadi penting untuk prestasi.


Kesimpulan

Sekarang, anda harus mempunyai asas yang baik untuk membina permainan isometrik anda sendiri: anda boleh menjadikan dunia dan objek di dalamnya, mewakili data tahap dalam susunan 2D mudah, menukar antara koordinat Cartesian dan isometrik, dan menangani konsep seperti penyisihan kedalaman dan animasi watak. Nikmati mewujudkan dunia isometrik!

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.