javascript - js游戏中的相机，跟随玩家

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 上有一篇关于它的文章，但我无法理解，尽管它看起来不像我要找的东西)。

我也不想只让玩家居中，我想要一个有限制的相机，所以你必须离开相机一定距离才能让 map 开始滚动。

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() 绘制图 block 。draw.camera() 画了一个小虚线框，所以我知道相机的边界。draw.players(data) 绘制每个玩家。I.size 是指每个图 block 的大小(在本例中为 16)。I.x 和 I.y 是不言自明的。

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

编辑:

差点忘了!这段代码的问题是它只跟随玩家一个方 block ，然后就不再跟随玩家了，它超出了摄像机范围而不是留在摄像机范围内，我不明白为什么。

Answer 1

这是一个简化的例子:

https://jsfiddle.net/2xbo0kas/

诀窍是开始绘制玩家周围的世界。因此，在 jsfiddle 中，您可以看到玩家是静止的，但 map 在移动，因此玩家始终位于视口(viewport)的中心。

fiddle 没有显示的是玩家到达 map 边缘后的最终位置(您将在此处绘制静止 map 但更新玩家矩形)。

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
}