Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Game Development
  2. Programming
Gamedevelopment

Parsing dan Rendering Tiles Format Peta TMX dalam Enjin Permainan Anda Sendiri

by
Difficulty:IntermediateLength:LongLanguages:

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

Dalam artikel saya sebelum ini, kami melihat Editor Peta Tile sebagai alat untuk membuat tahap untuk permainan anda. Dalam tutorial ini, saya akan membawa anda melalui langkah seterusnya: menguraikan dan menjadikan peta tersebut dalam enjin anda.

Nota: Walaupun tutorial ini ditulis menggunakan Flash dan AS3, anda harus menggunakan teknik dan konsep yang sama dalam hampir semua persekitaran pembangunan permainan.


Keperluan


Menyimpan Format XML

Menggunakan spesifikasi TMX kami boleh menyimpan data dalam pelbagai cara. Untuk tutorial ini, kami akan menyimpan peta kami dalam format XML. Jika anda bercadang untuk menggunakan fail TMX yang termasuk dalam bahagian keperluan, anda boleh melangkau ke bahagian seterusnya.

Jika anda membuat peta anda sendiri, anda perlu memberitahu Tiled untuk menyimpannya sebagai XML. Untuk melakukan ini, buka peta anda dengan Tiled, dan pilih Edit> Preferences ...

Untuk "Data lapisan jubin penyimpanan sebagai:" kotak tarik turun, pilih XML, seperti yang ditunjukkan dalam imej di bawah:

Sekarang apabila anda menyimpan peta, ia akan disimpan dalam format XML. Jangan ragu untuk membuka fail TMX dengan editor teks untuk mengintip ke dalam. Berikut adalah coretan apa yang boleh anda harapkan:

Seperti yang anda lihat, ia hanya menyimpan semua maklumat peta dalam format XML berguna ini. Sifat-sifatnya haruslah secara langsung, dengan pengecualian gid - saya akan menerangkan penjelasan yang lebih mendalam tentang hal ini nanti dalam tutorial.

Sebelum kita bergerak, saya ingin mengarahkan perhatian anda kepada kumpulanobjek "Collision". Seperti yang anda boleh ingat dari tutorial penciptaan peta, kami menyatakan kawasan perlanggaran di sekitar pokok itu; ini adalah bagaimana ia disimpan.

Anda boleh menentukan power-up atau titik bertelur pemain dengan cara yang sama, jadi anda boleh membayangkan berapa banyak kemungkinan terdapat untuk Tiled sebagai editor peta!


Garis Besar Teras

Kini di sini adalah ikhtisar ringkas tentang bagaimana kita akan mendapatkan peta kami ke dalam permainan:

  1. Baca dalam fail TMX.
  2. Parse fail TMX sebagai fail XML.
  3. Muatkan semua imej tileset.
  4. Susun imej tileset ke dalam susun atur peta kami, lapisan mengikut lapisan.
  5. Baca objek peta.

Membaca dalam Fail TMX

Setakat program anda berkenaan, ini hanyalah fail XML, jadi perkara pertama yang kami mahu lakukan ialah membacanya. Kebanyakan bahasa mempunyai perpustakaan XML untuk ini; dalam kes AS3 Saya akan menggunakan kelas XML untuk menyimpan maklumat XML dan URLLoader untuk membaca dalam fail TMX.

Ini adalah pembaca fail mudah untuk "../assets/example.tmx". Ia menganggap bahawa fail TMX terletak di direktori projek anda di bawah folder "aset". Kami hanya memerlukan fungsi untuk mengendalikan apabila fail dibaca selesai:

Di sinilah persiapan awal berlaku. (Terdapat beberapa pembolehubah yang akan kami jejaki di luar fungsi ini kerana kami akan menggunakannya kemudian.)

Apabila kita mempunyai data peta yang tersimpan, kami bergerak ke atas menghuraikan setiap tileset. Saya telah membuat kelas untuk menyimpan maklumat setiap tileset. Kami akan menolak setiap contoh kelas dalam array kerana kami akan menggunakannya kemudian:

Sekali lagi, anda dapat melihat bahawa gid muncul lagi, dalam pemboleh ubah firtsgid dan lastgid. Mari kita sekarang lihat pada apa yang ini adalah untuk.


Kefahaman "gid"

Untuk setiap jubin, kita perlu entah bagaimana mengaitkannya dengan tileset dan lokasi tertentu pada tileset itu. Inilah tujuan gid.

Lihatlah tileset rumput-jubin-2-small.png. Ia mengandungi 72 jubin berbeza:

Kami memberi salah satu jubin ini seorang gid unik dari 1-72, supaya kami boleh merujuk kepada mana-mana satu nombor tunggal. Walau bagaimanapun, TMX format hanya menentukan gid pertama dari tileset, kerana semua yang gids lain boleh didapati daripada mengetahui saiz tileset ini dan saiz jubin setiap individu.

Berikut adalah imej yang berguna untuk membantu menggambarkan dan menjelaskan prosesnya.

Jadi jika kita meletakkan jubin bawah bawah tileset ini pada peta di suatu tempat, kita akan menyimpan gid 72 di lokasi tersebut pada peta.

Sekarang, dalam contoh TMX fail di atas, anda akan perasan bahawa tree2 final.png telah firstgid daripada 73. Itu kerana kami terus mengira pada gids, dan kami tidak menetapkan semula kepada 1 untuk setiap tileset.

Secara ringkasnya, seorang gid adalah pengenalan yang unik kepada setiap jubin tileset setiap dalam fail TMX, berdasarkan kedudukan jubin dalam tileset tersebut, dan jumlah tilesets yang dirujuk dalam fail TMX.


Memuatkan Tilesets

Sekarang kami ingin memuatkan semua tileset sumber imej ke dalam ingatan supaya kita boleh meletakkan Peta kami bersama-sama dengan mereka. Jika anda tidak menulis ini dalam AS3, satu-satunya perkara yang perlu anda ketahui ialah kami memuatkan gambar untuk setiap tileset di sini:

Terdapat beberapa perkara AS3 khusus yang berlaku di sini, seperti menggunakan kelas Loader untuk membawa imej tileset. (Lebih khusus lagi, ia adalah Loader yang dilanjutkan, jadi kita boleh menyimpan contoh TileSet di dalam setiap Loader. Ini adalah supaya apabila selesai loader kita dengan mudah boleh menghubungkait Loader dengan tileset itu.)

Ini mungkin berbunyi rumit tetapi kod adalah sebenarnya agak mudah:

Sekarang sebelum kita mula mengambil tilesets ini dan mencipta peta dengan mereka, kita perlu mewujudkan satu imej asas untuk meletakkan mereka pada:

Kita akan dapat menyalin data jubin ke imej bitmap ini supaya kita boleh menggunakannya sebagai latar belakang. Sebab yang saya sediakan kedua-dua imej adalah supaya kita boleh mempunyai lapisan atas dan lapisan bawah, dan mempunyai pemain yang bergerak namun mereka untuk menyediakan perspektif. Kami juga menentukan bahawa lapisan teratas harus mempunyai saluran alpha.

Bagi acara sebenar para pendengar untuk juruisi tersebut kita boleh menggunakan kod ini:

Inilah satu fungsi kerana anda boleh menjejaki berapa lama sebelum imej telah dimuatkan, dan oleh itu boleh memberikan maklum balas kepada pengguna tentang hal-hal berapa cepat pergi, seperti bar kemajuan.

Di sini kami menyimpan data peta bit dengan tileset yang berkaitan dengannya. Kami juga mengira berapa banyak tileset yang telah dimuat sepenuhnya, dan apabila semuanya selesai, kita boleh memanggil fungsi (saya menamakannya AddTileBitmapData dalam kes ini) untuk mula meletakkan kepingan jubin bersama-sama.


Menggabungkan jubin

Untuk menggabungkan jubin ke dalam imej satu, kita mahu membina sehingga lapisan dengan lapisan supaya ia akan dipaparkan dengan cara yang sama akan muncul di tetingkap pratonton di Tiled.

Inilah apa yang bahagian akhir akan kelihatan seperti; Komen-komen yang saya sertakan dalam kod sumber secukupnya perlu menjelaskan apa yang sedang berlaku tanpa mendapat terlalu messy ke butiran. Saya harus mencatatkan bahawa ini boleh dilaksanakan dalam pelbagai cara, dan pelaksanaan anda boleh kelihatan benar-benar berbeza daripada saya.

Apa yang sedang berlaku di sini adalah kita akan menghuraikan hanya jubin dengan gids yang berada di atas 0, sejak 0 menunjukkan jubin yang kosong, dan menyimpannya dalam pelbagai. Kerana terdapat begitu banyak "0 jubin" dalam lapisan atas kami, ia akan menjadi cekap untuk menyimpan semuanya dalam ingatan. Ia adalah penting untuk ambil perhatian bahawa kami tidak menyimpan lokasi gid dengan kaunter kerana kami akan menggunakan Indeks dalam pelbagai kemudian.

Dalam bahagian ini kami sedang menghuraikan keluar nama lapisan, dan memeriksa jika ia adalah bersamaan "Atas". Jika ia, kami menetapkan bendera supaya kita tahu untuk menyalinnya ke lapisan atas peta bit. Kita boleh menjadi benar-benar fleksibel dengan fungsi seperti ini, dan menggunakan lebih banyak lapisan yang disusun dalam mana-mana perintah.

Sekarang di sini kita sudah Menyimpan gid, yang kita parsed pada permulaan, ke pelbagai 2D. Anda akan perasan initializations double pelbagai; ini adalah hanya satu cara pengendalian tatasusunan 2D dalam AS3.

Terdapat sedikit matematik berlaku juga. Ingat apabila kami dimulakan pelbagai jubin dari atas, dan bagaimana kita disimpan Indeks dengannya? Kami kini akan menggunakan Indeks mengira koordinat yang gid itu kepunyaan. Gambar ini menunjukkan apa yang sedang berlaku:

Oleh itu untuk contoh ini, kita akan mendapat nilai panduan indeks 27 dalam pelbagai jubin, dan menyimpannya di tileCoordinates [7] [1]. Sempurna!

Ini adalah di mana kami akhirnya turun untuk menyalin tileset di dalam peta kami.

Pada mulanya kami memulakannya dengan looping melalui setiap koordinat jubin pada peta, dan untuk menyelaras jubin setiap kita mendapatkan panduan tersebut dan semak tileset tersimpan yang sepadan, dengan memeriksa jika ia terletak antara panduanawal itu dan panduanakhir dikira kami.

Jika anda memahami bahagian pemahaman "panduan" dari atas, matematik ini harus masuk akal. Dalam syarat paling asas, ia mengambil koordinat jubin pada tileset tersebut (sourceX dan sourceY) dan menyalinnya ke kami Peta lokasi jubin kita telah looped untuk (destX dan destY). 

Akhirnya, pada akhir kita panggil fungsi copyPixel untuk menyalin imej jubin ke salah satu lapisan atas atau asas.


Menambah Objek

Sekarang bahawa menyalin lapisan ke peta selesai, mari kita lihat ke dalam memuatkan objek perlanggaran. Ini sangat berkuasa kerana menggunakan objek pelanggaran, kita juga boleh menggunakannya untuk objek lain, seperti kuasa, atau lokasi bertelur pemain, selagi kita telah menetapkannya dengan Tile.

Jadi di bahagian bawah fungsi addTileBitmapData, mari kita masukkan ke dalam kod berikut:

Ini akan melengkung melalui lapisan objek, dan mencari lapisan dengan nama "Collision". Apabila ia mendapati, ia mengambil setiap objek dalam lapisan itu, mewujudkan segi empat tepat pada kedudukan itu dan menyimpannya dalam array collisionTiles. Dengan cara itu kita masih mempunyai rujukan kepadanya, dan kita boleh melengkung untuk memeriksa perlanggaran jika kita mempunyai pemain.

(Bergantung pada bagaimana sistem anda menangani perlanggaran, anda mungkin mahu melakukan sesuatu yang berbeza.)


Memaparkan Peta

Akhirnya, untuk memaparkan peta, kami ingin terlebih dahulu memberi latar belakang dan kemudian latar depan, untuk mendapatkan lapisan yang betul. Dalam bahasa lain, ini hanya satu perkara untuk menjadikan imej.

Saya telah menambah sedikit kod di antara lapisan di sini hanya untuk menunjukkan dengan segi empat tepat bahawa pelapis itu memang berfungsi. Inilah hasil akhir:

Terima kasih kerana meluangkan masa untuk menyelesaikan tutorial. Saya telah memasukkan zip yang mengandungi projek FlashDevelop lengkap dengan semua kod sumber dan aset.


Pembacaan Tambahan

Sekiranya anda berminat untuk melakukan perkara yang lebih banyak dengan Tiled, satu perkara yang saya tidak tutup adalah sifat properties. Menggunakan sifat adalah lompat kecil dari mengasingkan nama lapisan, dan membolehkan anda menetapkan sejumlah besar pilihan. Sebagai contoh, jika anda ingin titik bertelur musuh, anda boleh menentukan jenis musuh, saiz, warna, dan segala-galanya, dari dalam editor peta berjubin!

Akhir sekali, seperti yang anda perhatikan, XML bukanlah format yang paling berkesan untuk menyimpan data TMX. CSV adalah medium yang bagus antara penguraian mudah dan penyimpanan yang lebih baik, tetapi terdapat juga base64 (tidak dikompresi, dikompresi zlib, dan gzip terkompresi). Jika anda berminat menggunakan format ini dan bukannya XML, lihat halaman wiki Tiled pada format TMX.

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.