You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A Phaser 3 project template with ES6 support via [Babel 7](https://babeljs.io/) and [Webpack 5](https://webpack.js.org/) that includes hot-reloading for development and production-ready builds.
3
+
This is a Phaser 3 project template that uses webpack for bundling. It supports hot-reloading for quick development workflow and includes scripts to generate production-ready builds.
4
4
5
-
This has been updated for Phaser 3.60.0 version and above.
5
+
### Versions
6
6
7
-
Loading images via JavaScript module `import` is also supported, although not recommended.
@@ -17,37 +20,60 @@ Loading images via JavaScript module `import` is also supported, although not re
17
20
| Command | Description |
18
21
|---------|-------------|
19
22
|`npm install`| Install project dependencies |
20
-
|`npm start`|Build project and open web server running project|
21
-
|`npm run build`|Builds code bundle with production settings (minification, uglification, etc..) into the `dist` folder |
23
+
|`npm run dev`|Launch a development web server |
24
+
|`npm run build`|Create a production build in the `dist` folder |
22
25
23
26
## Writing Code
24
27
25
-
After cloning the repo, run `npm install` from your project directory. Then, you can start the local development server by running `npm start`.
28
+
After cloning the repo, run `npm install` from your project directory. Then, you can start the local development server by running `npm run dev`.
29
+
30
+
The local development server runs on `http://localhost:8080` by default. Please see the webpack documentation if you wish to change this, or add SSL support.
31
+
32
+
Once the server is running you can edit any of the files in the `src` folder. Webpack will automatically recompile your code and then reload the browser.
26
33
27
-
After starting the development server with `npm start`, you can edit any files in the `src` folder and webpack will automatically recompile and reload your server (available at `http://localhost:8080` by default).
34
+
## Template Project Structure
35
+
36
+
We have provided a default project structure to get you started. This is as follows:
37
+
38
+
-`index.html` - A basic HTML page to contain the game.
39
+
-`src` - Contains the game source code.
40
+
-`src/main.js` - The main entry point. This contains the game configuration and starts the game.
41
+
-`src/scenes/` - The Phaser Scenes are in this folder.
42
+
-`public/style.css` - Some simple CSS rules to help with page layout.
43
+
-`public/assets` - Contains the static assets used by the game.
28
44
29
45
## Handling Assets
30
46
31
-
This template provides support for both embedding images and loading them from a static folder. To embed an image, you can import it at the top of the file you are using it in:
47
+
Webpack supports loading assets via JavaScript module `import` statements.
48
+
49
+
This template provides support for both embedding assets and also loading them from a static folder. To embed an asset, you can import it at the top of the JavaScript file you are using it in:
32
50
33
51
```js
34
52
importlogoImgfrom'./assets/logo.png'
35
53
```
36
54
37
-
To load static files such as images, audio files, videos, etc place them into the `public/assets` folder. Then you can use this path in the Loader calls within Phaser:
55
+
To load static files such as audio files, videos, etc place them into the `public/assets` folder. Then you can use this path in the Loader calls within Phaser:
38
56
39
57
```js
40
-
preload ()
41
-
{
42
-
// This is an example of a bundled image:
43
-
this.load.image('logo', logoImg);
44
-
45
-
// This is an example of loading a static image from the public folder:
46
-
this.load.image('background', 'assets/bg.jpg');
47
-
}
58
+
preload ()
59
+
{
60
+
// This is an example of an imported bundled image.
61
+
// Remember to import it at the top of this file
62
+
this.load.image('logo', logoImg);
63
+
64
+
// This is an example of loading a static image
65
+
// from the public/assets folder:
66
+
this.load.image('background', 'assets/bg.png');
67
+
}
48
68
```
49
69
50
-
When you do `npm run build` it will use the copy-webpack-plugin to copy the `public/assets` folder into `dist/assets`. Remember to include this folder when you deploy your game to a server.
70
+
When you issue the `npm run build` command, all static assets are automatically copied to the `dist/assets` folder.
71
+
72
+
## Deploying to Production
73
+
74
+
After you run the `npm run build` command, your code will be built into a single bundle and saved to the `dist` folder, along with any other assets your project imported, or stored in the public assets folder.
75
+
76
+
In order to deploy your game, you will need to upload *all* of the contents of the `dist` folder to a public facing web server.
51
77
52
78
## Customizing the Template
53
79
@@ -65,10 +91,21 @@ You can write modern ES6+ JavaScript and Babel will transpile it to a version of
65
91
66
92
### Webpack
67
93
68
-
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 modify the `webpack/base.js` file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of `package.json'.
94
+
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 modify the `webpack/config.js` file for cross-project changes, or you can modify and/or create new configuration files and target them in specific npm tasks inside of `package.json'. Please see the [Webpack documentation](https://webpack.js.org/) for more information.
95
+
96
+
## Join the Phaser Community!
97
+
98
+
We love to see what developers like you create with Phaser! It really motivates us to keep improving. So please join our community and show-off your work 😄
99
+
100
+
**Visit:** The [Phaser website](https://phaser.io) and follow on [Phaser Twitter](https://twitter.com/phaser_)<br />
101
+
**Play:** Some of the amazing games [#madewithphaser](https://twitter.com/search?q=%23madewithphaser&src=typed_query&f=live)<br />
102
+
**Learn:**[API Docs](https://newdocs.phaser.io), [Support Forum](https://phaser.discourse.group/) and [StackOverflow](https://stackoverflow.com/questions/tagged/phaser-framework)<br />
103
+
**Discord:** Join us on [Discord](https://discord.gg/phaser)<br />
**Read:** The [Phaser World](https://phaser.io/community/newsletter) Newsletter<br />
69
106
70
-
## Deploying Code
107
+
Created by [Phaser Studio](mailto:[email protected]). Powered by coffee, anime, pixels and love.
71
108
72
-
After you run the `npm run build` command, your code will be built into a single bundle located at `dist/bundle.min.js` along with any other assets you project depended.
If you put the contents of the `dist` folder in a publicly-accessible location (say something like `http://mycoolserver.com`), you should be able to open `http://mycoolserver.com/index.html` and play your game.
0 commit comments