phaser遊戲開發入門1

2021-08-30 17:27:54 字數 1336 閱讀 5070

使用phaser開發十幾款遊戲,感覺這個引擎不錯,給大家分享下。demo位址

phaser這個引擎封裝做的比較好,常用的物理引擎都有封裝,音訊方面也特別給力,開發起來就乙個字---------------------------「快」

學習一款遊戲引擎只需要做的事情有

1)看他的demo演示,看他能做什麼 。

phaser 能做2d遊戲開發,

2)看他的文件和api。看你讀懂讀不懂

phaser 文件我能讀懂,就看你們了

3)做一些簡單的**測試。

便於你親近它。熟悉了,才能駕馭它。

國內做的比較好的一家**叫「phaser小站」裡邊都是教材,非常棒。本人在**學了不少,在此表示感謝。

正式開始吧!

我的目標人群是那些基礎弱爆了的h5遊戲開發者,像當年的自己。所以高手請移駕。教程會非常簡單易懂。

(1)構建目錄

一款完整的遊戲目錄如下

res 資料夾(存放靜態資源,聲音等)

lib 資料夾(存放所有的js檔案)

index.html  html 入口檔案。

首先你要構建這個遊戲目錄。

phaser官網:

官網有ts和js兩個版本。

(3)引入js引擎檔案構建遊戲。

展示helloworld

下面是**

html

main.js

//構建遊戲  第一第二個引數是遊戲螢幕的寬高,這裡設定的是自適應螢幕寬高,第三個引數是渲染的方式,這裡採用基礎的canvas,可以無需伺服器就能直接檢視結果。如果換成webgl,渲染效率高,但是需要裝置支援webgl,不布置到伺服器上無法檢視結果

//第四個引數是指定canvas附著的div 這裡可以設定為null,第五個引數遊戲開始時三個階段。第乙個階段是預載靜態資源。第二初始化遊戲 第三遊戲渲染更新。

var game = new phaser.game(window.innerwidth, window.innerheight, phaser.canvas, 'phaser-example', );

var k=false;

function preload()

function create() );

}function update()

}

開啟index.html後可以看到下面的頁面

phaser遊戲入門4(接金幣遊戲2)

上節課構建了遊戲基本架構,有開始頁,有遊戲頁,金幣掉落,人物移動,碰撞檢測都實現了,現在開始優化。加點 唄 當然先要載入 資源,和類似 game.load.audio name url 使用的時候是這樣 var m1 game.add.audio name m1.play m1.loopfull 0...

phaser遊戲開發之基礎知識2

遊戲資源的載入 1.載入資源 phaser中遊戲資源的載入使用的是phaser.loader物件,game.load可以用來引用當前遊戲的phaser.loader物件。game.load.image 載入 game.load.spritesheet 載入集 game.load.atlas 載入集 ...

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

1 phaser.game width,height,renderer,parent,state,transparent,antialias,physicsconfig width 遊戲的寬度,也就是用來渲染遊戲的canvas的寬度,單位為px height 遊戲的高度,也就是用來渲染遊戲的canv...