Terokai enjin permainan JavaScript: Impact.js, Babylon.js dan Cocos2d-js

JavaScript telah menjadi pilihan popular untuk pembangunan permainan kerana kepelbagaian dan penggunaan yang meluas merentas platform yang berbeza. Untuk memudahkan pembangunan permainan, beberapa enjin permainan JavaScript telah muncul, masing-masing dengan set ciri dan fungsinya sendiri. Dalam artikel ini, kami akan meneroka tiga enjin permainan JavaScript yang popular: Impact.js, Babylon.js dan Cocos2d-js. Kami akan menyelidiki teori di sebalik enjin ini, menyediakan contoh kod dengan output jika boleh, dan membuat kesimpulan dengan membandingkan kekuatan dan kelemahannya.

Impact.js

Impact.js ialah enjin permainan JavaScript yang berkuasa dan lengkap yang memfokuskan pada pembangunan permainan 2D. Ia menyediakan set ciri yang komprehensif untuk membina permainan, termasuk enjin fizik yang berkuasa, pengurusan sprite, sokongan audio dan sistem komponen entiti.

Salah satu ciri utama Impact.js ialah editor tahap intuitif dan mudah digunakan, yang membolehkan pembangun mencipta dan mereka bentuk tahap permainan dengan cekap.

Contoh

Mari lihat contoh kod ringkas yang menunjukkan cara membuat tahap permainan menggunakan Impact.js:

// Level definition ig.module('game.levels.level1') .requires('impact.image') .defines(function() { LevelLevel1 = { // Load the tileset tileset: new ig.Image('media/tiles.png'), // Define the level size and collision map width: 10, height: 10, data: [ [1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 1, 1, 1, 0, 0, 1], [1, 0, 0, 1, 0, 0, 1, 0, 0, 1], [1, 0, 0, 1, 0, 0, 1, 0, 0, 1], [1, 0, 0, 1, 1, 1, 1, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1] ] }; });

Arahan

Dalam contoh ini, kami mentakrifkan tahap permainan menggunakan tatasusunan 2D, dengan 1 mewakili jubin pepejal dan 0 mewakili ruang kosong. Tahap yang ditentukan boleh dimuatkan dan diberikan menggunakan rangka kerja Impact.js.

Apabila menggunakan Impact.js, output yang dijangkakan ialah tahap permainan yang diberikan berdasarkan set jubin yang ditentukan dan peta perlanggaran. Output akan menjadi perwakilan 2D tahap dengan jubin pepejal dan ruang kosong.

Babylon.js

Babylon.js ialah enjin permainan JavaScript yang berkuasa dan kaya dengan ciri yang digunakan terutamanya untuk pembangunan permainan 3D. Ia menyediakan pelbagai alat dan ciri, termasuk saluran paip pemaparan yang fleksibel, simulasi fizik, sokongan animasi dan sistem pengurusan graf pemandangan.

Salah satu ciri menonjol Babylon.js ialah keupayaannya untuk mengendalikan adegan 3D yang kompleks dengan mudah. Mari lihat contoh kod yang menunjukkan cara mencipta pemandangan 3D asas menggunakan Babylon.js -

Contoh

// Initialize the Babylon.js engine var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); // Create a scene var scene = new BABYLON.Scene(engine); // Create a camera var camera = new BABYLON.ArcRotateCamera("camera", 0, 0, 10, new BABYLON.Vector3(0, 0, 0), scene); camera.attachControl(canvas, true); // Create a light source var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene); // Create a sphere mesh var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", { diameter: 2 }, scene); // Run the render loop engine.runRenderLoop(function () { scene.render(); });

Arahan

Dalam contoh ini, kami memulakan enjin Babylon.js dan mencipta pemandangan, kamera, sumber cahaya dan jaringan sfera. Gelung render sentiasa mengemas kini dan memaparkan pemandangan, memaparkan objek 3D pada kanvas.

Kod yang disediakan untuk Babylon.js mencipta pemandangan 3D asas dengan kamera, lampu dan jaringan sfera. Apabila dilaksanakan, output yang dijangkakan ialah pemaparan kanvas pemandangan 3D, di mana perspektif kamera menunjukkan sfera di tengah skrin, diterangi oleh sumber cahaya.

Cocos2d-js

Cocos2d-js ialah enjin permainan JavaScript yang membolehkan pembangun mencipta permainan untuk platform web dan mudah alih. Ia menyediakan set lengkap alatan dan perpustakaan untuk pembangunan permainan 2D, termasuk animasi sprite, simulasi fizik, sokongan audio dan pengendalian input pengguna.

Salah satu ciri ketara Cocos2d-js ialah sokongan merentas platformnya, membolehkan pembangun menyasarkan berbilang platform menggunakan satu pangkalan kod. Mari lihat contoh kod ringkas yang menunjukkan cara mencipta sprite dan animasinya menggunakan Cocos2d-js.

Contoh

// Create a sprite var sprite = new cc.Sprite("res/sprite.png"); sprite.setPosition(cc.winSize.width / 2, cc.winSize.height / 2); this.addChild(sprite); // Create an animation var animation = new cc.Animation(); animation.addSpriteFrameWithFile("res/frame1.png"); animation.addSpriteFrameWithFile("res/frame2.png"); animation.setDelayPerUnit(0.2); animation.setRestoreOriginalFrame(true); // Run the animation var animateAction = new cc.Animate(animation); sprite.runAction(new cc.RepeatForever(animateAction));

Arahan

Dalam contoh ini, kami mencipta objek sprite dan meletakkannya di tengah-tengah skrin. Kami kemudian mentakrifkan animasi dengan menambah berbilang bingkai sprite dan menentukan kelewatan antara bingkai. Akhirnya, kami menjalankan animasi pada sprite, menghasilkan gelung animasi yang lancar.

Buat sprite dan jalankan animasi ringkas padanya menggunakan kod yang disediakan oleh Cocos2d-js. Apabila dilaksanakan, output yang dijangkakan akan menjadi rendering kanvas dengan animasi yang ditakrifkan oleh sprite. Dalam kes ini, sprite akan berselang seli antara dua bingkai (frame1.png dan frame2.png) dengan kelewatan 0.2 saat antara bingkai, mewujudkan kesan animasi gelung.

Kesimpulan

Ringkasnya, penerokaan enjin permainan JavaScript ini memberikan cerapan kepada tiga pilihan popular: Impact.js, Babylon.js dan Cocos2djs. Setiap enjin mempunyai kelebihan dan fokus tersendiri untuk memenuhi keperluan pembangunan permainan yang berbeza.

Atas ialah kandungan terperinci Terokai enjin permainan JavaScript: Impact.js, Babylon.js dan Cocos2d-js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!