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

Isometric Depth Sorting Untuk Memindah Platforms

by
Difficulty:IntermediateLength:LongLanguages:

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

Final product image
What You'll Be Creating

Penyortiran kedalaman dapat dijelaskan secara sederhana sebagai cara untuk mengetahui elemen mana yang lebih dekat ke kamera dan yang lebih jauh lagi, sehingga menentukan urutan di mana mereka perlu diatur untuk menyampaikan kedalaman yang tepat di tempat kejadian.

Dalam tutorial ini, kita akan menggali lebih dalam ke sortasi kedalaman untuk tingkat isometrik saat kita mencoba menambahkan platform yang bergerak. Ini bukan tutorial pemula tentang teori isometrik dan bukan tentang kodenya. Fokusnya adalah memahami logika dan teori daripada membedah kode. Alat pilihan untuk tutorial adalah Perpaduan, dan oleh itu pengasingan mendalam pada dasarnya adalah mengubah sortingOrder sprites yang terlibat. Untuk rangka kerja lain, ia mungkin mengubah pesanan z atau urutan urutan lukisan.

Untuk memulakan teori isometrik, sila rujuk siri tutorial ini. Struktur kod dan adegan mengikuti tutorial isometrik saya sebelumnya. Silakan lihat ini jika Anda mendapati tutorialnya sulit diikuti karena saya hanya akan berfokus pada logika dalam tutorial ini.

1. Tahap Tanpa Pergerakan

Jika tingkat isometrik Anda tidak memiliki elemen bergerak atau hanya memiliki beberapa karakter yang berjalan di atas permukaan, penyortiran kedalaman sangat mudah. Dalam kasus tersebut, karakter yang menempati ubin isometrik akan lebih kecil dari pada ubin sendiri dan dengan mudah bisa menggunakan urutan / kedalaman gambar yang sama seperti ubin yang mereka tempati.

Mari kita rujuk tahap yang tidak bergerak seperti tahap statik. Terdapat beberapa cara di mana paras sedemikian boleh ditarik supaya kedalaman yang betul disampaikan. Biasanya, data peringkat akan menjadi pelbagai dua dimensi di mana baris dan lajur akan sesuai dengan baris dan lajur peringkat.

Pertimbangkan tahap isometrik berikut dengan hanya dua baris dan tujuh tiang.

Isometric level with 2 rows and numbered z order

Nombor-nombor pada jubin menunjukkan pengisihan sortingOrder atau kedalaman atau z order, iaitu perintah yang mereka perlu ditarik. Dalam kaedah ini, kita melukis semua lajur dalam baris pertama, bermula dengan lajur pertama dengan sortingOrder dari 1.

Setelah semua lajur dilukis dalam baris pertama, lajur terdekat ke kamera mempunyai sortingOrder of 7, dan kita terus ke baris berikutnya. Maka mana-mana elemen dalam baris kedua akan mempunyai sorting yang lebih sortingOrder daripada mana-mana unsur barisan pertama.

Ini adalah persis bagaimana jubin perlu disusun untuk menyampaikan kedalaman yang betul sebagai sprite dengan sorting yang lebih tinggiOrder akan mendapat overlaid ke atas mana-mana sprite lain dengan sortingOrder yang lebih rendah.

Bagi kod itu, ini hanya satu masalah perulangan melalui baris dan lajur tatas aras dan menyerahkan sortingOrder secara berturutan dalam susunan yang semakin meningkat. Ia tidak akan pecah, walaupun kita menukar baris dan lajur, seperti yang dapat dilihat dalam imej di bawah.

Isometric level with 2 columns and numbered z order

Di sini kita melukis lajur lengkap terlebih dahulu sebelum bergerak ke barisan seterusnya. Persepsi mendalam tetap utuh. Oleh itu, logik untuk tahap statik adalah untuk menarik sama ada satu baris lengkap atau lajur lengkap dan kemudian teruskan ke seterusnya semasa menyerahkan sortingOrder secara berturut-turut dalam peningkatan pesanan.

Menambah Ketinggian

Jika kita menilai tahap sebagai sebuah bangunan, kita sedang melukis di tingkat bawah. Jika kita perlu menambah lantai baru ke bangunan kita, yang perlu kita lakukan ialah menunggu sehingga kita melukiskan lantai seluruhnya terlebih dahulu dan mengikut kaedah yang sama untuk tingkat seterusnya.

Untuk kedalaman yang betul, kami menunggu sehingga baris penuh selesai sebelum kami berpindah ke baris berikutnya, dan kami juga menunggu sehingga semua baris selesai sebelum kami berpindah ke tingkat berikutnya. Jadi untuk tahap dengan hanya satu baris dan dua tingkat, ia akan kelihatan seperti imej di bawah.

Isometric level with 2 floors and numbered z order

Pada dasarnya, setiap jubin di tingkat yang lebih tinggi akan mempunyai sortingOrder lebih tinggi yang daripada jubin di lantai bawah. Bagi kod untuk menambah lantai yang lebih tinggi, kita hanya perlu mengimbangi nilai y koordinat skrin untuk jubin, bergantung pada lantai yang ditempatkannya.

Nilai floorHeight menunjukkan ketinggian imej jubin blok isometrik, sedangkan floorLevel menunjukkan lantai yang berada di jubin.

2. Memindahkan Tile pada X Paksi

Pemisahan mendalam pada tahap isometrik statik tidak rumit, bukan? Bergerak, marilah kita membuat keputusan untuk mengikuti kaedah pertama baris, di mana kita menetapkan sortingOrder  ke barisan pertama sepenuhnya dan kemudian meneruskan ke seterusnya. Mari kita pertimbangkan jubin atau platform bergerak pertama kita yang bergerak pada paksi tunggal, paksi x.

Apabila saya mengatakan bahawa gerakan itu berada pada paksi x, anda perlu sedar bahawa kita bercakap mengenai sistem koordinat cartesian dan bukan sistem koordinat isometrik. Mari kita pertimbangkan tahap dengan hanya satu tingkat bawah tiga baris dan tujuh tiang. Mari juga pertimbangkan bahawa baris kedua hanya mempunyai jubin tunggal, yang merupakan jubin kami yang bergerak. Tahap akan kelihatan seperti imej di bawah.

level with 3 rows and single tile moving in x axis

Jubin gelap adalah jubin bergerak kami, dan sortingOrder itu akan mendapat diberikan 8 sebagai barisan pertama mempunyai 7 jubin. Jika jubin bergerak ke atas paksi x cartesian maka ia akan bergerak sepanjang parit antara dua baris. Di semua kedudukan yang mungkin menduduki sepanjang laluan itu, jubin dalam baris 1 akan mempunyai pengisihan yang lebih sortingOrder.

Begitu juga, semua jubin dalam baris 2 akan mempunyai pengisihan yang lebih sortingOrder tanpa mengira kedudukan jubin gelap di sepanjang laluan tersebut. Oleh itu, apabila kita mengikuti satu kaedah pertama menyusun sortingOrder, kita tidak perlu melakukan apa-apa untuk bergerak pada paksi x. Sekarang, itu mudah.

3. Mengalihkan jubin pada Y Axis

Masalah mula timbul apabila kita mula mempertimbangkan paksi y. Mari kita pertimbangkan tahap di mana jubin gelap kita bergerak di sepanjang parit segiempat tepat, seperti yang ditunjukkan di bawah. Anda boleh melihat perkara yang sama dalam adegan Perpaduan MovingSortingProblem di sumbernya.

showing depth issues while moving in y axis

Dengan menggunakan pendekatan pertama kami, kami boleh menyediakan pengisihanOrder untuk jubin kami bergerak berdasarkan baris yang kini ditempatkan. Apabila jubin berada di antara dua baris, ia akan diberikan pengawasanOrder berdasarkan baris yang bergerak dari. Dalam hal ini, ia tidak boleh mengikuti urutan sortingOrder dalam barisan ke mana ia bergerak. Ini secara asasnya memecahkan pendekatan penyortiran kedalaman kami.

Menyusun dalam Blok

Untuk menyelesaikannya, kita perlu membahagikan tahap kami ke dalam blok yang berlainan, di antaranya satu blok masalah, yang memecah di bawah pendekatan pertama kami, dan yang lain adalah blok yang boleh mengikuti pendekatan pertama baris tanpa melanggar. Pertimbangkan imej di bawah untuk memahami lebih baik.

level divided into blocks of which one is the problem block

Blok jubin 2x2 yang diwakili oleh kawasan biru adalah blok masalah kami. Semua blok lain masih boleh mengikuti pendekatan pertama baris. Tolong jangan keliru dengan imej kerana ia menunjukkan tahap yang sudah disusun dengan betul menggunakan pendekatan blok kami. Blok biru terdiri daripada dua jubin tiang di baris yang mana jubin gelap kami sedang bergerak dan jubin segera ke kiri mereka.

Untuk menyelesaikan masalah mendalam bagi blok masalah, kita boleh menggunakan pendekatan pertama ruang untuk blok ini sahaja. Jadi untuk blok hijau, merah jambu, dan kuning, kita menggunakan baris pertama, dan untuk blok biru, kita menggunakan pendekatan pertama lajur.

Perhatikan bahawa kita masih perlu untuk menyusun secara serentak sortingOrder itu. Pertama blok hijau, maka blok merah jambu ke kiri, kemudian blok biru, sekarang datang blok merah jambu ke kanan, dan akhirnya blok kuning. Kami memecahkan pesanan hanya untuk beralih ke pendekatan pertama lajur semasa di blok biru.

Sebagai alternatif, kita juga boleh mempertimbangkan blok 2x2 di sebelah kanan lorong jubin yang bergerak. (Perkara yang menarik ialah, anda tidak perlu menukar pendekatan sebagai melanggar blok itu sendiri telah menyelesaikan masalah kami dalam kes ini.) Penyelesaian ini dapat dilihat dalam tindakan di tempat kejadian BlockSort.

depth issues solved using blocks

Ini diterjemahkan ke kod seperti di bawah.

4. Memindahkan Jubin pada Paksi Z

Gerak pada paksi z adalah gerakan palsu pada tahap isometrik. Ia pada asasnya hanya bergerak pada paksi skrin y. Untuk tahap isometrik tunggal, tidak ada lagi yang perlu dilakukan untuk menambahkan gerakan pada paksi z jika anda telah melakukan kaedah penyisihan blok yang diterangkan di atas. Anda dapat melihat ini dalam tindakan di scene SingleLayerWave Unity, di mana saya telah menambah gerakan gelombang tambahan pada paksi z bersama dengan pergerakan parit lateral.

Z Pergerakan di Tahap Dengan Lantai Berbilang

Menambah tingkat tambahan ke tahap anda hanya masalah mengimbangi skrin y coordinate, seperti yang dijelaskan sebelumnya. Sekiranya jubin tidak bergerak pada paksi z maka tidak perlu melakukan apa-apa yang khusus untuk mengasingkan kedalaman. Kita boleh menyekat menyusun tingkat bawah dengan gerakan dan kemudian memohon penyisihan baris ke setiap tingkat berturut-turut. Anda dapat melihat ini dalam tindakan di scene BlockSortWithHeight Unity.

level with multiple floors and lateral motion

Masalah kedalaman yang sangat mirip timbul ketika jubin mulai bergerak antara lantai. Ia hanya boleh memenuhi urutan urutan satu tingkat dengan menggunakan pendekatan kami dan akan memecahkan pengasingan kedalaman lantai yang lain. Kita perlu memanjangkan atau mengubah suai pembentangan blok kami kepada tiga dimensi untuk menangani masalah kedalaman ini dengan lantai.

Masalahnya pada dasarnya akan menjadi hanya dua tingkat di mana jubin sedang bergerak. Untuk semua tingkat lain, kami boleh melekat pada pendekatan sorting semasa kami. Keperluan khas dikenakan untuk hanya dua tingkat ini, di antaranya yang pertama kita dapat menentukan lantai bawah seperti di bawah di mana tileZOffset adalah jumlah gerakan pada paksi z untuk jubin bergerak kita.

Ini bermakna bahawa lebih rendah dan rendah ialah lantai yang memerlukan pendekatan khas. Silap mata ini adalah untuk menyusun SortingOrder untuk kedua-dua tingkat ini bersama-sama, seperti ditunjukkan dalam kod di bawah. Ini membetulkan urutan supaya isu mendalam disusun.

Pada asasnya, kita sedang mempertimbangkan dua tingkat sebagai satu tingkat dan melakukan sejenis blok pada satu tingkat itu. Lihat kod dan tindakan di BlockSortWithHeightMovement tempat kejadian. Dengan pendekatan ini, jubin kami kini bebas bergerak di mana-mana dua paksi tanpa memecahkan kedalaman tempat kejadian, seperti yang ditunjukkan di bawah.

level with tile moving along all 3 axes

Kesimpulan

Idea tutorial ini adalah untuk menjelaskan logik pendekatan penyortiran kedalaman, dan saya harap anda telah memahami perkara ini secara adil. Adalah jelas bahawa kita sedang mempertimbangkan tahap yang agak sederhana dengan hanya satu jubin bergerak.

Tiada cerun sama ada termasuk cerun akan menjadikan tutorial ini lebih lama. Tetapi sebaik sahaja anda memahami logik penyusun, maka anda boleh cuba untuk memperluaskan logik cerun dua dimensi ke paparan isometrik.

Perpaduan mempunyai ekonomi aktif. Terdapat banyak produk lain yang membantu anda membina projek anda. Sifat platform juga menjadikannya pilihan terbaik dari mana anda boleh meningkatkan kemahiran anda. Walau apa pun, anda boleh melihat apa yang ada di Pasar Envato.

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.