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

Phaser 桌面和手机游戏HTML5框架的更多相关文章

  1. Phaser开源2d引擎 javascript/html5游戏框架

    功能特点(Features) 易维护代码(Easy Asset Loading) Phaser可以加载图片,音频文件,数据文件,文本文件和自动解析精灵图和纹理地图集数据(出口纹理封隔器或Flash C ...

  2. 2015 年最棒的 5 个 HTML5 框架

    大多数的 web 开发者一直在用关键点来寻找动态的框架,这样能简化他们的设计和开发工作.HTML5 框架在所有的 web 浏览器和手机应用上都展现了优秀的性能.它不仅简化了 HTML5 开发中 CSS ...

  3. 加速Web开发的9款知名HTML5框架

    与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证.大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts.CSS3样式表则以改善多媒体特征的功能性和响 ...

  4. 手机游戏引擎 Cocos

    Cocos是全球最受欢迎的移动游戏开发解决方案,整合了Cocos 2d-x.Cocos 2d-js.Cocos Studio.Cocos Code IDE等框架及工具,无论您是开发新手还是行业资深人士 ...

  5. 16个最佳响应式HTML5框架分享

    HTML5框架可以快速构建响应式网站,它们帮助程序员减少编码工作,减少冗余的代码.如今有很多免费的HTML5框架可供使用,由于它们有着响应式设计.跨浏览器兼容.相对轻量级等特点,这些框架在开发中都十分 ...

  6. 手机游戏渠道SDK接入工具项目分享(三)拨开云雾是个坑

    一直在纠结是先写框架设计还是先写掉过的坑,最后本这娱乐大众的态度先写掉过的坑让大家乐呵下. 项目开发过程中遇问题无数,回顾下8个大坑照成了项目一定程度上延期甚至返工. 项目一开始几个人把现有3家主流的 ...

  7. android手机游戏开发Cocos2d-x开发分享

    我想现在应该没有人没有玩过手机游戏了吧,当然所有人都玩过,但不是所有人都知道怎么去开发手机游戏,因为许多人都感觉做开发是一件很困难的事儿,身边的朋友也对此感觉难度很大.但是,现在我可以告诉你,手机游戏 ...

  8. 斗牛app上架应用宝、牛牛手机游戏推广、百人牛牛app应用开发、棋牌游戏上传、手游APP优化

    联系QQ:305-710439斗牛app上架应用宝.牛牛手机游戏推广.百人牛牛app应用开发.棋牌游戏上传.手游APP优化 iOS开发iPhone/iPad平台安卓手机软件开发机型覆盖范围 超过113 ...

  9. Leaf - 一个由 Go 语言编写的开发效率和执行效率并重的开源游戏服务器框架

    转自:https://toutiao.io/posts/0l7l7n/preview Leaf 游戏服务器框架简介 Leaf 是一个由 Go 语言(golang)编写的开发效率和执行效率并重的开源游戏 ...

随机推荐

  1. mysql-启动、关闭与重启

    启动 service mysqld start mysql.server start 停止 service mysqld stop mysql.server stop 重启 mysql.server ...

  2. JAVA Socket 连接时长

    其实关于这个问题可能用到的人不会很多,不过我在这里还是说说. 正常很多人写socket通信时,都会直接通过new socket(IP,PORT)直接去链接服务器.其实这种做法也没有错误,但是若当服务器 ...

  3. Inno Setup入门(十五)——Inno Setup类参考(1)

    Inno setup脚本能够支持许多的类,这些类使得安装程序的功能得到很大的加强,通过对这些类的使用,将会创建出许多让人惊奇的安装程序,下面开始类的学习. 创建自定义向导页 自定义向导页需要在Init ...

  4. sqlserver用于统计表索引情况

    /*eg: --调用该过程实例 --1 创建临时表 IF OBJECT_ID('tempdb..#index_sql_text') IS NOT NULL DROP TABLE #index_sql_ ...

  5. 转:Android推送技术研究

    Android推送技术研究 字数5208 阅读4026 评论5 喜欢35 前言 最近研究Android推送的实现, 研究了两天一夜, 有了一点收获, 写下来既为了分享, 也为了吐槽. 需要说明的是有些 ...

  6. HDFS主要节点解说(一)节点功能

    1 HDFS体系结构简单介绍及优缺点 1.1体系结构简单介绍  HDFS是一个主/从(Mater/Slave)体系结构.从终于用户的角度来看,它就像传统的文件系统一样,能够通过文件夹路径对文件运行CR ...

  7. B3:状态模式 State

    当一个对象内在状态改变时允许改变其行为,这个对象看起来像是改变了其类.状态模式主要解决当控制一个对象状态转换条件表达式过于复杂时的情况,把状态判断逻辑移到表示不同状态的一系列类中.如果状态判断很简单, ...

  8. Jersey 1.18 API文档

    Jersey 1.18 API文档 我自己制作了Jersey 1.18 API CHM文档, 下载地址见: http://download.csdn.net/detail/chszs/7334869 ...

  9. SpringCloud系列九:脱离Eureka使用Ribbon

    1. 回顾 在前文的示例中,是将Ribbon与Eureka配合使用的.但是现实中可能不具备这样的条件,例如一些遗留的微服务,它们可能并没有注册到Eureka Server上, 甚至根本不是使用Spri ...

  10. C#实现svn server端的hook

    目标 要做的东东呢,就是在向svn提交文件的时候,可以再server端读到所有提交文件的内容,并根据某些规则验证文件的合法性,如果验证失败,则终止提交,并在svn的客户端上显示错误信息. 准备工作   ...