phaser小遊戲框架學習（一）
這兩天由於項目的需要，所以簡單學了一下phaser框架。
官網：http://phaser.io/
還有一個phaser小站，是中文的網站，但是內容不如英文文檔全，大家也可以去看這個網站，需要查閱API時，再去英文網站也可以 ：https://www.phaser-china.com
分享一下入門教程：http://club.phaser-china.com/topic/59899a81484a53dd723f422b
demo地址：https://github.com/dreamITGirl/phaser (持續更新中...)
先簡單介紹一下pahser。
一、什麽是phaser?
Phaser是一款專門用於桌面及移動HTML5 2D遊戲開發的開源免費框架，提供JavaScript和TypeScript雙重支持，內置遊戲對象的物理屬性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基於瀏覽器支持可自由切換。
二、phaser的特點：
快速、免費、易於維護，使用Phaser來開發2D小遊戲的優勢顯而易見。一方面，開發者可以直接通過Koding平臺上的VM開發系統進行代碼編寫及預覽。另一方面，也可以在支持Canvas的瀏覽器中直接安裝Phaser來進行遊戲開發。
多種支持：JavaScript、TypeScript雙重支持、內置遊戲對象的物理屬性、WebGL、Canvas渲染自由切換、完全支持Web音頻、輸入：多點觸控、鍵盤、鼠標、MSPointer事件。
兼容性強：除了IE 9+、Firefox、Chrome、Safari及Opera等桌面瀏覽器之外，Phaser還支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移動瀏覽器。使用Phaser進行遊戲開發沒有任何語言設定。
三、創建遊戲和新增場景
1、使用方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/reset.css" /> <title></title> <style> body{ width:100%; height:100%; overflow: hidden; } </style> </head> <body> <script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script> <script type="text/javascript" src="js/phaser.min.js" ></script> <!--加載遊戲圖片資源和精靈圖--> <script type="text/javascript" src="js/demo01.js" ></script> </body> </html>
2、創建遊戲對象
這個裏面有一個問題，如果我頁面中沒有加1.png中的紅框部分的代碼，頁面會有一個偏移量（當然，偏移量僅在移動端出現）問題頁面如下圖顯示
在屏幕的右側和底部都會有一個黑色的部分，但是canvas的區域也包含這一部分，所以，我們需要根據不同的手機，算一下偏移量，在封裝添加圖片或者精靈圖的時候，計算尺寸中加上偏移量。
這一部分我會在後面的博客中寫。本篇不做介紹。
var game = new Phaser.Game({
width:800,//用戶自己設置的屏幕寬度，這裏以800*600為例
height:600,
canvas:$(‘canvas‘)[0],//由於我在html中添加了<canvas></canvas>標簽，而我使用的是webGL的方式。這一行可以不設置
})
這樣基礎的game對象我們就創建好了，接下來就是創建場景，我以項目為例，大家可以參考上一個圖，可以從圖上分析一下，從圖上來看我至少需要創建7個場景，分別是Load場景，menu場景，還有圖上的5個場景。而在Menu場景中，進入到下面的5個場景的按鈕都是可點擊的。所以，我們采用了game.States的狀態管理
game.States = {} game.States.Load = function (){ } game.States.Menu = function (){ } game.States.Billboard = function (){ } game.States.Rule = function (){ } game.state.add(‘Load‘,game.States.Load) game.state.add(‘Menu‘,game.States.Menu) game.state.add(‘Billboard‘,game.States.Billboard) game.state.add(‘Rule‘,game.States.Rule) game.state.start(‘Load‘)
由於在同一時間，同一頁面只能執行一個場景，所以我們在用戶一開始進入頁面時首先執行Load場景
四、遊戲資源的加載添加
這裏以加載精靈圖和圖片為例，加載音頻，還有其他的媒體文件大家可以去看文檔
//加載圖片 this.load.image(key,url);//key代表你為這個圖片起的名字，url代表圖片的路徑 //添加圖片 game.add.image(x,y,key);//x表示在該圖片在水平方向的偏移量，y表示該圖片在垂直方向的偏移量 //加載精靈圖 this.load.spritesheet(key,url,size,num)//size代表一大張精靈圖中我們用到的這個精靈圖的大小，num代表這個大的精靈圖中包含幾個我們的小的精靈圖，num可不寫，若不寫，插件會自己算 //添加精靈圖 game.add.sprite(x,y,key)//這個上面本身是沒有事件的，如果使用這種方式添加，後面還是要額外添加該精靈圖的點擊事件。 //由於需求需要，我把Menu中的添加精靈圖的方式換成了添加button的方式 game.add.button(x,y,key,callback,callbackContext,overFrame, outFrame, downFrame, upFrame, group)//callbackContext表示callback執行的上下文，默認是game。
//overFrame, outFrame, downFrame, upFrame,指的是按鈕的4種狀態，group該精靈圖屬於哪個組
實例代碼：
//封裝的全局方法，添加圖片
function addImage(x,y,key,w,h){ var IMAGE = game.add.image(x*bl,y*bl,key) IMAGE.width = w*bl; IMAGE.height = h*bl; return IMAGE }
//封裝的全局方法，添加精靈圖
function addSprite(x,y,key,w,h,callback){ var SPRITE = game.add.button(x*bl,y*bl,key,callback,game,1,0,2) SPRITE.width = w*bl SPRITE.height = h*bl return SPRITE }
使用實例
game.States.Load = function (){
this.init = function(){
this.stage.disableVisibilityChange = true; //當頁面失去焦點時動畫，倒計時仍繼續執行
}
this.preload = function(){
this.load.image(‘bg‘,‘./images/bg.png‘)
this.load.image(‘menu-score‘,‘./images/menu-score.png‘)
this.load.spritesheet(‘menu-logo‘,‘./images/menu-logo.png‘,560,248,4)
this.load.spritesheet(‘menu-one‘,‘./images/menu-one.png‘,560,150,3)
this.load.spritesheet(‘menu-pk‘,‘./images/menu-pk.png‘,560,150,3)
this.load.spritesheet(‘menu-rank‘,‘./images/menu-rank.png‘,560,150,3)
this.load.spritesheet(‘menu-list‘,‘./images/menu-list.png‘,260,150,3)
this.load.spritesheet(‘menu-rule‘,‘./images/menu-rule.png‘,260,150,3)
}
this.create = function(){
this.add.image(0,0,‘bg‘)
addImage(40,40,‘menu-logo‘,560,248).animations.add(‘shark‘).play(10,true)
addImage(40,318,‘menu-score‘,560,65)
addSprite(40,407,‘menu-rank‘,560,150,function(){
console.log(1)
})
}
}
phaser小遊戲框架學習（一）