Question

最近我一直试图制作类似2D塞尔达的游戏。我想制作一个跟随播放器的相机。

所以我在我的搜索中查看了https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/translate，https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations和其他一些内容（MDN上有一篇文章但是我无法跟进，尽管它看起来不像是什么我在找。）。

我也不想让玩家居中，我想要一个有限制的相机，所以你必须在相机外面一定量才能让地图开始滚动。

function camera(data) {
    var x, y;

    if(I.x <= 2 && I.x >= -2 && I.y <= 2 && I.y >= -2) { x = 0; y = 0;}
    if(I.x >  2) { x = -I.size; y = 0; }
    if(I.x < -2) { x =  I.size; y = 0; }
    if(I.y >  2) { x = 0; y = -I.size; }
    if(I.y < -2) { x = 0; y =  I.size; }

    ctx.translate(x, y);

    draw.map();
    draw.camera();
    draw.players(data);

    ctx.resetTransform();
}

draw.map()绘制图块。 draw.camera()绘制一个小点框，以便了解相机的边界。 draw.players(data)吸引每位玩家。 I.size指的是每个图块的大小（在本例中为16）。 I.x＆amp; I.y是不言自明的。

我有一个工作版本（使用node和socket.io）： http://dais-jaackotorus.codeanyapp.com:8080/

编辑：

差点忘了！这段代码的问题在于，它只跟随播放器只有一个磁贴，然后它再也没有了，它超出了摄像头范围，而不是呆在里面，我不明白为什么。

Answer 1

这是一个简化的例子：

https://jsfiddle.net/2xbo0kas/

诀窍是开始在玩家周围绘制世界。因此，在jsfiddle中，您可以看到播放器静止但地图移动，因此播放器始终居中于视口中心。

小提琴没有显示的是一旦你到达地图的边缘（你在那里画一幅静止的地图但更新玩家矩形）的最终位置。

function draw() {
  var startx = Math.max([player.x - size.width], 0);
  var endx = Math.min(startx + size.width, map.length);
  var starty = Math.max([player.y - size.height], 0);
  var endy = Math.min(starty + size.height, map[0].length);

  for (var x = startx; x < endx; x++) {
    for (var y = starty; y < endy; y++) {
      var drawx = x - startx;
      var drawy = y - starty;

      //draw tile
    }
  }

  //draw player
}

在js游戏中的相机，关注玩家

1 个答案: