phaser2->3:来个打地鼠试水
本文中phaser具体版本
phaser2:2.8.1
phaser3:3.17.0
一、实现效果
源码地址(phaser2&phaser3):https://github.com/jinglecjy/phaser-dadishu/
体验地址:https://jinglecjy.github.io/phaser-dadishu/ver-phaser2/dist/
二、实现细节
这个demo其实是之前学习phaser2的时候做的,现在用来改成phaser3,刚好可以接触一下新的API变动有多大。
按照游戏实现的逻辑顺序,下面捋一捋用到的Phaser3 API,同时也与Phaser2 API进行简单对比。
第一步:初始化游戏new Phaser.Game
初始化画布参数,包括画布宽高,渲染方式,并将其插入dom结构中。phaser3中用scenes替代了phaser2中的states,为了避免与state machines概念混淆。
游戏中的一个scene是一个独立的场景,拥有自己的独立资源,包括相机系统、显示列表、更新步骤、事件处理、物理系统等等。游戏一次只能执行一个scene,一个场景通过多个钩子函数来维护,包括init、preload、create、update等。
1 |
conf = { |
第二步:预加载资源
预加载资源操作一般在preload
函数中执行,这一部分的API,phaser2和phaser3基本一致,不过phaser3对游戏对象结构进行了修改,phaser2中是树状结构,游戏中所有对象都来自于根对象Phaser.Game
,对象也拥有自己的子对象。phaser3中将这些对象拆解出来,游戏对象Phaser.Game
不包含其他对象组,且对象组不具有任何的位置或者属性。
1 |
// phaser3: https://photonstorm.github.io/phaser3-docs/Phaser.Loader.LoaderPlugin.html |
第三步:创建对象
创建对象操作一般在create
函数中执行,这一部分的API基本一致,差别与load
相似,都是由于修改了整体数据结构导致的。
1 |
// phaser3: https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectCreator.html |
第四步:动画
phaser2和phaser3都提供了内置tween动画供开发者使用,相比较于phaser2,phaser3中的tween动画配置更加灵活丰富,具体完整的配置项列表可以参照官方文档。
1 |
// phaser3: https://photonstorm.github.io/phaser3-docs/Phaser.Tweens.TweenManager.html |
第五步:交互行为
phaser本身没有dom概念,所有的交互都需要依赖phaser自身的API,通过Phaser.Input
统一管理所有的input事件。当交互发生时,与之交互的Phaser.Game
对象将向下分发事件,phaser3可以在scene/gameObject中监听该事件,不同的位置监听事件其作用域不同,优先级也不同,优先级较高的事件处理器可阻止向低优先级事件传递(stop propagation)。
1 |
// phaser3: https://photonstorm.github.io/phaser3-docs/Phaser.Input.Events.html |
第六步:计时器
1 |
// phaser3: https://photonstorm.github.io/phaser3-docs/Phaser.Time.TimerEvent.html |
三、项目总结
一些可以改进优化的细节:
- 【前端】资源预加载与游戏过程应当在同一个scene中,之前没捋清楚逻辑,把这两个步骤拆开了
- 【交互】疯狂点击页面会出现很多个小锤子,短时间内多次点击应该只响应一次
- 【交互】打到地鼠时的反馈感加强,比如地鼠有晕眩动效/音效提示/+1效果等等
- 【玩法】地鼠出现时间越来越快
- 【玩法】主角多样化,除了地鼠还可以有炸弹/手拿礼物的地鼠/其他道具,分数不同
phaser2上手较快,API简单,官方文档示例比较丰富,值得继续探索,后续会试水一下物理引擎。phaser3是正在开发的版本,相较于phaser2 API变化较多,文档完善度不够,基本上是查源码猜API。试水过程可以感受到phaser3对API设计重新考量,比如用对象来代替原有的基本数据类型作为函数参数,可读性和灵活性更佳。另外,phaser3增强了camera的功能,新增了对Matter.js物理引擎的支持,对2D骨骼动画的支持等等,此处不进行赘述,详细的可以查看phaser官网的具体公告,或者是参考文章 全新Phaser3游戏引擎特性一览(来自凹凸实验室) 。
关于自学:个人觉得phaser API的学习方法最直观的是在控制台打印一下,尤其是对于初学者来说,对于其中的结构没有清晰的认识,直接看文档容易混乱,具体使用也可以参照官方示例。
彩虹屁结束之后,不得不说,如果是项目实际使用,建议还是使用稳定版本phaser2,简单的小游戏还是够用的。
六、参考文档
- Phaser官网:http://phaser.io/
- Phaser2 API文档:http://phaser.io/docs/2.6.2/index
- Phaser3 API文档:https://photonstorm.github.io/phaser3-docs/
- Phaser3官方示例:https://labs.phaser.io/
- 全新Phaser3游戏引擎特性一览:https://aotu.io/notes/2018/12/23/phaser3/
phaser2->3:来个打地鼠试水的更多相关文章
- POJ 2502 - Subway Dijkstra堆优化试水
做这道题的动机就是想练习一下堆的应用,顺便补一下好久没看的图论算法. Dijkstra算法概述 //从0出发的单源最短路 dis[][] = {INF} ReadMap(dis); for i = 0 ...
- 大众点评试水O2O新模式:实体店试穿,扫描二维码付款 现场取货
在餐饮美食行业取得不错的成绩之后,大众点评将触角延伸到了线下的传统商铺,开始涉足线下商品的 O2O 团购.和传统的线上下单,线下消费的 O2O 模式不同.大众点评的 O2O 团购用户,可在店内试穿后通 ...
- Json.Net6.0入门学习试水篇
原文:Json.Net6.0入门学习试水篇 前言 JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.简单地说,JSON 可以将 JavaScript 对象中 ...
- 第一回:Scrapy的试水
前言:今天算是见到Scrapy的第二天,之前只是偶尔查了查,对于这个框架的各种解释,我-----都-----看------不------懂----,没办法,见面就是刚. 目的:如题,试水 目标:< ...
- CSharpGL(49)试水OpenGL软实现
CSharpGL(49)试水OpenGL软实现 CSharpGL迎来了第49篇.本篇内容是用C#编写一个OpenGL的软实现.暂且将其命名为SoftGL. 目前已经实现了由Vertex Shader和 ...
- UITableView(自定义cell)试水心得
初次试水自定义cell的UITableView 实现目标 最终实现结果 界面复原度:98% 未能完全复刻的地方:下半部分的tableview与头部的控件间距上的误差 原因:在做table ...
- 微博试水卖车社交电商怎样令4S“颤抖”?
微博对社交电商的探索一直在深入,年初.微博上线了"支付"产品.从而使社交产业链实现了闭环,随后,微博又尝试售卖多种商品,不断扩大移动电商的试水范围,近期微博大规模汽车销售收 ...
- CentOS7 docker试水
CentOS 7.0,无外网直接访问权限,有一台代理服务器. 首先安装docker-ce,参考http://blog.51cto.com/aaronsa/2056882 除非特殊说明,以下操作都用ro ...
- 【试水CAS-4.0.3】第07节_CASclient配置单点登录
完整版见https://jadyer.github.io/2015/07/26/sso-cas-client-login/ 本文源代码下载:http://download.csdn.net/detai ...
随机推荐
- Java集合详解(全)
Java的集合主要有List , Set, Map List , Set继承至Collection接口,Map为独立接口 List下有ArrayList,LinkedList,Vector Set下有 ...
- Java基础篇 - 强引用、弱引用、软引用和虚引用
Java基础篇 - 强引用.弱引用.软引用和虚引用 原创零壹技术栈 最后发布于2018-09-09 08:58:21 阅读数 4936 收藏展开前言Java执行GC判断对象是否存活有两种方式其中一种是 ...
- VMware12 + Ubuntu16.04 虚拟磁盘扩容
转载自:https://blog.csdn.net/Timsley/article/details/50742755 今天用虚拟机的时候,发现虚拟机快满了,提示磁盘空间小,不得不扩充虚拟机空间.经过百 ...
- pyinstaller 3.6版本通过pip安装失败的解决办法
本机中原pyinstaller版本为3.5版本,本打算通过 pip install --upgrade pyinstaller进行升级,竟然报错,后面卸载再重新安装也一样报错,没办法看来通过pip是暂 ...
- 一种循环buffer结构
最新数据循环在buffer[H] -> buffer[L] 放置,记录最新放置Index,对外接口获取数据时,进行两次数据拷贝,Index-H ,index-L 拷贝到数组里
- mybatis学习笔记四
记录下动态sql的常用标签: 1.where 一般用作数据操作添加的条件 例子: <select id="selectByRoleId" resultMap="re ...
- WMS备货单保存后自动新增选项不勾选
- 1)关于配置centos的网络问题
网址: http://jingyan.baidu.com/article/f3e34a12d886d2f5eb653515.html
- 基于soap 的 python web services 服务开发指南
文章大纲 序言 相关概念 SOA web services SOAP WSDL UDDI 环境搭建 我们使用 python 3.6 这个较新python 版本 服务端开发 客户端开发 suds-jur ...
- crm项目-业务实现
############### crm业务 ############### """ 校区管理,部门管理,课程管理, 这三个都比较简单 1,只需要展示校区名称,这是 ...