軟體專案技術點 1 遊戲主迴圈機制

axeslide軟體專案梳理 canvas繪圖系列知識點整理

我們利用「遊戲主迴圈」的機制來繪製動態的畫布，渲染迴圈。

我們首先補充一下遊戲主迴圈的知識。

「遊戲主迴圈」是一種能夠隨時間改變狀態的用於渲染動畫和遊戲的技術。它的核心是乙個盡可能頻繁地執行的方法，來接收使用者輸入，更新隨時間改變的狀態，然後繪製當前幀。由於遊戲需要根據輸入、遊戲內狀態的改變來不間斷地更新遊戲畫面，所以遊戲的主迴圈往往看起來像乙個「死迴圈」，那麼這個「死迴圈」是如何工作的？

1.處理遊戲邏輯(輸入、ai、事件處理)

2.執行渲染操作(更新遊戲畫面)

整個遊戲會按如下流程運轉。

該圖中的五個方法它們的作用解釋如下。

initialize方法用於初始化與遊戲相關的物件，比如初始化圖形裝置、遊戲環境設定等。

loadcontent方法在initialize方法之後呼叫，它用於載入遊戲所需要的圖形或其它素材，比如模型、、聲音等。

update和draw方法構成了遊戲迴圈。

update方法用於改變和控制遊戲的狀態，主導著遊戲邏輯的進行。

draw方法用於在螢幕上繪製我們的場景、sprite。要注意的是，我們應該盡可能少的在draw方法中處理遊戲邏輯——它們應該在update方法中被處理。draw方法僅僅負責繪製。

update和draw方法都接受乙個gametime型別的引數，gametime有什麼作用了？這個引數可以幫助我們依據實際的遊戲時間而不是處理器的速度來決定動畫或其它事件的發生時刻。

下面展示幾段在我們實際的專案中實際的**。

下面的函式run方法是迴圈開啟的入口：

1
public run() 
13 next_game_tick +=skip_ticks;
1415
window.requestanimationframe(loop);16}
17window.
requestanimationframe
(loop); 
18 }

window.requestanimationframe(callback) 方法請求瀏覽器在下一次重繪之前盡可能快地呼叫特定的方法。它是渲染動畫專用的 api，但你也可以用 settimeout 方法設定乙個短的超時時間來達到相似的效果。如下對requestanimationframe 進行重寫：

window.requestanimationframe = (function
() ;
})();

that.update()更新畫布上每個元素的位置和屬性

that.draw()繪製新一幀，根據每個元素的當前狀態將其繪製到畫布上

我們在繪製draw之前進行了判斷if (curtime >= next_game_tick)後，再確定要進行一次繪製。這是因為如果將loop()置於迴圈中放任不管，幀率會居高不下，與此同時機器的cpu使用率高居不下，於是產生了一種固定幀率的做法。我們這裡幀率最大30

軟體專案技術點 1 遊戲主迴圈機制

結對專案1 黃金點遊戲

黃金點遊戲專案開發記錄1

軟體工程結對專案之黃金點遊戲

軟體專案技術點 1 遊戲主迴圈機制

結對專案1 黃金點遊戲

黃金點遊戲專案開發記錄1

軟體工程結對專案之黃金點遊戲

相關推薦