Phaser 桌面和手机游戏HTML5框架

简介: Phaser是一个流行的2D开源游戏框架,可以用来开发桌面或手机浏览器HTML5游戏,适合侧视或顶视风格:Phaser同时支持Canvas和WebGL渲染引擎,预置了完备的精灵动画、输入 管理、瓦片地图、补间动画、资源加载器、物理系统、粒子系统等特性,几乎能够 满足你开发一个2D游戏的任何需求:Phaser最值得称道的是它的插件机制,以及由此而衍生出的Phaser生态 社区。

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

phaser

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

phaser 2

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

phaser 3

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,学习页面的截图如下所示,对刚玩游戏的朋友应该有些帮助:

phaser 汇智网

phaser 汇智网2

相关文章
|
2月前
|
移动开发 前端开发 JavaScript
HTML 框架高阶用法
HTML框架,或前端框架,如Bootstrap、Vue.js等,显著提升了Web应用开发的速度与用户体验。本文介绍了一些高级技巧,如自定义样式与组件、响应式设计实践、JavaScript功能增强及性能优化策略等,帮助开发者更好地利用这些工具,实现高效开发并提升应用性能与灵活性。
|
12天前
HTML 框架2
iframe标签用于在当前页面中嵌入另一个HTML页面。通过设置frameborder属性为&quot;0&quot;,可以移除iframe边框。iframe的src属性用于指定要嵌入的页面URL。例如,使用`&lt;iframe src=&quot;https://www.runoob.com&quot; frameborder=&quot;0&quot;&gt;&lt;/iframe&gt;`可以无边框地显示RUNOOB.COM页面。
|
12天前
HTML 框架1
HTML框架允许在同一个浏览器窗口中同时显示多个页面。`&lt;iframe&gt;`标签用于嵌入其他网页,基本语法为 `&lt;iframe src=&quot;URL&quot;&gt;&lt;/iframe&gt;`。可以通过设置 `height` 和 `width` 属性来调整 iframe 的大小,例如:`&lt;iframe src=&quot;demo_iframe.htm&quot; width=&quot;200&quot; height=&quot;200&quot;&gt;&lt;/iframe&gt;`。属性值可以是像素或百分比。
|
8天前
|
移动开发 HTML5
HTML5熊猫弹跳手机小游戏源码
一款html5手机端小游戏源码,熊猫跳跃小游戏源码下载。熊猫脚底有弹簧,长按变化力度跳跃,计分游戏,html5手机熊猫也疯狂小游戏源代码。
25 5
|
11天前
HTML 框架3
iframe 是一种在网页中嵌入另一个 HTML 页面的技术。通过设置 iframe 的属性,可以显示指定的目标链接页面。例如,可以使用 iframe 嵌入 RUNOOB.COM 网站。HTML 中的 `&lt;iframe&gt;` 标签用于定义内联框架。
|
6月前
|
前端开发 搜索推荐 JavaScript
HTML 框架
HTML 框架
|
1月前
|
小程序
如何将CCBUPT全能墙小程序添加到手机桌面
如何将CCBUPT全能墙小程序添加到手机桌面
30 0
|
3月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
3月前
|
移动开发 HTML5
自适应手机端青蛙吃蚊子小游戏html源码
HTML5青蛙吃蚊子游戏源码分享,音乐可以改的,自己在目录替换一下音乐就可以了训练手速和眼力的时候到了!
34 0
自适应手机端青蛙吃蚊子小游戏html源码
|
3月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
52 1