1. 程式人生 > >H5遊戲開發之phaser學習筆記(一)

H5遊戲開發之phaser學習筆記(一)

1、Phaser.Game(width, height, renderer, parent, state, transparent, antialias, physicsConfig)
width: 遊戲的寬度,也就是用來渲染遊戲的canvas的寬度,單位為px

height: 遊戲的高度,也就是用來渲染遊戲的canvas的高度,單位為px

renderer: 使用哪種渲染方式,Phaser.CANVAS 為使用html5畫布,Phaser.WEBGL 為使用效能更加好的WebGL來渲染,Phaser.AUTO為自動偵測,如果瀏覽器支援WebGL則使用WebGL,否則使用Canvas

parent: 用來放置canvas元素的父元素,可以是一個元素id,也可以是dom元素本身,phaser會自動建立一個canvas並插入到這個元素中。

state: state可以理解為場景,在這裡指定state表示讓遊戲首先載入這個場景,但也可以不在這裡指定state,而在之後的程式碼中決定首先載入哪個state。關於state我後面還會有詳細的說明。

transparent: 是否使用透明的canvas背景

antialias: 是否啟用抗鋸齒

physicsConfig: 遊戲物理系統配置引數

例項:
var game = new Phaser.Game(288,505,Phaser.AUTO,’game’); //例項化一個Phaser的遊戲例項

2、setPreloadSprite(sprite, direction)

sprite:在載入過程中會出現的精靈或影象。

direction:等於0精靈將被水平裁剪,等於1精靈將被垂直裁剪

例項:
var preloadSprite=game.add.sprite(34,game.height/2,’loading’);
game.load.setPreloadSprite(preloadSprite); //用setPreloadSprite方法來實現動態進度條的效果,preloadSprite為load的精靈
Loader物件提供了一個 setPreloadSprite 方法,只要把一個sprite物件指定給這個方法,那麼這個sprite物件的寬度或高度就會根據當前載入的百分比自動調整,達到一個動態的進度條的效果。

3、new TileSprite(game, x, y, width, height, key, frame)
x:tilesprite的x座標

y:tilesprite的y座標

width:tilesprite的寬度

height:tilesprite的高度

key:要使用sprite的key值

frame:tilesprite使用精靈的幀

TileSprite本質上還是一個sprite物件,不過這個sprite的貼圖是可以移動的,並且會自動平鋪來彌補移動後的空缺,所以我們的素材圖片要是平鋪後看不出有縫隙,就可以拿來當做TileSprite的移動貼圖了。TileSprite的貼圖既可以水平移動也可以垂直移動,或者兩者同時移動,我們只需要呼叫TileSprite物件的autoScroll(x,y)方法就可以使它的貼圖動起來了,其中x是水平方向的速度,y是垂直方向的速度。

例項:
var bg = game.add.tileSprite(0,0,game.width,game.height,’background’); //當作背景的tileSprite
var ground = game.add.tileSprite(0,game.height-112,game.width,112,’ground’).autoScroll(-100,0); //當作地面的tileSprite
bg.autoScroll(-10,0); //讓背景動起來
ground.autoScroll(-100,0); //讓地面動起來

4、spritesheet(key, url, frameWidth, frameHeight, frameMax, margin, spacing)
key : 給這張圖片指定的名稱,以後在建立sprite等物件時會要用到的

url: 圖片的地址

frameWidth :  圖片中每幀的寬度

frameHeight : 圖片中每幀的高度

frameMax : 最多有幾幀

margin : 每幀的外邊距

spacing : 每幀之間的間隔
例項:
game.load.spritesheet(‘bird’,’assets/bird.png’,34,24,3); //鳥

5、:Phaser.Group,也就是組。組相當於一個父容器,我們可以把許多物件放進一個組裡,然後就可以使用組提供的方法對這些物件進行一個批量或是整體的操作。比如要使組裡的物件同意進行一個位移,只需要對組進行位移就可以了,又比如要對組裡的所有物件都進行碰撞檢測,那麼就只需要對這個組物件進行碰撞檢測就行了。下面我們要製作的這個遊戲標題是由一張文字圖片和一支鳥組成的,我們就是把這兩個東西放在一個組中,然後來進行整體的操作。
方法:create(x,y,key) 通過組的create方法建立標題圖片並新增到組裡

例項:
var titleGroup=game.add.group();//建立存放標題的組
titleGroup.create(0,0,’title’);//通過組的create方法建立標題圖片並新增到組裡
var bird=titleGroup.create(190,10,’bird’);

6、sprite物件有個animations屬性,代表的是Phaser中專門管理動畫的物件:AnimationManager,該物件有一個add方法,用來新增動畫,還有一個play方法,用來播放動畫

add(name, framesframeRateloopuseNumericIndex)
name: 動畫名稱,即“執行”,“火”,“走”。
frames:對應於該幀的數字/字串陣列,以新增到該動畫中,並在該命令中。例如,[ 1,2,3 ]或[ ‘run0 ‘,’run1,run2 ])。如果空所有幀將被使用。
frameRate:動畫應該發揮的速度。每秒的速度是按每秒的幀進行的。
loop:是否迴圈
useNumericIndex:是否使用數字索引(預設)或字串的給定的幀
play(name, frameRateloopkillOnComplete)
name:要播放動畫的名稱
frameRate:幀頻率
loop:是否迴圈
killOnComplete:如果設定為真,當動畫完成時(只有loop==false)父精靈將被殺死。
例項:
bird.animations.add(‘fly’); //給鳥新增動畫
bird.animations.play(‘fly’,12,true); //播放動畫
titleGroup.x = 35; //調整組的水平位置
titleGroup.y = 100; //調整組的垂直位置

7、Tween物件,是專門用來實現補間動畫的。通過game.add的tween方法得到一個Tween物件,這個方法的引數是需要進行補間動畫的物體。然後我們可以使用Tween物件的to方法來實現補間動畫。

to(properties, duration, ease, autoStart, delay, repeat, yoyo)

properties :  一個js物件,裡面包含著需要進行動畫的屬性,如上面程式碼中的 {y:120}

duration : 補間動畫持續的時間,單位為毫秒

ease : 緩動函式,預設為勻速動畫

autoStart : 是否自動開始

delay : 動畫開始前的延遲時間,單位為毫秒

repeat : 動畫重複的次數,如果需要動畫永遠迴圈,則把該值設為 Number.MAX_VALUE

yoyo : 如果該值為true,則動畫會自動反轉

例項:
game.add.tween(titleGroup).to({ y:120 },1000,null,true,0,Number.MAX_VALUE,true); //對這個組新增一個tween動畫,讓它不停的上下移動

PS:
1、game.add代表的是Phaser.GameObjectFactory物件,該物件提供了了一系列快捷方法來方便我們建立遊戲的各種元件。
2、sprite物件有個animations屬性,代表的是Phaser中專門管理動畫的物件:AnimationManager,該物件有一個add方法,用來新增動畫,還有一個play方法,用來播放動畫

http://www.grycheng.com/?p=1232