Slick2D和JBox2D。如何绘制 [英] Slick2D and JBox2D. How to draw
问题描述
在问这个之前我做了很多网上搜索。我不能这样做。这对我来说有点难以理解。那么我如何在与世界位置的身体相对应的右侧屏幕位置绘制图像？ Thanx。
Before asking this i did A LOT of searching on the net. I just can't do it. It's a little hard for me to understand. So how do i draw the images at the right screen positions coresponding to bodies in world position? Thanx.
如果有人在同一个障碍面前发现了他，我发布了一个HOW TO，而不是normalocity的正确解释。你可以在这里找到它： http://romeo.akademx.ro/ 2012/04/06 / slick-and-box2d /
If anyone else finds himslef in front of the same obstacle i posted a HOW TO, thanx to normalocity's good explanation. You can find it here: http://romeo.akademx.ro/2012/04/06/slick-and-box2d/
这是渲染功能：
public void render(GameContainer container, StateBasedGame game, Graphics g)
throws SlickException {
g.setBackground(Color.white);
g.pushTransform();
g.translate(worldToScreen(body.getPosition()).x, worldToScreen(body.getPosition()).y);
g.rotate(15, 15, (float) Math.toDegrees(body.getAngle()));
part.draw();
g.popTransform();
g.drawString("Count: " + cont, 5, 40);
//world.drawDebugData();
}
这些是我用来转换世界屏幕协调的功能：
And these are the function i use to transform world-screen coordinations:
public Vec2 screenToWorld(Vec2 screenV) {
return new Vec2((screenV.x - offset.x) / scaleFactor, yFlip
* (screenV.y - offset.y) / scaleFactor);
}
public Vec2 worldToScreen(Vec2 worldV) {
return new Vec2(worldV.x * scaleFactor + offset.x, yFlip * worldV.y
* scaleFactor + offset.y);
}
我也碰巧使用此链接中的SlickDebugDraw： http://slick.javaunlimited.net/viewtopic.php?f=19& ; t = 3610& sid = 69614ac53aaf5724b808b75173e8e48e
I also happen to use the SlickDebugDraw found at this link: http://slick.javaunlimited.net/viewtopic.php?f=19&t=3610&sid=69614ac53aaf5724b808b75173e8e48e
但他的DebugDraw绘制了一个完全不同于渲染功能的东西。我有点困惑。
But his DebugDraw draws a completely another thing then my render function. I'm a bit confused.
推荐答案
如果您所做的只是在2D世界中绘制精灵，那么基本上只有两个你需要跟踪的事情，以决定在屏幕上绘制哪些精灵以及在屏幕上绘制它们的位置。您必须将您的精灵视为存在于世界的某个位置，以及您在屏幕上看到的仅仅是一个世界视图，关注一个区域。
If all you're doing is drawing sprites in a 2D world, then there's basically two things you need to keep track of in order to decide which sprites to draw on the screen and where on the screen to draw them. You have to think of your sprites as existing at a certain location in the world, and what you see on the screen as just one view of the world, focusing on an area.
您需要跟踪的两件事是：
The two things you need to keep track of are:
- 每个精灵需要在世界范围内拥有自己的位置
- 你的相机需要追踪它相对于世界的位置。
所以，假设你有一个大，大世界，2D坐标（x，y）空间为1,000,000 x 1,000,000像素（我在这里使用像素作为度量单位，但这是一个随意的选择，世界的大小并不重要，我刚刚选了一个大的）。然后，假设您有一个指向该世界的相机，该相机的视图就是屏幕上显示的内容。相机为您提供的显示尺寸为1024x768像素。
So, let's say you have a big, big world, with a 2D coordinate (x, y) space of 1,000,000 x 1,000,000 pixels (I'm using pixels as the unit of measure here, but that's an arbitrary choice, and the size of the world doesn't matter, I've just chosen a big one). Then, let's say you have a "camera" that's pointed at that world, and the view of that camera is what is displayed on your screen. The display that camera gives you is 1024x768 pixels in size.
我们也可以说您使用箭头键将相机移动到世界各地。
Let's also say that you use the arrow keys to move that camera around the world.
因此，您的世界坐标空间会映射到您的屏幕：
So, your world's coordinate space maps to your screen as such:
(0, 0) +x
+------------------>
|
+y |
| * <= example sprite in your world @ coordinates (x=200, y=200)
|
\ /
当你的精灵正确移动时，他们会增加 x 坐标。当他们向左移动时，他们会减少 x 坐标。当向上移动时，他们减少他们的 y 坐标（因为 y 向下增加，监视器显示），当移动向下精灵增加他们的 y 坐标。
When your sprites move "right" they increase their x coordinate. When they move "left" they decrease their x coordinate. When moving "up" they decrease their y coordinate (because y increases downward, on monitor displays), and when moving "down" sprites increase their y coordinate.
现在，再次，您在我们的屏幕上看到的只是相机的世界观。所以，让我们设置相机的左上角是（x = 500，y = 500）。这看起来像是：
Now, again, what you see in our screen is just the camera's view of the world. So, let's set that the camera's upper-left corner is at (x=500, y=500). That would look something like:
(0, 0) +x
+---------------------------------->
|
+y |
| * <= example sprite in your world @ coordinates (x=200, y=200)
|
|
| +===================+
| | the area |
| | that the camera |
| | "sees" and |
| | shows on your |
| | screen |
| +===================+
\ /
使用该设置，假设相机处于（500,500）（即，相机视图的左上角，如本例所示，位于世界坐标处（500） ，500）。因为相机显示的是一个大小为1024x768的区域，那么相反的右下角是（500 + 1024,500 + 768）= （x = 1524，y = 1268）。
With that setup, let's say that the camera is at (500, 500) (that is, the upper-left corner of the camera's view, as shown in this example, is at the world coordinates (500, 500). And because the camera shows you an area that is 1024x768 is size, then the opposite, lower-right corner is (500+1024, 500+768) = (x=1524, y=1268).
请注意，我们世界中的精灵在该摄像机的视图区域内不。这意味着，当我们在屏幕上渲染相机的视图时，我们将看不到精灵。
Note that the sprite in our world is not inside that camera's view area. That means, when we render the camera's view on the screen, we won't see the sprite.
如果相机移动到（200,200），那么视图相机的区域将覆盖从左上角@（200,200）到右下角@（1224,968）的世界坐标，看起来像这样：
If, instead, the camera moved to (200, 200), then the view area of the camera would cover the world coordinates from upper-left @ (200, 200) to lower-right @ (1224, 968), and look something like this:
(0, 0) +x
+---------------------------------->
|
+y | +===================+
| | |
| | * <= sprite |
| | |
| | | <= camera's view of the world
| +===================+
|
|
|
|
\ /
当相机处于此位置时，精灵可见。如果精灵是@（500,500），并且摄像机处于（200,200），那么当我们在屏幕上绘制精灵时，精灵将出现在我们的屏幕位于坐标300处 ，300。
When the camera is in this position, the sprite is visible. If the sprite is @ (500, 500), and the camera is at (200, 200), then when we draw the sprite on the screen, the sprite will appear, on our screen at coordinates 300, 300.
因为，这确实是你问题的答案， 你在屏幕上绘制的东西是精灵的世界位置（500,500），减去摄像头的位置（200,200），等于（300,300）。
Because, and this is really the answer to your question, where you draw things on the screen is sprite's world location (500, 500), minus the camera's location (200, 200), which equals (300, 300).
所以，要审核：
你移动相机的位置世界各地使用箭头键（或鼠标，或任何其他你想要的控制方案），并通过获取精灵的位置和减去相机的位置，渲染相对于相机位置的精灵位置，你得到的是精灵应该出现的屏幕坐标。
You move the camera's position around the world using the arrow keys (or the mouse, or whatever other control scheme you want), and you render the sprites location relative to the camera position, by taking the sprite's position and subtracting the camera's position, and what you get are the screen coordinates where the sprite should appear.
它真是低效绘制每个精灵的世界。您只需绘制摄像机视图内的精灵，否则您将绘制在屏幕上看不到的东西，因此浪费渲染/ CPU / GPU时间。
It's really inefficient to draw every sprite in the world. You only need to draw the sprites that are within the camera's view, otherwise you're drawing things that you won't see on your screen, and therefore, wasting rendering/CPU/GPU time.
因此，当你渲染相机的视图时，你需要遍历你的精灵，检查它们是否在相机上（也就是说，它们是否在视野范围内）相机），只有在这个视图中才能绘制它们。
So, when you're rendering the camera's view, you need to iterate through your sprites, checking to see if they are "on camera" (that is, whether or not they're within the view of the camera), and only drawing them if they are within this view.
为了做到这一点，你必须采用你的尺寸相机（在我们的示例中为1024x768），并检查精灵的位置是否在摄像机视图的矩形内 - 这是摄像机左上角的位置，加上摄像机的宽度和高度。
In order to do that, you have to take the dimensions of your camera (1024x768, in our example), and check to see if the sprite's position is inside the rectangle of the camera's view - which is the position of the camera's upper-left corner, plus the camera's width and height.
因此，如果我们的相机向我们显示尺寸为1024x768像素的视图，并且其左上角位于（200,200），则视图矩形为：
So, if our camera shows us a view that's 1024x768 pixels in size, and it's upper-left corner is at (200, 200), then the view rectangle is:
(200, 200) (1224, 200)
+===================+
| |
| * |
| |
| |
+===================+
(200, 968) (1224, 968)
精灵的位置@（500,500）在相机视图中，在这种情况下。
The sprite's position @ (500, 500) is within the camera's view, in this case.
如果您需要更多示例，我有一个有效的Slick2D技术演示，名为行人，代码为您可以看看。有关如何计算应渲染的世界区域的详细信息，请查看渲染方法pedestrians / blob / master / src / com / jefflunt / pedestrians / PedestrianSim.java＃L366rel =noreferrer>此文件，并特别注意 startX ， startY ， stopX ， stopY 变量，这对我来说控制了我要绘制的精灵区域。还应该注意的是，我的精灵（或行人）存在于 TileMap 中，因此它们的大小不是1像素 - 它们的宽度和高度都是拥有。这增加了一些复杂性来决定如何绘制，但它基本上归结为在相机的视图中绘制内容，加上边缘附加一点点。
If you need more examples, I have a working Slick2D tech demo, called Pedestrians, that has code you can look at. For details on how I calculate the area of the world that should be rendered, look at the render method inside this file, and pay special attention to the startX, startY, stopX, stopY variables, which for me control the area of sprites I'm going to draw. It should also be noted that my sprites (or "pedestrians") exist on a TileMap, so they aren't 1 pixel is size - they have a width and height of their own. This adds a small bit of complexity to how to decide what to draw, but it basically comes down to, "draw what's within the camera's view, plus a little extra around the edges."
在您自己的机器上克隆Pedeestrians存储库，通过向项目添加与任何其他Slick2D项目相同的依赖项来使其工作，并播放/修改渲染代码，直到您了解正在发生的事情为止。只有通过练习和学习，你才能获得有关其如何运作的所有细节。好消息是，一旦你弄清楚如何使用这个基本的2D世界与相机方法进行渲染，你就会非常了解如何为所有2D应用渲染图形，因为这些概念可以转换为所有语言。
Clone the Pedeestrians repository on your own machine, get it working by adding the same dependencies to the project as any other Slick2D project, and play/modify the rendering code until you understand what's going on. Only through practice and study will you get all the little ins/outs of how this works. The good news is that once you figure out how to do rendering with this basic 2D world vs. camera method, you'll pretty much know how to render graphics for all 2D apps, because the concepts translate to all languages.
我还在我的YouTube频道（最相关的视频可能是这一个，显示我的基本行人被渲染，相机移动），所以你可以看到这一切看起来像什么，而不必先建立项目。
I also have various videos of Pedestrians being run on my YouTube channel (the most relevant video is probably this one, which shows my basic pedestrians being rendered, and the camera moving around), so you can see what this all looks like without having to build the project first.
这篇关于Slick2D和JBox2D。如何绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
