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

2021-07-30 06:58:51 字數 3635 閱讀 4551

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』);

add(name, frames, framerate, loop, usenumericindex)

name: 動畫名稱,即「執行」,「火」,「走」。

frames:對應於該幀的數字/字串陣列,以新增到該動畫中,並在該命令中。例如,[ 1,2,3 ]或[ 『run0 『,』run1,run2 ])。如果空所有幀將被使用。

framerate:動畫應該發揮的速度。每秒的速度是按每秒的幀進行的。

loop:是否迴圈

usenumericindex:是否使用數字索引(預設)或字串的給定的幀

play(name, framerate, loop, killoncomplete)

framerate:幀頻率

loop

:是否迴圈

killoncomplete:如果設定為真,當動畫完成時(只有loop==false)父精靈將被殺死。

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

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

properties :  乙個js物件,裡面包含著需要進行動畫的屬性,如上面**中的

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

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

autostart : 是否自動開始

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

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

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

例項:game.add.tween(titlegroup).to(,1000,null,true,0,number.max_value,true); //對這個組新增乙個tween動畫,讓它不停的上下移動

ps:

H5遊戲專案開發總結

今年5月1日公司立項準備開發一款slg的h5遊戲。經過調研決定使用layaair引擎。目前遊戲第一輪測試已經結束。簡單回顧一下 明確要求趕在暑期檔上線,由於之前一直是用cocos2dx lua版本,所以對於h5零基礎的我來說還是不小的挑戰。引擎確定之後,開始著手熟悉api。開發過程期間遇到的相關問題...

h5遊戲開發 從WEB前端角度看H5遊戲開發

web前端的大部分工作集中在利用現有的主流前端框架 vue react angular 及其周邊開源 庫生態組織整個專案的架構並實現業務邏輯 往往同一種邏輯可以選擇用不同的抽象方式來實現,不同抽象方式的思想和實現差異巨大,如狀態管理的不同實現方式 redux mobx rxjs.h5遊戲的開發工作主...

滲透H5棋牌遊戲 棋牌遊戲開發

0x01 前言 本來不想發的,涉及太多利益了,這些棋牌遊戲的原始碼最高能賣到幾萬。開發起來不比乙個商場程序難。最近又太忙了,沒時間去做程式碼審計的文章了,但一不小心又搶了個運氣王。0x02 開始 一天做這行的朋友來找我,說幫審計下一套程序,正好這邊的缺一篇文章就順便去看看了。開始看了下目錄,找了幾個...