phaser遊戲開發入門1
阿新 • • 發佈：2018-12-19
使用phaser開發十幾款遊戲，感覺這個引擎不錯，給大家分享下。demo地址
phaser這個引擎封裝做的比較好，常用的物理引擎都有封裝，音訊方面也特別給力，開發起來就一個字---------------------------“快”
學習一款遊戲引擎只需要做的事情有
1）看他的demo演示，看他能做什麼 。
phaser 能做2d遊戲開發，
2）看他的文件和API。看你讀懂讀不懂
phaser 文件我能讀懂，就看你們了
3）做一些簡單的程式碼測試。
便於你親近它。熟悉了，才能駕馭它。
國內做的比較好的一家網站叫“phaser小站”裡邊都是教材，非常棒。本人在哪裡學了不少，在此表示感謝。
正式開始吧！
我的目標人群是那些基礎弱爆了的H5遊戲開發者，像當年的自己。所以高手請移駕。教程會非常簡單易懂。
(1)構建目錄
一款完整的遊戲目錄如下
res 資料夾（存放靜態資源，圖片聲音等）
lib 資料夾（存放所有的js檔案）
index.html html 入口檔案。
首先你要構建這個遊戲目錄。
（2）下載js引擎檔案
下載地址如下：
大家記住這個cdnjs.com這個地址，這是一個線上的js庫。裡邊涵蓋市面上所有的js框架，大家在裡邊搜素phaser就能出來許多與之相關的框架。這裡我選擇phaser-ce版本。這個版本比較成熟。是基於pixi渲染的h5遊戲框架，渲染速度方面沒得說。大家也可以到官網去下載，大家如果不想動手的話，也可以下載我提供的demo包，裡邊內容比較齊全。
官網有ts和js兩個版本。
（3）引入js引擎檔案構建遊戲。
展示helloworld
下面是程式碼
html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> <script src="./lib/phaser.min.js"></script> </head> <body> <script src="./lib/main.js"></script> </body> </html>
main.js
//構建遊戲 第一第二個引數是遊戲螢幕的寬高，這裡設定的是自適應螢幕寬高，第三個引數是渲染的方式，這裡採用基礎的canvas，可以無需伺服器就能直接檢視結果。如果換成WEBGL，渲染效率高，但是需要裝置支援WEBGL，不佈置到伺服器上無法檢視結果
//第四個引數是指定canvas附著的div 這裡可以設定為null，第五個引數遊戲開始時三個階段。第一個階段是預載靜態資源。第二初始化遊戲 第三遊戲渲染更新。
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, 'phaser-example', { preload:preload,create: create,update:update });
var k=false;
function preload(){
console.log("預載開始");
}
function create() {
console.log("初始化開始");
game.stage.backgroundColor=0xfff;
//向舞臺新增文字
// 第一引數 x; 第二個引數 y 第三個引數，文字內容，第四個文字樣式
game.add.text(100,100,"你好phaser！",{font: "65px Arial", fill: "#ff0044", align: "center" });
}
function update(){
//此處內容迴圈執行，所以要加一個控制程式碼。
if(!k){
console.log("更新！");
k=true;
}
}
開啟index.html後可以看到下面的頁面
