如何拥有一台“相机”只显示加载区域的一部分

Question

我在弄清楚一些事情时遇到了一些问题（显然）。

我正在创建一个 2D 自上而下的大型多人在线角色扮演游戏，在这款游戏中，我希望玩家能够在平铺地图上移动，类似于 Pokemon 游戏的工作方式（如果有人玩过的话）。

如果还没有，请想象一下：我需要加载各个区域，用包含图像和位置（x，y）和对象（玩家，物品）的图块构建它们，但玩家只能在某个位置看到其中的一部分。时间，即 20 x 15 格宽的区域，可以是 100 格高/宽。我希望“摄像机”跟随玩家，将他保持在中心，除非玩家到达加载区域的边缘。

我不一定需要代码，只需要一个设计计划。我不知道该怎么做这种事情。

我正在考虑可能将整个加载区域分割成 10x10 的图块，称为“块”并加载它们，但我仍然不确定如何将图块加载到屏幕外并仅在玩家处于范围内时才显示它们。

图片应该描述一下：

有什么想法吗？

---

我的解决方案： 我解决这个问题的方法是通过 JScrollPanes 和 JPanel 的奇妙世界。

我在 JScrollPane 内部添加了一个 3x3 的 JPanel 块，添加了几个滚动和“goto”方法用于居中/移动 JScrollPane，瞧，我有了相机。

虽然我选择的答案对于想要使用 2d 相机的人来说有点通用东西，我这样做的方式实际上帮助我更好地想象我正在做的事情，因为我实际上有一个物理“相机”（JScrollPane）可以在我的“世界”（JPanels 的 3x3 网格）中移动

只是想我会把这个贴在这里，以防有人在谷歌上搜索答案而出现这个问题。 :)

Answer 1

对于 2D 游戏，如果图块是矩形，则很容易找出哪些图块落在视图矩形内。基本上，在更大的世界矩形内绘制一个“视口”矩形。通过将视图偏移量除以图块大小，您可以轻松确定起始图块，然后仅渲染适合视图内的图块。

首先，您在三个坐标系中工作：视图、世界和地图。视图坐标本质上是鼠标相对于视图左上角的偏移量。世界坐标是距图块 0, 0 左上角的像素距离。我假设您的世界从左上角开始。地图坐标是地图数组中的 x、y 索引。

您需要在这些之间进行转换，以便执行“奇特”的操作，例如滚动、确定鼠标下方的图块以及在视图中的正确坐标处绘制世界对象。因此，您需要一些函数来在这些系统之间进行转换：

// I haven't touched Java in years, but JavaScript should be easy enough to convey the point

var TileWidth = 40,
    TileHeight = 40;

function View() {
    this.viewOrigin = [0, 0];   // scroll offset
    this.viewSize = [600, 400];
    this.map = null;
    this.worldSize = [0, 0];
}

View.prototype.viewToWorld = function(v, w) {
    w[0] = v[0] + this.viewOrigin[0];
    w[1] = v[1] + this.viewOrigin[1];
};

View.prototype.worldToMap = function(w, m) {
    m[0] = Math.floor(w[0] / TileWidth);
    m[1] = Math.floor(w[1] / TileHeight);
}

View.prototype.mapToWorld = function(m, w) {
    w[0] = m[0] * TileWidth;
    w[1] = m[1] * TileHeight;
};

View.prototype.worldToView = function(w, v) {
    v[0] = w[0] - this.viewOrigin[0];
    v[1] = w[1] - this.viewOrigin[1];
}

有了这些函数，我们现在可以渲染地图的可见部分......

View.prototype.draw = function() {
    var mapStartPos = [0, 0],
    worldStartPos = [0, 0],
    viewStartPos = [0, 0];
    mx, my, // map coordinates of current tile
    vx, vy; // view coordinates of current tile

    this.worldToMap(this.viewOrigin, mapStartPos); // which tile is closest to the view origin?
    this.mapToWorld(mapStartPos, worldStartPos);    // round world position to tile corner...
    this.worldToView(worldStartPos, viewStartPos);  // ... and then convert to view coordinates. this allows per-pixel scrolling

    mx = mapStartPos[0];
    my = mapStartPos[y];

    for (vy = viewStartPos[1]; vy < this.viewSize[1]; vy += TileHeight) {
        for (vx = viewStartPos[0]; vx < this.viewSize[0]; vy += TileWidth) {
            var tile = this.map.get(mx++, my);
            this.drawTile(tile, vx, vy);
        }
        mx = mapStartPos[0];
        my++;
        vy += TileHeight;
    }
};

这应该可行。我没有时间制作一个可用的演示网页，但我希望您能明白。
通过更改 viewOrigin 您可以滚动。要获取鼠标下的世界和地图坐标，请使用 viewToWorld 和 worldToMap 函数。

如果您计划使用等距视图，即《暗黑破坏神》，那么事情就会变得相当棘手。

祝你好运！

Answer 2

我做这样的事情的方法是保留一个名为“cameraPosition”或其他名称的变量。然后，在所有对象的draw方法中，使用cameraPosition来偏移所有物体的位置。

例如：岩石位于[100,50]，而相机位于[75,75]。这意味着岩石应绘制在 [25,-25] （[100,50] - [75,75] 的结果）。

您可能需要稍微调整一下才能使其正常工作（例如，您可能必须补偿窗口大小）。请注意，您还应该进行一些剔除 - 如果想要在 [2460,-830] 处绘制某些内容，您可能不想费心绘制它。

Answer 3

一种方法是沿着双缓冲（ Java 双缓冲 ）和 blitting（http://download.oracle.com/javase/tutorial/extra/fullscreen/doublebuf.html ）。甚至还有与之相关的设计模式（ http:// www.javalobby.org/forums/thread.jspa?threadID=16867&tstart=0）。