让背景或相机“滚动"基于字符位置

问题描述

我正在开发一款具有自上而下视图的 RPG 游戏.我想将图片加载到角色正在行走的背景中，但到目前为止，我还没有弄清楚如何正确重绘背景以使其滚动".我发现的大多数示例都是自动滚动的.

I'm working on an RPG game that has a Top-Down view. I want to load a picture into the background which is what the character is walking on, but so far I haven't figured out how to correctly have the background redraw so that it's "scrolling". Most of the examples I find are auto scrolling.

我希望相机始终以角色为中心，直到背景图像到达其边界，然后角色将移动而无需在另一个位置重新绘制图像.

I want the camera to remained centered at the character until you the background image reaches its boundaries, then the character will move without the image re-drawing in another position.

推荐答案

你的问题有点不清楚，但我想我明白了.让我们看看您的要求.

Your question is a bit unclear, but I think I get the gist of it. Let's look at your requirements.

1. 您有一个顶置摄像头，可以直接俯视二维平面.我们可以将其表示为一个简单的 {x, y} 坐标对，对应于相机正在查看的平面上的点.
2. 摄像头可以跟踪某些对象的运动，可能是玩家，但更普遍的是游戏世界中的任何事物.
3. 相机必须保持在游戏世界的有限范围内.

这很容易实现.从广义上讲，在您的 Update() 方法中的某个地方，您需要执行一些步骤来满足这些要求中的每一个:

Which is simple enough to implement. In broad terms, somewhere inside your Update() method you need to carry out steps to fulfill each of those requirements:

if (cameraTarget != null)
{
    camera.Position = cameraTarget.Position;
    ClampCameraToWorldBounds();
}

换句话说:如果我们有一个目标对象，将我们的位置锁定到它的位置；但请确保我们不会越界.

In other words: if we have a target object, lock our position to its position; but make sure that we don't go out of bounds.

ClampCameraToBounds() 也很容易实现.假设您有一个对象 world，其中包含一个 Bounds 属性，该属性以像素为单位表示世界范围:

ClampCameraToBounds() is also simple to implement. Assuming that you have some object, world, which contains a Bounds property that represents the world's extent in pixels:

private void ClampCameraToWorldBounds()
{
    var screenWidth = graphicsDevice.PresentationParameters.BackBufferWidth;
    var screenHeight = graphicsDevice.PresentationParameters.BackBufferHeight;

    var minimumX = (screenWidth / 2);
    var minimumY = (screnHeight / 2);

    var maximumX = world.Bounds.Width - (screenWidth / 2);
    var maximumY = world.Bounds.Height - (screenHeight / 2);
    var maximumPos = new Vector2(maximumX, maximumY);

    camera.Position = Vector2.Clamp(camera.Position, minimumPos, maximumPos);
}

这可确保摄像头与世界边缘的距离不会超过屏幕的一半.为什么是半屏?因为我们将相机的 {x, y} 定义为相机正在注视的点，这意味着它应该始终位于屏幕的中心.

This makes sure that the camera is never closer than half of a screen to the edge of the world. Why half a screen? Because we've defined the camera's {x, y} as the point that the camera is looking at, which means that it should always be centered on the screen.

这应该会为您提供一个具有您在问题中指定的行为的相机.从这里开始，只需实现地形渲染器，以便相对于相机对象指定的 {x, y} 坐标绘制背景.

This should give you a camera with the behavior that you specified in your question. From here, it's just a matter of implementing your terrain renderer such that your background is drawn relative to the {x, y} coordinate specified by the camera object.

给定对象在游戏世界坐标中的位置，我们可以将该位置转换为相机空间:

Given an object's position in game-world coordinates, we can translate that position into camera space:

var worldPosition = new Vector2(x, y);
var cameraSpace = camera.Position - world.Postion;

然后从相机空间进入屏幕空间:

And then from camera space into screen space:

var screenSpaceX = (screenWidth / 2) - cameraSpace.X;
var screenSpaceY = (screenHeight / 2) - cameraSpace.Y;

然后您可以使用对象的屏幕空间坐标来渲染它.

You can then use an object's screen space coordinates to render it.

这篇关于让背景或相机“滚动"基于字符位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！