自己动手做游戏

我是金角大王
1,192 阅读4分钟

什么是 Phaser ?

Phaser 是一款快速、免费以及开源 HTML5 游戏框架，它支持 WebGL 和 Canvas 两种渲染模式，可以在任何 Web 浏览器环境下运行，游戏可以通过第三方工具转为 iOS、Android 支持的 Native APP，允许使用 JavaScript 和 TypeScript 进行开发。
目前 Phaser 存在三个版本：分别是 Phaser 2 版本、社区版本 Phaser CE 和最新版本 Phaser 3。

关于 Phaser 3

2013 年 4 月 Richard Davey 在博客中首次公布了 Phaser，过了这么多年，已经从原先的 1.0 版本迭代到了目前的 2.6.2 正式版，Phaser 2 官方也宣布停止了维护、更新，转而由社区接手来负责维护、更新，衍生出来的版本称为社区版 Phaser CE。

Phaser 2 的停止是因为将战场转移到了全新的 Phaser 3 版本。Phaser 3 于 2018 年 2 月 13 日发布到如今已经有相当长的一段时间了，它目前仍然处于开发阶段，一直未发布正式版，官方一直在努力解决该引擎存在的问题，文档和示例目前还处于完善阶段，但引擎的功能已非常完善了，已经能满足游戏开发的需求。

Phaser 3 相比 Phaser 2 进步了什么？
告别 Pixi.js
Phaser 2 一直采用开源的 Pixi 2 版本（Pixi.js 稳定版本为 v4）作为 2D 渲染引擎，在 Phaser 3 中已经告别依赖 Pixi，因为在 Phaser 3 官方有自己的特定需求，因此花费了大量的时间开发自己的渲染器，渲染器针对 Phaser 3 的工作原理进行构建，官方宣称性能各方面都明显比 Phaser 2 快很多，虽然目前官方暂时未给出具体的性能测试对比，最后官方说在未来会更注重性能以及兼容性方面的提升。

Phaser 中的概念

physics物理引擎
word世界
scene场景
cameras相机

如何创建一个游戏

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 0 },
      // debug: true,
    },
  },
  scene: [Menu, Game, Over],
  parent: 'container',
}

const game = new Phaser.Game(config)

type :

  • Phaser.AUTO 根据浏览器自动选择渲染方式，如果支持webgl 就使用webgl
  • Phaser.CANVAS 使用canvas渲染
  • Phaser.WEBGL 使用webgl渲染

physics :

  • default引擎类型：Arcade，P2，Ninja，Box2D,并且可以引其他引擎插件
  • 调试模式：在引擎中加入debug：true即可开启调试模式

scene：

  • 场景，可以添加多个场景，默认执行第一个场景，只有添加到scene中的场景类才能被调用 一般做游戏的话，会有2个前置场景，第一个叫幕布场景，第二个叫资源加载场景。
    第一个场景主要加载进度条和背景，第二个场景主要加载游戏需要的公共资源 游戏场景方法主要包含3个：
    this.scene.start(key) 切换到key的场景
    this.scene.pause() 暂停当前游戏场景
    this.scene.run(key) 运行key的场景
export default class Game extends Phaser.Scene {
  preload(){
  }
  create() {
  }
  update(){
  }
}
  • preload 加载前执行
  • create 创建场景执行
  • update 每针调用一次

parent：

  • 挂载节点

加载资源

this.load.type(key, url)
this.load.image(key, url)
this.load.audio('place', [
  'key.ogg',
  'key.m4a',
])
this.load.spritesheet(key, url, {
  frameWidth: width,
  frameHeight: height,
})

添加对象

this.physics.add.sprite(400, 300, 'player')
this.physics.add.image(150, 450, 'reticle')

对象的锚点默认是中心点

  • 设置锚点位置 setOrigin(0.5)
  • 设置是否显示 setVisible(true/false)
  • 碰撞后不被移动 setImmovable(true/false)
  • 设置反弹系数 setBounce(0.9)
  • 设置摩擦系数 setFriction(0.9)
  • 设置不能离开世界 setCollideWorldBounds(true/false)
  • 设置对象大小 setDisplaySize(15,15)

添加事件

this.input.keyboard.addKeys({
  up: Phaser.Input.Keyboard.KeyCodes.W,
  down: Phaser.Input.Keyboard.KeyCodes.S,
  left: Phaser.Input.Keyboard.KeyCodes.A,
  right: Phaser.Idsnput.Keyboard.KeyCodes.D,
})

this.input.on()
this.input.once()
this.input.activePointer()

添加定时器

this.time.addEvent({
  delay: 1000,
  callback: () => {
  },
  callbackScope: this,
  loop: true,
})

添加碰撞

设置两个对象的碰撞
physics.add.collider(object1, object2, doSomething)
只检测碰撞是否发生，但不模拟碰撞效果
physics.add.overlap(object1, object2, doSomething)

添加动画

创建动画
this.anims.create({
      key: 'leftdown',
      frames: this.anims.generateFrameNumbers('zombie', {
        start: 256,
        end: 263,
      }),
      frameRate: 10,
      repeat: -1,
    })  
frames从多图片资源的低256张播放到263张，每10针一次。重复播放
播放动画
sprite.anim.play(key,true)

添加运动

this.tweens.add(options)

官方案例

phaser.io/examples

打枪游戏代码（含教程）

github.com/gudepeng/ga…

地图编辑工具tiled

image.png 可以通过右侧红框导入雪花图片资源，然后在左侧主面板编辑地图。

avatar
文章
阅读
粉丝