2D侧边滚动相机视图在html5 [英] 2D side scrolling camera view in html5
问题描述
我想知道如何做一个像相机的视图，我可以在canvas元素中滚动一个级别，如下：
因此，您希望500x500的画布显示真正9000x500左右的游戏关卡。
这很好。你所做的是将画布视为一个较大场景的视口。
下面是一个例子：
$ b b
点击画布并按住您的左箭头键，即可查看场景，而红色的玩家点仍保持静止。
100x100画布，您将看到正在绘制的对象，如屏幕上的位置（330,50）。
我猜其值得一提的是，在画布上进行优化时，真的很重要。上面给出的示例是一个非常简单的方法来创建视口，随着代码的进展，你会想越来越多地了解你正在绘制什么，绘制多少。例如，你应该避免绘制完全在屏幕外的对象，如果你的游戏或应用程序的背景是9000x500，你可能不想每次都绘制整个东西！
所以这里的概念是外卖，但是你会想想如何实现它，以及你做了多少工作。如果您在侧边滚动应用中遇到性能问题，请务必告诉我们：）
I was wondering how I could go about making a camera-like view where I could scroll a level within a canvas element just like this:
So you want a 500x500 canvas to display something (a game level) that is really 9000x500 or so.
This is fine. What you do is think of the canvas as a "viewport" for a larger scene. You translate the canvas (or everything else) to the appropriate spot and draw all of the relevant things at that spot.
Here's an example:
Click on the canvas and hold down your left arrow key to see the scene go by while the red player dot stays "still".
As you scroll by the 100x100 canvas, you are seeing objects that are being drawn at once-offscreen locations like (330,50). Translating the canvas brings them into view.
I guess its worth mentioning that this is where making optimizations in a canvas starts to really matter. The example I gave above is a very simplistic way to make a viewport, and as your code progresses you're going to want to think more and more about what it is you're drawing and how much you're drawing. You'll want to avoid drawing objects that are completely offscreen, for instance, and if your game or app has a background that is 9000x500 you probably don't want to be drawing the entire thing every time!
So the concept is the takeaway here, but you'll want to think very hard about how you implement it and how much work you are making the canvas do. If you end up with performance problems in your side-scrolling app, be sure to let us know :)
这篇关于2D侧边滚动相机视图在html5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
