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。