軟件項目技術點(1)——游戲主循環機制 - fangsmile－IT工程師數位筆記本

文章出處

游戲主循環介紹

我們利用“游戲主循環”的機制來繪制動態的畫布，渲染循環。

我們首先補充一下游戲主循環的知識。

“游戲主循環”是一種能夠隨時間改變狀態的用于渲染動畫和游戲的技術。它的核心是一個盡可能頻繁地運行的方法，來接收用戶輸入，更新隨時間改變的狀態，然后繪制當前幀。由于游戲需要根據輸入、游戲內狀態的改變來不間斷地更新游戲畫面，所以游戲的主循環往往看起來像一個“死循環”，那么這個“死循環”是如何工作的？

主循環主要做什么？

1.處理游戲邏輯(輸入、AI、事件處理)

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

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

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

Initialize方法用于初始化與游戲相關的對象，比如初始化圖形設備、游戲環境設置等。

LoadContent方法在Initialize方法之后調用，它用于加載游戲所需要的圖形或其它素材，比如模型、圖片、聲音等。

Update和Draw方法構成了游戲循環。

Update方法用于改變和控制游戲的狀態，主導著游戲邏輯的進行。

Draw方法用于在屏幕上繪制我們的場景、Sprite。要注意的是，我們應該盡可能少的在Draw方法中處理游戲邏輯——它們應該在Update方法中被處理。Draw方法僅僅負責繪制。

Update和Draw方法都接受一個GameTime類型的參數，GameTime有什么作用了？這個參數可以幫助我們依據實際的游戲時間而不是處理器的速度來決定動畫或其它事件的發生時刻。

應用到項目中

下面展示幾段在我們實際的項目中實際的代碼。

下面的函數run方法是循環開啟的入口：

 1         public run() {
 2             var that = this;
 3             var FRAMES_PER_SECOND: number = 30;//最大幀率，每秒刷新的次數
 4             var SKIP_TICKS: number = 1000 / FRAMES_PER_SECOND;//兩次繪制之間的時間間隔
 5             var next_game_tick: number = Date.now();//第一次繪制開始計時
 6             var loop = function () {
 7                 var curTime = Date.now();
 8                 if (curTime >= next_game_tick) {
 9                     　　next_game_tick = curTime;
10 　　　　　　　　　　　　　　that.update();
11 　　　　　　　　　　　　　　that.draw();
12                     }
13                 next_game_tick += SKIP_TICKS;
14 
15                 window.requestAnimationFrame(loop);
16             }
17             window.requestAnimationFrame(loop); 
18 }

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

 window.requestAnimationFrame = (function () {
     return return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||function (callback) {
           window.setTimeout(callback, 1000 / 40);     };
 })();