如何在带有客户端渲染器的服务器上使用 Matter.js [英] How to use Matter.js on server with client-side renderer
问题描述
我正在编写多人游戏.有没有什么快速的方法可以在服务器上使用 MatterJS(使用 nodejs、ws、express).我的主要问题是将世界从服务器发送到客户端以在画布上渲染它.由于世界困难，有没有什么方法可以在前端使用内置的Matter.Engine?
有人可以帮忙吗?
如果这个问题有点不详细，请在评论中写下问题.
I'm writing a multiplayer game. Is there any fast ways to use MatterJS on the server (with nodejs, ws, express). My main problem is sending the world from server to client to renderer it on canvas. Because of the difficult world, is there any ways to use built-in Matter.Engine on frontend?
Could anyone help?
If this question is a bit not-detailed, please write questions in the comments.
推荐答案
理想情况下，对于权威服务器游戏，您希望引擎在服务器端运行，而渲染器在客户端运行.Matter.js 为 Engine 和 Render 提供了单独的对象，这很有帮助.
Ideally, for an authoritative server game, you'd want the engine to run server-side and the renderer to run client-side. Matter.js has separate objects for Engine and Render, which helps.
您可以采用以下几种方法:
Here are a couple of approaches you could take:
为服务器端编写您自己的渲染器，它通过 websocket 连接发送更新而不是渲染到屏幕.为客户端编写您自己的引擎对象，该对象从服务器接收 websocket 更新以更新对象位置、角度等，以传递给真正的渲染器.然后，在服务器上，您将运行默认的 Matter.js 引擎，但使用您的自定义渲染器，而在客户端上，您将使用默认的 Matter.js 渲染器，但使用您的自定义引擎.如果您希望采用这种方法，那么 Matter.js 文档将是一个好的开始.
Write your own renderer for the server side which sends updates down a websocket connection instead of rendering to the screen. Write your own engine object for the client side which receives websocket updates from the server to update object positions, angles, etc. to pass to the real renderer. Then, on the server you'd have the default Matter.js engine running but with your custom renderer, and on the client you'd have the default Matter.js renderer but with your custom engine. The Matter.js documentation would be a good start if you wish to take this approach.
或者，在客户端和服务器上运行默认引擎，但在客户端，将对象设置为静态.不要在服务器端将它们设置为静态.然后，服务器可以向套接字发送更新，其中包括对象 ID、位置和角度.然后客户端可以调用这样的代码来更新客户端引擎:
Alternatively, run the default Engine on both the client and server, but on the client side, set objects as static. Do not set them as static on the server side. Then, the server can send updates down the socket that includes object ids, positions and angles. The client can then call code such as this to update the client-side engine:
Matter.Body.setPosition(body, update.position);
Matter.Body.setAngle(body, update.angle);
方法 #1 需要更多的努力才能开始工作，因为您需要编写客户渲染器和引擎组件，但方法 #2 的效果相当好，可以快速开始工作.要记住的一件事是，在多人在线游戏中，延迟成为一个挑战.在这种情况下，让引擎同时在客户端和服务器上运行可能是一个优势，因为理论上您可以乐观地在客户端应用力/位置，然后在服务器发送下一批更新后验证"这些更新.
Approach #1 would take more effort to get working as you'd need to write a customer renderer and engine component, but approach #2 works reasonably well to get something started quickly. One thing to keep in mind is that in a multiplayer online game, latency becomes a challenge. Having the engine running on both the client and the server could be an advantage in that case, because you could in theory optimistically apply forces/positions client-side and then "tru-up" those updates once the server sends the next batch of updates.
除此之外，该架构可能看起来很像任何其他客户端/服务器游戏架构.
Other than that, the architecture could look much like any other client/server game architecture.
请注意，Matter.js 可以与 NPM 一起安装在 Node 环境中——它不必在浏览器中运行.您可以轻松地将其与 Express.js、ws 或 socket.io 连接起来，然后启动一个循环，您可以在其中调用这样的代码来定期更新引擎:
Note that Matter.js can be installed with NPM in a Node environment--it doesn't have to run in a browser. You can easily wire that up with Express.js, ws or socket.io, and then start a loop where you call code such as this to periodically update the engine:
Matter.Engine.update(engine, 1000 / 60);
希望有所帮助.
这篇关于如何在带有客户端渲染器的服务器上使用 Matter.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
