Meskipun game Flash telah meninggalkan dunia ini, masih ada permintaan yang signifikan untuk game berbasis browser dan lintas platform. Apakah Anda sendiri aktif memainkannya atau tidak, semakin banyak game dari pengembang profesional dan indie yang keluar setiap hari
Fenomena ini sebagian besar berkat game HTML5 yang telah mengisi celah untuk mengimbangi para gamer yang bersemangat ini. Selain itu, berkat kemajuan teknologi dan kerangka kerja baru, pengembangan game HTML5 telah mencapai ketinggian yang luas, memungkinkan pengalaman multipemain, grafik 3D, dan banyak lagi. Tidaklah bijaksana untuk mengatakan bahwa bermain game sekarang dapat dilakukan melalui browser seperti halnya di banyak perangkat lain
Dengan asumsi ini terdengar seperti prospek yang menarik bagi Anda sebagai pengembang game, dalam panduan ini kami akan mempelajari topik pengembangan game HTML5 dan memberi Anda penjelasan tentang cara membuat game sendiri. Duduk, santai, dan bersiaplah untuk meningkatkan keterampilan pengembangan game Anda dengan cara yang benar-benar baru
Daftar isi
Apa sebenarnya game HTML5 itu?
Mari kita mulai dari nol total. Apa itu HTML5? . Ada definisi resmi HTML5, yang merupakan singkatan dari revisi terbaru HTML [bahasa markup yang digunakan di seluruh dunia untuk membangun situs web], dan definisi yang lebih populer [apa yang dipahami kebanyakan orang ketika HTML5 disebutkan] yang merupakan semua
Untuk tujuan kami, kami akan menggunakan bit dari keduanya. HTML5 adalah HTML dalam versi terbarunya, yang mencakup banyak fitur keren yang menjadikan teknologi web sebagai standar terbuka dengan kemungkinan tak terbatas menggabungkan HTML, CSS, dan JavaScript
Memiliki HTML bersama dengan semua kekuatan super ini yang melampaui pembuatan situs web sederhana memungkinkan kita untuk membuat, antara lain, game. Ini adalah game HTML5
BANGUN GAME ANDA SENDIRI
Dapatkan 250+ kursus coding untuk
$1
BELAJARLAH LAGI
HANYA TERSEDIA UNTUK WAKTU TERBATAS
Blok bangunan
Blok bangunan paling mendasar dari game HTML5 adalah blok web
- HTML
- CSS
- JavaScript
Mirip dengan apa yang terjadi dengan HTML5, ketika orang berbicara tentang CSS3 mereka biasanya mengacu pada hal-hal baru yang datang dengan spesifikasi terbaru CSS, tetapi secara analog, CSS3 hanyalah CSS terbaru. Mengabaikan sejenak semantik dari definisi ini dan memikirkan versi hyped dari istilah ini, kita juga mungkin perlu, untuk membuat game HTML5
- HTML5 [API JavaScript]
- CSS3
Dengan hal di atas, Anda dapat membuat game keren yang akan berjalan di browser web modern di seluler dan desktop, tetapi beberapa game mungkin memerlukan lebih banyak fitur, jadi ada lebih banyak blok penyusun yang dapat Anda tambahkan
Misalnya, Anda mungkin ingin membuat game 3D. Jika demikian, ada juga WebGL, yang merupakan API JavaScript untuk merender grafik 2D dan 3D di browser, menggunakan GPU untuk performa yang lebih baik
Sisi server
Jika Anda ingin gim Anda menyimpan data dari jarak jauh, Anda memerlukan sisi server untuk gim Anda. Anda dapat mengembangkan backend Anda sendiri menggunakan bahasa sisi server apa pun, Anda memerlukan server yang baik dalam hal ini
- JavaScript [NodeJS]
- PHP
- Jawa
- Piton
- Rubi
Atau Anda dapat menggunakan penyedia Backend-as-a-Service pihak ketiga seperti Firebase atau Parse. Beberapa memiliki versi gratis yang dapat Anda gunakan dan mereka akan mulai membebankan biaya setelah Anda melampaui batas tertentu. Beberapa dari penyedia ini secara khusus berfokus pada game, sebagian besar dirancang untuk aplikasi seluler tetapi juga dapat digunakan untuk game
Cara mendistribusikan game HTML5
Cara termudah untuk mendistribusikan HTML5 adalah dengan meletakkannya di sana. Dengan dibangun sebagai situs web, Anda dapat menyematkannya di halaman dan menerbitkannya. Seperti itu
Jika Anda ingin mendistribusikannya melalui platform berpemilik, Anda harus melalui proses yang disebut pembungkusan. Pada dasarnya, Anda membuat aplikasi asli untuk platform tempat Anda ingin mendistribusikannya [iOS, Android, dll] dan memasukkan game Anda ke dalamnya sehingga aplikasi ini berfungsi seperti browser web dan "menjalankan" game Anda
Untuk platform desktop seperti Windows, Mac atau Linux, ada alat bernama NWjs yang memungkinkan Anda mengemas game HTML5 untuk platform ini
Kami hanya dapat membahas dasar-dasarnya di sini, tetapi kami mendorong Anda untuk membaca lebih lanjut tentang menerbitkan game
Kerangka permainan HTML5
Sebagian besar game berbagi beberapa konsep, yaitu sprite [elemen grafis yang mewakili musuh, pemain, elemen dalam game Anda], adegan atau tahapan, animasi, suara, pemuatan aset grafis, dll. Karena sebagian besar pengembang game ingin fokus pada game mereka yang sebenarnya dan bukan membuat seluruh lapisan abstraksi ini, Anda disarankan untuk menggunakan kerangka kerja game HTML5
Kerangka kerja dan pustaka game HTML5 yang berisi komponen bangunan yang dapat Anda gunakan untuk membuat game Anda sendiri. Pustaka ini adalah proyek Open Source yang dibuat dan dikelola oleh orang-orang yang ingin berkontribusi pada lingkungan gamedev HTML5. Dalam banyak kasus, mereka membuat kerangka kerja untuk gim mereka sendiri, dan setelah menyadari bahwa orang lain tidak hanya ingin menggunakannya tetapi juga berkontribusi, mereka merilisnya sebagai kode Sumber Terbuka, sehingga semua orang menang.
Memilih mesin game apa yang akan digunakan adalah keputusan penting, jadi pastikan Anda melakukan riset yang tepat sebelum menentukan pilihan. Apa pun mesin yang Anda pilih, Anda harus terbiasa dengan kode dan cara kerjanya jika Anda ingin menggunakannya dengan benar, sehingga tidak boleh diperlakukan sebagai kotak hitam.
Apa yang dapat membantu Anda membuat pilihan
- Apakah game Anda untuk desktop, seluler, atau keduanya?
- Apakah mereka memiliki komunitas yang aktif?
- Apakah ada banyak orang yang menggunakan framework saat ini?
- Apakah sedang dipertahankan atau halaman Github terlihat seperti kota yang ditinggalkan?
Terkadang melihat game nyata memberi Anda lebih banyak wawasan daripada sekadar kata-kata. Proyek ini membandingkan mesin yang berbeda dengan membuat game Breakout yang sama persis di semuanya
Beberapa framework gratis yang populer adalah
- Phaser –> Yang paling populer saat ini
- Buat JS
- LimeJS
- Quintus
- CraftyJS
- MelonJS
- PixieJS
- BabylonsJS –> kerangka kerja WebGL untuk rendering 3D
- PlayCanvas
- TigaJS
- KontraJS
- Meriam. js
- Panggung. js
- Urusan. js
Kursus pengembangan game HTML5
Kursus video adalah cara yang bagus untuk mempelajari teknologi baru. Perbedaan utama antara kursus video dan hanya menonton video YouTube adalah terdapat lebih banyak struktur. Kursus yang baik memiliki tujuan yang jelas dan membangunnya selangkah demi selangkah. Di bawah ini adalah daftar kursus dan tutorial dari Zenva yang dapat memberi Anda alat yang Anda perlukan untuk membuat game HTML5
Pengembangan Game Umum
- 10 Cara Terbaik Belajar Kode
- Cara Membuat Game – Membuat Video Game dari Awal
- Cara Membuat Kode Game
- Bagaimana Mendesain Game. Dokumen Desain Game
- Cara Mendekati Narasi Game
Phaser
- Gelar Mini Pengembangan Game HTML5 [Kurikulum premium yang mencakup pembuatan beberapa mini-game dengan Phaser]
- Tutorial Phaser 4 – Panduan Lengkap
WebGL, 3D, dan XR
- Akademi JavaScript 3D & XR [Kurikulum premium yang mencakup berbagai kerangka kerja JavaScript untuk pengalaman 3D dan XR di web]
- WebVR untuk Pemula – Bangun Situs Web VR dengan A-Frame [Kursus Premium tentang A-Frame]
- Pelajari Dasar-dasar Babel. js [Kursus gratis tentang Babel. js]
Keterampilan HTML5
- Pelajari HTML dan CSS [Kursus gratis]
- Pemrograman JavaScript untuk Pemula
- Proyek Mini JavaScript – Game Pembelajaran Bahasa
- Node. js dan Express untuk Pemula
Di Akademi GameDev, seperti yang Anda ketahui, kami memiliki banyak tutorial pengembangan game HTML5, kebanyakan di Phaser, LimeJs, Quintus, dan BabylonJS. Ada tempat bagus lainnya untuk menemukan tutorial gamedev HTML5 berkualitas baik
- Bangun Game Baru
- Gamedevtuts+
- Pengembangan Game HTML5 [berita dan tautan ke tutorial]
- Tutorial Phaser
- Tutorial Permainan Mozilla
- Tutorial Permainan HTML5
- Game HTML5 dengan JavaScript & Phaser
- Tutorial Pengembangan Game JavaScript HTML5
- Tutorial Pengembangan Game HTML5
HTML5 untuk Sekolah
Apakah Anda seorang guru yang ingin membantu siswa masuk ke kerangka kerja seperti Phaser atau mengajari mereka keterampilan inti dan pengembangan web yang relevan? . Platform ini dilengkapi dengan pelajaran video, ringkasan teks, kuis, fitur manajemen kelas, pelaporan, dan lainnya untuk membantu mendukung pembelajaran HTML5
komunitas pengembang game HTML5
Anda dapat menemukan banyak komunitas aktif di Internet, beberapa berfokus pada gamedev secara umum dan beberapa lainnya hanya di gamedev HTML5
Web
- HTML5GameDevs
- Pengembang Game Indie
- Grup Pengembang Aplikasi dan Game Indie
- Pengembangan Game
- Pengembang Video Game
Komunitas Lain
- Forum Phaser
- GAMEDEV. JS
- Forum Babel Js
- Tiga wacana
Tantangan pengembang game HTML5
- Global Game Jam® adalah acara tahunan, biasanya terjadi pada bulan Januari setiap tahun. Peserta bekerja secara bersamaan di seluruh dunia, dan di sekitar tema sentral, lalu bekerja sama untuk membuat game
- kompetisi j13k. kompetisi sudah berakhir tetapi Anda masih dapat membaca Blog, berlangganan Newsletter, dan memeriksa Sumberdaya untuk alat
Podcast gamedev HTML5
Saya baru tahu Lostcast, podcast yang dibuat oleh orang-orang dari Lost Decade Games [yang pernah kami wawancarai sebelumnya]. Dalam episode podcast mereka berbicara tentang game HTML5 dan pengembangan game secara umum