[phaser]如何优雅的加载资源

phaser资源

在phaser开发中, 我们常用到的资源有图片, 音频, 精灵图, 骨骼动画... 那么问题来了, 如何优雅地结构清晰的加载这些资源呢

webpack配置

对图片和声音, 我们用url-loader, 添加contenHash和动态的publicPath

import { RuleSetRule } from 'webpack'
const config = require('../../deploy.config')

const commonRulesConfig: RuleSetRule [] = [
  {
    test: /\.(jpg|png|jpeg|gif|svg)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 1,
          name: 'assets/imgs/[name].[contenthash:8].[ext]',
          publicPath: config.cdn.publicPath
        }
      }
    ]
  },
  {
    test: /\.(mp3|mp4)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      name: 'assets/media/[name].[contenthash:8].[ext]',
      limit: 10,
      publicPath: config.cdn.publicPath
    }
  }
]

module.exports = commonRulesConfig

对精灵图和骨骼动画, 我们用到拷贝资源的插件copy-webpack-plugin

import { Plugin } from 'webpack'

const copyPlugins = require('copy-webpack-plugin')

const commonPlugins: Plugin[] = [
  new copyPlugins(
    ['sprites'].map(assetsType =>
      ({
        from: 'static',
        to: __dirname +`static/${ assetsType }/`
      })
    ),
    {
      copyUnmodified: true,
    }
  ),
]

配置资源目录

让资源路径与webpack配置吻合

添加资源配置文件

在shared目录下添加不同资源类型的配置文件

/**
 * @description 图片资源配置
 */
const images: Array<string> = [
  'background'
]

const imagesConfig = {}

function url (fileName) {
  return require('../../static/images/' + fileName)
}

images.forEach(item => {
  imagesConfig[item] = url(`${ item }.png`)
})

export default imagesConfig

/**
 * @description 声音资源配置
 */

const audios: Array<string> = [
  'click',
]

const audiosConfig = {}

function url (fileName) {
  return require('../../static/sounds/' + fileName)
}

audios.forEach(item => {
  audiosConfig[item] = url(`${ item }.mp3`)
})

export default audiosConfig

/**
 * @description 精灵图资源配置
 */

const deployConfig = require('../../deploy.config')
const publicPath = deployConfig.cdn.publicPath
const pathPrefix = publicPath + 'static/sprites'

function url (fileName) {
  return pathPrefix + fileName
}

const spritesConfig = {
  'spriteAnimas': url('sprite.json'),
}

export default spritesConfig

在加载场景里加载资源

import imagesConfig from '../shared/images_config'
import soundsConfig from '../shared/sounds_config'
import spritesConfig from '../shared/sprites_config'

//...
this.load.crossOrigin = 'anonymous'

const assetsHash = {
  image: imagesConfig,
  audio: soundsConfig,
  multiatlas: spritesConfig
}

Object.keys(assetsHash).forEach(assetsType => {
  const assets = assetsHash[assetsType]
  Object.keys(assets).forEach(key => {
    this.load[assetsType](key, assets[key])
  })
})

this.load.start()
//...

注意

修改sprite描述文件里的image路径