专栏首页极客编程Phaser 桌面和手机游戏HTML5框架

Phaser 桌面和手机游戏HTML5框架

Phaser是一个流行的2D开源游戏框架,可以用来开发桌面或手机浏览器HTML5游戏,适合侧视或顶视风格:

Phaser同时支持Canvas和WebGL渲染引擎,预置了完备的精灵动画、输入 管理、瓦片地图、补间动画、资源加载器、物理系统、粒子系统等特性,几乎能够 满足你开发一个2D游戏的任何需求:

Phaser最值得称道的是它的插件机制,以及由此而衍生出的Phaser生态 社区。例如,借助于isometric插件,你可以开发出具有(伪)3D效果的游戏:

Phaser的下一个版本是3.0(刚发布),因此目前2.x版本的维护由社区继续,被称为Phaser CE —— Community Edition。

Phaser框架的绝大部分功能,都打包在单一phaser.js文件中。我们只需要 在宿主HTML文件中引入这个框架文件,就可以开始使用Phaser:

<script src="lib/phaser.js"></script>

几乎所有的框架API,都定义在Phaser命名空间之下。例如,我们通过实例化Phaser.Game类来启动框架:

var game = new Phaser.Game()

框架将在文档中,使用默认参数创建一个800x600像素大小的Canvas元素,作为 游戏的画布。

√ 指定游戏尺寸

当然,我们可以自行指定游戏的大小。例如,设定游戏大小为700x300像素:

var game = new Phaser.Game(700,300)

√ 指定渲染器

Phaser采用经过修改的Pixi库作为底层渲染实现,因此可以支持canvas 和webgl。在默认情况下,Phaser将自动进行选择,不过我们可以在启动 框架时指定期望采用的渲染引擎。例如,下面的代码启用了Canvas渲染器:

var game = new Phaser.Game(700,300,Phaser.CANVAS)

Phaser支持的渲染器选项包括: Phaser.AUTO : 让框架自动选择渲染器 Phaser.CANVAS:使用Pixi的Canvas渲染器 Phaser.WEBGL:使用Pixi的WebGL渲染器 Phaser.WEBGL_MULTI:使用Pixi的WebGL渲染器,并启用多纹理支持模式 Phaser.HEADLESS:无头渲染。使用Pixi的Canvas渲染器,但不把canvas元素 添加到DOM中,也不进行实际的渲染

√ 指定游戏画布父元素

默认情况下,Phaser会将创建的canvas元素插入到文档的body元素尾部。 不过我们可以显式地指定其父元素。

例如,下面的代码将在属性id为ezgame的DOM元素中创建游戏画布:

var game = new Phaser.Game(700,300,Phaser.AUTO,'ezgame')

也可以传入一个HTML元素来指定游戏画布的父元素。例如:

var host=document.queryrSelector('#ezgame')
var game=new Phaser.Game(700,300,Phaser.AUTO,host)

如果指定一个空的id,框架就会使用body元素作为游戏画布的父元素。 例如:

new  Phaser.Game(700,300,Phaser.AUTO,'')。

需要注意的是,游戏画布的父元素应当将padding设置为0,否则框架在计算 尺寸时会产生偏差。

写了个phaser的教程,www.hubwiz.com/course,学习页面的截图如下所示,对刚玩游戏的朋友应该有些帮助:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端的对决:React的JSX与Vue的templates

    React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。

    笔阁
  • 以太坊的3个重要项目:Casper(POS共识机制)、Plasma(子母链)、Sharding(分片)

    在过去的几年里,以太坊已经成为加密货币领域最重要的项目。 作为市场中大多数代币的 底层基础设施,以太坊网络的健康对于加密数字币生态系统中的其他环节至关重要,以太...

    笔阁
  • 如何开发创建ERC20以太坊代币

    可以把ERC20简单理解成以太坊上的代币协议,所有基于以太坊开发的代币合约都遵守这个协议。遵守这些协议的代币我们可以认为是标准化的代币,而标准化带来的好处是兼容...

    笔阁
  • flex请求http://localhost:37813/crossdomain.xml

    造成请求localhost:37813/crossdomain.xml,是因为开发时启用了网络监视器,如下图:

    meteoric
  • 虚幻引擎——场景动态加载

    蓝图(blueprint)是一种以C++为编译目标的可视化编程语言,首次出现在虚幻引擎4中,实质上也是为了紧跟low code的时代潮流,用图论取代文本,让开发...

    Jean
  • 【leetcode 简单】 第五十九题

    所有出现的字符都必须用另一个字符替换,同时保留字符的顺序。两个字符不能映射到同一个字符上,但字符可以映射自己本身。

    py3study
  • 教程 | 如何判断LSTM模型中的过拟合与欠拟合

    选自MachineLearningMastery 作者:Jason Brownlee 机器之心编译 参与:Nurhachu Null、路雪 判断长短期记忆模型在...

    机器之心
  • R语言里面双层list变成长形数据框

    韦恩图固然是一种展现方式,可以看到3个样品各自的上下调基因的overlap情况,基本上呢,随机生成的数值它们的overlap不咋地!

    生信技能树
  • TiDB 在 U-Next ARM 平台上的应用与实践

    U-Next 是日本领先的视频点播服务公司,类似于国内的爱奇艺、国外的 Netflix。近几年 U-Next 的整体业务保持高速成长的势头,原先的基础架构已经无...

    PingCAP
  • python uuid库的使用

    python 的uuid库是用来生成一串唯一表示的包,uuid是一个 32 位的16进制数,用来设置唯一的辨识信息,具体uuid功能查看维基百科

    py3study

扫码关注云+社区

领取腾讯云代金券