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

Pengenalan Membuat Mesin Peta Tile

by
Difficulty:IntermediateLength:LongLanguages:

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

Dalam tutorial ini, saya akan membantu anda untuk mencipta tahap untuk mana-mana genre permainan dan membuat peringkat reka bentuk lebih mudah. Anda akan belajar cara membuat enjin peta jubin pertama anda untuk digunakan dalam mana-mana projek masa depan anda. Saya akan menggunakan Haxe dengan OpenFL, tetapi anda sepatutnya dapat mengikutinya dalam mana-mana bahasa.

Inilah yang akan kita tutup:

  • Apakah permainan berasaskan ubin?
  • Mencari atau membuat jubin anda sendiri.
  • Menulis kod itu untuk memaparkan jubin pada skrin.
  • Mengedit susun atur jubin untuk tahap yang berbeza.

Anda mungkin mendapat permulaan yang baik pada idea permainan baru juga!


Apakah Permainan Berasaskan Tile?

Secara semulajadi, Wikipedia mempunyai takrif mendalam tentang apa permainan berasaskan ubin, tetapi untuk mendapatkan inti asas hanya terdapat beberapa perkara yang perlu anda ketahui:

  1. Jubin adalah imej kecil, biasanya segi empat tepat atau isometrik, yang bertindak seperti sekeping teka-teki seni untuk membina imej yang lebih besar.
  2. Peta adalah pengelompokkan jubin yang disusun untuk membuat (seketika) visual ''menarik'' bahagian (seperti tahap atau kawasan).
  3. Berdasarkan berasaskan ubi merujuk kepada kaedah tahap pembinaan dalam permainan. Kod ini akan merangka jubin di lokasi tertentu untuk menampung kawasan yang dimaksudkan.

Untuk mendapatkan lebih asas, saya akan meletakkannya seperti ini:

Permainan berasaskan ubin meletakkan ubin untuk mencipta setiap peringkat.

Merujuk kepada jenis jubin biasa - segi empat tepat dan isometrik - kami akan menggunakan jubin segi empat tepat dalam artikel ini untuk kesederhanaan mereka. Jika anda membuat keputusan untuk mencuba tahap isometrik pada suatu hari, terdapat matematik tambahan yang terlibat untuk membuatnya berfungsi. (Sebaik sahaja anda selesai di sini, lihat buku asas ini untuk mewujudkan dunia isometrik.)

Terdapat beberapa manfaat yang sangat menarik yang anda dapat daripada menggunakan jubin jubin. Perasaan yang paling jelas adalah bahawa anda tidak perlu membuat imej besar dengan tangan untuk setiap tahap individu. Ini akan mengurangkan masa pembangunan dan mengurangkan saiz fail. Mempunyai 50 1280x768px gambar untuk permainan 50 peringkat vs mempunyai satu imej dengan 100 jubin membuat perbezaan besar.

Kesan sampingan yang lain ialah mencari benda di peta menggunakan kod menjadi sedikit lebih mudah. Daripada memeriksa perkara seperti perlanggaran berdasarkan piksel yang tepat, anda boleh menggunakan formula yang cepat dan mudah untuk menentukan jubin yang anda perlukan untuk mengakses. (Saya akan pergi sedikit kemudian.)


Mencari atau Membuat Ubin Anda Sendiri

Perkara pertama yang anda perlukan apabila membina jubin anda adalah set jubin. Anda mempunyai dua pilihan: menggunakan jubin orang lain, atau buat sendiri.

Jika anda memutuskan untuk menggunakan jubin yang telah dibuat, anda boleh mencari seni yang tersedia secara bebas di seluruh web. Kelemahan untuk ini ialah seni tidak dibuat khusus untuk permainan anda. Sebaliknya, jika anda hanya prototaip atau cuba mempelajari konsep baru, jubin percuma akan melakukan silap mata itu.

Di mana Cari Jubin Anda

Terdapat beberapa sumber di luar sana untuk seni sumber bebas dan terbuka. Berikut adalah beberapa tempat untuk memulakan carian anda:

  1. OpenGameArt.org
  2. Mari kita buat permainan
  3. Pspelektor Pixel

Ketiga pautan itu akan memberi anda lebih banyak tempat untuk mencari jubin yang baik untuk prototaip anda. Sebelum anda gila meraih segala yang anda temukan, pastikan anda memahami apa semua lesen dilindungi di bawah dan apa sekatan yang mereka hadapi. Banyak lesen akan membolehkan anda menggunakan seni secara bebas dan untuk kegunaan komersial, tetapi mereka mungkin memerlukan atribusi.

Untuk tutorial ini, saya menggunakan beberapa jubin dari Bundle Art Game Terbuka untuk platformer. Anda boleh memuat turun versi berskala atau asal saya.

Cara Membuat Ubin Anda Sendiri

Jika anda belum mengambil risiko membuat seni untuk permainan anda, ia mungkin sedikit menakutkan. Nasib baik terdapat beberapa perisian yang menakjubkan dan mudah yang membuat anda menjadi tebal sehingga anda dapat berlatih.

Ramai pemaju bermula dengan seni piksel untuk permainan mereka dan di sini adalah beberapa alat hebat untuk hanya itu:

  1. Aseprite
  2. Pyxel Edit
  3. Gale grafik
  4. Pixen untuk pengguna Mac

Ini adalah beberapa program yang paling popular untuk membuat seni pixel. Jika anda menginginkan sesuatu yang lebih berkuasa, GIMP adalah pilihan yang sangat baik. Anda juga boleh melakukan beberapa seni vektor dengan Inkscape dan ikuti beberapa tutorial yang menakjubkan di Art Game 2D Untuk Pemrogram.

Sebaik sahaja anda mengambil perisian, anda boleh mula bereksperimen dengan membuat jubin anda sendiri. Oleh kerana tutorial ini dimaksudkan untuk menunjukkan kepada anda cara membuat peta jubin anda enjin Saya tidak akan terperinci tentang membuat jubin itu sendiri, tetapi ada satu perkara yang perlu diingat:

Pastikan jubin anda sesuai dengan lancar, dan tambah beberapa variasi untuk menjadikannya menarik.

Jika jubin anda menunjukkan garis yang jelas di antara mereka apabila disatukan, permainan anda tidak kelihatan sangat bagus. Pastikan anda meluangkan masa untuk mencipta jubin ''teka-teki'' bagus dengan menjadikannya lancar dan menambah beberapa variasi.


Menulis Kod ke Paparan Ubin 

Sekarang kita telah mendapat semua bahan seni itu daripada jalan, kita boleh menyelam ke dalam kod untuk meletakkan jubin yang baru diperoleh (atau dibuat) di skrin.

Cara Menampilkan Tile Tunggal di Skrin

Mari kita mulakan dengan tugas yang sangat mendasar untuk memaparkan satu jubin tunggal pada skrin. Pastikan jubin anda semua saiz yang sama dan disimpan dalam fail imej yang berasingan (kami akan berbincang lebih lanjut mengenai helaian engkol kemudian).

Sebaik sahaja anda mempunyai jubin dalam folder aset anda dalam projek anda, anda boleh menulis kelas Tile yang sangat mudah. Inilah contoh di Haxe:

Oleh kerana semua yang kita lakukan sekarang ialah meletakkan jubin tunggal pada skrin, satu-satunya perkara yang dilakukan oleh kelas adalah mengimport imej jubin dari folder aset dan menambahkannya sebagai anak kepada objek. Kelas ini mungkin berbeza-beza berdasarkan bahasa pengaturcaraan yang anda gunakan, tetapi anda harus dapat dengan mudah mencari panduan tentang cara memaparkan imej pada skrin.

Sekarang kita mempunyai kelas Tile, kita perlu membuat contoh Tile dan menambahnya ke kelas Utama kami:

Kelas Utama mencipta Tile baru apabila pembina (fungsi baru (), dipanggil apabila permainan dimulakan) dipanggil, dan menambahnya ke senarai paparan.

Apabila permainan dijalankan, fungsi utama () akan dipanggil, dan objek Utama baru akan ditambah ke pentas. Sekarang anda perlu jubin anda muncul di sebelah kiri bahagian atas skrin. Setakat ini, sangat baik.

Petua: Jika tidak ada yang masuk akal - jangan bimbang! Ia hanya standard boilerplate Haxe code. Perkara utama untuk difahami ialah ini mewujudkan objek Tile dan menambahnya ke skrin.

Menggunakan Array untuk Lay Out keseluruhan Skrin Jubin

Langkah seterusnya ialah mencari cara untuk mengisi seluruh skrin dengan jubin. Salah satu cara termudah untuk melakukan ini adalah mengisi sebuah array dengan bilangan bulat yang masing-masing mewakili ID jubin. Kemudian anda boleh beralih melalui tatasusunan untuk menentukan jubin mana yang akan dipaparkan dan di mana untuk memaparkannya.

Anda mempunyai pilihan untuk menggunakan array biasa atau menggunakan array 2 dimensi. Sekiranya anda tidak biasa dengan tatasusunan 2D, ia pada asasnya satu susunan tunggal yang dipenuhi dengan pelbagai tatasusunan. Kebanyakan bahasa akan menandakan nama ini sebagai namaOfArray [x] [y] di mana x dan y adalah indeks untuk mengakses satu elemen.

Oleh kerana x dan y juga digunakan untuk koordinat skrin, ia mungkin masuk akal untuk menggunakan x dan y sebagai koordinat untuk jubin kami. Caranya dengan susunan 2D ialah memahami bagaimana bilangan bulat dianjurkan. Anda mungkin perlu membalikkan y dan x apabila melewati array (contoh di bawah).

Perhatikan bahawa dalam pelaksanaan ini, elemen ''0'' dalam tatasusunan itu sendiri adalah satu array, lima integer. Ini bermakna anda mengakses setiap elemen dengan y dahulu, kemudian x. Jika anda cuba mengakses contohArr [1] [0], anda akan mengakses jubin keenam.

Jika anda tidak faham bagaimana susunan 2D berfungsi sekarang, jangan risau. Untuk tutorial ini saya akan menggunakan array biasa untuk memastikan perkara mudah dan membuat perkara lebih mudah untuk digambarkan:

Contoh di atas menunjukkan bagaimana tatasusunan biasa boleh sedikit lebih mudah. Kita boleh memvisualisasikan tepat di mana jubin akan dan apa yang perlu kita lakukan adalah menggunakan formula mudah (jangan bimbang, ia akan datang!) Untuk mendapatkan jubin yang kita mahu.

Sekarang mari kita tulis beberapa kod untuk membuat array kami dan isikan dengannya. Nombor nombor akan menjadi ID yang mewakili jubin pertama kami.

Mula-mula kita perlu membuat pembolehubah di dalam kelas Utama kami untuk memegang array kami:

Ini mungkin kelihatan aneh, jadi saya akan memecahkannya untuk anda. 

Nama pemboleh ubah adalah peta dan saya telah memberikan jenis yang sangat spesifik: Array. Bahagian <Int>  hanya memberitahu program kami bahawa array hanya akan memegang bilangan bulat. Array boleh memegang apa-apa jenis yang anda mahu, jadi jika anda menggunakan sesuatu yang lain untuk mengenal pasti jubin anda, jangan ragu untuk mengubah parameter di sini.

Selanjutnya kita perlu menambah kod kepada pembina kelas utama kami (ingat, ini adalah fungsi baru () yang berfungsi untuk membuat contoh peta kami:

Barisan ini akan mewujudkan satu array kosong yang kami dapat segera mengisi dengan kami untuk menguji ia. Pertama, mari kita tentukan beberapa nilai yang akan membantu kita dengan matematik kita:

Saya telah membuat nilai-nilai ini awam statik kerana ini akan memberi kita akses kepada mereka dari mana-mana sahaja dalam program kami (melalui Main.Tile_WIDTH dan sebagainya). Juga, anda mungkin perasan bahawa membahagikan SCREEN_WIDTH oleh TILE_WIDTH memberi kami 10 dan membahagikan SCREEN_HEIGHT oleh TILE_HEIGHT memberi kami 6. Kedua-dua nombor tersebut akan digunakan untuk menentukan bilangan bilangan bulat yang akan disimpan dalam array kami.

Dalam blok kode ini, kami menetapkan 10 dan 6 ke w dan h, seperti yang saya sebutkan di atas. Kemudian kita perlu melompat ke loop untuk membuat array yang dapat memuat 10 * 6 bilangan bulat. Ini akan mengambil kira jubin yang cukup untuk mengisi keseluruhan skrin.

tileMapDiagram1

Sekarang kita telah membina peta asas kita, tetapi bagaimana kita akan memberitahu jubin untuk masuk ke tempat yang sepatutnya? Untuk itu kita perlu kembali ke kelas Tile dan mewujudkan satu fungsi yang akan membolehkan kita untuk memindahkan jubin di sekeliling pada kehendak:

Apabila kita memanggil fungsi setLoc (), kami lulus dalam koordinat x dan y mengikut kelas peta kami (formula akan datang, saya berjanji!). Fungsi ini mengambil nilai-nilai tersebut dan menterjemahkannya ke koordinat pixel dengan mengalikannya dengan TILE_WIDTH dan TILE_HEIGHT, masing-masing.

Satu-satunya perkara yang perlu dilakukan untuk mendapatkan jubin kami di skrin adalah untuk memberitahu kelas Utama kami untuk membuat jubin dan meletakkannya di tempat berdasarkan lokasi mereka dalam peta. Mari kembali ke Main dan melaksanakannya:

Oh yeah! Benar, kami kini mempunyai skrin yang penuh dengan jubin. Mari pecahkan apa yang sedang berlaku di atas.

Formula

Formula yang saya terus sebut akhirnya di sini.

Kami mengira x dengan mengambil modulus (%) i dan w (iaitu 10, ingat).

Modulus adalah baki selepas pembahagian integer: (14 div 3 = 4 text {sisa} 2 ) jadi (14 text {modulus} 3 = 2 ).

Kami menggunakan ini kerana kami mahu nilai x kami untuk menetapkan semula kepada 0 pada permulaan setiap baris, jadi kami melukis jubin masing-masing di kiri:

tile_grid_cols

Bagi y, kami mengambil lantai () i / w (iaitu, kita pusingan yang hasilnya) kerana kita hanya mahu y meningkat apabila kita telah mencapai akhir setiap baris dan bergerak ke bawah satu tahap:

tile_grid_rows
Tip: Kebanyakan bahasa tidak akan memerlukan anda memanggil Math.floor () apabila membahagi bilangan bulat; Haxe hanya mengendalikan bahagian integer secara berbeza. Sekiranya anda menggunakan bahasa yang mempunyai pembahagian integer, anda hanya boleh menggunakan i / w (dengan mengandaikan ia adalah kedua-dua bilangan bulat).

Akhir sekali, saya ingin menyebut sedikit tentang tahap menatal. Biasanya anda tidak akan mewujudkan tahap yang sesuai dengan sempurna di dalam viewport anda. Peta anda mungkin akan jauh lebih besar daripada skrin dan anda tidak mahu terus melukis imej yang pemain tidak akan dapat melihat. Dengan beberapa matematik yang cepat dan mudah, anda harus dapat mengira jubin mana yang perlu di skrin dan jubin yang mana untuk mengelakkan lukisan.

Sebagai contoh: Saiz skrin anda ialah 500x500, jubin anda adalah 100x100, dan saiz dunia anda adalah 1000x1000. Anda hanya perlu melakukan semakan cepat sebelum membuat ubin untuk mengetahui jubin mana yang ada di skrin. Menggunakan lokasi viewport anda - katakanlah 400x500 - anda hanya perlu menarik jubin dari baris 4 hingga 9 dan lajur 5 hingga 10. Anda boleh mendapatkan nombor tersebut dengan membahagikan lokasi dengan saiz jubin, kemudian mengasingkan nilai tersebut dengan saiz skrin yang dibahagikan dengan saiz jubin. Mudah.

Ia mungkin tidak kelihatan seperti banyak lagi kerana semua jubin adalah sama, tetapi yayasan hampir di sana. Satu-satunya perkara yang perlu dilakukan adalah untuk membuat pelbagai jenis jubin dan reka bentuk peta kami supaya mereka bersatu dan mencipta sesuatu yang bagus.


Mengedit Layout Tile untuk Tahap yang berbeza

Baiklah, kami kini mempunyai peta yang penuh dengan yang meliputi skrin. Pada titik ini, anda harus mempunyai lebih daripada satu jenis jubin, yang bermaksud bahawa kita perlu menukar pembina Tile kami untuk menjelaskan:

Oleh kerana saya menggunakan enam jubin yang berbeza untuk peta saya,Saya perlukan a pernyataan suis yang merangkumi nombor satu hingga enam. Anda akan perhatikan bahawa pembina kini mengambil integer sebagai parameter supaya kami tahu jenis jubin yang hendak dibuat.

Sekarang, kita perlu kembali ke pembina utama kami dan untuk gelung:membaiki penciptaan jubin di dalam kami

Apa yang perlu kita lakukan ialah lulus peta[i] kepada pembina Tile untuk menjadikannya berfungsi semula. Sekiranya anda cuba lari tanpa lulus integer ke Tile, ia akan memberi anda beberapa ralat.

Hampir segala-galanya ada di tempat, tetapi sekarang kita memerlukan cara untuk merancang peta dan bukan hanya mengisi mereka dengan jubin rawak. Pertama, keluarkan untuk gelung dalam pembina Utama yang menetapkan setiap elemen kepada satu. Kemudian kami dapat membuat peta kami sendiri dengan tangan:

Sekiranya anda memformat array seperti yang saya ada di atas, anda boleh melihat dengan mudah bagaimana jubin kami akan dianjurkan. Anda juga boleh memasukkan array sebagai satu baris panjang, tetapi yang pertama adalah bagus kerana anda dapat melihat 10 dan 6 ke bawah.

Apabila anda cuba menjalankan program sekarang, anda perlu mendapatkan beberapa pengecualian penunjuk null. Masalahnya ialah kita menggunakan nol dalam peta kita dan kelas Tile kita tidak tahu apa yang perlu dilakukan dengan sifar. Mula-mula, kami akan membetulkan pembina dengan menambahkan dalam semakan sebelum kami menambah kanak-kanak imej:

Semak cepat ini memastikan bahawa kami tidak menambahkan sebarang anak-anak yang tidak sah ke objek Tile yang kami buat. Perubahan terakhir untuk kelas ini ialah fungsi setLoc (). Sekarang kita cuba untuk menetapkan nilai x dan y untuk pembolehubah yang belum dimulakan.

Mari tambahkan lagi cek cepat:

Dengan kedua-dua pembetulan mudah ini, dan jubin yang saya berikan di atas, anda sepatutnya dapat menjalankan permainan dan melihat tahap platformer yang mudah. Oleh kerana kami meninggalkan 0 sebagai ''bukan-jubin'', kami boleh meninggalkannya telus (kosong). Sekiranya anda mahu memanjakan aras, anda boleh meletakkan latar belakang sebelum anda meletakkan jubin; Saya hanya menambah kecerunan biru terang untuk kelihatan seperti langit di latar belakang.

tileMapDiagram2

Itu cukup banyak yang anda perlukan untuk menyediakan cara mudah untuk mengedit tahap anda. Cuba untuk bereksperimen sedikit dengan array dan lihat apa reka bentuk yang anda boleh tampil untuk tahap yang lain.

Perisian Pihak Ketiga untuk Peringkat Reka Bentuk

Sebaik sahaja anda mempunyai asas-asas ke bawah, anda mungkin mempertimbangkan untuk menggunakan beberapa alat lain untuk membantu anda merancang tahap dengan pantas dan melihat apa yang kelihatan seperti sebelum anda melemparkannya ke dalam permainan. Satu pilihan adalah untuk membuat editor peringkat anda sendiri. Alternatifnya ialah untuk merebut beberapa perisian yang boleh digunakan secara percuma. Kedua-dua alat yang popular adalah Editor Peta Tile dan Editor Ogmo. Mereka berdua membuat penyuntingan peringkat lebih mudah dengan pelbagai pilihan eksport.


Anda Hanya Mencipta Enjin Berasaskan Tile!

Sekarang anda tahu apa permainan berasaskan ubin, cara untuk mendapatkan beberapa jubin untuk digunakan untuk tahap anda, dan bagaimana untuk mendapatkan tangan anda kotor dan menulis kod untuk enjin anda, dan anda juga boleh melakukan beberapa pengeditan peringkat asas dengan tatasusunan mudah . Ingatlah bahawa ini hanya permulaan; terdapat banyak percubaan yang boleh anda lakukan untuk membuat enjin yang lebih baik.

Juga, saya telah menyediakan fail sumber untuk anda menyemak. Inilah yang kelihatan seperti SWF terakhir:

Muat turun SWF sini.

... dan di sini, sekali lagi, adalah array yang dihasilkan daripada:

Jangan Berhenti Di Sini!

Tugas seterusnya adalah melakukan penyelidikan dan cuba beberapa perkara baru untuk memperbaiki apa yang anda buat di sini. Sprite lembaran adalah cara terbaik untuk meningkatkan prestasi dan menjadikan kehidupan lebih mudah. Caranya adalah untuk mendapatkan beberapa kod pepejal yang dibentangkan untuk membaca dari helaian sprite supaya permainan anda tidak perlu membaca setiap imej secara individu.

Anda juga harus mula mengamalkan kemahiran seni anda dengan membuat beberapa tileset anda sendiri. Dengan cara itu, anda boleh mendapatkan seni yang tepat untuk permainan masa depan anda.

Seperti biasa, tinggalkan beberapa komen di bawah tentang bagaimana enjin anda bekerja untuk anda - dan mungkin juga beberapa demo supaya kami boleh mencuba permainan jubin anda yang seterusnya.

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.