無限空間，相機偏移量計算

Question

我正在開發一款遊戲引擎。房間的尺寸爲10000 x 10000點，相機（畫布）的尺寸爲800 x 600.房間表示空間無限，超出限制的物體重新出現在另一側。當相機矩形超過至少一個限制時，問題就會出現，極限另一側的對象應該顯示爲連續空間。 我試過幾種方法來做到這一點，但沒有一個似乎是一個優雅的解決方案。 有什麼想法？

視口

四個紅色的盒是相機。 4個藍色方塊是房間的可見部分

使對象傳遞到另一方很容易。但要計算什麼對象繪製和偏移應用到他們每個（在畫布內的偏移量）..我的頭腦是空白的。 我需要找到一個最佳解決方案。

Answer 1

您可以兩次打印場景。假設場景的頂部邊界位於視口內部：您在該邊界上方和下方一次打印場景。你可以爲其他邊界做同樣的事情。顯然，這可以進行優化，但應該可以工作。

Answer 2

另一種使用模運算符來實現翻譯的方法。看到這個例子jsfiddle

使用圖像作爲房間和畫布作爲視口，以下代碼允許將房間看作是畫布中的環繞。

嘗試使用dx和dy的值來查看效果。 在實踐中不會

在

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