Phaser3 游戏开发入门——自定义构建Phaser库

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

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

由于功能实在是太多，如果要降低Phaser的文件大小（880kb），我们可以自定义Phaser库的构建，指南  https://medium.com/@louigi.verona/reducing-phasers-filesize-custom-phaser-builds-4a0314819a38

以下为译文（摘要）

第一步：git clone https://github.com/photonstorm/phaser3-custom-build

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

第三步：构建

构建命令格式为 npm run [ALIAS]。[ALIAS]部分决定了你要构建哪个版本，dist是构建的默认目标目录。

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;

 执行npm run build，build这个别名的配置就依赖于 “phaser-custom.js”。

 开始自定义，举个例子，如项目是一个2D的棋牌游戏，我们就不需要任何物理引擎，从Phaser对象中安全的移除它。


// Physics: require(‘physics’),

 第五步 清理Loader 和 GameObjects

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

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

假设我们要在假如 Image Sprite Text这几种game object，我们可以将GameObjects: require(‘gameobjects’)替换为

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’)
}}

 然后是Loaders，替换Loader: require(‘loader’),

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。