phaser小遊戲框架學習（二）
摘要：
今天繼續學習phaser.js。上週寫的學習教程主要內容是建立遊戲場景，遊戲中的顯示物件，按鈕物件的使用以及如何在不同螢幕大小中完美適配。這篇部落格以介紹遊戲榜單的渲染更新為主。
程式碼地址： https://github.com/dreamITGirl/phaser ，具體檔案為Bil...
今天繼續學習phaser.js。上週寫的學習教程主要內容是建立遊戲場景，遊戲中的顯示物件，按鈕物件的使用以及如何在不同螢幕大小中完美適配。這篇部落格以介紹遊戲榜單的渲染更新為主。
程式碼地址： https://github.com/dreamITGirl/phaser ，具體檔案為Billboard.js。
這個學習過程是以一個類似於頭腦風暴的遊戲為例項，來學習phaser的框架，會有很多API講不到，可自己去查，去學習。
由於考慮到後面的需求，所以現在將檔案的檔名改了，demo01.js改為了load.js（用於載入圖片和精靈圖），增加了game.js（公共的函式以及遊戲場景的建立）
建立文字文字
這裡可以看一下建立文字物件的時候需要的引數，有五個引數，第一個一般是遊戲物件，一般指的是game物件。x代表文字在x方向上的位置，y代表文字在y方向的位置。text--想要渲染的文字內容，style-文字樣式
更改文字內容
在phaser.js中有一個setText的方法，但是，也可以直接給這個文字物件的text屬性賦值。建議輸出一下建立的文字物件的屬性。這樣，能更熟悉的運用這個文字物件。
具體使用可以看一下程式碼；這裡我把Billboard的程式碼貼出來，具體的呼叫可以在gitHub中看.
/*如何將渲染遊戲中的文字*/
//需求:榜單排名需要每隔一段事件就要更新，這裡我們就在update或者render函式中改變排名內容;
//update和render函式是每秒就會調一次，但它並不會影響整個遊戲的記憶體
function Billboard(){
var self = this;//在ajax中的this並不會指向我們想要的物件
this.init = function(){
this.listArr = []
//this.load.image('score-list','./images/score-list.png');//載入圖片，需要放在demo01.js中的load函式裡統一載入，否則載入不出來
}
this.preload = function(){
loadbg()//載入背景
/*增加遊戲所需要的圖片,使用的demo01.js封裝的函式*/
addImage(24,120,'score-list',594,879)
addSprite(24,37,'back',50,50,function(){
game.state.start('Load')//點選榜單可進入榜單頁面
})
/*var listbg = game.add.image(24*bl,120*bl,'score-list');
listbg.width = 594 *bl;
listbg.height = 879 *bl;*///這個函式是addImage未封裝的內容。
this.loadText()
}
this.update = function(){
setTimeout(function(){
$.ajax({
type:"get",
url:"./json/billboard.json",
async:true,
success:function(data){
for(var i=0;i<data.length;i++){
if(i<self.listArr.length){
self.listArr[i][0].text= data[i].ranking;
self.listArr[i][1].text= data[i].name;
self.listArr[i][2].text= data[i].score;
self.listArr[i][3].text= data[i].questionNum+' / '+data[i].useTime+' / '+data[i].rightRadio;
}else{
self.listArr[i] = [
self.addText(62,i,data[i].ranking,30,'#6CDDFA'),
self.addText(122,i,data[i].name,30,'#666'),
self.addText(250,i,data[i].score,30,'#666'),
self.addText(383,i,data[i].questionNum+' / '+data[i].useTime+' / '+data[i].rightRadio,24,'#666')
]
}
}
}
});
},2000)
}
this.addText = function(x,i,text,fontSize,color){
var top =( 200+81*i+(80-fontSize)/2)*bl;
var text = this.add.text(x*bl,top,text,{
fill:color,
fontSize:(fontSize *bl),
fontWeight:'normal',
})//有四個引數，this.add.text(x,y,text,style)//這四個引數分別代表了文字的x方向的位置，y方向的位置，當前的文字內容,樣式物件;渲染的字型基本都是預設加粗的字型。
return text
}
this.loadText = function(){
/*用ajax請求榜單資料*/
$.ajax({
type:"get",
url:"./json/version.json",
async:true,
success:function(res){
for (var i=0;i<res.length;i++) {
self.listArr[i] = [
self.addText(62,i,res[i].ranking,30,'#6CDDFA'),
self.addText(122,i,res[i].name,30,'#666'),
self.addText(250,i,res[i].score,30,'#666'),
self.addText(383,i,res[i].questionNum+' / '+res[i].useTime+' / '+res[i].rightRadio,24,'#666')
]
}
},
error:function(err){
console.log(JSON.stringify(err))
}
});
}
}