本小节介绍Phaser中的一些基本概念,这些概念有很多在其他游戏引擎中也是通用的,掌握这些基本概念,对制作游戏和学习其他游戏引擎都有着非常大的帮助。
一个游戏对象,基本代表了游戏的所有内容,H5的游戏一般会附着在一个DOM节点上,然后通过canvas或者webgl渲染出来。
以下Phaser代码,就创建了一个游戏。game变量就是该游戏的引用。
var game = new Phaser.Game(
800,
600,
Phaser.CANVAS,
'phaser-example',
{ preload: preload, create: create }
);
关于Phaser.Game中的更详细的信息,请看中文文档,Phaser.Game
我们知道,要新建一个游戏,需要先确定游戏的区域,比如上面的代码,就建立了一个800x600大小的游戏区域。
但是在Phaser中,我们除了设置游戏区域大小之外,还可以设置世界的大小,世界的大小一般大于等于游戏区域大小,默认等于游戏区域大小。
世界提供了更大的范围,我们可以利用照相机在世界中移动,从而看到不同的地方。
世界在Phaser中对应 game.world
,如下代码:
game.world.setBounds(0, 0, 1920, 1200);
是将世界范围设置为1920x1200。
要理解世界,这里面有几个案例可以参考。
刚刚我们接触了游戏区域和世界的概念,照相机的概念和这两个概念都有关系。
照相机也是有大小的,它的大小默认等于游戏区域大小。照相机区域内的东西会被渲染到游戏区域中,而照相机在世界中移动,就能够在游戏区域中看到世界的不同部分。
照相机在Phaser中对应 game.camera
,如下代码:
game.camera.follow(player);
是让照相机跟随player。
关于照相机的例子,可以参考这里的几个案例。
场景是Phaser的核心概念之一,理解场景之后我们就能够更好地规划我们的游戏。
一个场景可以理解为游戏中的一个情景或者一个场面。一个典型的游戏可能包括启动场景、加载场景、菜单场景、游戏场景等等。场景可以让我们更容易地管理游戏中的各个状态。
如果你看过舞台剧的话,你就更容易理解,舞台剧中的场景和Phaser游戏中的场景非常相似,演员们其实就是演绎一个个的场景,一个场景结束之后,进入下一个场景。
Phaser的场景有着自己的生命周期,通常包括preload、create、update等等阶段。
Phaser提供了一个StateManager来管理所有的场景,它的引用是 game.state
。
更多关于Phaser场景的知识,请看场景详解小节。
舞台是Phaser中所有可显示元素的根结点,它还能处理在浏览器失去焦点时的行为。
舞台在Phaser中对应 game.stage
,如下代码:
game.stage.backgroundColor = '#000000';
是设置游戏的背景色。
如下代码:
game.stage.disableVisibilityChange = true;
是设置游戏在浏览器失去焦点时仍然运行。
精灵是Phaser中的另一个核心概念,或者说它也是几乎所有游戏引擎中的核心概念。
几乎所有我们能看见的东西,都可以看作是精灵,当然,我们这里说的是广义的精灵。Phaser中的精灵可以认为是狭义的精灵,它是可以带物理属性的一种载体。
在Phaser中,与精灵对应的类是Phaser.Sprite。
这里我们要区分Phaser中的Image,Phaser中的Image是不能带物理属性的,而Phaser中的Sprite是可以带物理属性的。
关于精灵的例子,可以参考这里的几个案例。
组也是Phaser中一个非常核心的概念,它可以很方便地管理行为类似的一群精灵,也可以很方便地实现对象池的功能。
你可以把组理解为一个功能很强大的数组,在这个数组中,你可以对元素进行批量操作,甚至可以让元素批量执行一个函数,同时,它还提供了非常强大的根据组内元素状态进行遍历的功能。
在Phaser中,与组对应的类是Phaser.Group。
关于组的例子,可以参考这里的几个案例。
动画是一个游戏的核心,好游戏与差游戏的区别,很大程度上取决于动画是否流程,是否能让玩家感到舒服。
在Phaser中,提供了三种动画方式,下面分别介绍:
- 渐变动画
渐变动画可以让某一个数值根据设定的曲线进行变化。直观地说,如果我们将一个精灵的x坐标通过渐变动画从0变化到100,那么就完成了这个精灵的位置动画。
同样的,渐变动画可以改变任何数值型属性,比如我们对精灵的不透明度alpha进行渐变动画,那么就能够完成精灵的消隐。
在Phaser中,与渐变动画对应的类是Phaser.Tween。
关于渐变动画的例子,可以参考这里的几个案例。
- 逐帧动画
逐帧动画可以让一个精灵的纹理按照指定顺序进行改变。直观地说,我们不断地改变一个精灵的图片,看上去就好像这个精灵在播放动画一样,这就是逐帧动画。
Phaser提供了非常方便的方法来播放逐帧动画,并且可以很好地进行每一帧的控制。
在Phaser中,与逐帧动画对应的类是Phaser.Animation。
关于逐帧动画的例子,可以参考这里的几个案例。
- 骨骼动画
骨骼动画是一种比较高级的动画,它是由一个物体的各个部分的图片进行拼接并且相互配合运动,从而形成的一种动画。
骨骼动画一般由专门的工具进行制作,Phaser中也有相应的插件可以加载骨骼动画。
对于比较复杂的精灵的动画而言,逐帧动画可能需要很多帧才能完成,并且有很多部分是重复的,浪费了资源。而骨骼动画很好地解决了这个问题,不管多么复杂的动画,骨骼动画只需要一份图片,所以骨骼动画比较适合绘制复杂精灵的动画。
关于骨骼动画的例子,可以参考这里的几个案例。
加载器是Phaser中比较重要的概念,加载器负责所有外部资源的加载。
同时,它提供了加载进度和加载完成的回调事件。
加载器在 game 中对应的是 game.load
,在Phaser中对应的类是 Phaser.Loader。
关于加载器的更详细的信息,请看中文文档,Phaser.Loader
关于加载器的例子,可以参考这里的几个案例。
缓存也是Phaser中比较重要的概念,了解缓存,你就不至于在加载资源的时候,不知道Phaser都做了些什么。
首先,我们要知道,你的游戏如果要用到一个素材,那么Phaser会先去缓存里面找,如果找不到,那就是没有加载成功。
那么缓存中的内容是从哪里来的呢?他是由Phaser.Loader自动装入的。
也就是说,我们在加载资源的时候,资源加载完毕会被自动放入缓存中。而我们游戏中要用到资源的时候,是去缓存里面读取。
缓存在 game 中对应的是 game.cache
,在Phaser中对应的类是 Phaser.Cache。
关于缓存的更详细的信息,请看中文文档,Phaser.Cache
对象工厂和对象创建器是Phaser中非常重要的概念,也是比较相似的东西,所以这里放在一起讲,希望大家能够区分清楚。
首先,对象工厂和对象创建器都是用来创建对象的。
它们最重要的区别就是,对象工厂创建完对象之后,会把它自动加到World中去,或者加到我们指定的Group中,对象创建器则不会。
对象工厂在 game 中对应的是 game.add
,在Phaser中对应的类是 Phaser.GameObjectFactory。
对象创建器在 game 中对应的是 game.make
,在Phaser中对应的类是 Phaser.GameObjectCreator。
瓦片地图的概念并不是Phaser独有的,它是游戏界做地图的一种常用手段。它是由几个特定的“瓦片”图片通过拼接组成一整张地图,比起单纯用图片做地图更加节省资源,并且可定制程度更高。
瓦片地图,也叫tilemap,一般用工具Tiled来制作。
关于瓦片地图的例子,可以参考这里的几个案例。
粒子系统也是游戏引擎中非常重要的一个功能,它可以很方便地制作一些粒子发射与喷发的效果。
通常,我们只需要给定粒子系统一个纹理,并且设置一些随机范围,粒子系统就能够按照我们的设定发射粒子。
关于粒子系统的例子,可以参考这里的几个案例。
基本概念我们就介绍到这里,如果暂时理解不透也没有关系,接下来我们在实践中加深理解。正所谓,纸上得来终觉浅,绝知此事要躬行。