HTML5 2D平台遊戲開發 1

在web領域通常會用到一組sprite來展示動畫，這類動畫從開始到結束往往不會有使用者參與，即使用者很少會用控制器(例如滑鼠、鍵盤、手柄、操作杆等輸入裝置)進行操作。但在遊戲領域，sprite動畫與控制器的操作是密不可分的。最近在寫乙個小遊戲，涉及到很多知識點，於是打算把這些內容通過一些demo總結出來備忘。

這是第一階段的執行效果,用鍵盤a、d來控制人物左右移動，空格/k控制人物跳躍，u鍵衝刺：

/*
* *@param frames 元資料 
*@param options 可選配置 */
function
animation(frames,options) ];
this.options = options ||;
}

說明一下上面的**，函式有兩個引數，其中frames為元資料(metadata)，用於標識一組sprite的座標資訊，為何需要這個資料呢，先來看一張圖：

可以發現每一幀的sprite大小都不一致，特別是第二排，並不是規則的sprite，因此需要將各幀的位置大小等資訊標識出來。例如這是第一排的元資料：

//
人物站立時的幀動畫
var idle =[,,
,,,,
,,];

其中x,y代表所使用sprite的位置，w,h表示該sprite的寬高，offset用於修正sprite的位置，duration表示該sprite持續的時間。

題外話：如果手工處理這些sprite資訊是相當繁瑣的，有一款軟體叫做texturepacker專門用來生成sprite sheets。

接著新建乙個animationplayer來管理animation：

//
@param animation animation的例項
function
animationplayer(animation)

//
重置動畫
animationplayer.prototype.reset = function
() ;
animationplayer.prototype.setanimation = function
(animation) ;
animationplayer.prototype.update = function
(dt) 
if (this.index >= this
.length) 
this.frame = this.animation.frames[this
.index];
};

最後在使用的時候將其實例化：

//
站立var animation = new
animation(idle, );
var playeridle = new
animationplayer(animation);
//移動
var animation2 = new
animation(move, );
var playermove = new animationplayer(animation2);

遊戲執行的機制就是在每一次gameloop中更新所有遊戲元件的狀態，例如更新元件的位置，碰撞檢測，銷毀元件等等。大體來說**一般都具有以下結構：

(function
render() )();

在本demo的gameloop中主要執行的邏輯有：

基於時間的運動(time-base)是保證遊戲執行良好的關鍵，假設有兩台裝置，一台每1秒執行一次遊戲迴圈，另一台每2秒執行一次，並且物體以每次5px的速度移動，那麼在2秒後第一台裝置中的物體移動了2x5=10px，第二台裝置中的物體移動了1x5=5px。很顯然，經過相同的時間但最終物體達到了不同的位置，這是不合理的。如果採用基於時間的運動，則通過公式s += vt可以發現，第一台裝置在經過兩秒後移動的距離為5x1+5x1=10px，第二台裝置移動的距離為5x2=10px，於是兩台裝置達到了一致的效果。更新後的render方法**如下：

var lastanimationframetime = 0,
elapsed = 0,
now;
(function
render() 
lastanimationframetime =now;
//執行遊戲邏輯
//將更新狀態後的元件重新繪製到畫布上
requestanimationframe(render); 
//進入下一次遊戲迴圈
})();

if (key[65])  
else
if (key[68]) 
else
currentmotion =motion[playerstate];
currentmotion.update(elapsed);
if (direction === 1) 
else

如果在遊戲執行期間視窗失去焦點，則應當暫停遊戲，因為此時瀏覽器會以低幀率執行遊戲以節省開銷，這樣導致的結果就是當玩家返回視窗時，deltatime會有**性的增長，從而使元件更新異常。最常見的是一些碰撞檢測不能正常工作或者遊戲人物高速移動。因此當視窗失去焦點時，應當暫停遊戲。在主流瀏覽器中，可以用下面的**標識暫停：

document.addeventlistener('visibilitychange',function
() 
else
});

同時更新render方法：

(function
render() ,200);
} else
})();

summary

以上就是這個demo的主要知識點，暫時先總結到這，後面有時間還會陸續更新。

demo

2017/4/9　　更新角色跳躍

2017/4/21　更新角色衝刺

2017/5/1　　更新角色狀態機

2017/5/16 更新角色攻擊動畫

HTML5 2D平台遊戲開發 1

HTML5 2D平台遊戲開發 11斜坡物理

2D遊戲開發（1）

D3D遊戲開發1之準備

HTML5 2D平台遊戲開發 1

HTML5 2D平台遊戲開發 11斜坡物理

2D遊戲開發（1）

D3D遊戲開發1之準備

相關推薦