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

Bagaimana Membuat Roguelike Pertama Anda

by
Difficulty:IntermediateLength:LongLanguages:

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

Roguelikes telah menjadi tumpuan baru-baru ini, dengan permainan seperti Dungeons of Dredmor, Spelunky, The Binding of Isaac, dan FTL yang mencapai khalayak luas dan menerima pujian kritis. Lama dinikmati oleh pemain tegar dalam niche kecil, elemen roguelike dalam pelbagai kombinasi kini membantu membawa lebih mendalam dan replayability kepada banyak genre yang ada.

Wayfarer a 3D roguelike currently in development
Wayfarer, roguelike 3D yang sedang dalam pembangunan.

Dalam tutorial ini, anda akan belajar bagaimana membuat roguelike tradisional menggunakan JavaScript dan enjin permainan HTML 5 Phaser. Pada akhirnya, anda akan mempunyai permainan roguelike yang berfungsi sepenuhnya, dimainkan dalam penyemak imbas anda! (Untuk tujuan kami roguelike tradisional ditakrifkan sebagai pemain tunggal, rawak, berasaskan perangkap penjara bawah dengan permadeath.)

Click to play the game
Klik untuk memainkan permainan.

Nota: Walaupun kod dalam tutorial ini menggunakan JavaScript, HTML, dan Phaser, anda harus dapat menggunakan teknik dan konsep yang sama dalam hampir semua bahasa pengekodan dan enjin permainan yang lain.


Bersiap sedia

Untuk tutorial ini, anda memerlukan editor teks dan penyemak imbas. Saya menggunakan Notepad++, dan saya lebih suka Google Chrome untuk alat pemajunya yang luas, tetapi aliran kerja akan sama banyak dengan mana-mana editor teks dan penyemak imbas yang anda pilih.

Anda perlu memuat turun fail sumber dan mulakan dengan folder init; ini mengandungi Phaser dan fail HTML dan JS asas untuk permainan kami. Kami akan menulis kod permainan kami dalam fail rl.js yang sedang kosong.

Fail index.html hanya memuat Phaser dan fail kod permainan kami yang berikut:


Inisialisasi dan Definisi

Pada masa ini, kami akan menggunakan grafik ASCII untuk roguelike kami-pada masa hadapan, kami boleh menggantikannya dengan grafik bitmap, tetapi pada masa ini, dengan menggunakan ASCII mudah menjadikan kehidupan kita lebih mudah.

Mari kita tentukan beberapa pemalar untuk saiz fon, dimensi peta kita (iaitu, tahap), dan berapa banyak pelakon yang bertelur di dalamnya:

Mari kita mulakan Phaser dan dengar acara keychain, kerana kita akan membuat permainan berasaskan giliran dan akan mahu bertindak sekali untuk setiap strok utama:

Oleh kerana fon monospace lalai cenderung sekitar 60% selebar kerana mereka tinggi, kami telah memulakan saiz kanvas menjadi 0.6 * saiz fon * bilangan lajur. Kami juga memberitahu Phaser bahawa ia harus menghubungi fungsi create() kami dengan serta-merta selepas ia selesai dijalankan, pada ketika mana kami memulakan kawalan papan kekunci.

Anda boleh melihat permainan setakat ini - tidak banyak yang dapat dilihat!


Peta

Peta jubin mewakili kawasan permainan kami: diskrit (bertentangan dengan berterusan) Jubin 2D, atau sel, masing-masing diwakili oleh watak ASCII yang boleh menandakan sama ada tembok (#: pergerakan blok) atau lantai (.: Tidak menyekat pergerakan):

Mari kita gunakan bentuk penjanaan prosedural yang paling sederhana untuk membuat peta kita: secara rawak menentukan sel mana yang harus mengandungi dinding dan lantai:

Ini harus memberi kita peta di mana 80% sel-sel adalah dinding dan selebihnya adalah lantai.

Kami memulakan peta baru untuk permainan kami dalam fungsi create (), segera setelah menyiapkan pendengar acara keyboard:

Anda boleh melihat demo di sini-walaupun, sekali lagi, tidak ada apa-apa untuk dilihat, seperti yang belum kami berikan peta.


Skrin

Sudah tiba masanya untuk melukis peta kami! Skrin kami akan menjadi pelbagai elemen teks 2D, masing-masing mengandungi satu aksara:

Melukis peta akan mengisi kandungan skrin dengan nilai peta, kerana kedua-duanya adalah aksara ASCII yang mudah:

Akhirnya, sebelum kita melukis peta kita perlu memulakan skrin. Kami kembali ke fungsi create():

Anda kini perlu melihat peta rawak yang dipaparkan semasa anda menjalankan projek.

Click to view the game so far
Klik untuk melihat permainan setakat ini.

Actors

Seterusnya dalam barisan adalah pelakon: watak pemain kami, dan musuh-musuh mereka mesti kalah. Setiap pelakon akan menjadi objek dengan tiga bidang: x dan y untuk lokasinya di peta, dan hp untuk titik hitnya.

Kami menyimpan semua pelakon dalam array aktorList (elemen pertama yang merupakan pemain). Kami juga menyimpan associative array dengan lokasi pelakon sebagai kunci untuk mencari pantas, sehingga kami tidak perlu melelehkan seluruh senarai pelakon untuk mencari pelakon yang menduduki tempat tertentu; ini akan membantu kita apabila kita kod pergerakan dan pertempuran.

Kami mencipta semua pelakon kami dan memberikan kedudukan rawak percuma ke dalam peta masing-masing:

Ia adalah masa untuk menunjukkan pelakon! Kami akan menarik semua musuh sebagai e dan watak pemain sebagai bilangan hitpoints:

Kami menggunakan fungsi yang kami buat untuk memulakan dan menarik semua pelakon dalam fungsi create() kami:

Kita kini dapat melihat watak pemain dan musuh kita tersebar di peringkat!

Click to view the game so far
Klik untuk melihat permainan setakat ini.

Menyekat dan Berjalan Tiles

Kita perlu memastikan bahawa pelakon kita tidak melepaskan skrin dan melalui dinding, jadi mari tambahkan pemeriksaan mudah ini untuk melihat arah mana pelakon yang diberikan dapat berjalan:


Pergerakan dan Pertempuran

Kami akhirnya tiba di beberapa interaksi: pergerakan dan pertempuran! Oleh kerana, dalam roguelikes klasik, serangan asas dicetuskan oleh pindah ke pelakon lain, kami mengendalikan kedua-dua ini di tempat yang sama, fungsi moveTo () kami, yang mengambil seorang pelakon dan arah (arah adalah perbezaan yang diinginkan di x dan y ke kedudukan pelakon langkah dalam):

Pada dasarnya:

  1. Kami pastikan pelakon cuba bergerak ke kedudukan yang sah.
  2. Sekiranya terdapat pelakon lain dalam kedudukan itu, kita menyerangnya (dan membunuhnya jika kiraan HPnya mencapai 0).
  3. Sekiranya tidak ada pelakon lain dalam kedudukan baru, kami berpindah ke sana.

Perhatikan bahawa kami juga menunjukkan mesej kemenangan mudah apabila musuh terakhir telah terbunuh, dan kembali False atau True bergantung sama ada atau tidak kami berjaya melakukan langkah yang sah.

Sekarang, mari kita kembali ke fungsi onKeyUp () kita dan ubahnya supaya, setiap kali pengguna menekan kekunci, kita memadamkan kedudukan pelakon terdahulu dari skrin (dengan menarik peta di atas), memindahkan watak pemain ke yang baru lokasi, dan kemudian menyusun semula pelakon:

Kami tidak lama lagi akan menggunakan variable acted untuk mengetahui jika musuh harus bertindak selepas setiap input pemain.

Click to view the game so far
Klik untuk melihat permainan setakat ini.

Perisikan Buatan Asas

Kini, watak pemain kami bergerak dan menyerang, biar pun kemungkinan dengan membuat musuh bertindak-tukar mengikut cara mencari yang sangat mudah selagi pemain itu adalah enam langkah atau kurang dari mereka. (Jika pemain jauh, musuh berjalan secara rawak.)

Perhatikan bahawa kod serangan kami tidak peduli siapa pelakon menyerang; ini bermakna bahawa, jika anda menyelaraskan mereka betul-betul, musuh-musuh akan menyerang satu sama lain sambil cuba mengejar watak pemain, gaya Doom!

Kami juga telah menambahkan permainan melalui mesej, yang ditunjukkan jika salah satu musuh membunuh pemain.

Sekarang semua yang perlu dilakukan adalah membuat musuh bertindak setiap kali pemain bergerak, yang memerlukan menambah berikut pada akhir fungsi onKeyUp () kami, sebelum menarik pelakon ke posisi baru mereka:

Click to view the game so far
Klik untuk melihat permainan setakat ini.

Bonus: Versi Haxe

Pada mulanya saya menulis tutorial ini dalam bahasa Haxe, bahasa multi-platform yang hebat yang dikompilasi ke JavaScript (antara bahasa lain). Walaupun saya menerjemahkan versi di atas dengan cara untuk memastikan kami mendapat JavaScript idiosyncratic, jika, seperti saya, anda lebih suka Haxe untuk JavaScript, anda boleh mencari versi Haxe dalam folder haxe muat turun sumber.

Anda perlu memasang penyusun haxe terlebih dahulu dan boleh menggunakan editor teks apa sahaja yang anda inginkan dan menyusun kod haxe dengan memanggil haxe build.hxml atau klik dua kali fail build.hxml. Saya juga memasukan projek FlashDevelop jika anda lebih suka IDE yang bagus untuk editor teks dan baris arahan; buka rl.hxproj dan tekan F5 untuk dijalankan.


Ringkasan

Itu sahaja! Kami kini mempunyai roguelike yang lengkap, dengan penjanaan peta rawak, pergerakan, pertempuran, AI dan kedua-duanya menang dan kehilangan syarat.

Berikut adalah beberapa idea untuk ciri baru yang boleh anda tambahkan ke permainan anda:

  • pelbagai peringkat
  • kuasa naik
  • inventori
  • bahan habis
  • kelengkapan

Nikmati!

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.