图片内容

Phaser 2 入门


官网地址

本文参考

一个完整的游戏都是有分场景的,大概是如下四种场景:

  • 加载——展示进度条和loading动画,主要操作为加载游戏资源,如图片、音频等
  • 开始——展示开始按钮、活动规则等,主要是让玩家能有主动开始的操作
  • 游戏——整个游戏的主要逻辑都在这个场景中,最核心的部分
  • 结束——展示游戏最终得分、排名等

关于再玩一次,有两种方式,一种是回到开始场景,也就是说要再点一次开始游戏,这时候你可以再看看游戏规则等;另一种是直接开始游戏。

正式开始

1. 创建实例

引入Phaser.js,创建游戏实例

2. 定义场景, 将场景串通

每个场景都是一个function, 通过game.state.add可以将场景添加到游戏。

每个场景都有自己的生命周期,常用的生命周期是preload(加载)、create(准备就绪)、update(更新周期)、render(渲染完成)

  • preload - 尽管我们有预加载的场景,但如果你希望能缩短进入页面时加载的时间,可以分摊一些到其他场景,只需要在其他场景加入preload方法即可
  • create - 如果存在preload方法,则会在加载完毕后执行此方法;否则将在进入该场景时直接执行此方法
  • update - 更新周期自动执行的方法,例如在play场景的update方法中可以去检测两个物体是否有接触
  • render - 渲染完毕后执行的方法,例如可以在此方法中勾勒出物体的边缘,来方便观察物体的碰撞区域

加载资源

加载资源的操作应放在preload这个阶段执行,当preload中的资源加载完毕后,则preload场景将进入create阶段

添加加载页的最小展示时间

一般而言,游戏都会在loading界面放一个LOGO,作为展示宣传用,那么如果需要加载的资源体积很小的话,有可能加载界面就是一闪而过了。于是,根据经验,会设置一个最小的展示时间(例如3秒),在未到最小的展示时间前,即便资源已经加载完毕,也不会离开加载场景。

其他具体api,比如输入,动画,物理引擎等可以查看官网api,另外官网也有比较丰富的例子。

api查找 这个网站找api比较方便,支持模糊查找。

Making your first Phaser 2 game

This page total views