动画画布60FPS HTML5-许多实体没有滞后

时间:2018-06-27 16:25:35

标签: javascript html5 animation html5-canvas rendering

我目前正在使用Node.JS和HTML5 canvas开发一个IO游戏,目前它看起来像这样:

我想在游戏中添加一个功能,随着玩家军队的扩大,该功能会进一步缩小。因此,画布必须能够绘制许多在每一帧都具有动画效果的生物。我知道将缩放比例增加到一定程度时可能会达到极限,但是我希望找到绘制尽可能多的实体的最佳方法。

我已经阅读了许多articles的关于屏幕外渲染的信息,据我所知,可以通过绘制图块之类的东西来减少加载时间,或者在我的情况下,可以在屏幕外画布中绘制不同的实体并将这些实体从而不是将它们一点一点地绘制到屏幕画布上。

这里有些不确定的地方:如果从屏幕上抽出可以改善性能,为什么我不应该从屏幕上抽出整个主画布并在屏幕上每帧复制一次呢? 例如,如果我使用屏幕外的画布仅绘制骑士,那么如何在每个实例中复制行走动画的不同状态而又不为行走动画的每一帧绘制画布并复制它们呢?

我的应用程序做什么:

  • 我使用CanvasRenderingContext2D
  • 我使用“ ctx.arc()”之类的函数绘制了所有形状,但没有任何图像文件,以使其中的一部分易于移动
  • 我正在使用Javascripts“ requestAnimationFrame()”以60fps的速度绘制画布,而我每秒只能从Node服务器接收30次客户端数据,这可能是不好的做法,但是我肯定在游戏中“ requestAnimationFrame()”会更好在屏幕上未激活。
  • 我在服务器上有一张10'000x10'000 px的地图,客户端使用“ ctx.translate(screenX,screenY)”来调整相机
  • 客户仅接收在其视图范围内绘制的实体

0 个答案:

没有答案