Jika saya memutuskan untuk menulis permainan sederhana baik teks maupun grafik (2d) perpustakaan apa yang akan saya gunakan? (Asumsikan kita menggunakan browser yang kompatibel dengan HTML5)
Hal-hal utama yang dapat saya pikirkan
- Rendering teks di layar
- Animasi sprite (menggunakan gambar / css)
- Input (menangkap tombol panah dan mendapatkan posisi mouse relatif)
- Mungkin beberapa sumber daya preloading atau memuat sumber daya secara dinamis dan memilih pesanan
- Terdengar (tapi saya tidak yakin betapa pentingnya hal ini bagi saya pada awalnya). Mungkin dengan mencampur dan merantai suara atau memutar selamanya sampai berhenti.
- Jaringan (prioritas rendah) untuk menghubungkan pengguna ke yang lain atau untuk secara terus-menerus MENDAPATKAN data tanpa banyak permintaan (Saya tahu ini ada tetapi saya tidak tahu betapa mudahnya mengatur atau menggunakan. Tetapi ini tidak penting bagi saya. pertanyaan).
html5
javascript
pengguna1047
sumber
sumber
Jawaban:
jQuery dan MooTools adalah pustaka JavaScript yang luar biasa; Saya lebih suka jQuery sendiri. Salah satu dari mereka akan membantu Anda dalam pengembangan game JS Anda jika Anda menggunakan DOM. Jika Anda menggunakan rendering Canvas, saya masih berpikir Anda harus menggunakan salah satu pustaka tersebut, tetapi Anda harus mempelajari fungsi Canvas. Berikut ini adalah tutorial yang memperkenalkan Anda pada kanvas dengan membuat klon Breakout, jadi itu mungkin jenis yang Anda cari (dan menggunakan jQuery).
Animasi sprite adalah masalah mengubah src gambar, atau preloading beberapa gambar dan menukar mereka, atau di kanvas hanya menggambar bingkai dari animasi. Perpustakaan di atas dapat membantu dengan semua kasus ini. Perpustakaan juga membantu dengan masukan (lihat peristiwa seperti onkeypress dan onmousemove).
Untuk sumber daya prapemesanan, saya sepertinya beberapa game yang menggunakan gambar "sprite sheet" tunggal ( ini adalah game Pacman Google ). Saya percaya mereka pada dasarnya membuat DIV dari satu ukuran ubin, dengan properti latar belakang-gambar CSS diatur ke lembar sprite dan properti posisi latar belakang diatur ke offset ubin pada lembar sprite. Saya belum melihat perpustakaan yang akan melakukan ini untuk Anda, tetapi jQuery atau MooTools dapat membantu Anda sejauh secara dinamis membuat DIV dan memanipulasi CSS-nya. Kalau tidak, preloading gambar adalah masalah membuat
<img>
tag dari gambar yang Anda ingin dimuat sebelumnya, dan tidak menambahkannya ke halaman (atau menambahkannya tanpa terlihat). Ini sebuah posting blog yang memiliki beberapa kode untuk fungsi menggunakan jQuery untuk memuat gambar untuk Anda.SoundManager 2 tampaknya menjadi perpustakaan suara JS untuk digunakan; Saya tahu Vanthia menggunakannya, dan Google Pacman menggunakan sesuatu yang serupa (atau setidaknya teknik yang sama, menggunakan file Flash tersembunyi pada halaman untuk memutar suara).
Untuk jaringan, jQuery dapat menangani AJAX untuk Anda, atau jika Anda ingin jaringan yang lebih real-time (dan meminta server untuk melakukannya), lihatlah di soket JavaScript . Saya tidak tahu apakah ada perpustakaan yang stabil di sana untuk itu, tetapi Anda mungkin melihat ini atau ini . Pada dasarnya ia menggunakan file Java atau Flash tersembunyi pada halaman sehingga Anda dapat melakukan komunikasi socket yang benar dengan JavaScript, yang jauh lebih cepat daripada polling AJAX dan sedikit lebih efisien daripada "AJAX Push" . Namun, kemungkinan besar, AJAX Push akan menjadi apa yang Anda inginkan, dan APE (Ajax Push Engine) mungkin adalah perpustakaan yang akan digunakan.
Juga, berikut ini adalah pembicaraan teknologi Google tentang "Membangun Mesin Game Berbasis JavaScript untuk Web" . Terlihat rapi.
sumber
Ketika saya mengevaluasi mesin JavaScript beberapa waktu lalu, favorit saya adalah Licik:
http://craftyjs.com/
Ada beberapa pilihan yang harus saya pertimbangkan, dan beberapa yang saya sukai adalah:
http://easeljs.com/
http://www.limejs.com/
http://code.google.com/p/casualjs/
(Kebetulan, opsi lain yang terlihat cukup apik pada awalnya adalah http://impactjs.com/ tetapi mempertimbangkan biaya uang dan opsi lain yang saya lihat adalah mesin open-source ada beberapa kelalaian mencolok, seperti ketidakmampuan untuk melampirkan elemen tampilan di sebuah heirarki.)
UPDATE: Sudah hampir 2 tahun sejak saya memposting jawaban itu dan situasinya telah sedikit berubah (ini adalah bidang teknologi yang baru lahir.) Meskipun Crafty masih merupakan pilihan yang bagus, pada tahun lalu EaselJS telah mengambil banyak momentum (terutama mempertimbangkan Adobe melompat pada kereta EaselJS .) Saya akan beralih ke alat itu untuk proyek masa depan (juga perhatikan bahwa ia memiliki situs web baru )
sumber
Mesin Effect Games (javascript) luar biasa untuk game berbasis 2d, ubin / sprite. Situs web tidak melakukan pekerjaan yang sangat baik untuk menggambarkan apa yang hebat tentang itu, tetapi segera setelah Anda menggali dokumentasi yang sangat baik Anda akan melihat berapa banyak yang telah ditanggung untuk Anda:
Saya benar-benar tidak bisa memberikan daftar lengkap karena fitur yang lengkap. Satu hal yang hilang adalah kemampuan untuk membuat menu dan UI dalam game (mis., Manajer peralatan, dll), tetapi seharusnya ada dalam daftar todo.
sumber
Saya memelihara mesin game 2D kanvas yang disebut JawsJS - http://jawsjs.com/
Sumber @ https://github.com/ippa/jaws
catatan tebing:
sumber
Dampaknya akan sakit! Lihat saja game demo, Biolab Disaster .
sumber
Saya sendiri telah melakukan riset di bidang ini belakangan ini, jadi izinkan saya chip $ 0,02 saya:
PlayN Adalah pustaka lintas platform dari Google, yang menyusun game berorientasi objek dari Jawa ke javascript / Flash / Android. Ini akan menangani JSON (AJAX), model data, dan memiliki semantik waras untuk pembaruan dan rendering. Hal yang sangat keren.
Pemrosesan Adalah perpustakaan yang mudah digunakan yang ditujukan untuk desainer dan seniman. Ini sangat mudah digunakan dan dapat memberi Anda hasil yang bagus. Saya telah menggunakan versi Java untuk pemodelan ilmiah, dan itu menyenangkan untuk digunakan. Adegan 3D akan membutuhkan WebGL, tetapi adegan 2D berfungsi tanpa.
Three.js Memiliki beberapa demo yang tampak hebat. Ini membutuhkan WebGL, tetapi hasilnya tampaknya sepadan. Ada beberapa contoh online juga.
Berikut adalah beberapa item lain di tautan pribadi saya yang terkait dengan WebGL:
sumber
Akihabara adalah kerangka yang saya lihat muncul di sejumlah tempat. Seorang teman saya juga membuat serangkaian tutorial dan dokumentasi untuk kerangka tersebut.
sumber
http://rocketpack.fi/ tampaknya ada sesuatu yang muncul.
sumber
Satu lagi saya baru-baru ini telah melihat dengan minat besar adalah CreateJs . Ini adalah koleksi perpustakaan sumber terbuka untuk memasukkan ...
Tambahan itu EaslJs Dimainkan dengan baik dengan Box2D JS
sumber
Plugin Pixie
Pencipta Contrasaurus telah merilis banyak komponen individual mereka !!!
Mereka memiliki kode untuk melakukan transformasi matriks , abstraksi kanvas dan banyak hal menarik lainnya.
Kode mereka hebat dan pustaka mereka sangat berguna.
sumber
Impact JavaScript Game Engine untuk iOS terlihat menjanjikan. Tautan menunjukkan demo, tetapi belum dirilis.
sumber
Aneh bahwa Perpustakaan Penutupan Google belum disebutkan. Ini memiliki API besar, memungkinkan lebih banyak gaya pengkodean berorientasi objek dan memiliki kompiler.
Sejauh ini saya hanya menggunakan kompiler tetapi saya berencana untuk belajar istirahat secepatnya.
sumber
Saya biasanya menggunakan jawsjs karena sangat mudah untuk mengaturnya dan mulai mengembangkan game dalam hitungan menit. Ini memiliki banyak kelas default yang sangat berguna (Tilemap, Viewport, Sprite, dan lainnya) yang sangat membantu pengembangan game.
sumber
Sebenarnya Anda punya banyak dari mereka, tetapi yang pertama tergantung pada jenis mesin permainan yang Anda cari. Saya bisa memberi Anda beberapa referensi yang paling penting.
Mesin Game 2D
Mesin Game 3D
Mozilla foundation telah mengerjakan mesin game 3D bernama Paladin . Ini Mozilla, kurasa tidak ada salahnya.
sumber
Ada juga gameQuery, mesin game berbasis jQuery. Memiliki dokumentasi yang layak tentang API mereka, serta, beberapa API pembungkus suara yang mereka tautkan ke situs mereka.
http://gamequery.onaluf.org/
sumber
Mozilla Gaming memiliki daftar di halaman Sumber Daya . Ini tautan ke Diggy , yang merupakan mesin permainan DHTML yang saya buat beberapa waktu lalu. Demo langsung di sini!
sumber
Matrix.js bagus jika Anda ingin mendapatkan transformasi matriks gaya Flash.
sumber
Tom di sini dari Scirra, kami adalah tim 2 orang yang telah membuat Construct 2, pembuat game HTML5 . (Versi gratis tersedia).
Anda mungkin ingin mempertimbangkan mesin seperti kami karena ia melakukan banyak kerja keras untuk Anda. Misalnya untuk melakukan tabrakan dalam kode sendiri bisa sangat sulit (pikirkan tabrakan poligon). Segala sesuatu di daftar Anda mudah dicapai dengan Membangun 2.
sumber