是否有可能使用vanilla javascript创建一个跟随玩家的视口？

我想知道如何制作一个跟随玩家的视口，例如在sidescrolling游戏中。我有一个半工作版本，但它需要我移除除了玩家之外的所有东西。是否有可能使用vanilla javascript创建一个跟随玩家的视口？

ctx.translate(canvX,canvY); 
    drawBlocks(); 
    ctx.restore()

这种方式现在可行，但我将不得不画出敌人和其他物体，而且我不想不断地重做这个过程。我正在寻找一个简单的解决方案，基本上涉及跟随玩家的相机。这可能吗？

来源

2017-07-02 Azhi

您确实没有提供足够的代码来帮助您，但无论哪种方式，您都应该尝试一种面向对象的方法，或者使用框架或库（如pixi.js或phaser.io）进行研究。 –

我假设所有情况下的基本想法都是一样的，但如果有帮助，您可以看到我开始使用的代码。 https://www.codecademy.com/azhiguore/codebits/Jwh0VH – Azhi

没有办法只是'制造'一台相机。我确实想到了一个黑客。你可以制作一个非常大的画布，把它放在一个非常小的div中，然后随着玩家的移动将画布移动到div的内部，但这对性能有很大的影响。我的建议是尝试使用游戏引擎或其他库，例如我提到的两个库，以了解它们如何处理轻松移动画布周围的一组精灵。 –

使用类似three.js的游戏。因为你必须每秒绘制多少帧，而且画布对此并不好（如果你现在不相信我，等到你不得不在画面上画更多的东西）。

但是，对于您当前的代码，我注意到的一件事是您错过了save。

如果这不是问题，我不认为它是基于你的问题，你不想重新绘制所有的东西，只有背景？实际上，您可以使用多个图层，以便每个敌人都是HTML元素，并且只有在动画帧更改时才会重绘敌人。然后你只需要移动他们的元素（在性能方面比重新绘制便宜一点）。

THREE.JS是你应该学习..它会真的帮助你。

来源

2017-07-02 01:33:48 Funkodebat

再次，使用香草JavaScript是首选。有没有办法从three.js转换为JavaScript？ – Azhi

您知道Three.js使用画布，并且在速度方面没有优势（我会说实际上减缓了画布的下滑而不需要额外的开销），而不是直接使用画布及其各种API – Blindman67

它使用不同的上下文。他的代码使用'translate'，这意味着他做了'canvas.getContext（'2d'）'，而threejs使用'webgl'而不是2d。 webgl使用视频卡（许多管道）而不是处理器（单管道）。我不知道你想要做什么，你只想使用香草。没有更多信息很难给你指导。 – Funkodebat

是否有可能使用vanilla javascript创建一个跟随玩家的视口？

回答

相关问题