問(wèn)題描述

我正在開(kāi)發(fā)一款具有自上而下視圖的 RPG 游戲.我想將圖片加載到角色正在行走的背景中，但到目前為止，我還沒(méi)有弄清楚如何正確重繪背景以使其滾動(dòng)".我發(fā)現(xiàn)的大多數(shù)示例都是自動(dòng)滾動(dòng)的.

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.

我希望相機(jī)始終以角色為中心，直到背景圖像到達(dá)其邊界，然后角色將移動(dòng)而無(wú)需在另一個(gè)位置重新繪制圖像.

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.

推薦答案

你的問(wèn)題有點(diǎn)不清楚，但我想我明白了.讓我們看看您的要求.

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

1. 您有一個(gè)頂置攝像頭，可以直接俯視二維平面.我們可以將其表示為一個(gè)簡(jiǎn)單的 {x, y} 坐標(biāo)對(duì)，對(duì)應(yīng)于相機(jī)正在查看的平面上的點(diǎn).
2. 攝像頭可以跟蹤某些對(duì)象的運(yùn)動(dòng)，可能是玩家，但更普遍的是游戲世界中的任何事物.
3. 相機(jī)必須保持在游戲世界的有限范圍內(nèi).

這很容易實(shí)現(xiàn).從廣義上講，在您的 Update() 方法中的某個(gè)地方，您需要執(zhí)行一些步驟來(lái)滿足這些要求中的每一個(gè):

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();
}

換句話說(shuō):如果我們有一個(gè)目標(biāo)對(duì)象，將我們的位置鎖定到它的位置；但請(qǐng)確保我們不會(huì)越界.

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() 也很容易實(shí)現(xiàn).假設(shè)您有一個(gè)對(duì)象 world，其中包含一個(gè) 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);
}

這可確保攝像頭與世界邊緣的距離不會(huì)超過(guò)屏幕的一半.為什么是半屏?因?yàn)槲覀儗⑾鄼C(jī)的 {x, y} 定義為相機(jī)正在注視的點(diǎn)，這意味著它應(yīng)該始終位于屏幕的中心.

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.

這應(yīng)該會(huì)為您提供一個(gè)具有您在問(wèn)題中指定的行為的相機(jī).從這里開(kāi)始，只需實(shí)現(xiàn)地形渲染器，以便相對(duì)于相機(jī)對(duì)象指定的 {x, y} 坐標(biāo)繪制背景.

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.

給定對(duì)象在游戲世界坐標(biāo)中的位置，我們可以將該位置轉(zhuǎn)換為相機(jī)空間:

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;

然后從相機(jī)空間進(jìn)入屏幕空間:

And then from camera space into screen space:

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

然后您可以使用對(duì)象的屏幕空間坐標(biāo)來(lái)渲染它.

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

這篇關(guān)于讓背景或相機(jī)“滾動(dòng)"基于字符位置的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！