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

Sebuah Pengantar untuk Menciptakan Mesin Peta Ubin

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

Dalam tutorial ini, saya akan membantu Anda untuk membuat level untuk setiap genre permainan dan membuat desain tingkat jauh lebih mudah. Anda akan mempelajari cara membuat mesin pertama Anda ubin peta untuk digunakan dalam proyek-proyek masa depan Anda. Saya akan menggunakan Haxe dengan OpenFL, tetapi Anda harus dapat mengikutinya dalam bahasa apapun.

Berikut adalah apa yang kita akan membahas:

  • Apa adalah permainan ubin berbasis?
  • Menemukan atau membuat ubin sendiri.
  • Menulis kode untuk menampilkan ubin pada layar.
  • Mengedit ubin layout untuk tingkat yang berbeda.

Anda mungkin mendapatkan awal yang baik pada ide permainan baru, juga!


Apa adalah permainan ubin berbasis?

Tentu saja, Wikipedia memiliki definisi yang mendalam apa sebuah ubin berbasis permainan, tetapi untuk mendapatkan inti dasar ada hanya beberapa hal yang perlu Anda ketahui:

  1. Genteng adalah gambar kecil, biasanya empat persegi panjang atau isometrik, yang bertindak seperti sebuah teka-teki karya seni untuk membangun gambar yang lebih besar.
  2. Peta adalah pengelompokan ubin menempatkan bersama-sama untuk menciptakan "bagian" (semoga) visual menarik (seperti tingkat atau daerah).
  3. Ubin berbasis mengacu pada metode bangunan tingkat dalam permainan. Kode akan tata letak ubin di lokasi tertentu untuk menutupi daerah yang dimaksudkan.

Untuk mendapatkan bahkan lebih mendasar, saya akan mengatakan seperti ini:

Sebuah permainan berbasis ubin menjabarkan ubin untuk membuat setiap tingkat.

Mengacu pada jenis ubin yang umum - persegi panjang dan isometrik - kami akan menggunakan ubin persegi panjang dalam artikel ini untuk kesederhanaan mereka. Jika Anda memutuskan untuk mencoba isometrik tingkat beberapa hari, ada tambahan matematika terlibat untuk membuatnya bekerja. (Setelah Anda selesai di sini, memeriksa primer besar ini menciptakan dunia isometrik.)

Ada beberapa manfaat yang cukup keren yang Anda peroleh dari menggunakan mesin genteng. Merembes paling jelas adalah bahwa Anda tidak perlu untuk membuat gambar besar dengan tangan untuk setiap tingkat individu. Ini akan mengurangi waktu pengembangan dan mengurangi ukuran file. Memiliki 50 1280x768px gambar untuk 50 tingkat permainan vs memiliki satu gambar dengan 100 ubin membuat perbedaan besar.

Efek samping lain adalah bahwa menemukan hal-hal pada peta Anda menggunakan kode menjadi sedikit lebih mudah. Daripada memeriksa hal-hal seperti tabrakan berdasarkan pixel yang tepat, Anda dapat menggunakan formula yang cepat dan mudah untuk menentukan ubin yang Anda perlu akses. (Aku akan pergi ke yang agak kemudian.)


Menemukan atau membuat ubin Anda sendiri

Hal pertama yang Anda akan perlu ketika membangun mesin genteng Anda adalah seperangkat ubin. Anda memiliki dua pilihan: menggunakan ubin orang lain, atau membuat Anda sendiri.

Jika Anda memutuskan untuk menggunakan ubin yang telah dibuat, Anda dapat menemukan seni tersedia secara bebas di seluruh web. Kelemahan ini adalah bahwa seni tidak dibuat khusus untuk permainan Anda. Di sisi lain, jika Anda hanya prototyping atau mencoba untuk belajar konsep baru, ubin bebas akan melakukan trik.

Di mana Uenemukan ubin Anda

Ada beberapa sumber daya luar sana untuk seni bebas dan open source. Berikut adalah beberapa tempat untuk memulai pencarian Anda:

  1. OpenGameArt.org
  2. Mari kita membuat permainan
  3. Pixel prospektor

Link tersebut tiga harus memberi Anda lebih dari cukup tempat untuk menemukan beberapa ubin yang layak untuk prototipe Anda. Sebelum Anda pergi gila meraih atas segala sesuatu yang Anda Cari, pastikan bahwa Anda memahami apa lisensi semuanya terbungkus di bawah dan pembatasan apa mereka datang dengan. Banyak lisensi akan memungkinkan Anda untuk menggunakan seni secara bebas dan komersial, tetapi mereka mungkin memerlukan atribusi.

Untuk tutorial ini, saya menggunakan beberapa ubin dari terbuka permainan seni Bundle untuk panggung. Anda dapat mendownload versi skala-down saya atau aslinya.

Bagaimana Membuat Ubin Anda Sendiri

Jika Anda belum mengambil risiko membuat seni untuk permainan Anda belum, itu mungkin sedikit menakutkan. Untungnya ada beberapa menakjubkan dan sederhana buah perangkat lunak yang membuat Anda menjadi tebal itu sehingga Anda dapat mulai berlatih.

Banyak pengembang mulai dengan piksel seni untuk permainan mereka dan di sini adalah beberapa alat besar untuk hal itu:

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

Berikut adalah beberapa program yang paling populer untuk membuat piksel seni. Jika Anda ingin sesuatu yang sedikit lebih kuat, GIMP adalah pilihan yang sangat baik. Anda juga dapat melakukan beberapa vektor seni dengan Inkscape dan mengikuti beberapa tutorial yang menakjubkan di 2D permainan seni untuk programmer.

Setelah Anda ambil perangkat lunak Anda dapat mulai bereksperimen dengan membuat ubin sendiri. Karena tutorial ini dimaksudkan untuk menunjukkan Anda bagaimana untuk membuat mesin Anda peta ubin saya tidak akan pergi ke terlalu banyak detail tentang membuat ubin sendiri, tapi ada satu hal yang harus selalu diingat:

Pastikan ubin Anda cocok bersama-sama mulus, dan menambahkan beberapa variasi untuk menjaga mereka menarik.

Jika ubin Anda menunjukkan garis-garis yang jelas antara mereka ketika disatukan, permainan Anda tidak akan terlihat sangat bagus. Pastikan Anda menaruh beberapa waktu ke menciptakan bagus "puzzle" ubin dengan membuat mereka mulus dan menambahkan beberapa variasi.


Menulis kode untuk menampilkan ubin

Sekarang kita punya semua barang-barang seni itu keluar dari jalan, kita dapat menyelam ke dalam kode untuk meletakkan ubin Anda baru diperoleh (atau diciptakan) pada layar.

Cara Menampilkan ubin tunggal pada layar

Mari kita mulai dengan tugas yang sangat dasar Menampilkan ubin tunggal pada layar. Membuat yakin bahwa ubin Anda semua ukuran yang sama dan disimpan di file terpisah gambar (kami akan berbicara lebih banyak tentang sprite lembar kemudian).

Setelah Anda memiliki ubin di folder aset proyek Anda, Anda dapat menulis kelas ubin sangat sederhana. Berikut adalah contoh dalam Haxe:

Karena semua yang kita lakukan sekarang adalah menempatkan tunggal genteng di layar, satu-satunya kelas itu adalah impor ubin gambar dari folder aset dan menambahkannya sebagai anak ke objek. Kelas ini mungkin akan bervariasi sangat didasarkan pada bahasa pemrograman yang Anda gunakan, tetapi Anda dapat dengan mudah menemukan panduan tentang cara untuk menampilkan gambar pada layar.

Sekarang bahwa kita memiliki kelas ubin, kita perlu membuat sebuah instance ubin dan menambahkannya ke kelas utama kami:

Kelas utama menciptakan genteng baru ketika constructor (new() fungsi, disebut ketika permainan dimulai) disebut, dan menambahkannya ke daftar tampilan.

Ketika permainan dijalankan, fungsi main() juga akan dipanggil, dan objek utama baru akan ditambahkan ke panggung. Anda seharusnya sudah memiliki ubin Anda muncul di bagian paling atas kiri layar. Sejauh ini baik-baik saja.

Tip: Jika tidak ada yang masuk akal - jangan khawatir! Ini adalah standar saja boilerplate kode Haxe. Hal penting untuk mengerti adalah bahwa ini menciptakan sebuah objek ubin dan menambahkannya ke layar.

Menggunakan array untuk meletakkan seluruh layar ubin

Langkah berikutnya adalah untuk menemukan cara untuk mengisi seluruh layar dengan ubin. Salah satu cara termudah untuk melakukannya adalah untuk mengisi sebuah array dengan bilangan bulat bahwa masing-masing mewakili id yang ubin. Kemudian Anda bisa iterate melalui array untuk memutuskan yang ubin untuk menampilkan dan di mana untuk menampilkannya.

Anda memiliki pilihan untuk menggunakan sebuah array yang khas atau menggunakan tatasusunan 2 dimensi. Dalam kasus Anda tidak akrab dengan 2D array, itu pada dasarnya adalah array tunggal yang diisi dengan beberapa array. Kebanyakan bahasa akan menunjukkan ini sebagai nameOfArray [x] [y] mana x dan y adalah indeks untuk mengakses satu elemen.

Sejak x dan y juga digunakan untuk layar koordinat, mungkin masuk akal untuk menggunakan x dan y sebagai koordinat untuk ubin kami. Trik dengan 2D array adalah pemahaman bagaimana bilangan bulat diatur. Anda mungkin harus membalikkan y dan x ketika iterasi melalui array (contoh di bawah ini).

Perhatikan bahwa dalam implementasi ini, elemen "0" dalam array itu sendiri sebuah array, bilangan bulat lima. Ini berarti bahwa Anda mengakses setiap elemen dengan y pertama, kemudian x. Jika Anda mencoba untuk mengakses exampleArr [1] [0], Anda akan mengakses ubin keenam.

Jika Anda tidak cukup mengerti bagaimana array 2D bekerja sekarang, jangan khawatir. Untuk tutorial ini saya akan menggunakan sebuah larik normal untuk menjaga hal-hal sederhana dan untuk membuat segalanya lebih mudah untuk memvisualisasikan:

Contoh di atas menunjukkan bagaimana sebuah larik normal bisa menjadi sedikit lebih sederhana. Kita bisa membayangkan persis di mana ubin akan dan semua harus kita lakukan adalah menggunakan rumus sederhana (jangan khawatir, itu telah datang!) untuk mendapatkan ubin yang kita inginkan.

Sekarang mari kita menulis beberapa kode untuk membuat kami array dan mengisinya dengan orang-orang. Nomor satu akan menjadi nomor yang mewakili ubin pertama kami.

Pertama kita perlu membuat sebuah variabel dalam kelas utama kami terus kami array:

Ini mungkin terlihat sedikit aneh, jadi saya akan memecahnya untuk Anda.

Nama variabel adalah peta dan aku telah diberi sejenis sangat spesifik: Array. <Int>Bagian hanya memberitahu program kami bahwa array hanya akan menjamin bilangan bulat.</Int> Array dapat menahan hanya tentang jenis apa pun yang Anda inginkan, jadi jika Anda menggunakan sesuatu yang lain untuk mengidentifikasi tiles, merasa bebas untuk mengubah parameter di sini.

Selanjutnya kita harus menambahkan beberapa kode ke konstruktor kelas utama kami (ingat, ini adalah fungsi new()) sehingga kita dapat membuat sebuah instance dari peta kami:

Baris ini akan menciptakan array kosong yang kita dapat segera mengisi dengan orang-orang kami untuk menguji itu. Pertama, mari kita menentukan beberapa nilai-nilai yang akan membantu kita dengan matematika kami:

Saya telah membuat nilai-nilai umum statis karena ini akan memberikan kami akses kepada mereka dari mana saja di program kami (melalui Main.Tile_WIDTH dan seterusnya). Juga, Anda mungkin telah memperhatikan bahwa membagi SCREEN_WIDTH dengan TILE_WIDTH memberi kami 10 dan pemisah SCREEN_HEIGHT oleh TILE_HEIGHT memberi kami 6. Dua nomor yang akan digunakan untuk memutuskan berapa banyak bilangan bulat untuk menyimpan dalam array kita.

Di blok kode ini, kami menetapkan 10 dan 6 untuk w dan h, seperti yang saya sebutkan di atas. Maka kita perlu untuk melompat ke dalam untuk loop untuk membuat sebuah array yang dapat ditampung 10 * 6 bilangan bulat. Ini akan menghasilkan ubin cukup untuk mengisi seluruh layar.

tileMapDiagram1

Sekarang kita memiliki peta dasar kami dibangun, tetapi bagaimana kita akan memberitahu ubin untuk mendapatkan ke tempat yang layak? Untuk itu kita perlu kembali ke kelas ubin dan membuat fungsi yang akan memungkinkan kita untuk bergerak ubin akan:

Ketika kita memanggil fungsi setLoc(), kami melewati di x dan y koordinat menurut peta kelas (formula segera, aku berjanji!). Fungsi mengambil nilai-nilai dan menerjemahkan mereka ke koordinat pixel dengan mengalikan mereka dengan TILE_WIDTH dan TILE_HEIGHT, masing-masing.

Satu satunya hal tersisa untuk dilakukan untuk mendapatkan tiles kami pada layar adalah untuk memberitahu kelas utama kami untuk membuat ubin dan menempatkan mereka di tempat berdasarkan lokasi mereka dalam peta. Mari kita kembali ke utama dan menerapkan yang:

Oh ya! Itu benar, kita sekarang memiliki sebuah layar penuh ubin. Mari kita memecah apa yang terjadi diatas.

Rumus

Formula yang saya terus menyebutkan ini akhirnya di sini.

Kita menghitung x dengan mengambil modulus (%) i dan w (yang adalah 10, ingat).

Modulus adalah hanya sisanya setelah integer Divisi: \ (14 \div 3 = 4 \text {sisanya} 2\) sehingga \ (14 \text {modulus} 3 = 2\).

Kami menggunakan ini karena kita ingin nilai x untuk me-reset kembali ke 0 pada awal setiap baris, jadi kita menarik ubin masing-masing di ujung kiri:

tile_grid_cols

Adapun y, kita mengambil floor() i / w (yaitu kami bulat hasil) karena kita hanya ingin y untuk meningkatkan setelah kami telah mencapai akhir setiap baris dan bergerak turun satu tingkat:

tile_grid_rows
Tip: Kebanyakan bahasa tidak mengharuskan Anda untuk memanggil Math.floor() ketika membagi bilangan bulat; HaXe hanya menangani integer Divisi berbeda. Jika Anda menggunakan bahasa itu divisi integer, Anda hanya dapat menggunakan saya i / w (dengan asumsi mereka adalah bilangan bulat kedua).

Akhirnya, saya ingin menyebutkan sedikit tentang bergulir tingkat. Biasanya Anda tidak akan dapat menciptakan tingkat yang cocok sempurna dalam viewport Anda. Peta Anda mungkin akan jauh lebih besar daripada layar dan Anda tidak ingin terus menggambar gambar bahwa pemain tidak akan mampu melihat. Dengan beberapa matematika yang cepat dan mudah, Anda harus dapat menghitung ubin yang harus pada layar dan yang ubin untuk menghindari gambar.

Sebagai contoh: ukuran layar Anda adalah 500 x 500, ubin Anda 100 x 100, dan ukuran dunia Anda adalah 1000 x 1000. Anda hanya akan perlu untuk melakukan pemeriksaan cepat sebelum mengambil ubin untuk mengetahui ubin yang berada pada layar. Menggunakan lokasi Anda viewport - Mari kita katakan 400 x 500 - Anda hanya perlu menarik ubin dari 4 sampai 9 baris dan kolom 5-10. Anda bisa mendapatkan angka-angka dengan membagi lokasi dengan ukuran tile, kemudian offsetting nilai-nilai tersebut dengan ukuran layar yang dibagi dengan ukuran ubin. Sederhana.

Itu mungkin tidak terlihat seperti banyak namun karena semua ubin yang sama, tapi dasar adalah hampir di sana. Satu-satunya hal tersisa untuk dilakukan adalah untuk membuat berbagai jenis ubin dan desain peta kami sehingga mereka berbaris dan membuat sesuatu yang indah.


Editing Ubin Layout untuk Tingkat yang Berbeda

Baiklah, kami sekarang memiliki sebuah peta yang penuh dengan orang-orang yang mencakup layar. Pada titik ini Anda harus memiliki lebih dari satu jenis ubin, yang berarti bahwa kita harus mengubah konstruktor ubin kami yang:

Karena saya menggunakan enam ubin yang berbeda untuk peta saya, saya membutuhkan switch pernyataan yang mencakup nomor satu melalui enam. Anda akan melihat bahwa konstruktor sekarang mengambil integer sebagai parameter jadi kita tahu apa jenis ubin untuk membuat.

Sekarang, kita harus kembali ke konstruktor utama kami dan memperbaiki ubin penciptaan dalam kami untuk loop:

Semua kita harus lakukan adalah lulus peta [i] ke konstruktor ubin untuk membuatnya bekerja lagi. Jika Anda mencoba untuk menjalankan tanpa melewati integer untuk ubin, itu akan memberi Anda beberapa kesalahan.

Hampir semuanya sudah di tempat, tetapi sekarang kita perlu cara untuk desain peta bukan hanya mengisi mereka dengan ubin acak. Pertama, Hapus untuk loop di konstruktor utama yang menetapkan setiap elemen ke salah satu. Maka kita bisa membuat peta kita sendiri dengan tangan:

Jika Anda memformat array seperti aku punya di atas, Anda dapat dengan mudah melihat bagaimana tiles kami akan diselenggarakan. Anda juga hanya dapat memasukkan array sebagai satu garis panjang angka, tapi mantan bagus karena Anda dapat melihat 10 di dan 6 turun.

Ketika Anda mencoba untuk menjalankan program sekarang, Anda harus mendapatkan beberapa pengecualian null pointer. Masalahnya adalah bahwa kita menggunakan nol di peta kami dan kelas ubin kami tidak tahu apa yang harus dilakukan dengan nol. Pertama, kita akan memperbaiki konstruktor dengan menambahkan di cek sebelum kita menambahkan gambar anak:

Ini cepat memeriksa memastikan bahwa kami tidak menambahkan anak null ke objek-objek ubin yang kita ciptakan. Perubahan terakhir untuk kelas ini adalah fungsi setLoc(). Sekarang kita berusaha untuk set x dan y nilai untuk variabel yang belum diinisialisasi.

Mari kita tambahkan lain cepat memeriksa:

Dengan perbaikan sederhana-dua di tempat, dan ubin yang saya berikan di atas, Anda harus dapat menjalankan permainan dan melihat tingkat platformer sederhana. Sejak kami meninggalkan 0 sebagai "non-ubin", kita bisa meninggalkannya transparan (kosong). Jika Anda ingin membumbui tingkat, Anda dapat menempatkan latar belakang dalam sebelum Anda meletakkan ubin; Aku hanya menambahkan cahaya gradien biru terlihat seperti langit di latar belakang.

tileMapDiagram2

Itu adalah cukup banyak semua yang Anda butuhkan untuk mengatur cara sederhana untuk mengedit tingkat Anda. Cobalah untuk bereksperimen sedikit dengan array dan melihat apa desain Anda bisa datang dengan untuk tingkat lainnya.

Software pihak ketiga untuk merancang tingkat

Setelah Anda mendapatkan dasar-dasar, Anda mungkin mempertimbangkan menggunakan beberapa alat untuk membantu Anda merancang tingkat cepat dan melihat apa yang mereka terlihat seperti sebelum Anda melemparkan mereka ke dalam permainan. Salah satu pilihan adalah untuk membuat Anda sendiri tingkat editor. Alternatif adalah untuk mengambil beberapa perangkat lunak yang tersedia secara gratis untuk menggunakan. Dua alat populer adalah Editor peta keramik dan Ogmo Editor. Mereka berdua membuat mengedit jauh lebih mudah dengan beberapa pilihan ekspor.


Anda hanya menciptakan mesin ubin berbasis!

Sekarang Anda tahu apa ubin berbasis permainan adalah, bagaimana untuk mendapatkan beberapa ubin untuk menggunakan untuk tingkat Anda, dan bagaimana untuk mendapatkan tangan Anda kotor dan menulis kode untuk mesin Anda, dan Anda bahkan dapat melakukan editing tingkat dasar dengan array sederhana. Ingatlah bahwa ini adalah hanya awal; ada banyak bereksperimen yang dapat Anda lakukan untuk membuat sebuah mesin yang lebih baik.

Juga, saya telah menyediakan file sumber untuk Anda untuk memeriksa. Berikut adalah apa yang tampak seperti SWF akhir:

Download SWF di sini.

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

Jangan berhenti di sini!

Tugas berikutnya adalah untuk melakukan riset dan mencoba hal-hal baru untuk meningkatkan apa yang Anda buat di sini. Lembar sprite adalah cara yang bagus untuk meningkatkan kinerja dan membuat hidup sedikit lebih mudah. Kuncinya adalah untuk mendapatkan beberapa kode yang solid untuk membaca dari lembar sprite sehingga permainan Anda tidak harus membaca masing-masing gambar secara individual.

Anda juga harus mulai berlatih keterampilan seni dengan membuat beberapa tilesets Anda sendiri. Dengan cara itu Anda bisa mendapatkan seni tepat untuk permainan masa depan Anda.

Seperti biasa, meninggalkan beberapa komentar di bawah ini tentang bagaimana mesin Anda bekerja untuk Anda - dan mungkin bahkan beberapa demo sehingga kita dapat mencoba permainan ubin Anda berikutnya.

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.