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

Satu Primer Dikemaskini untuk Mencipta Dunia Isometrik, Bahagian 1

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Primer for Creating Isometric Worlds.
Updated Primer for Creating Isometric Worlds, Part 2

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

Final product image
What You'll Be Creating

Kita semua telah memainkan peranan adil dalam permainan isometrik yang menakjubkan, sama ada Diablo asal, atau Age of Empires atau Commandos. Kali pertama anda menjumpai permainan isometrik, anda mungkin tertanya-tanya jika ia adalah permainan 2D atau permainan 3D atau sesuatu yang sama sekali berbeza. Dunia permainan isometrik mempunyai tarikan mistik untuk pemaju permainan juga. Marilah kita cuba untuk membongkar misteri unjuran isometrik dan cuba membuat dunia isometrik mudah dalam tutorial ini.

Tutorial ini adalah versi terkini tutorial saya yang ada untuk mewujudkan dunia isometrik. Tutorial asal menggunakan Flash dengan ActionScript dan masih relevan untuk pemaju Flash atau OpenFL. Dalam tutorial baru ini, saya telah memutuskan untuk menggunakan Phaser dengan kod JS, dengan itu menghasilkan output HTML5 interaktif dan bukan output SWF.

Harap maklum bahawa ini bukan tutorial pembangunan Phaser, tetapi kami hanya menggunakan Phaser untuk dengan mudah menyampaikan konsep teras untuk mewujudkan adegan isometrik. Selain itu, terdapat banyak cara yang lebih baik dan mudah untuk mencipta kandungan isometrik dalam Phaser, seperti Plugin Isometric Phaser.

Demi kesederhanaan, kami akan menggunakan pendekatan berasaskan jubin untuk mewujudkan adegan isometrik kami.

1. Permainan berasaskan Tile

Dalam permainan 2D menggunakan 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 dua dimensi.

Post Berkaitan

Biasanya permainan berasaskan ubin menggunakan sama ada pandangan atas atau pandangan sisi untuk pemandangan permainan. Mari kita pertimbangkan pandangan 2D atas bawah standard dengan dua jubin-jubin rumput dan jubin dinding-seperti yang ditunjukkan di sini:

Green and Maroon tiles

Kedua-dua jubin ini adalah imej persegi saiz yang sama, oleh itu ketinggian jubin dan lebar jubin adalah sama. Marilah kita pertimbangkan tahap permainan yang merupakan padang rumput yang tertutup di semua sisi oleh dinding. Dalam hal sedemikian, data tahap yang diwakili dengan array dua dimensi akan kelihatan seperti ini:

Di sini, 0 menandakan jubin rumput dan 1 menunjukkan jubin dinding. Menyusun jubin mengikut data tahap akan menghasilkan rumput kami yang berdinding seperti yang ditunjukkan dalam imej di bawah:

Top view level - grass area surrounded by walls

Kita boleh pergi sedikit lagi dengan menambah jubin sudut dan jubin dinding menegak dan mendatar berasingan, yang memerlukan lima jubin tambahan, yang membawa kita ke data peringkat dikemas kini:

Lihat imej di bawah, di mana saya telah menandakan jubin dengan nombor jubin yang sepadan dalam data tahap:

Better top view level with corner tiles and tile numbers

Sekarang kita telah memahami konsep pendekatan berasaskan jubin, biar saya tunjukkan kepada anda bagaimana kita boleh menggunakan kod pseudo grid 2D yang mudah untuk menjadikan tahap kami:

Sekiranya kita menggunakan imej jubin di atas maka lebar jubin dan ketinggian jubin adalah sama (dan sama untuk semua jubin), dan akan sepadan dengan dimensi imej jubin. Jadi lebar jubin dan ketinggian jubin untuk contoh ini ialah 50 px, yang membentuk saiz tahap keseluruhan 300 x 300 px - iaitu enam baris dan enam lajur jubin berukuran 50 x 50 px setiap satu.

Seperti yang telah dibincangkan sebelum ini, dalam pendekatan berasaskan ubin biasa, kita sama ada melaksanakan pandangan atas atau pandangan sisi; untuk pandangan isometrik, kita perlu melaksanakan unjuran isometrik.

2. Unjuran Isometrik

Penjelasan teknikal yang terbaik tentang apa yang dimaksudkan dengan ramalan 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 melaksanakan pandangan ini sangat 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 atas ke koordinat isometrik. Imej di bawah menunjukkan transformasi visual:

Side by side view of top down and isometric grids

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 padang rumput yang terkenal sekarang. Implementasi tampilan 2D dari level adalah iterasi langsung dengan dua loop, menempatkan ubin persegi mengimbangi masing-masing dengan tinggi ubin tetap dan nilai lebar ubin. Untuk tampilan isometrik, kode pseudo tetap sama, tetapi fungsi placeTile() berubah.

Fungsi asal hanya menarik imej jubin pada koordinat yang disediakan x dan y, tetapi untuk pandangan isometrik kita perlu mengira koordinat isometrik yang bersamaan. 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:

Ya, itu sahaja. Persamaan mudah ini adalah sihir di sebalik unjuran isometrik. Berikut adalah fungsi pembantu Phaser yang boleh digunakan untuk menukar dari satu sistem ke yang lain menggunakan kelas Point yang sangat mudah:

Oleh itu, kita boleh menggunakan kaedah penolong kartesianToIsometric untuk menukar koordinat 2D masuk ke koordinat isometrik di dalam kaedah PlaceTile. Selain itu, kod rendering tetap sama, tetapi kita perlu mempunyai imej baru untuk jubin. Kami tidak boleh menggunakan jubin persegi lama yang digunakan untuk penyajian atas kami. Imej di bawah menunjukkan rumput isometrik baru dan jubin dinding bersama dengan tahap isometrik yang diberikan:

Isometric level walled grassland along with the isometric tiles used

Tidak boleh dipercayai, bukan? Mari lihat bagaimana kedudukan 2D biasa ditukar kepada kedudukan isometrik:

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

Untuk padang rumput kami, kami dapat menentukan kawasan yang boleh dilalui dengan memeriksa sama ada elemen array adalah 0 pada koordinat itu, dengan itu menunjukkan rumput. Untuk ini, kita perlu menentukan koordinat pelbagai. 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.

Titik Pendaftaran

Dalam Flash, kita boleh menetapkan mata sewenang-wenang untuk grafik sebagai pusat titik atau [0,0]. Setaraf Phaser adalah Pivot. Apabila anda meletakkan grafik pada [10,20], maka titik Pivot ini akan diselaraskan dengan [10,20]. Secara lalai, sudut kiri atas grafik dianggap [0,0] atau Pivot. Sekiranya anda cuba membuat tahap di atas menggunakan kod yang disediakan, maka anda tidak akan mendapat hasil yang dipaparkan. Sebaliknya, anda akan mendapat tanah yang rata tanpa dinding, seperti di bawah:

The issue with wall tiles when rendered normally

Ini kerana imej jubin mempunyai saiz yang berbeza dan kita tidak menangani sifat tinggi jubin dinding. Imej di bawah menunjukkan imej jubin yang berbeza yang kita gunakan dengan kotak sempadan mereka dan bulatan putih di mana lalai mereka [0,0] adalah:

How to properly align the different tiles along with their registration points

Lihat bagaimana wira mendapat misaligned apabila melukis menggunakan pivots lalai. Juga perhatikan bagaimana kita kehilangan ketinggian jubin dinding jika digambar menggunakan pivots lalai. Imej di sebelah kanan menunjukkan bagaimana mereka perlu diselaraskan dengan betul supaya jubin dinding mendapat ketinggiannya dan pahlawan akan diletakkan di tengah-tengah jubin rumput. Isu ini boleh diselesaikan dengan cara yang berbeza.

  1. Jadikan semua jubin dalam saiz imej yang sama dengan jajaran grafik sejajar dengan betul dalam imej. Ini mewujudkan banyak kawasan kosong dalam setiap jubin jubin.
  2. Tetapkan titik pangsi secara manual untuk setiap jubin supaya mereka menjajarkan dengan betul.
  3. Lukis jubin dengan offset tertentu supaya mereka menyelaraskan dengan betul.

Untuk tutorial ini, saya telah memilih untuk menggunakan kaedah ketiga supaya ini berfungsi walaupun dengan kerangka tanpa keupayaan untuk menetapkan mata pangsi.

3. Bergerak dalam Koordinat Isometric

Kami tidak akan cuba untuk menggerakkan watak atau peluru kami dalam koordinat isometrik secara langsung. Sebaliknya, kami akan memanipulasi data dunia permainan kami dalam koordinat Cartesian dan hanya gunakan fungsi di atas untuk mengemas kini mereka pada skrin. Sebagai contoh, jika anda ingin memindahkan watak ke hadapan dalam arah positif y, anda boleh menaikkan y harta di dalam koordinat 2D dan kemudian menukar kedudukan yang terhasil kepada koordinat isometrik:

Ini adalah masa yang baik untuk mengkaji semua konsep baru yang telah kami pelajari setakat ini dan mencuba dan mewujudkan contoh kerja sesuatu yang bergerak dalam dunia isometrik. Anda boleh mencari aset imej yang diperlukan dalam folder aset sumber repository git.

Penyortiran Kedalaman

Jika anda cuba memindahkan imej bola di taman berdinding kami maka anda akan menemui masalah dengan pemisahan mendalam. Sebagai tambahan kepada penempatan biasa, kita perlu menjaga pemisahan mendalam untuk melukis dunia isometrik, jika terdapat elemen bergerak. Penyortiran kedalaman yang betul memastikan item yang lebih dekat ke skrin dilukis 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. Ini mungkin berfungsi dengan baik untuk adegan isometrik yang sangat mudah, tetapi cara yang lebih baik adalah untuk menggambarkan adegan isometrik sebaik sahaja pergerakan berlaku, mengikut koordinat pelbagai jubin. Biar saya jelaskan konsep ini secara terperinci dengan kod pseudo kami untuk lukisan peringkat:

Bayangkan item atau watak kami berada di jubin [1,1] - iaitu, jubin hijau paling atas dalam pandangan isometrik. Untuk mencapai tahap yang betul, watak perlu ditarik selepas melukis jubin dinding sudut, kedua-dua jubin dinding kiri dan kanan, dan jubin tanah, seperti di bawah:

Hero standing on the corner tile

Jika kita mengikuti gelung lukisan kita seperti kod pseudo di atas, kita akan menarik dinding sudut tengah terlebih dahulu, dan kemudian akan terus menarik semua dinding di bahagian atas sebelah kanan sehingga ia mencapai sudut kanan.

Kemudian, dalam gelung seterusnya, ia akan menarik dinding di sebelah kiri watak, dan kemudian ubin rumput di mana watak itu berdiri. Apabila kita menentukan ini adalah jubin yang menduduki watak kita, kita akan menarik watak selepas melukis jubin rumput. Dengan cara ini, jika ada tembok di tiga jubin rumput bebas yang bersambung dengan yang di mana wataknya berdiri, dinding-dinding itu akan bertindih dengan watak, yang menghasilkan penyesuaian yang diasingkan dengan betul.

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 piksel-sempurna.
  • 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 boleh membuat kepingan dalam lapisan 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:

Post Berkaitan

5. Watak Isometrik

Mula-mula kita perlu menetapkan berapa banyak arahan gerakan yang dibenarkan dalam permainan kami-biasanya, permainan akan memberikan pergerakan empat arah atau pergerakan lapan arah. Semak imej di bawah untuk memahami korelasi antara ruang 2D dan ruang isometrik:

The directions of motion in top view and isometric view

Sila ambil perhatian bahawa watak akan bergerak secara menegak apabila kita menekan kekunci anak panah atas dalam permainan atas-bawah, tetapi untuk permainan isometrik watak itu akan bergerak pada sudut 45 darjah ke arah sudut kanan atas.

Untuk pandangan atas ke bawah, kami boleh membuat satu set animasi aksara yang menghadap ke satu arah, dan hanya memutarnya untuk semua yang lain. Untuk seni watak isometrik, kita perlu membuat semula setiap animasi dalam setiap arah 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. Bingkai aksara di bawah menunjukkan bingkai terbiar bermula dari Tenggara dan pergi mengikut arah jam:

The different frames of the character facing the different directions

Kami akan 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 ingatkan 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 bahawa kunci sedang ditekan; 0 menunjukkan bahawa kunci tidak ditekan.

Sekarang, dengan menggunakan nilai dx dan dY, kami 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. Sebaik sahaja watak itu dipindahkan, jangan lupa untuk mengecat semula tahap dengan mengasingkan kedalaman yang betul kerana koordinat jubin watak mungkin telah berubah.

Pengesanan Perlanggaran

Pengesanan perlanggaran dilakukan dengan memeriksa sama ada jubin pada kedudukan yang baru 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 yang mana watak itu dihadapi-walaupun dia tidak bergerak, seperti dalam kes dia memukul jubin yang tidak boleh dilalui.

Sekarang ini mungkin terdengar seperti penyelesaian yang tepat, tetapi ia hanya akan berfungsi untuk barangan tanpa jumlah. Ini kerana kita hanya mempertimbangkan satu titik, iaitu titik tengah watak, untuk mengira perlanggaran. Apa yang perlu kita lakukan ialah mencari semua empat sudut watak dari titik tengah 2D yang sedia ada menyelaraskan dan hitung perlanggaran untuk semua itu. Jika mana-mana sudut jatuh di dalam jubin yang tidak dapat dilalui, maka kita tidak boleh menggerakkan watak itu.

Penyebaran Kedalaman Dengan Watak

Pertimbangkan watak dan jubin pokok dalam dunia isometrik, dan kedua-duanya mempunyai saiz imej yang sama, namun tidak realistik yang berbunyi.

Untuk memahami pemisahan mendalam dengan betul, 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.

Sebagaimana yang dijelaskan sebelum ini, versi ringkas ini adalah dengan hanya menyusun serentak peringkat bermula dari jubin terjauh iaitu, jubin [0] [0] -dan kemudian menarik semua jubin dalam 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.

6. Waktu Demo!

Ini adalah demo di Phaser. Klik untuk menumpukan pada kawasan interaktif dan gunakan kekunci anak panah anda untuk menggerakkan watak. Anda boleh menggunakan dua anak panah untuk bergerak di arah pepenjuru.

Anda boleh mencari sumber lengkap untuk demo di repository sumber untuk tutorial ini. Kod JS utama disediakan di bawah:

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.