无限空间，相机偏移计算

Question

我正在开发一款游戏引擎。房间尺寸为10000 x 10000点，相机（帆布）尺寸为800 x 600.房间代表空间无限，超出限制的物体重新出现在另一边。当相机矩形超过至少一个限制时出现问题， 极限另一侧的物体应该看起来好像是一个连续的空间。 我已经尝试了几种方法来做到这一点，但它们似乎都不是一个优雅的解决方案。 任何想法？

VIEWPORT

四个红色框是相机。 4个蓝色方框是房间的可见部分

将对象传递给另一方很容易。但要计算绘制的对象和应用于每个对象的偏移量（画布中的偏移量）..我的想法是空白的。 我需要找到一个最佳解决方案。

Answer 1

您可以打印场景两次。假设场景的顶部边框位于视口内：您可以在该边框上方和下方打印一次场景。您可以对其他边框执行相同的操作。显然，这可以优化，但应该有效。

Answer 2

使用模运算符实现翻译的替代方法。请参阅此jsfiddle

上的示例

将图像用作房间和画布作为视口，以下代码允许将房间视为画布中的环绕。

尝试dx和dy的值以查看效果。 在实践中，不会使用img标签，因此只能通过画布的视口看到房间

in

<img id='room'>
<canvas id='canv' width=100 height=75></canvas>

代码

im=new Image();
im.src='http://www.all-sweets.com/gradient-wallpaper/gradient-background/gradient-background-3.jpg';
im.onload=function() {
    document.getElementById('room').src=im.src; 
    c=document.getElementById('canv');
    cx=c.getContext('2d');
    cw=c.width;
    ch=c.height;
    iw=im.width;
    ih=im.height;
    x=0;//x value of  top left corner of viewport
    y=0;//y value of top left corner of viewport
    //displacement much less than image width or height
    //build up of displacement move viewport
/*************************************************************** 
Displacements would be set as viewport moves
Manually change these values below to see effect on viewport.
Shown image is 400px by 300px
set dx to 350   and dy to 260 for example to see overlap effect
****************************************************************/
    dx=0;//displacement from current x
    dy=0;//displacement from current y

//*************************************************************** 
    x+=dx;//new x position
    x=x%iw; //modulo translates relative to room coordinates
    x=(x+iw)%iw;//deals with negative x
    y+=dy;//new y position
    y=y%ih;//modulo translates relative to room coordinates
    y=(y+ih)%ih;//deals with negative y
    if(x+cw<iw && y+ch<ih) { //totally inside room
       cx.drawImage(im, x, y, cw, ch, 0, 0, cw, ch); 
    }
    else if(x+cw>=iw && y+ch<ih) { //extends beyond room on right only
        cx.drawImage(im, x, y, iw-x, ch, 0, 0, iw-x, ch);
        cx.drawImage(im, 0, y, x+cw-iw, ch, iw-x, 0, x+cw-iw, ch);
    }
    else if(x+cw<iw && y+ch>=ih) {//extends beyond room at bottom only
        cx.drawImage(im, x, y, cw, ih-y, 0, 0, cw, ih-y);
        cx.drawImage(im, x, 0, cw, y+ch-ih, 0, ih-y, cw, y+ch-ih);
    }
    else {//extends beyond room on right and bottom
        cx.drawImage(im, x, y, iw-x, ih-y, 0, 0, iw-x, ih-y);
        cx.drawImage(im, 0, y, x+cw-iw, ih-y, iw-x, 0, x+cw-iw, ih-y);
        cx.drawImage(im, x, 0, iw-x, y+ch-ih, 0, ih-y, iw-x, y+ch-ih);
        cx.drawImage(im, 0, 0, x+cw-iw, y+ch-ih, iw-x, ih-y, x+cw-iw, y+ch-ih);
    }
}