微软 编程 php Windows linux centos Android Ubuntu shell nginx wordpress Python google java 程序员 mysql 开源 云计算 Firefox apache

《HTML5 2D遊戲編程核心技術》——第1章,第1.2節HTML5遊戲開發最佳實踐

1.2 HTML5遊戲開發最佳實踐

我們將在本書中持續地討論一些關於遊戲開發的最佳實踐,首先介紹7個與HTML5有關的實踐。
1)窗口失去焦點時暫停遊戲。
2)窗口重新獲得焦點時實現倒計時。
3)使用CSS實現UI特效。
4)對於運行緩慢的遊戲做出檢測和處理。
5)添加社交功能。
6)把所有的遊戲圖像放在單獨的Sprite表單中。
7)在服務器中存儲高分榜和實時遊戲數據。
在接下來的章節中,我們將詳細地討論上面提到的最佳實踐。本節先通過快速瀏覽這些實踐來介紹Snail Bait遊戲的特點。

1.2.1 窗口失去焦點時暫停遊戲
在瀏覽器中運行HTML5遊戲時,如果將焦點改變到另一個標簽頁或瀏覽器窗口上,那麽大部分瀏覽器都會降低遊戲動畫運行的幀頻,以便節約CPU和電池的開銷。因為在窗口或者標簽頁上浪費不可見的資源是沒有必要的。
幀速率鎖定破壞了大多數的碰撞檢測算法,因為這些算法會在遊戲繪制每一個動畫幀時檢測碰撞。如果在兩個動畫幀之間花費太長時間,sprite對象會越過彼此而沒有碰撞檢測。為了避免這種幀速率鎖定導致的碰撞檢測崩潰,必須在窗口失去焦點時暫停遊戲。
如圖1.5所示,當Snail Bait遊戲暫停時,它會顯示一個提示信息,讓玩家知道遊戲暫停。


b7d3d976e7cf17dd3b1f275a0d7d7c4be9e0b4e8


 

圖1.5 Snail Bait暫停
暫停不僅僅是停止遊戲
當一個暫停的遊戲恢復運行時,所有狀態必須和遊戲暫停時的狀態相同。例如在圖1.5中,當比賽恢復時,跑步小人必須在遊戲暫停時所在的位置繼續跳躍。
除了暫停和恢復遊戲之外,還必須要凍結和解凍遊戲,確保在遊戲恢復時有一個平滑的轉換。我們將在第4章詳細地討論暫停遊戲。
提示信息(toast)
toast原意是指舉起酒杯為人的健康幹杯,這裏是指短時間內向玩家顯示遊戲信息。如圖1.5所示,toast可以是簡單的文本,也可以顯示傳統對話框,如圖1.8所示。
1.2.2 窗口重獲焦點時實現倒計時功能
當窗口重新獲取焦點時,應該給玩家幾秒鐘準備重新開始遊戲。Snail Bait遊戲在窗口重新獲取焦點時,提供了3秒鐘的倒計時準備時間,如圖1.6所示。


4c10a24ba870f9149f525bff7ef2a3e48ffde1af

圖1.6 Snail Bait在窗口重新獲取焦點時的倒計時
1.2.3 使用CSS實現UI特效
圖1.7顯示了遊戲加載後短時間內的截圖。
重點註意圖1.7中的兩個物體。第一,顯示了包含簡單文字的提示信息。這個提示信息在遊戲加載時淡入,5秒後淡出。

 


8f05e5a72bdad9551277e9a22d8d557a9311344d

圖1.7 Snail Bait遊戲中的提示信息
第二,如圖1.7所示,在遊戲開始時,canvas下面的復選框(控制聲音和音樂)和說明文字(講述哪些按鍵有哪些功能)是不透明的,而遊戲頂部的生命提示符和分數板是半透明的。當遊戲提示信息漸漸消失時,透明度發生反轉;生命提示符和分數板變得不透明,而復選框和說明文字變得幾乎完全透明,如圖1.6所示。
Snail Bait遊戲使用CSS3漸變屬性來實現元素的淡化顯示及提示板的淡入淡出效果。
聚焦當前重要的事件
當Snail Bait遊戲開始時,canvas下面的介紹是不透明的,而canvas上面的生命提示符和分數板是半透明的。過一會之後,它們的不透明度會發生變化;canvas上面的元素會變得完全不透明,而canvas下面的元素變得半透明。
Snail Bait遊戲之所以會具有如此復雜的操作,與當前關註的重點是什麽有密切關系。初始化時,玩家會關註遊戲下面的說明文字;而遊戲一旦開始後,玩家將更加關註他們的得分情況以及剩余生命的數量。

1.2.4 對遊戲運行緩慢的狀態做出檢測和處理
與控制臺遊戲運行在受控環境中不同,HTML5遊戲運行在一個高度變化且不可預測的混亂環境中。玩家的某些操作可以直接影響到系統的性能,例如,在另一個瀏覽器標簽頁或窗口中播放YouTube視頻。另外,一些其他性能殺手,例如玩家並不了解的在系統後臺運行的進程,也可能輕松地使HTML5遊戲變得運行緩慢,甚至變得不可玩。還有一種可能是玩家使用了不能保障遊戲正常運行的瀏覽器。
作為HTML5遊戲開發人員,必須要監測幀速率,當它降低到某個影響運行的閾值時做出處理。當Snail Bait遊戲檢測到最後10幀動畫速率低於40幀每秒(fps)時,它會顯示遊戲運行緩慢的通知信息如圖1.8所示。


889791a5a1966fb740527d0385017b149417a553

 

圖1.8
1.2.5 添加社交功能
許多現代遊戲融合了社交功能,例如,將遊戲分數發布到Twitter或者Facebook上。當Snail Bait遊戲玩家點擊遊戲底部(如圖1.4所示)的Tweet my score鏈接時,Snail Bait遊戲會在另一個瀏覽器標簽頁上創建一個發布分數的推特交互窗口,如圖1.9所示。


ed1a06b524825a6019cf87b326d435ddc3d47995

1.2.6 將所有遊戲圖像放在單獨的sprite表單中
開發人員可以通過做很多事情使HTML5遊戲(或者任何HTML5應用)加載得更快,但是最有效的辦法是減少向服務器發送HTTP請求的次數。一種實現該方法的途徑是將所有遊戲圖像放到一個單獨的圖像裏,這個單獨的圖像被稱為sprite表單(sprite sheet)。圖1.10顯示了Snail Bait遊戲的sprite表單。
圖1.10 Snail Bait遊戲的sprite表單(灰色背景是透明的)


f9886edc0b68571cec686378e9d6711d3556f133

Snail Bait遊戲的sprite表單
當Snail Bait遊戲繪制sprite對象時,它會從sprite表單中復制對象到canvas中。
移動設備上的sprite表單
一些移動設備的內存空間限制了圖像文件的大小,如果sprite表單太大,則需要將它分成多個文件。這樣遊戲的加載將會變得緩慢,但是總比沒有加載上要好很多。

1.2.7 在服務器中存儲高分榜和實時遊戲數據
大多數遊戲會因為各種原因同服務器進行交互。Snail Bait遊戲在服務器中存儲高分榜數據,並在遊戲進行時發送遊戲數據。Snail Bait遊戲未使用任何第三方圖像架構;但它使用了兩個JavaScript架構——Node.js和socket.io,用來實現玩家電腦和服務器的信息交互。第19章介紹了更詳細的信息。

延伸阅读

    评论