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
Copy file name to clipboardExpand all lines: README.md
+73-29Lines changed: 73 additions & 29 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,49 +1,91 @@
1
1
# Top-Down Phaser Game with React UI Template
2
2
3
-
This project came from this Medium post: https://javascript.plainenglish.io/i-made-a-top-down-game-version-of-my-blog-with-phaser-and-react-faf5c28cf768
3
+
This project is based on a Medium post: https://javascript.plainenglish.io/i-made-a-top-down-game-version-of-my-blog-with-phaser-and-react-faf5c28cf768
## Test it here: https://blopa.github.io/top-down-react-phaser-game-template/
7
+
## Try it out: https://blopa.github.io/top-down-react-phaser-game-template/
8
8
9
-
# Features
10
-
- Create React App
11
-
- Phaser 3
12
-
- Redux
13
-
- Material UI
14
-
- React 17 as game UI
9
+
# Key Features
10
+
- Built with Create React App
11
+
- Uses Phaser 3 for game engine
12
+
- State management with Zustand
13
+
- UI with Material UI and React 18
14
+
- CSS Modules
15
+
- Uses functional programming style
15
16
- Arcade physics
16
-
- Grid Engine for grid movements
17
-
- Automatically resize game when browser window change size
18
-
- Automatically load Tilesets into Tiled maps
19
-
- Automatically pre-load assets with the `LoadAssetsScene` scene
20
-
- Automatically load items and enemies from Tiled objects layer
21
-
- Script to automatically generate atlases sheets
17
+
- Automatically resizes game to fit browser window
18
+
- Automatically loads Tilesets and assets
19
+
- Generates atlas sheets with included script
22
20
- Adjustable tile sizes
23
-
-Integration between Phaser and React via Redux
24
-
- Dialog system (with React)
25
-
- Game menu (with React)
26
-
- Virtual Gamepad for mobile (with React)
27
-
-Free 2D assets by Kenney.nl (assets God)
21
+
-Integrates Phaser and React through Zustand
22
+
- Dialog system (React-based)
23
+
- Game menu (React-based)
24
+
- Virtual Gamepad for mobile devices (React-based)
25
+
-Includes 2D assets from Kenney.nl
28
26
29
-
# How to use it
27
+
# How to Use
28
+
29
+
## Load Scene Files
30
+
The `getScenesModules` function uses Webpack's [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext) to load all `.js` and `.ts` files from the `/src/assets/games/scenes` directory. Simply add your game scenes there to have them loaded into the game.
31
+
32
+
The first scene loaded by Phaser JS is the one defined in the `constants.js` file, in the `BOOT_SCENE_NAME` variable.
33
+
34
+
## Functional Programming
35
+
Scene code can be written in a functional style for improved readability, by exporting functions instead of using the `Phaser.Scene` class.
36
+
37
+
```javascript
38
+
// Export scene using class-based approach
39
+
exportdefaultclassBootSceneextendsScene {
40
+
constructor() {
41
+
super('BootScene');
42
+
}
43
+
44
+
preload() {
45
+
this.load.image('background', background);
46
+
}
47
+
48
+
create() {
49
+
this.add.image(100, 100, 'background');
50
+
}
51
+
}
52
+
```
53
+
54
+
```javascript
55
+
// Export scene in functional approach
56
+
exportconstscene= {};
57
+
58
+
exportconstkey='BootScene';
59
+
60
+
exportfunctionpreload() {
61
+
scene.load.image('background', background);
62
+
}
63
+
64
+
exportfunctioncreate() {
65
+
scene.add.image(100, 100, 'background');
66
+
}
67
+
```
68
+
69
+
The exported `scene` object will have all the helper functions of `Phaser.Scene`. While it can still be accessed with `this`, the functional approach is designed to improve code readability.
70
+
71
+
This "magic" is made possible by the `prepareScene` function.
30
72
31
73
## Maps
32
-
Add your Tiled tilesets JSON and images to `/src/assets/tilesets` and your Tiled maps to `/src/assets/maps`. Then call the `LoadAssetsScene`scene like:
74
+
To use Tiled maps, add your Tiled tilesets JSON and images to `/src/assets/tilesets` and your Tiled maps to `/src/assets/maps`. Then start the `LoadAssetsScene` like this:
33
75
34
76
```javascript
35
77
this.scene.start('LoadAssetsScene', {
36
-
nextScene:'GameScene', //scene to be loaded after the assets are loaded
78
+
nextScene:'GameScene', //Scene to load after assets are loaded
37
79
assets: {
38
-
mapKey:'sample_map', //name of your map, like sample_map.json in this case
80
+
mapKey:'sample_map', //Map name, e.g. sample_map.json
39
81
},
40
82
});
41
83
```
42
84
43
-
Any tileset inside your `sample_map.json` will be automatically loaded, as long as they are in the `/src/assets/tilesets` directory.
85
+
Any tilesets used in your `sample_map.json` will be automatically loaded from the `/src/assets/tilesets` directory, as long as they are located there.
44
86
45
87
## Other assets
46
-
To load any other asset, call the `LoadAssetsScene` with a list of the assets you need it to be automatically loaded.
88
+
To load other assets such as images, fonts, or atlases, call the `LoadAssetsScene` with the following parameters:
This file is where the game map is rendered, with all items, enemies, etc. The `create` function is split into smaller functions that can be found in the `sceneHelpers.js` file.
102
+
The `GameScene`file is where the game map is rendered, along with all items, enemies, etc. The `create` function is split into smaller functions for easier readability, which can be found in the `sceneHelpers.js` file.
61
103
62
104
## Virtual Gamepad
63
-
The Virtual Gamepad will be loaded automatically if the game is being run in a mobile device. The Virtual Gamepad is a React component that simulate keyboard keys to control que game, using the function `simulateKeyEvent` found in [this GitHub Gist](https://gist.github.com/GlauberF/d8278ce3aa592389e6e3d4e758e6a0c2).
105
+
The virtual gamepad will be automatically loaded when the game is run on a mobile device. The virtual gamepad is a React component that simulates keyboard keys to control the game, using the `simulateKeyEvent`function found in this [GitHub Gist](https://gist.github.com/GlauberF/d8278ce3aa592389e6e3d4e758e6a0c2).
64
106
65
107
## Dialog System
66
-
A dialog box will automatically show up whenever the `state.dialog.messages` variable is filled with messages. You can call the `setDialogMessagesAction`Redux action to do this.
108
+
A dialog box will appear automatically whenever the `state.dialog.messages` variable is populated with messages. To accomplish this, you can call the `setDialogMessagesAction`Zustand setter function.
67
109
68
110
```javascript
69
-
dispatch(setDialogMessagesAction(['hello world', 'hello world 2']));
111
+
setDialogMessages(['hello world', 'hello world 2']);
0 commit comments