phaser-frameworkphaser框架入门


备注

Phaser主要是一个开源的桌面和移动HTML5游戏框架。

它包含一套强大的文档,功能和示例,可帮助您快速实现工作游戏。它通过Pixi.js渲染引擎支持WebGL,并包含Canvas后备,以支持旧设备。

虽然引擎是用JavaScript构建的,但它也包含TypeScript定义

该项目的新设想符合ES6标准,称为Lazer

版本

Phaser 2

发布日期
2.6.2科雷斯泉 2016年8月25日
2.6.1 Caemlyn 2016年7月11日
2.6.0 Fal Moran 2016年7月8日
2.5.0五王 2016年6月17日
2.4.9四王 2016年6月16日
2.4.8守望山 2016年5月19日

Phaser入门

  1. 创建一个文件夹
  2. 在新目录中创建index.html 。在Bracket编辑器中打开它
  3. github下载Phaser存储库,然后从build文件夹中获取phaser.js文件。将文件放在项目目录中。
  4. 打开index.html并链接header标签内的phaser.js
<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>
 
  1. 在名为game.js的目录中创建另一个js文件
  2. 在编辑器中打开game.js文件并编写以下代码:
// Phaser instance, width 800px, height 600px render as CANVAS. 
// Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });

function preload() {
// this method used to load your game assets
}

function create() {
// this method run only once used to create to game world
}

function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
}
 
  1. 保存所有文件并使用Bracket liveserver打开index.html (右上角的图标)。
  2. 现在已创建Phaser开发环境。控制台屏幕应出现在浏览器中以进行错误验证。

使用Node.js开始使用Phaser

  1. 创建一个您想要让您的游戏生效的文件夹,然后进入该文件夹
mkdir my-new-game
cd my-new-game
  1. 使用npm初始化目录。
npm init -y
  1. 将phaser安装为节点包。
npm install phaser
  1. 将http-server安装为全局模块,以在命令行上使用。
npm install -g http-server
  1. 创建一个index.html文件并引用Phaser可执行文件并将以下代码粘贴到其中。
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>My Gamer</title>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
    <style type="text/css">
    body {
        margin: 0;
    }
    </style>
</head>

<body>
    <div id="helloWorld"></div>
</body>
<script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
    create: create
});

function create() {

    var text = "Hello World!";
    var style = {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    };

    var t = game.add.text(game.world.centerX, 300, text, style);
    t.anchor.set(0.5);

}
</script>

</html>
  1. 启动服务器并在浏览器中加载http:// localhost:8080
    hs