html5游戏引擎phaser官方示例学习

首发:个人博客,更新&纠错&回复

phaser官方示例学习进行中,把官方示例调整为简明的目录结构,学习过程中加了点中文注释,代码在这里

目前把官方的完整游戏示例看了一大半,

breakout是敲砖块,gemmatch是钻石消除,invaders是小蜜蜂,matching是配对,simon是记忆游戏,sliding是拼图,starstruck类似超级马里奥,tanks是坦克游戏。

游戏场面上看,敲砖块、小蜜蜂是竖版,超级马里奥是横版,坦克游戏是俯瞰,钻石、配对、记忆、拼图这四个都是棋盘。

界面构成上看,棋盘类游戏基本都用到了瓦块图,砖块蜜蜂和坦克是基本精灵,马里奥是瓦块和精灵组合。

瓦块图的绘制使用Tiled进行可视化绘制,绘制完生成json文件,该文件即保存了世界的结构,这个还在摸索。瓦块图的素材网上有很多,其实RPGMaker各个版本自带的素材就不错,它们自带的效果素材如爆炸什么的也可以在phaser中使用,行走图也能用。

因为phaser自身支持动画,定义精灵的时候除了可以指定一张简单图片,还可以指定一张包含了许多帧的大图片(其实只使用其中的一帧如砖块钻石,或者将其中的许多帧一起作为动画使用如小蜜蜂的敌机),甚至可以指定多张图片来形成动画(坦克例子有所演示),除此之外也可以将多个精灵组成一个逻辑精灵(也是坦克例子演示的,车身、炮塔、阴影分别是不同的精灵)。

敌人精灵的行为,简单的就在主循环update方法里为之写逻辑,例如小蜜蜂的敌机,复杂点的可以把敌人定义个类,用prototype的方式编写实例方法,在update方法中遍历之调用某方法,甚至你可能将多个不同类的敌人放到同一个数组里,调用它们的同名方法即可,这有点像java的多态特性,但javascript是弱类型的。

玩家的行为,分为鼠标操作和键盘操作,键盘操作在主循环update里判断是否按下,如果不想太频繁地响应用户操作,可以用个变量保存上次操作时间,再有操作看看其间是否已隔了足够多的毫秒数,否则就不处理,这种“临界值”的使用各个例子中很常见。

鼠标操作可以在主循环判断鼠标键是否按下,更直观的是为精灵添加按下/释放/移动..等响应函数,当鼠标在精灵上做了操作直接调用函数,钻石游戏是很好的演示。至于鼠标的位置,棋类游戏可以把其先转化为在棋盘中的哪一格,得到行数列数再处理,而坦克游戏则直接使用指针的位置来作为目标旋转炮塔和发炮。

游戏中可以用重复而自连接的小图片作为背景,类似现实中地砖或床单上的图案,其实是一个精灵,锁定在屏幕上,你自己来写代码让它卷动,例如小蜜蜂自动将星空向下滚类似飞机在向上飞,而坦克游戏则是向坦克的移动方向反方向卷,看着效果就是坦克和地面的相对位置变化与现实中一致,至于超级马里奥游戏,干脆不卷了,这是因为画面上的地图元件已经足够呈现移动的效果。

配对、记忆、拼图都有“电脑知道而玩家不一定记得”的信息,例如配对游戏中每个格子背后的画是什么,记忆游戏到底出的题目的数字序列是什么,拼图游戏成功时每个碎片应该在什么位置,这些信息当然存在游戏的全局变量里,另外例如坦克游戏里敌人坦克的血量,则由敌人坦克类的一个属性保存。游戏状态的保存使用什么编程元素都可以,可以想到的还有html5的本地存储甚至数据库,甚至是用ajax或者websocket存到服务器上。

记忆游戏有“关卡”的概念,而小蜜蜂游戏当三条命死绝之后有点击重新开始游戏的功能,这些进入新关卡或者重新开始游戏,当然不要location.reload,也不要重新初始化dom之类这样大张旗鼓的事,其实重新开始游戏只是逻辑上的重新开始,将全局变量重设为初始状态(过关则是关卡数加一其他数据清零),并重新显示适当的交互信息即可,例如播放动画、提示用户点击开始什么的。

棋盘类游戏中的精灵,既有坐标,也有身处第几行、第几列的概念,游戏逻辑中当然是用行数列数写逻辑最合理,当要移动棋子时,则使用坐标编写动画语句优美地滑过去,而行数列数则直接指定,代表“该在哪儿”。

小蜜蜂和坦克有炮弹和爆炸的临时精灵,用“池”来预先初始化一批这样的精灵,用到就取出,用完再归还,与数据库的连接“池”、服务器的线程“池”是相同的思想,避免对象过多。炮弹打到敌人坦克/飞机上时的事件,则是主循环中检测接触,如果接触则做点什么,比如销毁炮弹、播放动画效果、敌人血量减少甚至死亡。

目前的体会就这些,总结核心的关键点是主循环、精灵、全局状态、玩家行为、精灵策略,当然还有tile地图。

长期欢迎项目合作机会介绍,项目收入10%用于酬谢介绍人。新浪微博:@冷镜,QQ:908789432。

时间: 2024-10-20 00:47:00

html5游戏引擎phaser官方示例学习的相关文章

国内开源html5游戏引擎全收录

本文引自<国内开源html5游戏引擎全收录> 游戏开发这潭水太深,英文水平太差,不敢看国外的, 而且这几年国内技术水平也挺高了不少,特别是JS方面.(我个人感觉) 最近看了几个国产的js游戏引擎,有点想开发个游戏玩玩, 毕竟搞编程这么多年,开发过各种类型的程序,就是没搞过游戏, 人生是不完整的... 就先收录一下我所知道的国产开源h5游戏引擎吧. cocos2d-js http://cn.cocos2d-x.org/ egret http://www.egret-labs.org/ Siriu

QQ空间玩吧HTML5游戏引擎使用比例分析

GameLook报道/“Cocos 2015开发者大会(春季)”于4月2日在国家会议中心圆满落下帷幕.在会上全新的3D编辑器,Cocos Runtime等产品重磅公布,给业界带来了Cocos这款国产引擎的最新动态.同时Cocos引擎创始人王哲也提到在目前国内最重要的HTML5游戏渠道玩吧中Cocos已经成为使用率最高的游戏引擎.那么这一数据是如何获取的呢?国内HTML5游戏渠道中目前现状究竟如何?今天我们让数据来说话. 直击现场 1.背景分析 2015年,HTML5平台可谓火爆异常,广大CP纷纷

2016年 最火的 15 款 HTML5 游戏引擎

HTML5游戏从2014年Egret引擎开发的神经猫引爆朋友圈之后,就开始一发不可收拾,今年<传奇世界>更是突破流水2000万!从两年多的发展来看,游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景.作为一名开发者,分析了当下最火爆,最热门的HTML5游戏引擎供大家参考,希望大家也能找到属于自己的那款游戏开发引擎. 我在github上面收集了四十多款的HTML5开源游戏引擎,从里面star.fork等等参数分析其流行度,最后综合各方面元素,筛选出靠前的十

20款最受欢迎的HTML5游戏引擎收集

在“最火HTML5 JavaScript游戏引擎”系列文章国外篇(一)中,我们盘点了当下备受开发者推崇的非国产HTML5和JavaScript游戏引擎.在各种2D小游戏逆袭的今天,用HTML5和JavaScript进行游戏开发成为了一大潮流,而HTML5和JavaScript游戏引擎也逐渐走向了成熟,在追求原生体验的同时,也深逐精致细腻狂炫酷拽.在本文中,我们将继续介绍来自国外,非常受开发者欢迎的HTML5和JavaScript游戏引擎. 1. melonJS melonJS这款轻量级的开源免费

【panda.js】panda.js html5游戏引擎入门介绍

一.官网 http://www.pandajs.net/ 二.主要特性 使用高速图形渲染 pixi.js 使用粒子引擎(Particle engine)制作特效 缓动(Tweening) 物理引擎(Physics engine) 定时器(Timer) 移动端支持 声效管理 模块化(Modules)的方式组织你的源代码 三.安装 请先安装node.js,再通过npm安装pandatool: $ npm install -g pandatool 四.新建并构建项目 $ panda create pa

HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布

经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylegendRPG是基于lufylegend的HTML5游戏引擎.使用它时,需要引入lufylegend.js. 包含了LTileMap,LCharacter,LTalk,LEffect等多个实用的类. 由于是基于lufylegend,所以你需要了解一下lufylegend的用法,这样才能更合理,更快捷地运

18个功能强大的HTML5 和JavaScript游戏引擎库

如果你想要开发一个手机游戏,相关的游戏引擎库会是你寻找的目标之一.游戏引擎库的数量成百上千,哪一款才是你需要的呢?本文为你收集了18个功能强大的HTML5 和JavaScript 游戏引擎库. 相关推荐:排名前10的H5.Js 3D游戏引擎和框架 1. Impact JS Impact JS 是最好的游戏引擎之一,它能够帮助你创建那些玩家们高度关注的复杂图形图像.Impact JS 虽然不是免费的,但是它所带来的价值绝对是物超所值的. 2. Crafty JS 第二个要说到的非常流行的Java

25 个超棒的 HTML5 &amp; JavaScript 游戏引擎开发库

25 个超棒的 HTML5 & JavaScript 游戏引擎开发库 就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议.游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实.吸引人眼球.游戏引擎负责其余的事情.早期,游戏开发者通常从草图做起,花费高昂,且不容易获利.为了让游戏开发更加简单容易,主要的开发者开始授权他们的基本游戏引擎,如 Unreal.而且,随着手机和平板游戏的出现,所需预算比以前更少,对 JAVASCRIPT 和HTML5 游戏引擎的需求大增. 如果你是一个游戏开发者,

18 款超酷的 HTML5 和 JavaScript 游戏引擎库

现在的游戏开发变得越来越复杂,需要制作各种炫丽的效果,还要制作各种基于 2D 或者 3D 的场景.为了节省游戏开发者的时间,让开发者集中精力在游戏的创新上,出现了许许多多的游戏引擎.而现在为了实现跨平台,HTML5 和 JavaScript 成功为了游戏开发者必备的利器,特别是移动端的开发者,必须要能很好的掌握 HTML5 和 JavaScript. 现在这么多的游戏引擎,各有各的优点和缺点,为了帮助开发者们找到属于自己的那款游戏开发引擎,我们综合了许多方面的考虑,选出来以下的 18 个超酷的