Game gratis untuk dimainkan

Seperti yang Anda lihat, kelas ini memiliki tiga metode kosong. Ini datang dengan phaser.Kelas Adegan. Masing -masing metode ini memiliki fungsi yang berbeda seperti yang dijelaskan di bawah ini

Membangun game browser multiplayer realtime dalam waktu kurang dari sehari – Bagian 1/4

Apakah Anda bermain game. Duh! Pernah berpikir untuk membangunnya sendiri. Hmm.. Permainan secara bawaan tampaknya sulit dibangun. Dengan banyak bagian bergerak yang terlibat (secara harfiah), pengembangan game sepertinya terbatas pada devs yang telah membenamkan kaki mereka jauh ke dalam perairan suci jaringan, matematika, grafik, dan sejenisnya. Namun, dengan web berkembang sangat cepat dan dengan semua protokol dan perpustakaan baru yang telah membentang dalam beberapa tahun terakhir, sekarang sangat sederhana untuk memulai dengan membangun game multiplayer berbasis browser. Dalam artikel ini, kita akan melihat implementasi langkah demi langkah dari permainan multiplayer realtime dari Space Invaders (AH, nostalgia!) dengan phaser3 dan dengan cakap realtime. Saya telah menjadi tuan rumah pertandingan terakhir di https: // space-invaders-multiplayer.Herokuapp.com/ untuk Anda mencobanya. Sepanjang jalan, kami akan memahami arsitektur, desain sistem, protokol jaringan di balik ini, dan juga mencari peringatan yang perlu diingat saat membangun game berbasis browser multipemain. Seri tutorial ini dipecah menjadi empat bagian:

• Bagian 1: Pengantar Konsep Gaming dan Perpustakaan Phaser
• Bagian 2: Mengevaluasi Protokol Jaringan untuk Aplikasi Realtime
• Bagian 3: Menerapkan kode sisi server untuk menjaga semua pemain tetap sinkron
• Bagian 4: Menyelesaikan kode sisi klien untuk membuat game

Satu hal terakhir sebelum kita memulai. Artikel ini mengasumsikan pemahaman dasar tentang JavaScript dan Express/NodeJS. Saya akan mencoba dan menjelaskan yang lainnya sebanyak mungkin ����‍����

Ayo Bermain Game!

Bagian 1 – Pengantar Konsep Gaming dan Phaser

Mari kita mulai dengan melihat aturan untuk permainan karena tidak akan sama dengan retro klasik asli.

Aturan Game untuk Invaders Ruang Multiplayer

• Ketika pemain baru bergabung, mereka akan secara acak ditugaskan avatar monster dari tiga varietas yang tersedia.
• Setiap pemain dapat memindahkan avatar ke kiri atau kanan menggunakan tombol panah di keyboard mereka
• Setiap pemain akan melihat avatar mereka sendiri berkulit putih tetapi melihat semua orang akan dalam warna acak yang telah ditugaskan sebelumnya kepada mereka
• Ketika sejumlah pemain yang telah ditentukan bergabung dengan permainan, sebuah kapal diluncurkan. Kapal ini bergerak sepanjang sumbu horizonal dalam arah yang dipilih secara acak yang berubah secara acak setiap 5 detik. Seiring dengan ini, kecepatan kapal juga akan berubah. Kapal ini juga menembakkan peluru secara berkala yang dapat kami preset juga
• Semua avatar secara otomatis bergerak ke bawah dengan kenaikan preset di seluruh permainan.
• Tujuan untuk memenangkan permainan adalah untuk sampai ke perbatasan bawah layar permainan tanpa terbunuh oleh satu atau lebih peluru yang ditembak oleh kapal.

Komponen game multiplayer realtime

Meskipun sepertinya ada banyak hal yang terjadi di balik permainan realtime jaringan, mereka benar -benar turun ke tiga komponen inti:

Mari kita lihat masing -masing.

1. Aktiva

Aset adalah elemen penting yang membentuk permainan. Jika Anda ingin objek muncul di game Anda, Anda dapat menggambar satu di kanvas game, atau lebih baik lagi menggunakan gambar atau lembar sprite dan hidup bersama. Demikian pula, audio apa pun yang ingin Anda perkenalkan dan mainkan dalam permainan akan jatuh di bawah asetnya.

Jika Anda tertarik untuk membuat tema permainan Anda Super Arcade, Anda dapat mengikuti tutorial seni piksel ini oleh Glauber Kotaki untuk mempelajari caranya.

2. Fisika

Fisika adalah apa yang memungkinkan kita memindahkan aset dan memutuskan bagaimana objek yang berbeda dalam permainan kita berinteraksi satu sama lain. Misalnya, dalam permainan pong yang sederhana, bola dipantulkan kembali ke arah tertentu, dengan kecepatan tertentu tergantung pada bagian dayung yang bertabrakan dengannya. Demikian pula, dalam permainan kami, ini bisa termasuk komputasi di mana kapal perlu pergi, dengan kecepatan apa, penembakan peluru, tabrakan benda -benda peluru ini dengan avatar pemain, dll.

Semua hal ini pada dasarnya adalah perhitungan matematika sejalan dengan konsep fisika, di bawah tenda. Tapi begitu banyak matematika bisa luar biasa untuk menulis dari awal bahkan untuk permainan yang sederhana. Jadi alih -alih menulis setiap dari awal, kita dapat menggunakan mesin fisika yang dapat melakukan sebagian besar sihir matematika untuk kita.

3. Jaringan

Komponen inti akhir yang sangat penting untuk game online multiplayer live adalah jaringan. Ini bisa sangat sulit untuk mempertahankan sinkronisasi antara semua pemain, mencari tahu pemain mana yang meninggal dan jika semua orang setuju dengan klaim itu.

Jangan khawatir jika semua ini mulai terdengar rumit, tidak harus. Ada banyak pola desain yang sudah ada sebelumnya yang dapat membantu kita memulai dengan cara yang benar. Kita dapat memilih bagaimana kita ingin arsitektur game menjadi, sehubungan dengan mekanisme permainan tertentu yang dimaksud. Sepanjang seri artikel ini, kita akan berbicara tentang pola dan pilihan arsitektur yang saya gunakan untuk membangun game ini dan mengapa.

Sekarang kita memiliki pemahaman yang lebih baik tentang komponen inti, mari kita jelajahi bagaimana kita bisa membuat ini bekerja di permainan kita.

Menggunakan Phaser 3 untuk menambahkan aset dan mengaktifkan fisika

Phaser adalah Canvas Sumber Terbuka dan WebGL Rendering JavaScript Framework untuk HTML5. Kami akan menggunakan Phaser 3 untuk membangun permainan. Alasan saya secara khusus menyebutkan versinya adalah bahwa ada banyak perubahan besar antara Phaser 2 dan 3 termasuk sintaksis. Juga, jika Anda ingin menambahkan beberapa fitur baru yang keren ke dalam permainan sendiri di masa depan, Anda harus tahu apa/di mana harus mencari.

Phaser tidak hanya memungkinkan kami untuk menampilkan aset di atas kanvas, memainkan animasi dan suara, dll di halaman web, tetapi juga dilengkapi dengan mesin fisika yang dibangun (beberapa sebenarnya). Ini berarti bahwa kita bisa mengatakannya seperti apa yang perlu dilakukan ketika dua objek bertabrakan dan secara otomatis akan mengawasi tabrakan dan menjalankan sepotong kode jika itu terjadi.

Ada seri tutorial video yang sangat bagus untuk Phaser yang saya sarankan jika ini pertama kalinya Anda bekerja dengan Phaser 3.

Dalam versi TL; DR, dengan Phaser3, kami dapat menentukan objek konfigurasi yang akan memiliki informasi tentang kanvas dan permainan itu sendiri, termasuk ukuran kanvas, atribut gayanya, berbagai adegan yang termasuk dalam gameplay kami (dibahas segera), jenis mesin fisika (karena Phaser memiliki banyak), dll.

Kami kemudian melewati objek konfigurasi untuk memulai game baru.

Ini mungkin terdengar agak membingungkan karena Anda belum melihat kode apa pun. Ayo lakukan itu selanjutnya.

Memulai permainan

Mari kita langsung ke layar game untuk saat ini. Kami akan khawatir tentang halaman peluncuran dan papan peringkat, nanti. Game kami akan menjadi halaman HTML dengan kanvas yang diberikan di atasnya. Kanvas ini akan menahan dan menjalankan game yang sebenarnya. Jadi, mari kita buat file, sebut saja indeks.html . Untuk menjaga hal-hal tetap terorganisir, kami akan menyimpan semua file HTML kami di folder yang disebut tampilan dan semua file JavaScript sisi klien dalam folder yang disebut publik . Mari kita mulai tampilan/indeks.File HTML dengan kerangka dasar:

Seperti yang Anda lihat, semua yang kami lakukan di sini adalah tautan ke file CSS dan JS yang akan kami tambahkan segera, tetapi juga yang lebih penting tautan ke Phaser JS CDN. Anda dapat menyalin CSS langsung dari proyek GitHub

Selain itu, di dalam tubuh HTML, kami memiliki div dengan ID-container game . Di sinilah kami akan menambahkan kanvas game kami melalui JavaScript.

Mari kita buat file di folder publik, sebut saja skripnya.JS dan mulai dengan mendefinisikan objek konfigurasi game yang kita bicarakan sebelumnya.

Seperti yang Anda lihat, selain menentukan ukuran kanvas dan warna latar belakangnya, kami juga telah menentukan ke mana kanvas ini harus pergi (diidentifikasi oleh orang tua) dan array adegan yang kami ingin menjadi bagian dari ini permainan.

Phaser menggunakan konsep ‘adegan’ untuk mengatur konten permainan. Anda dapat menganggap adegan sebagai apa yang dapat Anda lihat secara visual kapan saja. Saat bermain game, jika game beralih ke latar belakang yang berbeda dengan interaksi yang berbeda di antara objek game, maka itu mungkin adegan terpisah dari apa yang Anda lihat sebelumnya.

Untuk game kami, kami akan memiliki satu adegan (diidentifikasi oleh Gamescene). Adegan di Phaser adalah kelas yang memperluas phaser.Kelas Adegan. Mari kita tentukan ini untuk game kami. Tambahkan kode berikut di atas objek konfigurasi saat merujuk kelas Gamescene.

Seperti yang Anda lihat, kelas ini memiliki tiga metode kosong. Ini datang dengan phaser.Kelas Adegan. Masing -masing metode ini memiliki fungsi yang berbeda seperti yang dijelaskan di bawah ini

1. Metode preload () mendapatkan semua sumber daya yang mungkin kita butuhkan, dari mana pun mereka berada, memuatnya dan membuat mereka siap ketika kita ingin menambahkannya ke permainan kita.
2. Metode create () dieksekusi sekali saat game pertama kali berjalan. Kita dapat menambahkan semua inisialisasi variabel, definisi animasi, dll, dalam metode ini.
3. Metode pembaruan () dieksekusi terus menerus dalam satu loop selama permainan aktif dan karenanya dapat terus memperbarui objek game sesuai logika game. Kami akan memperbarui avatar, menembak peluru, memindahkan kapal, semua dalam metode ini..

Memuat aset dan membuat animasi

Ayo lanjutkan dan muat beberapa aset sekarang. Tentukan metode preload () sebagai berikut

Saya awalnya menjadi tuan rumah game ini di Glitch yang menyimpan semua aset dalam embernya, dapat diambil dengan tautan CDN. Anda dapat menggunakan hal yang sama, jika tidak, Amazon S3 adalah pilihan populer lainnya.

Kami menambahkan tiga jenis avatar, semuanya berwarna putih dan tiga warna lainnya. Terlepas dari itu, kami juga menambahkan aset untuk kapal, peluru, dan tentu saja ledakan untuk bermain ketika seorang pemain meninggal.

Seperti yang Anda lihat, kami memuat aset spritesheet di Phaser menggunakan ini.memuat.spritesheet () dan mengirimkannya tiga parameter:

• pengidentifikasi
• jalur ke file yang sebenarnya
• dimensi file (dalam piksel).

Kami juga bisa menyebutnya gambar tetapi kemudian kami tidak akan dapat melakukan animasi keren dengan itu seperti yang akan Anda lihat segera.

P.S. Ada cara yang lebih baik untuk mengimplementasikan warna avatar. Kami bisa menambahkan warna warna ke sprite yang ada alih -alih memuat objek yang sama dalam berbagai warna sebagai aset terpisah. Saya belum tahu bagaimana, tetapi saya akan memperbarui ini ketika saya sudah menemukannya 🙂

Jika Anda memeriksa lembar sprite “ledakan”, Anda akan melihat bahwa itu adalah sekelompok gambar berbeda yang ditempatkan di sebelah satu sama lain. Cara kita menyebabkan “animasi” adalah dengan melalui gambar -gambar yang berbeda ini dengan kecepatan tertentu yang membuatnya tampak seperti sebenarnya video transparan dari ledakan yang terjadi.

Dalam metode create (), kami akan mendefinisikan animasi untuk ledakan ini:

Kami telah menggunakan Phaser ini.Anims.buat metode () untuk membuat animasi. Metode ini mengambil:

• kunci yang akan kita gunakan nanti untuk memainkan animasi ini
• bingkai yang menghasilkan bingkai menggunakan pengidentifikasi aset yang ingin kami terapkan animasi ini
• membingkai yang menentukan kecepatan di mana kami ingin memainkan animasi ini
• Ulangi yang menentukan berapa kali animasi akan berjalan
• HideOncomplete menentukan apakah aset yang dianimasikan harus hilang setelah animasi selesai

Kami tidak akan menambahkan apapun di metode pembaruan () untuk saat ini. Jika Anda perhatikan, kami juga belum benar -benar membuat permainan, kami akan melakukannya di bagian selanjutnya dari seri artikel ini.

Itu saja untuk saat ini. Kami akan belajar tentang jaringan untuk aplikasi realtime di Bagian 2 – Mengevaluasi Protokol Jaringan untuk Aplikasi Realtime

Semua artikel dalam seri ini:

• Bagian 1: Pengantar Konsep Gaming dan Perpustakaan Phaser
• Bagian 2: Mengevaluasi Protokol Jaringan untuk Aplikasi Realtime
• Bagian 3: Menerapkan kode sisi server untuk menjaga semua pemain tetap sinkron
• Bagian 4: Menyelesaikan kode sisi klien untuk membuat game

Rilis terpisah yang relevan dengan tutorial ini tersedia di GitHub jika Anda ingin memeriksanya.

Anda juga dapat mengikuti proyek GitHub untuk perkembangan terbaru di proyek ini.

Jika Anda memiliki pertanyaan, jangan ragu untuk menghubungi saya di Twitter @srushtika. DMS saya terbuka 🙂

Kategori: Bangunan Multiplayer

Chimeraland bebas untuk bermain Open World Sandbox Survival MMORPG (permainan peran online multiplayer masif) untuk PC (Windows) dan Mobile (Android/iOS) yang dikembangkan oleh Pixel Soft dan diterbitkan oleh Level Infinite. Gim ini diatur dalam dunia prasejarah dan mistis […]

Muck adalah game Roguelike Survival Roguelike* pemain tunggal dan multipemain gratis untuk PC (Windows) oleh pengembang, artis, dan YouTuber Dani yang populer (yang juga membuat Game Crab dan Karlson). Muck adalah poli rendah, kasual namun (sangat) perpisahan kelangsungan hidup (e.G. […]

The Sandbox adalah free-to-play dan play-to-earn, terdesentralisasi, dan didorong oleh masyarakat ekosistem & dunia virtual untuk PC (Windows dan Mac) dalam pengembangan aktif (Open Alpha) dan dibangun di atas blockchain Ethereum (mirip dengan Decentraland). Pemain dapat membangun, memiliki, berbagi, dan […]

Core adalah koleksi game gratis dan platform pembuatan game yang mirip dengan Crayta dan Roblox. Dengan kata lain, inti adalah multiverse game gratis untuk dimainkan dan dunia untuk dijelajahi yang dirancang oleh komunitas global pengembang yang dapat dengan mudah Anda […]

Crayta adalah platform pembuatan permainan kolaboratif gratis dan koleksi game arcade multipemain yang dibangun di Unreal Engine 4 untuk PC, mirip dengan Core dan Roblox. Pemain dapat melompat dan membuat game bersama di cloud, terlepas dari pengalaman pemrograman mereka. Dari […]

Wild Terra Online adalah MMORPG yang gratis untuk dimainkan dengan fitur Sandbox dan Survival, diatur di dunia fantasi abad pertengahan yang sepenuhnya dikendalikan pemain. Anda tidak perlu menyelesaikan rantai tugas dan membunuh seribu serigala untuk membuat peralatan. Semuanya banyak […]

Ark: Survival Evolved (Mobile) adalah game survival aksi-adventure seluler gratis* oleh Studio Wildcard untuk Mobile (Android, iOS), terletak di dunia prasejarah di mana pemain, yang terdampar di sebuah pulau, harus bertahan hidup roaming dinosaurus dan hewan prasejarah lainnya, bahaya alam, […]

Tak keluar yang tidak ada yang bebas untuk memainkan permainan keliling dan penembak kotak pasir bertema zombie untuk PC (Windows, Mac dan Linux) dalam genre survival MMO/Multiplayer Apocalypse yang muncul (meskipun Anda juga dapat bermain sendiri atau di Coop di PVE). Daripada fokus pada […]

Totemori adalah game brawler multiplayer layar bersama yang menyenangkan dan inovatif di mana Anda membangun menara sambil mencoba menggulingkan orang lain. Totemori menampilkan multipemain lawan dan koperasi lokal untuk hingga 4 pemain. Bermain melawan teman Anda atau berlatih melawan bot, […]

Galactic Junk League adalah Arena Crafter Free-to-Play yang kompetisi-penembak yang dicampur dengan kemungkinan pembangunan kapal yang hampir tak terbatas. Membangun apapun. Lawan siapa pun. Di ruang hampa. Bangun kapal sampah Anda untuk benar -benar bentuk dan ukuran dan bertarung melawan kreasi […]

Creativerse adalah permainan Sandbox MMO Generasi MMO Generasi yang menyenangkan dan menyenangkan tentang petualangan, eksplorasi, dan kreativitas dengan teman-teman Anda. Dan sekarang bebas untuk bermain. Anda terdampar di dunia yang luas dan misterius yang dikelilingi oleh binatang buas ganas dan […]

Gunscape adalah kit konstruksi FPS. Ini adalah permainan yang memungkinkan Anda menjadi liar dengan kreativitas Anda di kotak pasir aksi memompa! Gunscape melakukan ini dengan menyediakan alat yang mudah digunakan berdasarkan antarmuka penempatan blok yang sudah dikenal semua orang untuk membuat pemain tunggal […]

Trove adalah mmorpg aksi-adventure yang gratis untuk dimainkan oleh Trion Worlds for PC (Windows, Mac), Xbox One, PS4 dan Nintendo Switch. Trove fitur alam yang tak terhitung jumlahnya dipenuhi dengan pencarian, dada, dan musuh yang hebat dan kecil. Jelajahi dan buat dengan cara Anda […]

ROBLOX adalah platform video game online dan platform penciptaan game secara gratis untuk dimainkan secara masif (mirip dengan Core dan Crayta) yang memungkinkan pengguna untuk merancang dan berbagi permainan dan level mereka sendiri, dan memainkan semua jenis game yang dibuat oleh pengguna lain, dari [[[ …]