phaser游戏开发笔记

这段时间突然来了点兴趣，不如做做一些简单的小游戏开发。也算练练手
预览地址

0 前提

对nodejs，git有一点点了解。

1 游戏引擎的选择

目标是一个html5小游戏，在这方面可以利用很多成熟的游戏引擎，比如国内大名鼎鼎的egret，还有一直大名鼎鼎的Cocos2d，当然还有在国外大行其道的phaser。我自己算是都体验过这三大引擎吧，个人非常喜欢egret，因为它基本上提供了游戏开发的全套工具。这次呢，我选择了phaser游戏引擎，因为这个游戏引擎真的很简单，可以说什么都不用安装就可以开始开发啦。再加上本身就是自己的一次小小的折腾，那就这怎么快，怎么方便怎么来了。

2 偷了一下懒，用下别人的高起点

按照官方的教程，下载好phaser库文件以后，还需要去安装什么xampp，Apache服务器之类的东西，要不然看不到游戏的开发效果。当然这很重要。不过确实很懒，为了快速上手，就直接去git clone了人家的一个项目，搞定一切٩( •̀㉨•́ )و get！。

git clone https://github.com/lean/phaser-es6-webpack

这是大神的项目，实现了利用webpack对phaser游戏项目的开发和打包。

这是项目的文件内容

git下来的项目

主要关注assets资源文件夹和src源代码文件夹

开发时的代码都在src里面

src文件夹

这里主要关注main.js这是整个项目的入口文件。还有两个文件夹sprites和states。一个简单的游戏由各种状态组成，包括加载状态，游戏状态，结束状态等等，在这些状态里面通过各种精灵实现了画面的显示和游戏过程。

简单的几个状态

如名，boot代表启动时的状态，game是游戏进行时的状态，win表示你赢啦，lose表示你输啦。

在phaser的每一个状态state里，都有init(), preload(), create(), update()几个函数，分别实现了状态的初始化，资源加载，游戏角色创建，以及更新。
我的boot就是这么写的

import Phaser from 'phaser'
import config from '../config'

export default class extends Phaser.State {
  init () {
    this.stage.backgroundColor = config.colorOrange
  }

  preload () {
    this.load.image('logo', './assets/images/an1.png')
    this.load.image('loadbar', 'assets/images/loader-bar.png')
  }
  
  create () {
    let an1 = this.add.sprite(this.game.width / 2, this.game.height / 2, 'logo')
    an1.width = this.game.width
    an1.height = this.game.height
    an1.anchor.set(0.5)
    
    let tx1 = this.add.text(20, 20, 'Go Home', {
      font: '50px',
      fill: config.colorYellow,
      align: 'center'
    })
    let tx2 = this.add.text(50, 70, 'Powered by Phaser Game Engine', {
      font: '10px',
      fill: config.colorYellow,
      align: 'center'
    })
    
    this.asset = this.add.sprite(0, this.game.height, 'loadbar')
    this.asset.width = this.game.width
    this.asset.anchor.setTo(0, 0.5)
    this.load.onLoadComplete.addOnce(this.onLoadComplete, this)
    this.load.setPreloadSprite(this.asset)
    
    this.load.image('mushroom', 'assets/images/mushroom2.png')
    this.load.image('an2', 'assets/images/an2.png')
    this.load.image('an3', 'assets/images/an3.png')
    this.load.image('an4', 'assets/images/an4.png')
    this.load.image('st1', 'assets/images/st1.png')
    this.load.image('st2', 'assets/images/st2.png')
    this.load.image('tr1', 'assets/images/tr1.png')
    this.load.image('tr2', 'assets/images/tr2.png')
    this.load.image('ho1', 'assets/images/ho1.png')
    this.load.image('ho2', 'assets/images/ho2.png')
    this.load.image('gr1', 'assets/images/gr1.jpg')
    // start load
    this.load.start()
  }
  
  onLoadComplete () {
    console.log('加载完成')
    this.state.start('Game')
  }
}

最后，各种状态都会在main文件中添加到状态管理器里面去，然后通过phaser对象实现对状态的控制。

import 'pixi'
import 'p2'
import Phaser from 'phaser'

import BootState from './states/Boot'
import GameState from './states/Game'
import WinState from './states/Win'
import LoseState from './states/Lose'

import config from './config'
import eruda from 'eruda'
eruda.init()

let game

const docElement = document.documentElement
const width = docElement.clientWidth
const height = docElement.clientHeight

window.onload = function () {
  game = new Phaser.Game(width, height, Phaser.CANVAS, 'content', null)
  game.state.add('Boot', BootState, false)
  game.state.add('Game', GameState, false)
  game.state.add('Win', WinState, false)
  game.state.add('Lose', LoseState, false)
  
  game.state.start('Boot')
}

更具体的内容就在我的github里面啦https://github.com/zixusir/goHome

写的不是特别好，还希望路过的江湖大神多多包涵指点。