最近在看phaser.js制作游戲春哨,發(fā)現(xiàn)比較簡(jiǎn)單,容易上手恩伺,但是官網(wǎng)的api,看起來不是特別看的懂赴背。在這里我總結(jié)下,給想學(xué)習(xí)的同學(xué)們晶渠,寫下教程凰荚。方便以后學(xué)習(xí)。這里不對(duì)phaser.js做介紹褒脯,主要講解代碼的使用便瑟。
1.概念理解。
很多人感覺做做游戲比較難番川,這里我先給大家梳理下做游戲的概念到涂。以便大家不迷茫知道自己在做什么。
一個(gè)游戲畫面就是一個(gè)場(chǎng)景爽彤,每個(gè)場(chǎng)景切換就可以換不同的畫面养盗。然后每個(gè)場(chǎng)景都是一個(gè)對(duì)象,叫做State适篙。在切換到這個(gè)場(chǎng)景時(shí)往核,會(huì)自動(dòng)執(zhí)行一些方法,其方法如下嚷节。
注意:preload聂儒、create虎锚、update、render 這四個(gè)方法至少要存在一個(gè)
這個(gè)一個(gè)場(chǎng)景的生命周期衩婚。當(dāng)切換到這個(gè)場(chǎng)景時(shí)候窜护,會(huì)重上到下執(zhí)行這些函數(shù),至于updata,render這兩個(gè)函數(shù)會(huì)循環(huán)執(zhí)行非春。
init() 一些場(chǎng)景的初始化代碼可以寫在這個(gè)方法里
preload() 用來加載游戲資源
create() 創(chuàng)建游戲顯示對(duì)象或注冊(cè)事件等
update() 在游戲的每一幀都會(huì)調(diào)用柱徙,用來書寫需要在每一幀都執(zhí)行的代碼
render() 在游戲的每一個(gè)渲染周期都會(huì)調(diào)用,用來做一些自定義的渲染工作
接下來我們奇昙,我們寫一點(diǎn)基本入門的代碼护侮。
var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container');
function state(){
this.init = function(){};
this.preload = function(){};
this.create = function(){};
this.update = function(){};
this.render = function(){};
}
game.state.add('state', state); //添加場(chǎng)景
game.state.start('state'); //啟動(dòng)場(chǎng)景
上面的state.add是添加場(chǎng)景,我們寫好的每個(gè)場(chǎng)景都要添加到game中储耐,否者講無法使用羊初。state.start是啟動(dòng)場(chǎng)景。
接下來我們講解三個(gè)概念什湘,分辨是舞臺(tái)(state),世界(world)和攝像機(jī)(camera)长赞。我們上面所說的一個(gè)個(gè)場(chǎng)景就是舞臺(tái)的意思。世界是什么呢闽撤?世界是承載游戲?qū)ο蟮娜萜鞯枚撸覀兯械挠螒驅(qū)ο蠖家诺绞澜缰校瑪z像機(jī)是我們看到的地方腹尖。
上面是設(shè)置場(chǎng)景背景顏色柳恐,還有很多api可以查看官網(wǎng)。
設(shè)置世界的大腥柔!乐设;
相機(jī)的基本操作;
相機(jī)的縮放模式绎巨,主要縮放模式如下:
基本概念差不多講完了近尚,接下來我們邊操作實(shí)際案例邊演示api的使用;