2012-03-06 107 views
9

我已經爲2D策略遊戲編寫了一個家釀brew view_port類。搖攝(箭頭鍵)和縮放(鼠標滾輪)做工精細,但我的觀點一樣,也朝無論光標放置,如Google Maps or Supreme Commander放大鼠標(例如谷歌地圖)

我就不告訴你細節如何實現縮放,甚至是使用什麼語言:這都是無關緊要的。最重要的是縮放功能,它修改表示視圖的矩形結構(x,y,w,h)。到目前爲止,代碼如下所示:

void zoom(float delta, float mouse_x, float mouse_y) 
{ 
    zoom += delta; 
    view.w = window.w/zoom; 
    view.h = window.h/zoom; 
    // view.x = ??? 
    // view.y = ??? 
} 

之前有人建議它,下面將工作:

view.x = mouse_x - view.w/2; 
view.y = mouse_y - view.h/2; 

該圖展示爲什麼當我試圖向笑臉放大:

http://oi43.tinypic.com/16m21au.jpg

正如你可以看到當鼠標下方的物體被放置在叔他屏幕中心停在鼠標下面,所以我們停止縮放它!

如果你有一個數學頭(你需要一個)任何幫助,這將是最感謝!

回答

7

我設法找出瞭解決方案,這要歸功於很多頭腦細節:我會在這裏發佈算法,以防其他人需要它。

Vect2f mouse_true(mouse_position.x/zoom + view.x, mouse_position.y/zoom + view.y); 
Vect2f mouse_relative(window_size.x/mouse_pos.x, window_size.y/mouse_pos.y); 
view.x = mouse_true.x - view.w/mouse_relative.x; 
view.y = mouse_true.y - view.h/mouse_relative.y; 

這確保放置在鼠標下的對象留在鼠標下面。您可以查看github上的代碼,並且我還爲youtube做了展示演示。

+1

你能詳細說明一下變量的含義嗎? – WebF0x 2017-10-02 12:42:37

1

在我的概念中有一個攝像頭和一個屏幕。 相機是移動部分。屏幕是可擴展的部分。

我做了一個示例腳本,包括一個現場演示。 爲了簡單起見,問題僅被降低到一個維度。 https://www.khanacademy.org/cs/cam-positioning/4772921545326592

var a = (mouse.x + camera.x)/zoom; 

// now increase the zoom e.g.: like that: 
zoom = zoom + 1; 

var newPosition = a * zoom - mouse.x; 

camera.setX(newPosition); 
screen.setWidth(originalWidth * zoom); 

對於2D例如,你可以簡單地添加相同的代碼的高度和y的位置。