├── .babelrc ├── .gitignore ├── LICENSE ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src ├── assets │ └── logo.png ├── index.js ├── phaser-core.js ├── phaser-custom-sprite-loader.js ├── phaser-custom.js └── phaser-full.js └── webpack ├── base.js └── prod.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["@babel/env", { 4 | "targets": { 5 | "browsers": [ 6 | ">0.25%", 7 | "not ie 11", 8 | "not op_mini all" 9 | ] 10 | }, 11 | "modules": false 12 | }] 13 | ], 14 | } 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # System and IDE files 2 | Thumbs.db 3 | .DS_Store 4 | .idea 5 | *.suo 6 | *.sublime-project 7 | *.sublime-workspace 8 | 9 | # Vendors 10 | node_modules/ 11 | 12 | # Build 13 | dist/ 14 | /npm-debug.log 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Richard Davey 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Phaser 3 Webpack Project Template with custom Phaser Build 2 | 3 | A Phaser 3 project template with ES6 support via [Babel 7](https://babeljs.io/) and [Webpack 4](https://webpack.js.org/) 4 | that includes hot-reloading for development and production-ready builds. 5 | 6 | Loading images via JavaScript module `import` is also supported, or are copied from the `assets` folder. 7 | 8 | ## Requirements 9 | 10 | [Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`. 11 | 12 | ## Available Commands 13 | 14 | | Command | Description | 15 | |---------|-------------| 16 | | `npm install` | Install project dependencies | 17 | | `npm start` | Build project and open web server running project | 18 | | `npm run build` | Builds code bundle with production settings (minification, uglification, etc..) | 19 | 20 | ## Writing Code 21 | 22 | After cloning the repo, run `npm install` from your project directory. Then, you can start the local development 23 | server by running `npm start`. 24 | 25 | After starting the development server with `npm start`, you can edit the `src/index.js` files 26 | and webpack will automatically recompile and reload your server (available at `http://localhost:8080` 27 | by default). 28 | 29 | ## Customizing the Template 30 | 31 | ### How to import a custom Phaser build 32 | 33 | If you look in the `src/index.js` file, you will see that Phaser has been imported at the top of the file: 34 | 35 | ```javascript 36 | import Phaser from './phaser-custom-sprite-loader'; 37 | ``` 38 | 39 | Note that you do not import the _entire_ Phaser package, but rather a custom entry point that contains only the 40 | parts your game needs. If you open the file `phaser-custom-sprite-loader.js` you'll see the modules that have 41 | been exposed: 42 | 43 | ```javascript 44 | require('../node_modules/phaser/src/polyfills'); 45 | 46 | var CONST = require('../node_modules/phaser/src/const'); 47 | var Extend = require('../node_modules/phaser/src/utils/object/Extend'); 48 | 49 | var Phaser = { 50 | 51 | Cameras: { 52 | Scene2D: require('../node_modules/phaser/src/cameras/2d') 53 | }, 54 | Events: require('../node_modules/phaser/src/events/EventEmitter'), 55 | Game: require('../node_modules/phaser/src/core/Game'), 56 | GameObjects: { 57 | DisplayList: require('../node_modules/phaser/src/gameobjects/DisplayList'), 58 | UpdateList: require('../node_modules/phaser/src/gameobjects/UpdateList'), 59 | 60 | Image: require('../node_modules/phaser/src/gameobjects/image/Image'), 61 | Sprite: require('../node_modules/phaser/src/gameobjects/sprite/Sprite'), 62 | 63 | Factories: { 64 | Image: require('../node_modules/phaser/src/gameobjects/image/ImageFactory'), 65 | Sprite: require('../node_modules/phaser/src/gameobjects/sprite/SpriteFactory') 66 | }, 67 | 68 | Creators: { 69 | Image: require('../node_modules/phaser/src/gameobjects/image/ImageCreator'), 70 | Sprite: require('../node_modules/phaser/src/gameobjects/sprite/SpriteCreator') 71 | } 72 | }, 73 | Loader: { 74 | FileTypes: { 75 | ImageFile: require('../node_modules/phaser/src/loader/filetypes/ImageFile') 76 | }, 77 | LoaderPlugin: require('../node_modules/phaser/src/loader/LoaderPlugin') 78 | }, 79 | Math: { 80 | Between: require('../node_modules/phaser/src/math/Between') 81 | }, 82 | Tweens: require('../node_modules/phaser/src/tweens') 83 | }; 84 | 85 | Phaser = Extend(false, Phaser, CONST); 86 | 87 | module.exports = Phaser; 88 | ``` 89 | 90 | This file is creating a custom Phaser API bundle, so that only those APIs listed (and those required internally by them) are bundled together. This can dramatically decrease the size of your final bundle. There are several custom build entry points included in this project template. Use which-ever one you need, or take one and customise it as you see fit. Full instructions on creating custom entry points can be found below. 91 | 92 | ### Babel 93 | 94 | You can write modern ES6+ JavaScript and Babel will transpile it to a version of JavaScript that you 95 | want your project to support. The targeted browsers are set in the `.babelrc` file and the default currently 96 | targets all browsers with total usage over "0.25%" but excludes IE11 and Opera Mini. 97 | 98 | ``` 99 | "browsers": [ 100 | ">0.25%", 101 | "not ie 11", 102 | "not op_mini all" 103 | ] 104 | ``` 105 | 106 | ### Webpack 107 | 108 | If you want to customize your build, such as adding a new webpack loader or plugin (i.e. for loading CSS or fonts), you can 109 | modify the `webpack/base.js` file for cross-project changes, or you can modify and / or create 110 | new configuration files and target them in specific npm tasks inside of `package.json'. 111 | 112 | ## Deploying Code 113 | 114 | After you run the `npm run build` command, your code will be built into a single bundle located at 115 | `dist/bundle.min.js` along with any other assets you project depended. 116 | 117 | If you put the contents of the `dist` folder in a publicly-accessible location (say something like `http://mycoolserver.com`), 118 | you should be able to open `http://mycoolserver.com/index.html` and play your game. 119 | 120 | # Creating Custom Phaser 3 Builds 121 | 122 | By default, Phaser will include pretty much everything, especially if you just require or import the main entry point. This will add 770KB of minified JavaScript to your bundle which is a considerable amount, especially if you aren't even using a large chunk of it. However, you can choose what you actually need in your bundle to a very granular degree. It just takes a little configuration to do it. 123 | 124 | To create custom builds you're going to need [webpack](https://webpack.js.org/). If you've no experience with webpack it'd be best to go and learn how it works before carrying on, as Phaser is built specifically with it. Other bundlers, like Parcel, may also work but it's up to you to translate this guide into their respective formats. 125 | 126 | The important thing to remember is that the Phaser module entry point, as defined in webpack, controls the whole structure of the exposed API. That is, everything it includes is made available under the Phaser namespace. It literally defines which features are included in the library. That's an important distinction you should understand: it controls what is available in the library, it's not meant as an entry point for a _project_. 127 | 128 | ## Building Phaser 129 | 130 | This guide is based on creating a custom build of Phaser 3.11. When newer versions ship, it'll change slightly, because more things will be available to bundle in, but the core concept will remain exactly the same. 131 | 132 | To start with I'd recommend you [clone this template repo](https://github.com/photonstorm/phaser3-custom-build). It will save a whole bunch of time getting set-up. Clone it, then `npm install` to grab the dependencies. You're now ready to do a custom build. 133 | 134 | If you issue the command `npm run build` (or `webpack` if you've got it available globally) from the project folder then it'll create a custom build into the `dist` folder. This file is called `phaser-custom.js`. Inside the `test` folder you'll find an `index.html` file. Open this in a browser via an http server, or with local file permissions enabled, and you should see the following: 135 | 136 | [![image](https://cascade.madmimi.com/promotion_images/6092/3212/original/custom1.png?1535988194)]() 137 | 138 | If you're wondering where on earth the Star Wars logo is coming from that's a valid question :) Let's break it down. 139 | 140 | The webpack config in the template uses the file [phaser-custom.js](https://github.com/photonstorm/phaser3-custom-build/blob/master/phaser-custom.js) as its entry point. Here's the complete file: 141 | 142 | [![image](https://cascade.madmimi.com/promotion_images/6092/4444/original/custom2.png?1535989284)]() 143 | 144 | If you look at the file, or the above image, you'll see it defines what's available in the Phaser namespace. It starts by including the standard polyfills and CONSTs. Then it pulls in the 2D Camera system, the Events, the Game, the Graphics object and finally one Math function called Between. 145 | 146 | This is concluded by merging in the constants and exporting it globally. Combined with the webpack config this will build into the phaser-custom.js bundle which will have everything Phaser needs to run, plus the extras identified above. By default Phaser doesn't include a camera system or any Game Objects, which makes the 'base' use somewhat limited. So in this case we've added the Graphics object, because at the very least we can render something with that. 147 | 148 | The `GraphicsFactory` function is what allows you to use the command `this.add.graphics` from within a Scene. You could exclude this to save a couple of KB if you wish, but then you'd have to alter your code to create a Graphics instance directly and add it to the Display List. 149 | 150 | In the `test/index.html` file you'll see the code for our demo. All it does is create an 800 x 600 game instance and then renders the Star Wars logo to the Graphics object. It's not exactly a game but it demonstrates that, fundamentally, everything is working. 151 | 152 | If you look in the `dist` folder you'll see that the `phaser-custom` file is 274 KB minified, or 71 KB gzipped. So, it's _significantly_ smaller than the default build that Phaser ships with. 153 | 154 | ## Tweaking the Custom Build 155 | 156 | So, how do you now edit the custom build to include the ability to do something useful like load images and display them? To do this we need two extra things added to our package: Sprites and the File Loader, otherwise, we can't get the files into Phaser. Here is a tweaked version of the `phaser-custom.js` file from above. You can find this in the repo called [phaser-custom-sprite.js](https://github.com/photonstorm/phaser3-custom-build/blob/master/phaser-custom-sprite.js): 157 | 158 | [![image](https://cascade.madmimi.com/promotion_images/6092/7835/original/custom4.png?1535991630)]() 159 | 160 | If you look at the file above you'll see we've added in the Image and Sprite Game Objects (and removed Graphics) and also added the Loader module. This pulls in the entire Loader and all possible File Types, which is actually overkill for this bundle, so I'll show you how to refine that shortly. For now, though, it will do what we need. Issue the command `npm run buildsprite` and it'll build a new bundle to the `dist` folder. Launch the file `test/indexsprite.html` and you should get the following: 161 | 162 | [![image](https://cascade.madmimi.com/promotion_images/6092/7999/original/custom3.png?1535991809)]() 163 | 164 | Taa-da, working Sprites and image loading! The bundle size is now 78 KB min+gz, which is 7 KB bigger than our Graphics only bundle, but that's to be expected as we've added the whole Loader module to our build and a couple of meaty Game Objects too. 165 | 166 | Let's refine it a little bit though. We really don't need all of the file types the Loader supports. In fact, for this test, we literally only need one: the Image loader. Let's tweak our entry point so it includes only the LoaderPlugin and the Image File Type: 167 | 168 | [![image](https://cascade.madmimi.com/promotion_images/6094/9597/original/custom5.png?1536004657)]() 169 | 170 | If we re-run the build command our new minified file is 284 KB which is 19 KB less than before. It's not just about file size, though, that's less JavaScript for the browser to process when it's launching your game for the first time too. 171 | 172 | How do you know which things to include back in the entry point? You can work it out by looking at the `phaser.js` and `phaser-core.js` files in the root src folder of the main Phaser repo. Using those, plus just browsing the source folders for yourself, you can quickly find what you need. 173 | 174 | There's still quite a lot of modules being included that we may not require though. We can visualize that by creating a webpack profile. Use the command `npm run buildlog`. This will build Phaser and also create a JSON file that details the build process. You can upload this JSON file to the online [webpack analyzer](http://webpack.github.io/analyse/). I've included a json file in the repo so you can try it out for yourself. Just [download it from here](https://github.com/photonstorm/phaser3-custom-build/blob/master/webpack.build-log.json), then go to the webpack analyzer and upload it. After a short while it will generate a report. Click on 'modules' to view the module tree: 175 | 176 | [![image](https://cascade.madmimi.com/promotion_images/6095/0953/original/custom6.png?1536005428)]() 177 | 178 | All of the modules are listed below the interactive tree. Click any node on the tree to see what is requiring that module and how many dependencies it has. Let's pick a particularly busy node: 179 | 180 | [![image](https://cascade.madmimi.com/promotion_images/6095/1504/original/custom7.png?1536005667)]() 181 | 182 | As we can see, lots of modules include the entire Array Utils package. This isn't a bad thing in itself, because it's a pretty compact and widely used area of the API, but this exploration process did highlight a lot to me. If you look at the Game module you'll see it pulls in plenty of things. The Texture Manager, the Sound Manager, the Animation Manager. All the things it expects to need in order to operate. Yet, the Sound Manager is entirely optional - we could easily hide that behind a custom build flag and it'd stop including 140 KB worth of un-minified source, because if you're literally not using it, why even bother to have it in the API? The same can be said for a number of other systems, such as the Animation Manager. The Device module could be made into a much more compact version that only includes checks that Phaser needs to boot-up, too. 183 | 184 | In short, I'm quite happy that it's really easy to create a significantly smaller version of Phaser 3 with very little effort on your part. Use the custom build template and smash away parts of the API you don't need and get your games even leaner. This is especially important for Facebook Instant Games, where time-to-play needs to be as tiny as possible. Reducing your build from several hundred KB down to 70 KB certainly gets you a lot further along that path. 185 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "phaser3-project-template-custom-build", 3 | "version": "1.0.0", 4 | "description": "Phaser 3 Project Template with custom build of Phaser", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "build": "webpack --config webpack/prod.js", 8 | "start": "webpack-dev-server --config webpack/base.js" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/photonstorm/phaser3-project-template-custom-build.git" 13 | }, 14 | "author": "Richard Davey (http://www.photonstorm.com)", 15 | "license": "MIT", 16 | "licenseUrl": "http://www.opensource.org/licenses/mit-license.php", 17 | "bugs": { 18 | "url": "https://github.com/photonstorm/phaser3-project-template-custom-build/issues" 19 | }, 20 | "homepage": "https://github.com/photonstorm/phaser3-project-template-custom-build#readme", 21 | "dependencies": { 22 | "phaser": "^3.21.0" 23 | }, 24 | "devDependencies": { 25 | "@babel/core": "^7.7.4", 26 | "@babel/preset-env": "^7.7.4", 27 | "babel-loader": "^8.0.6", 28 | "clean-webpack-plugin": "^3.0.0", 29 | "copy-webpack-plugin": "^5.0.5", 30 | "file-loader": "^5.0.2", 31 | "html-webpack-plugin": "^3.2.0", 32 | "raw-loader": "^4.0.0", 33 | "terser-webpack-plugin": "^2.2.1", 34 | "webpack": "^4.41.2", 35 | "webpack-cli": "^3.3.10", 36 | "webpack-dev-server": "^3.9.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/photonstorm/phaser3-project-template-custom-build/808187977a95916b00cc67ec3de805acc2e20983/src/assets/logo.png -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import Phaser from './phaser-custom-sprite-loader'; 2 | 3 | const config = { 4 | type: Phaser.AUTO, 5 | width: 800, 6 | height: 600, 7 | backgroundColor: '#2d2d2d', 8 | scene: { 9 | preload: preload, 10 | create: create 11 | } 12 | }; 13 | 14 | const game = new Phaser.Game(config); 15 | 16 | function preload () 17 | { 18 | this.load.image('logo', 'assets/logo.png'); 19 | } 20 | 21 | function create () 22 | { 23 | const logo = this.add.image(400, 150, 'logo'); 24 | 25 | this.tweens.add({ 26 | targets: logo, 27 | y: 450, 28 | duration: 2000, 29 | ease: 'Power2', 30 | yoyo: true, 31 | loop: -1 32 | }); 33 | } 34 | -------------------------------------------------------------------------------- /src/phaser-core.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Richard Davey 3 | * @copyright 2019 Photon Storm Ltd. 4 | * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} 5 | */ 6 | 7 | require('polyfills'); 8 | 9 | var CONST = require('const'); 10 | var Extend = require('utils/object/Extend'); 11 | 12 | /** 13 | * @namespace Phaser 14 | */ 15 | 16 | var Phaser = { 17 | 18 | Animations: require('animations'), 19 | Cache: require('cache'), 20 | Cameras: { Scene2D: require('cameras/2d') }, 21 | Core: require('core'), 22 | Class: require('utils/Class'), 23 | Data: require('data'), 24 | Display: { Masks: require('display/mask') }, 25 | Events: require('events/EventEmitter'), 26 | Game: require('core/Game'), 27 | GameObjects: { 28 | DisplayList: require('gameobjects/DisplayList'), 29 | GameObjectCreator: require('gameobjects/GameObjectCreator'), 30 | GameObjectFactory: require('gameobjects/GameObjectFactory'), 31 | UpdateList: require('gameobjects/UpdateList'), 32 | Components: require('gameobjects/components'), 33 | BuildGameObject: require('gameobjects/BuildGameObject'), 34 | BuildGameObjectAnimation: require('gameobjects/BuildGameObjectAnimation'), 35 | GameObject: require('gameobjects/GameObject'), 36 | Graphics: require('gameobjects/graphics/Graphics.js'), 37 | Image: require('gameobjects/image/Image'), 38 | Sprite: require('gameobjects/sprite/Sprite'), 39 | Text: require('gameobjects/text/static/Text'), 40 | Factories: { 41 | Graphics: require('gameobjects/graphics/GraphicsFactory'), 42 | Image: require('gameobjects/image/ImageFactory'), 43 | Sprite: require('gameobjects/sprite/SpriteFactory'), 44 | Text: require('gameobjects/text/static/TextFactory') 45 | }, 46 | Creators: { 47 | Graphics: require('gameobjects/graphics/GraphicsCreator'), 48 | Image: require('gameobjects/image/ImageCreator'), 49 | Sprite: require('gameobjects/sprite/SpriteCreator'), 50 | Text: require('gameobjects/text/static/TextCreator') 51 | } 52 | }, 53 | Input: require('input'), 54 | Loader: { 55 | FileTypes: { 56 | AnimationJSONFile: require('loader/filetypes/AnimationJSONFile'), 57 | AtlasJSONFile: require('loader/filetypes/AtlasJSONFile'), 58 | AudioFile: require('loader/filetypes/AudioFile'), 59 | AudioSpriteFile: require('loader/filetypes/AudioSpriteFile'), 60 | HTML5AudioFile: require('loader/filetypes/HTML5AudioFile'), 61 | ImageFile: require('loader/filetypes/ImageFile'), 62 | JSONFile: require('loader/filetypes/JSONFile'), 63 | MultiAtlasFile: require('loader/filetypes/MultiAtlasFile'), 64 | PluginFile: require('loader/filetypes/PluginFile'), 65 | ScriptFile: require('loader/filetypes/ScriptFile'), 66 | SpriteSheetFile: require('loader/filetypes/SpriteSheetFile'), 67 | TextFile: require('loader/filetypes/TextFile'), 68 | XMLFile: require('loader/filetypes/XMLFile') 69 | }, 70 | File: require('loader/File'), 71 | FileTypesManager: require('loader/FileTypesManager'), 72 | GetURL: require('loader/GetURL'), 73 | LoaderPlugin: require('loader/LoaderPlugin'), 74 | MergeXHRSettings: require('loader/MergeXHRSettings'), 75 | MultiFile: require('loader/MultiFile'), 76 | XHRLoader: require('loader/XHRLoader'), 77 | XHRSettings: require('loader/XHRSettings') 78 | }, 79 | Math: { 80 | Between: require('math/Between'), 81 | DegToRad: require('math/DegToRad'), 82 | FloatBetween: require('math/FloatBetween'), 83 | RadToDeg: require('math/RadToDeg'), 84 | Vector2: require('math/Vector2') 85 | }, 86 | Plugins: require('plugins'), 87 | Renderer: require('renderer'), 88 | Scale: require('scale'), 89 | Scene: require('scene/Scene'), 90 | Scenes: require('scene'), 91 | Sound: require('sound'), 92 | Structs: require('structs'), 93 | Textures: require('textures'), 94 | Time: require('time'), 95 | Tweens: require('tweens') 96 | }; 97 | 98 | // Merge in the consts 99 | 100 | Phaser = Extend(false, Phaser, CONST); 101 | 102 | // Export it 103 | 104 | module.exports = Phaser; 105 | 106 | global.Phaser = Phaser; 107 | 108 | /* 109 | * "Documentation is like pizza: when it is good, it is very, very good; 110 | * and when it is bad, it is better than nothing." 111 | * -- Dick Brandon 112 | */ 113 | -------------------------------------------------------------------------------- /src/phaser-custom-sprite-loader.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Richard Davey 3 | * @copyright 2019 Photon Storm Ltd. 4 | * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} 5 | */ 6 | 7 | require('../node_modules/phaser/src/polyfills'); 8 | 9 | var CONST = require('../node_modules/phaser/src/const'); 10 | var Extend = require('../node_modules/phaser/src/utils/object/Extend'); 11 | 12 | /** 13 | * @namespace Phaser 14 | */ 15 | 16 | var Phaser = { 17 | 18 | Cameras: { 19 | Scene2D: require('../node_modules/phaser/src/cameras/2d') 20 | }, 21 | Events: require('../node_modules/phaser/src/events/EventEmitter'), 22 | Game: require('../node_modules/phaser/src/core/Game'), 23 | GameObjects: { 24 | DisplayList: require('../node_modules/phaser/src/gameobjects/DisplayList'), 25 | UpdateList: require('../node_modules/phaser/src/gameobjects/UpdateList'), 26 | 27 | Image: require('../node_modules/phaser/src/gameobjects/image/Image'), 28 | Sprite: require('../node_modules/phaser/src/gameobjects/sprite/Sprite'), 29 | 30 | Factories: { 31 | Image: require('../node_modules/phaser/src/gameobjects/image/ImageFactory'), 32 | Sprite: require('../node_modules/phaser/src/gameobjects/sprite/SpriteFactory') 33 | }, 34 | 35 | Creators: { 36 | Image: require('../node_modules/phaser/src/gameobjects/image/ImageCreator'), 37 | Sprite: require('../node_modules/phaser/src/gameobjects/sprite/SpriteCreator') 38 | } 39 | }, 40 | Loader: { 41 | FileTypes: { 42 | ImageFile: require('../node_modules/phaser/src/loader/filetypes/ImageFile') 43 | }, 44 | LoaderPlugin: require('../node_modules/phaser/src/loader/LoaderPlugin') 45 | }, 46 | Math: { 47 | Between: require('../node_modules/phaser/src/math/Between') 48 | }, 49 | Tweens: require('../node_modules/phaser/src/tweens') 50 | }; 51 | 52 | // Merge in the consts 53 | 54 | Phaser = Extend(false, Phaser, CONST); 55 | 56 | // Export it 57 | 58 | module.exports = Phaser; 59 | 60 | global.Phaser = Phaser; 61 | -------------------------------------------------------------------------------- /src/phaser-custom.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Richard Davey 3 | * @copyright 2019 Photon Storm Ltd. 4 | * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} 5 | */ 6 | 7 | require('../node_modules/phaser/src/polyfills'); 8 | 9 | var CONST = require('../node_modules/phaser/src/const'); 10 | var Extend = require('../node_modules/phaser/src/utils/object/Extend'); 11 | 12 | /** 13 | * @namespace Phaser 14 | */ 15 | 16 | var Phaser = { 17 | 18 | Cameras: { 19 | Scene2D: require('../node_modules/phaser/src/cameras/2d') 20 | }, 21 | Events: require('../node_modules/phaser/src/events/EventEmitter'), 22 | Game: require('../node_modules/phaser/src/core/Game'), 23 | GameObjects: { 24 | DisplayList: require('../node_modules/phaser/src/gameobjects/DisplayList'), 25 | UpdateList: require('../node_modules/phaser/src/gameobjects/UpdateList'), 26 | Graphics: require('../node_modules/phaser/src/gameobjects/graphics/Graphics.js'), 27 | Factories: { 28 | Graphics: require('../node_modules/phaser/src/gameobjects/graphics/GraphicsFactory') 29 | }, 30 | Creators: { 31 | Graphics: require('../node_modules/phaser/src/gameobjects/graphics/GraphicsCreator') 32 | } 33 | }, 34 | Math: { 35 | Between: require('../node_modules/phaser/src/math/Between') 36 | } 37 | }; 38 | 39 | // Merge in the consts 40 | 41 | Phaser = Extend(false, Phaser, CONST); 42 | 43 | // Export it 44 | 45 | module.exports = Phaser; 46 | 47 | global.Phaser = Phaser; 48 | -------------------------------------------------------------------------------- /src/phaser-full.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Richard Davey 3 | * @copyright 2019 Photon Storm Ltd. 4 | * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} 5 | */ 6 | 7 | require('../node_modules/phaser/src/polyfills'); 8 | 9 | var CONST = require('../node_modules/phaser/src/const'); 10 | var Extend = require('../node_modules/phaser/src/utils/object/Extend'); 11 | 12 | /** 13 | * @namespace Phaser 14 | */ 15 | 16 | var Phaser = { 17 | 18 | Actions: require('../node_modules/phaser/src/actions'), 19 | Animations: require('../node_modules/phaser/src/animations'), 20 | Cache: require('../node_modules/phaser/src/cache'), 21 | Cameras: require('../node_modules/phaser/src/cameras'), 22 | Core: require('../node_modules/phaser/src/core'), 23 | Class: require('../node_modules/phaser/src/utils/Class'), 24 | Create: require('../node_modules/phaser/src/create'), 25 | Curves: require('../node_modules/phaser/src/curves'), 26 | Data: require('../node_modules/phaser/src/data'), 27 | Display: require('../node_modules/phaser/src/display'), 28 | DOM: require('../node_modules/phaser/src/dom'), 29 | Events: require('../node_modules/phaser/src/events/EventEmitter'), 30 | Game: require('../node_modules/phaser/src/core/Game'), 31 | GameObjects: require('../node_modules/phaser/src/gameobjects'), 32 | Geom: require('../node_modules/phaser/src/geom'), 33 | Input: require('../node_modules/phaser/src/input'), 34 | Loader: require('../node_modules/phaser/src/loader'), 35 | Math: require('../node_modules/phaser/src/math'), 36 | Physics: require('../node_modules/phaser/src/physics'), 37 | Plugins: require('../node_modules/phaser/src/plugins'), 38 | Renderer: require('../node_modules/phaser/src/renderer'), 39 | Scale: require('../node_modules/phaser/src/scale'), 40 | Scene: require('../node_modules/phaser/src/scene/Scene'), 41 | Scenes: require('../node_modules/phaser/src/scene'), 42 | Sound: require('../node_modules/phaser/src/sound'), 43 | Structs: require('../node_modules/phaser/src/structs'), 44 | Textures: require('../node_modules/phaser/src/textures'), 45 | Tilemaps: require('../node_modules/phaser/src/tilemaps'), 46 | Time: require('../node_modules/phaser/src/time'), 47 | Tweens: require('../node_modules/phaser/src/tweens'), 48 | Utils: require('../node_modules/phaser/src/utils') 49 | 50 | }; 51 | 52 | // Merge in the consts 53 | 54 | Phaser = Extend(false, Phaser, CONST); 55 | 56 | // Export it 57 | 58 | module.exports = Phaser; 59 | 60 | global.Phaser = Phaser; 61 | 62 | /* 63 | * "Documentation is like pizza: when it is good, it is very, very good; 64 | * and when it is bad, it is better than nothing." 65 | * -- Dick Brandon 66 | */ 67 | -------------------------------------------------------------------------------- /webpack/base.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 2 | const CopyPlugin = require('copy-webpack-plugin'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const path = require('path'); 5 | const webpack = require('webpack'); 6 | 7 | module.exports = { 8 | mode: 'development', 9 | devtool: 'eval-source-map', 10 | devServer: { 11 | contentBase: path.join(__dirname, 'build'), 12 | compress: true, 13 | port: 8080, 14 | open: true 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.js$/, 20 | exclude: /node_modules/, 21 | use: { 22 | loader: 'babel-loader' 23 | } 24 | }, 25 | { 26 | test: [/\.vert$/, /\.frag$/], 27 | use: 'raw-loader' 28 | }, 29 | { 30 | test: /\.(gif|png|jpe?g|svg|xml)$/i, 31 | use: 'file-loader' 32 | } 33 | ] 34 | }, 35 | plugins: [ 36 | new CleanWebpackPlugin({ 37 | root: path.resolve(__dirname, '../') 38 | }), 39 | new CopyPlugin([ 40 | { from: 'src/assets', to: 'assets' }, 41 | ]), 42 | new webpack.DefinePlugin({ 43 | "typeof CANVAS_RENDERER": JSON.stringify(true), 44 | "typeof WEBGL_RENDERER": JSON.stringify(true), 45 | "typeof EXPERIMENTAL": JSON.stringify(false), 46 | "typeof PLUGIN_CAMERA3D": JSON.stringify(false), 47 | "typeof PLUGIN_FBINSTANT": JSON.stringify(false), 48 | "typeof FEATURE_SOUND": JSON.stringify(true) 49 | }), 50 | new HtmlWebpackPlugin({ 51 | template: './index.html' 52 | }) 53 | ] 54 | }; 55 | -------------------------------------------------------------------------------- /webpack/prod.js: -------------------------------------------------------------------------------- 1 | const { CleanWebpackPlugin } = require('clean-webpack-plugin'); 2 | const CopyPlugin = require('copy-webpack-plugin'); 3 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 4 | const path = require('path'); 5 | const webpack = require('webpack'); 6 | const TerserPlugin = require('terser-webpack-plugin'); 7 | 8 | module.exports = { 9 | mode: 'production', 10 | devtool: false, 11 | output: { 12 | filename: 'bundle.min.js' 13 | }, 14 | performance: { 15 | maxEntrypointSize: 900000, 16 | maxAssetSize: 900000 17 | }, 18 | optimization: { 19 | minimizer: [ 20 | new TerserPlugin({ 21 | terserOptions: { 22 | output: { 23 | comments: false 24 | } 25 | } 26 | }) 27 | ] 28 | }, 29 | module: { 30 | rules: [ 31 | { 32 | test: /\.js$/, 33 | exclude: /node_modules/, 34 | use: { 35 | loader: 'babel-loader' 36 | } 37 | }, 38 | { 39 | test: [/\.vert$/, /\.frag$/], 40 | use: 'raw-loader' 41 | }, 42 | { 43 | test: /\.(gif|png|jpe?g|svg|xml)$/i, 44 | use: 'file-loader' 45 | } 46 | ] 47 | }, 48 | plugins: [ 49 | new CleanWebpackPlugin({ 50 | root: path.resolve(__dirname, '../') 51 | }), 52 | new CopyPlugin([ 53 | { from: 'src/assets', to: 'assets' }, 54 | ]), 55 | new webpack.DefinePlugin({ 56 | "typeof CANVAS_RENDERER": JSON.stringify(true), 57 | "typeof WEBGL_RENDERER": JSON.stringify(true), 58 | "typeof EXPERIMENTAL": JSON.stringify(false), 59 | "typeof PLUGIN_CAMERA3D": JSON.stringify(false), 60 | "typeof PLUGIN_FBINSTANT": JSON.stringify(false), 61 | "typeof FEATURE_SOUND": JSON.stringify(true) 62 | }), 63 | new HtmlWebpackPlugin({ 64 | template: './index.html' 65 | }) 66 | ] 67 | }; 68 | --------------------------------------------------------------------------------