Phaser 3 游戏开发入门――自定义构建Phaser库

Phaser是一个简单易用且功能强大的html5游戏框架。

其实一点也不简单。虽然是js开发，但事实上您可以将项目发布到任何平台。

https://medium.com/@louigi.verona/reducing-phasers-filesize-custom-phaser-builds-4a0314819a38

以下为译文（摘要）

https://github.com/photonstorm/phaser3-custom-build

第二步：初始化设置，进目录执行npm install，如果遇到问题执行npm audit fix，最后更新phaser库，执行 npm update phaser

第三步：构建

npm run buildcore

npm run buildfull

...

第四步构建自定义版

复制phaser-full.js的内容到phaser-custom.js。它的完整内容是

require(‘polyfills’); var CONST = require(‘const’); var Extend = require(‘utils/object/Extend’); /**  * @namespace Phaser  */ var Phaser = {  Actions: require(‘actions’),  Animations: require(‘animations’),  Cache: require(‘cache’),  Cameras: require(‘cameras’),  Core: require(‘core’),  Class: require(‘utils/Class’),  Create: require(‘create’),  Curves: require(‘curves’),  Data: require(‘data’),  Display: require(‘display’),  DOM: require(‘dom’),  Events: require(‘events/EventEmitter’),  Game: require(‘core/Game’),  GameObjects: require(‘gameobjects’),  Geom: require(‘geom’),  Input: require(‘input’),  Loader: require(‘loader’),  Math: require(‘math’),  Physics: require(‘physics’),  Plugins: require(‘plugins’),  Renderer: require(‘renderer’),  Scale: require(‘scale’),  Scene: require(‘scene/Scene’),  Scenes: require(‘scene’),  Sound: require(‘sound’),  Structs: require(‘structs’),  Textures: require(‘textures’),  Tilemaps: require(‘tilemaps’),  Time: require(‘time’),  Tweens: require(‘tweens’),  Utils: require(‘utils’) }; Phaser = Extend(false, Phaser, CONST); module.exports = Phaser; global.Phaser = Phaser;

// Physics: require(‘physics’),

大多数情况下，我们不需要所有的文件类型。

首先是处理GameObjects，在项目目录的/node_modules/phaser/src/gameobjects/下我们可以看到完整的GameObjects，每个目录代表一类game object

GameObjects: {  DisplayList: require(‘gameobjects/DisplayList’),  UpdateList: require(‘gameobjects/UpdateList’),  Image: require(‘gameobjects/image/Image’),  Sprite: require(‘gameobjects/sprite/Sprite’),  Text: require(‘gameobjects/text/static/Text’),  Factories: {    Image: require(‘gameobjects/image/ImageFactory’),    Sprite: require(‘gameobjects/sprite/SpriteFactory’),    Text: require(‘gameobjects/text/static/TextFactory’)  },  Creators: {    Image: require(‘gameobjects/image/ImageCreator’),    Sprite: require(‘gameobjects/sprite/SpriteCreator’),    Text: require(‘gameobjects/text/static/TextCreator’) }}

Loader: {  FileTypes: {  　ImageFile: require(‘loader/filetypes/ImageFile’),    AudioFile: require(‘loader/filetypes/AudioFile’),    SpriteSheetFile: require(‘loader/filetypes/SpriteSheetFile’),    ScriptFile: require(‘loader/filetypes/ScriptFile’)  },  LoaderPlugin: require(‘loader/LoaderPlugin’) }

注意最后的结构中的LoaderPlugin，但其他类型还可能需要其他自定义的扩展，完整的文件类型可在/node_modules/phaser/src/loader/filetypes/下查看。

phaser-custom.js例子

require(‘polyfills’); var CONST = require(‘const’); var Extend = require(‘utils/object/Extend’); /**  * @namespace Phaser  */ var Phaser = { Actions: require(‘actions’),  Animations: require(‘animations’),  Cache: require(‘cache’),  Cameras: require(‘cameras’),  Core: require(‘core’),  Class: require(‘utils/Class’),  Create: require(‘create’),  Display: require(‘display’),  Events: require(‘events/EventEmitter’),  Game: require(‘core/Game’),  //GameObjects: require(‘gameobjects’),  GameObjects: {  DisplayList: require(‘gameobjects/DisplayList’),  UpdateList: require(‘gameobjects/UpdateList’), Group: require(‘gameobjects/group/Group’),  Image: require(‘gameobjects/image/Image’),  Sprite: require(‘gameobjects/sprite/Sprite’),  Text: require(‘gameobjects/text/static/Text’), Factories: {  Group: require(‘gameobjects/group/GroupFactory’),  Image: require(‘gameobjects/image/ImageFactory’),  Sprite: require(‘gameobjects/sprite/SpriteFactory’),  Text: require(‘gameobjects/text/static/TextFactory’)    }, Creators: {  Group: require(‘gameobjects/group/GroupCreator’),   Image: require(‘gameobjects/image/ImageCreator’),  Sprite: require(‘gameobjects/sprite/SpriteCreator’),  Text: require(‘gameobjects/text/static/TextCreator’)    }  },  Input: require(‘input’),  Loader: {  FileTypes: {  ImageFile: require(‘loader/filetypes/ImageFile’),  AudioFile: require(‘loader/filetypes/AudioFile’),  SpriteSheetFile: require(‘loader/filetypes/SpriteSheetFile’),  ScriptFile: require(‘loader/filetypes/ScriptFile’)  },  LoaderPlugin: require(‘loader/LoaderPlugin’)  },  Plugins: require(‘plugins’),  Renderer: require(‘renderer’),  Scale: require(‘scale’),  Scene: require(‘scene/Scene’),  Scenes: require(‘scene’),  Sound: require(‘sound’) }; Phaser = Extend(false, Phaser, CONST); module.exports = Phaser; global.Phaser = Phaser;

结论

自定义可以帮助你把不需要的模块都去掉，作者就将880k减到了450k。

标签

Phaser

require