Có thể tạo ra các trò chơi 3D bản địa (như CS: GO, Call of Duty, Battlefield, v.v.) với JavaScript không? Tôi muốn tạo một trò chơi sẽ không được chơi trong trình duyệt web, nhưng được cài đặt và chơi trên máy người dùng như mọi trò chơi.
Smmehrab
6767 Huy hiệu bạc15 Huy hiệu Đồng7 silver badges15 bronze badges
Hỏi ngày 8 tháng 7 năm 2020 lúc 22:12Jul 8, 2020 at 22:12
Bạn có thể kiểm tra ba.js, đây là thư viện JavaScript giúp bạn xây dựng các trò chơi 3D. Mặc dù nó không hoàn toàn đáp ứng tình trạng của bạn, vì nó cũng chạy trên trình duyệt web.
Tôi không hoàn toàn chắc chắn về việc xây dựng các trò chơi bản địa với javascript, nhưng bạn có thể sử dụng electron.js để tạo ứng dụng máy tính để bàn của trò chơi javascript của bạn.
Đã trả lời ngày 8 tháng 7 năm 2020 lúc 22:32Jul 8, 2020 at 22:32
Smmehrabsmmehrabsmmehrab
6767 Huy hiệu bạc15 Huy hiệu Đồng7 silver badges15 bronze badges
Hỏi ngày 8 tháng 7 năm 2020 lúc 22:12
Bạn có thể kiểm tra ba.js, đây là thư viện JavaScript giúp bạn xây dựng các trò chơi 3D. Mặc dù nó không hoàn toàn đáp ứng tình trạng của bạn, vì nó cũng chạy trên trình duyệt web.
Tôi không hoàn toàn chắc chắn về việc xây dựng các trò chơi bản địa với javascript, nhưng bạn có thể sử dụng electron.js để tạo ứng dụng máy tính để bàn của trò chơi javascript của bạn.Aug 4, 2020 at 10:57
NoNam4NoNam4NoNam4
Đã trả lời ngày 8 tháng 7 năm 2020 lúc 22:321 silver badge8 bronze badges
Tôi biết bạn đang nghĩ gì: Tại sao bạn lại sử dụng JavaScript để phát triển trò chơi? Tôi đã nghĩ điều tương tự khi lần đầu tiên tôi phát hiện ra rằng bạn có thể sử dụng JavaScript, cũng như HTML5, để phát triển các trò chơi 3D.
Sự thật là, kể từ khi giới thiệu API JavaScript WebGL, các trình duyệt hiện đại có khả năng trực quan cho phép chúng hiển thị đồ họa 2D và 3D phức tạp và phức tạp hơn mà không cần dựa vào các plugin của bên thứ ba.
Bạn có thể bắt đầu hành trình phát triển trò chơi web của mình với Pure JavaScript, đây có lẽ là cách tốt nhất để tìm hiểu nếu bạn là người mới bắt đầu. Nhưng tại sao lại phát minh lại bánh xe khi có rất nhiều động cơ trò chơi được áp dụng rộng rãi để lựa chọn?
Trong hướng dẫn này, chúng tôi sẽ khám phá sáu công cụ trò chơi JS/HTML5 hàng đầu, được xếp hạng theo số lượng sao GitHub và hướng dẫn bạn cách sử dụng chúng.
1. ba.js
Three.js là một trong những thư viện JavaScript phổ biến nhất để tạo và hoạt hình đồ họa máy tính 3D trong trình duyệt web bằng WebGL. Nó cũng là một công cụ tuyệt vời để tạo các trò chơi 3D cho các trình duyệt web.
Vì ba.js dựa trên JavaScript, nên việc thêm bất kỳ tương tác nào giữa các đối tượng 3D và giao diện người dùng, chẳng hạn như bàn phím và chuột. Điều này làm cho thư viện hoàn toàn phù hợp để tạo các trò chơi 3D trên web.
Ưu điểm
- Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: The most important advantage of Three.js — aside from its ability to perform complex rendering very well — is that it’s very easy to get started with
- Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: Due to its popularity, there are countless examples to help you get started
- Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: Three.js has plenty of users and, therefore, a sizable community of developers working with and creating various third-party tools
- Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Robust documentation is usually a great indicator of a strong library, and Three.js has excellent docs
- Hiệu suất tuyệt vời: ba.js có lợi thế về hiệu suất so với các thư viện khác mà tôi đã sử dụng: Three.js has a performance advantage over other libraries I have used
- Kết xuất PBR: ba.js đã kết xuất PBR tích hợp, giúp kết xuất đồ họa chính xác hơn: Three.js has built-in PBR rendering, which makes rendering graphics more accurate
Nhược điểm
- Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: This makes a lot of modern rendering techniques impossible/infeasible to implement with Three.js
- Không phải là một công cụ trò chơi: Nếu bạn đang tìm kiếm các tính năng ngoài kết xuất - bạn đã giành được nhiều: If you’re looking for features beyond rendering – you won’t find many here
- Hướng đến người mới: Bởi vì API phục vụ cho người mới, nhiều tính năng nâng cao được ẩn: Because the API caters to novices, many advanced features are hidden
- Thiếu hỗ trợ: Không có hỗ trợ tích hợp để lập chỉ mục không gian, làm cho raycast chính xác hoặc loại bỏ frustum và phát hiện va chạm là vô vọng trong các kịch bản phức tạp: There is no built-in support for spatial indexing, making exact raycasting, or frustum culling, and collision detection is hopelessly inefficient in complex scenarios
Ba.js trong hành động
Nếu bạn đang tìm cách đi sâu vào việc tạo các đối tượng 3D đơn giản hoặc phức tạp trên web, ba.js là thư viện đi. Những lợi thế hàng đầu của nó bao gồm một cộng đồng tài năng và rộng lớn và rất nhiều ví dụ và tài nguyên.
Three.js là thư viện hoạt hình 3D đầu tiên mà tôi đã làm việc và tôi đã giới thiệu nó cho bất kỳ ai bắt đầu phát triển trò chơi.
Hãy để tạo ra một hình học xoay đơn giản để chứng minh những gì ba.js có thể làm.
import * as THREE from 'js/three.module.js'; var camera, scene, renderer; var geometry, material, mesh; animate();Tạo chức năng function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 9 để thiết lập mọi thứ chúng ta cần để chạy hoạt hình demo của chúng ta với ba.js.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); }Tiếp theo, tạo hàm function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 0 để làm động đối tượng với loại chuyển động mong muốn của bạn.
function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); }Kết quả đã hoàn thành sẽ trông như thế này:
2. pixijs
Nếu bạn đang tìm kiếm một thư viện JS để tạo đồ họa phong phú và tương tác với sự hỗ trợ cho các ứng dụng đa nền tảng, thì không có gì khác ngoài PIXIJS. Công cụ tạo HTML5 này cho phép bạn phát triển hoạt hình và trò chơi mà không có kiến thức trước về API WebGL.
Ưu điểm
- Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: Just like Three.js, PixiJS is very fast
- Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: Also like Three.js, Pixi.js supports multiple platforms
- Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: The API is easy for a beginner to understand
- Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Pixi.js uses a WebGL renderer but also supports a Canvas fallback
Nhược điểm
- Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: In my experience, Three.js is much easier to get started with
- Không phải là một công cụ trò chơi: Nếu bạn đang tìm kiếm các tính năng ngoài kết xuất - bạn đã giành được nhiều: Pixi.js proudly only support renderer
Hướng đến người mới: Bởi vì API phục vụ cho người mới, nhiều tính năng nâng cao được ẩn
Thiếu hỗ trợ: Không có hỗ trợ tích hợp để lập chỉ mục không gian, làm cho raycast chính xác hoặc loại bỏ frustum và phát hiện va chạm là vô vọng trong các kịch bản phức tạp
Ba.js trong hành động
npm install pixi.js import * as PIXI from 'pixijs' //or CDN <script src="//cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js" ></script>Nếu bạn đang tìm cách đi sâu vào việc tạo các đối tượng 3D đơn giản hoặc phức tạp trên web, ba.js là thư viện đi. Những lợi thế hàng đầu của nó bao gồm một cộng đồng tài năng và rộng lớn và rất nhiều ví dụ và tài nguyên.
import * as PIXI from 'pixi.js'; const app = new PIXI.Application(); document.body.appendChild(app.view); app.loader.add('jumper', 'jumper.png').load((loader, resources) => { const bunny = new PIXI.Sprite(resources.bunny.texture); bunny.x = app.renderer.width / 2; bunny.y = app.renderer.height / 2; bunny.anchor.x = .5; bunny.anchor.y = .5; app.stage.addChild(bunny); app.ticker.add(() => { bunny.rotation += .01; }); });Three.js là thư viện hoạt hình 3D đầu tiên mà tôi đã làm việc và tôi đã giới thiệu nó cho bất kỳ ai bắt đầu phát triển trò chơi.
Hãy để tạo ra một hình học xoay đơn giản để chứng minh những gì ba.js có thể làm.
Tạo chức năng function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 9 để thiết lập mọi thứ chúng ta cần để chạy hoạt hình demo của chúng ta với ba.js.
Ưu điểm
- Dễ học: Ưu điểm quan trọng nhất của ba.js - ngoài khả năng thực hiện kết xuất phức tạp rất tốt - là nó rất dễ bắt đầu với: Phaser is known to have a well-designed structure
- Rất nhiều ví dụ: Do sự phổ biến của nó, có vô số ví dụ để giúp bạn bắt đầu: The library supports the use of TypeScript for game development
- Cộng đồng lớn: Ba.js có rất nhiều người dùng và do đó, một cộng đồng lớn các nhà phát triển hợp tác và tạo ra các công cụ của bên thứ ba khác nhau: Phaser primarily is a game development engine — and a good one at that
- Tài liệu tốt: Tài liệu mạnh mẽ thường là một chỉ số tuyệt vời của một thư viện mạnh mẽ và ba.js có tài liệu tuyệt vời: Phaser supports a huge list of plugins
- Hiệu suất tuyệt vời: ba.js có lợi thế về hiệu suất so với các thư viện khác mà tôi đã sử dụng: Phaser supports WebGL and has Canvas enabled as a fallback
Nhược điểm
- Không có đường ống kết xuất: Điều này làm cho rất nhiều kỹ thuật kết xuất hiện đại không thể thực hiện với ba.js: The build size of Phaser for desktop is quite massive
- Hỗ trợ kém cho phát triển di động: Tạo các ứng dụng di động gốc yêu cầu sử dụng Cordova hoặc một số khung của bên thứ ba khác: Creating native mobile apps requires using Cordova or some other third-party framework
- Quản lý nhà nước: Có thể hơi khó khăn để bắt đầu với người quản lý nhà nước Phaser: It can be somewhat difficult to get started with Phaser’s state manager
Phaser trong hành động
Phaser tốt để phát triển các ứng dụng trò chơi đa nền tảng. Sự hỗ trợ của nó cho một loạt các plugin và cộng đồng lớn các nhà phát triển xây dựng các trò chơi với Phaser giúp việc bắt đầu với khung.
Hãy để xây dựng một ứng dụng cơ bản với Phaser.
npm install [email protected] //OR <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"> >/script>Tiếp theo, chuyển trong một số cấu hình mặc định cho động cơ Phaser của bạn.
const config = { type: Phaser.Auto, width: 900, height: 700, physics: { default: 'arcade', arcade: { gravity: { y: 200 }, } }, scene: { preload: preload, create: create } }; const game = new Phaser.Game(config);Tạo chức năng tải trước để tải trong các tệp tĩnh mặc định của bạn.
function preload() { this.load.setBaseURL('//labs.phaser.io'); this.load.image('sky', 'assets/skies/space3.png') this.load.image('logo', 'assets/sprites/phaser3-logo.png'); this.load.image('red', 'assets/particles/red.png'); }Cuối cùng, xác định chức năng function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 1 của bạn để hiển thị trò chơi mới được tạo của bạn.
Nhiều bài viết tuyệt vời hơn từ Logrocket:
- Đừng bỏ lỡ một khoảnh khắc với bản phát lại, một bản tin được quản lý từ Logrocket
- Tìm hiểu cách Galileo của Logrocket cắt giảm tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
- Sử dụng React's UsEffect để tối ưu hóa hiệu suất của ứng dụng của bạn
- Chuyển đổi giữa nhiều phiên bản của nút
- Khám phá cách làm động ứng dụng ứng dụng React của bạn với Animxyz
- Khám phá Tauri, một khuôn khổ mới để xây dựng các nhị phân
- So sánh NestJS so với Express.js
4. Babylon.js
Babylon.js là một trò chơi mạnh mẽ, đẹp đẽ, đơn giản và mở và động cơ kết xuất được đóng gói vào một khung JavaScript thân thiện.
Ưu điểm
- Sân chơi: Sân chơi là một công cụ tuyệt vời để thử nghiệm mọi thứ trước khi phát triển đầy đủ - và nó có tài liệu tuyệt vời để khởi động: The Playground is a great tool for testing things out before going into full development — and it has great documentation to boot
- Hỗ trợ cộng đồng mạnh mẽ: Các nhà phát triển Babylon rất hữu ích và năng động: Babylon developers are very helpful and active
- CodeBase cập nhật: Khung này có một Codebase và các công cụ bên thứ ba được cập nhật thường xuyên đang được phát triển tích cực: The framework enjoys a frequently updated codebase and third-party tools are in active development
- Kết xuất PBR: Hỗ trợ hỗ trợ kết xuất PBR là tuyệt vời: Support for PBR rendering support is excellent
- Bầu chọn sự tự tin: Babylon được sử dụng và hỗ trợ bởi các thương hiệu lớn như Adobe, Microsoft, v.v.: Babylon is used and supported by large brands such as Adobe, Microsoft, and more
- Bảo trì: Lỗi thường được giải quyết khá nhanh: Bugs are often ironed out quite quickly
Nhược điểm
- Thiếu trưởng thành: Babylon là bản phát hành đầu tiên vào năm 2013, khiến nó khá trẻ so với nhiều đối thủ cạnh tranh: Babylon was the first release in 2013, which makes it quite young compared to many of its competitors
- Tài liệu: Động cơ thiếu tài liệu API.: The engine lacks API documentation.
- Không phù hợp cho các dự án nhỏ hơn
Babylon.js hoạt động
Nhiều thương hiệu lớn tin tưởng Babylon.js là công cụ phát triển trò chơi của họ.
Babylon và các mô -đun của nó được xuất bản trên NPM.
npm install babylonjs --save // TO USE import * as BABYLON from 'babylonjs' // OR import { Scene, Engine } from 'babylonjs'Tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 2 và dán như sau.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 0Tiếp theo, tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 3 và bao gồm mã sau.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 1Tạo tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 4 và dán vào:
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 2Dưới đây là một bản xem trước về hoạt hình của bạn sẽ trông như thế nào.
5. Vật chất.js
Matter.js là một công cụ vật lý cơ thể JavaScript 2D, cứng nhắc cho web. Mặc dù nó là một công cụ vật lý JavaScript, bạn có thể kết hợp nó với các gói và plugin khác nhau để tạo ra các trò chơi web thú vị.
Ưu điểm
- Sân chơi: Sân chơi là một công cụ tuyệt vời để thử nghiệm mọi thứ trước khi phát triển đầy đủ - và nó có tài liệu tuyệt vời để khởi động: Matter.js offers numerous features, such as rigid, compound, and composite bodies; stable stacking and resting; conservation of motion; and many more
Nhược điểm
- Thiếu trưởng thành: Babylon là bản phát hành đầu tiên vào năm 2013, khiến nó khá trẻ so với nhiều đối thủ cạnh tranh: Matter.js’s lack of continuous collision detection (CCD) causes an issue where fast-moving objects pass through other objects
Tài liệu: Động cơ thiếu tài liệu API.
Không phù hợp cho các dự án nhỏ hơn
Babylon.js hoạt động
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 3Nhiều thương hiệu lớn tin tưởng Babylon.js là công cụ phát triển trò chơi của họ.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 4Babylon và các mô -đun của nó được xuất bản trên NPM.
Tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 2 và dán như sau.
Tiếp theo, tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 3 và bao gồm mã sau.
Tạo tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 4 và dán vào:
Ưu điểm
- Sân chơi: Sân chơi là một công cụ tuyệt vời để thử nghiệm mọi thứ trước khi phát triển đầy đủ - và nó có tài liệu tuyệt vời để khởi động: The primary focus of PlayCanvas is its game development engine
- Hỗ trợ cộng đồng mạnh mẽ: Các nhà phát triển Babylon rất hữu ích và năng động: PlayCanvas is an open-source tool for powerful game development
- CodeBase cập nhật: Khung này có một Codebase và các công cụ bên thứ ba được cập nhật thường xuyên đang được phát triển tích cực: The game development platform is mobile-first
- Kết xuất PBR: Hỗ trợ hỗ trợ kết xuất PBR là tuyệt vời: The engine’s zero compiled time naturally makes the process faster
- Đường ống tài sản: PlayCanvas sử dụng các thực tiễn tốt nhất để cho phép bạn quyết định cách phân phối nội dung của bạn và ở dạng nào: PlayCanvas uses best practices to allow you to decide how your content is delivered and in what form
- Công cụ vật lý tích hợp: Bạn có thể tích hợp vật lý vào trò chơi của mình khá dễ dàng bằng cách sử dụng động cơ vật lý đạn mạnh mẽ Ammo.js: You can integrate physics into your game rather easily using the powerful bullet physics engine ammo.js
- Tải lại nóng: Bạn không cần tải lại trình duyệt của mình mỗi khi bạn thay đổi: You don’t have to reload your browser each time you make changes
- Chỉ có các công cụ kết xuất trên trình duyệt: PlayCanvas có các tính năng WebGL nâng cao chỉ chạy trên trình duyệt: PlayCanvas has advanced WebGL features that run only on browsers
Nhược điểm
- Các dự án tư nhân được trả lương: Tầng miễn phí không hỗ trợ các dự án tư nhân, vì vậy tất cả các mã và tài sản đều được lưu trữ công khai: The free tier does not support private projects, so all code and assets are hosted publicly
- Va chạm bù: Không có phần bù va chạm: There is no collision offset
- Thiếu ví dụ: Hướng dẫn cho PlayCanvas rất ít: Tutorials for PlayCanvas are few and far between
PlayCanvas trong hành động
PlayCanvas là tuyệt vời để tạo ra các dự án công cộng nhỏ hoặc các dự án trường học - ít nhất, đó là những gì tôi đã sử dụng. Nếu bạn cần nhiều tính năng hơn và kiểm soát nhiều hơn đối với phát triển trò chơi của mình, bạn có thể muốn xem xét đăng ký các tính năng cao cấp.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 5Tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 2 và thêm mã sau.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 6Tiếp theo, tạo một tệp function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x += .01; mesh.rotation.y += .02; renderer.render( scene, camera ); } 3 và dán vào sau.
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 7Để tạo máy ảnh và ánh sáng cho đối tượng:
function init() { const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 ); camera.position.z = 1; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 ); const material = new THREE.MeshNormalMaterial(); const mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); const renderer = new THREE.WebGLRenderer( { antialias: true } ); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } 8Mã trên sẽ tạo ra kết quả sau.
Suy nghĩ cuối cùng
Bằng cách phá vỡ các ưu điểm, nhược điểm và sử dụng các trường hợp liên quan đến mỗi công cụ trò chơi JS/HTML5 được liệt kê ở trên, tôi hy vọng bạn đã hiểu rõ hơn về việc này phù hợp nhất với loại trò chơi hoặc hoạt hình mà bạn đang tìm kiếm để tạo.
Trong hầu hết các trường hợp, tôi khuyên bạn nên sử dụng ba.js, đặc biệt là nếu bạn đang tìm kiếm nhiều hơn hoặc một công cụ kết xuất hơn là một công cụ trò chơi. Do sự phổ biến của nó trong hệ sinh thái nhà phát triển, nó sẽ dễ dàng tìm thấy tài nguyên toàn diện để giúp bạn phát triển và chạy.
Nếu bạn tập trung vào phát triển trò chơi nhiều hơn, tôi sẽ đề xuất Babylon.js vì sự đơn giản của nó. Babylon cũng có một cơ sở mã hóa được cập nhật và phát triển bên thứ ba hoạt động và tính năng sân chơi là một công cụ tuyệt vời để thử nghiệm. PlayCanvas là một tùy chọn sao lưu vững chắc - nó chủ yếu là một công cụ trò chơi và bạn có thể sử dụng nó để xây dựng các trò chơi 3D phức tạp.
Bạn sử dụng công cụ trò chơi nào trong các dự án phát triển trò chơi của mình? Hãy cho chúng tôi biết trong các ý kiến!
Logrocket: Debug Lỗi JavaScript dễ dàng hơn bằng cách hiểu bối cảnh
Mã gỡ lỗi luôn là một nhiệm vụ tẻ nhạt. Nhưng bạn càng hiểu lỗi của mình thì càng dễ dàng sửa chúng.
Logrocket cho phép bạn hiểu các lỗi này theo những cách mới và độc đáo. Giải pháp giám sát frontend của chúng tôi theo dõi sự tham gia của người dùng với các mặt tiền JavaScript của bạn để cung cấp cho bạn khả năng tìm hiểu chính xác những gì người dùng đã làm dẫn đến lỗi.
Logrocket Records nhật ký bảng điều khiển, thời gian tải trang, ngăn xếp, yêu cầu/phản hồi mạng chậm với các tiêu đề + thân, siêu dữ liệu trình duyệt và nhật ký tùy chỉnh. Hiểu được tác động của mã JavaScript của bạn sẽ không bao giờ dễ dàng hơn!
Hãy thử nó miễn phí.