最近在看phaser.js制作游戲，發(fā)現(xiàn)比較簡單，容易上手，但是官網(wǎng)的api,看起來不是特別看的懂。在這里我總結(jié)下，給想學(xué)習(xí)的同學(xué)們，寫下教程。方便以后學(xué)習(xí)。這里不對phaser.js做介紹，主要講解代碼的使用。
1.概念理解。
很多人感覺做做游戲比較難，這里我先給大家梳理下做游戲的概念。以便大家不迷茫知道自己在做什么。
一個游戲畫面就是一個場景，每個場景切換就可以換不同的畫面。然后每個場景都是一個對象，叫做State。在切換到這個場景時(shí)，會自動執(zhí)行一些方法，其方法如下。
image.png
注意：preload、create、update、render 這四個方法至少要存在一個
image.png
這個一個場景的生命周期。當(dāng)切換到這個場景時(shí)候，會重上到下執(zhí)行這些函數(shù)，至于updata,render這兩個函數(shù)會循環(huán)執(zhí)行。
init() 一些場景的初始化代碼可以寫在這個方法里
preload() 用來加載游戲資源
create() 創(chuàng)建游戲顯示對象或注冊事件等
update() 在游戲的每一幀都會調(diào)用，用來書寫需要在每一幀都執(zhí)行的代碼
render() 在游戲的每一個渲染周期都會調(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); //添加場景
game.state.start('state'); //啟動場景
上面的state.add是添加場景，我們寫好的每個場景都要添加到game中，否者講無法使用。state.start是啟動場景。
接下來我們講解三個概念，分辨是舞臺（state）,世界（world）和攝像機(jī)（camera）。我們上面所說的一個個場景就是舞臺的意思。世界是什么呢？世界是承載游戲?qū)ο蟮娜萜?，我們所有的游戲?qū)ο蠖家诺绞澜缰校瑪z像機(jī)是我們看到的地方。
image.png
上面是設(shè)置場景背景顏色，還有很多api可以查看官網(wǎng)。
image.png
設(shè)置世界的大?。?/p>
image.png
相機(jī)的基本操作；
image.png
相機(jī)的縮放模式，主要縮放模式如下：
image.png
基本概念差不多講完了，接下來我們邊操作實(shí)際案例邊演示api的使用；
