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
Auch halbfertige Ideen sind besser im Repo als nur auf einem Laptop.
57
-
58
-
59
-
## 📂 Repo-Aufbau (Vorschlag)
30
+
## 📂 Repo-Aufbau
60
31
61
32
```sh
62
33
/README.md → diese Datei
63
34
/package.json → Dependencies (npm/yarn/pnpm)
64
35
/public
65
-
/assets
66
-
/sprites → Grafiken, Figuren, Hintergründe
67
-
/sounds → Soundeffekte & Musik
36
+
/background -> Hintergründe
37
+
/hud -> UI Elemente & Buttons
38
+
/sound -> Musik
39
+
/sprites -> Bilder für Spieler und "Gegner"
68
40
/src
69
-
/scenes → verschiedene Spiel-Szenen (Menu, Game, GameOver, …)
70
-
41
+
/custom_classes -> Wiederverwendbare Klassen
42
+
/loader -> Loader von Texturen und Sounds
43
+
/scenes -> Game-Scenen
44
+
/thatFolder -> Haupt Ordner für Logik
71
45
```
72
46
73
-
👉 Szenen-Aufteilung in Phaser ist Standard:
74
-
-**Boot/Preload:** lädt Assets
75
-
-**Menu:** Startmenü, Einstellungen
76
-
-**Game:** eigentliche Spiel-Logik
77
-
-**GameOver/Results:** Scores, Neustart-Option
78
-
79
-
---
80
-
81
-
## ✅ Nächste Schritte
82
-
83
-
1. Repo clonen & Template starten (Phaser + Vite).
84
-
2. Ein einfaches **Sprite** laden und auf Pfeiltasten bewegen.
85
-
3. Git-Workflow absprechen (wer arbeitet woran?).
86
-
4. Ergebnisse **nach 14 Tagen** präsentieren – es muss Hauptsache spielbar sein!
87
47
88
-
---
89
-
90
-
Viel Erfolg & viel Spaß beim Coden 🚀
91
-
**Euer Ziel ist nicht Perfektion – sondern ein gemeinsames Spiel, das Freude macht!**
92
-
93
-
---
94
-
95
-
## Development
96
-
97
-
This is a Phaser 3 project basing on template that uses Vite for bundling. It supports hot-reloading for quick development workflow, includes TypeScript support and scripts to generate production-ready builds.
98
-
99
-
100
-
### Requirements
48
+
## ⚙️ Requirements
101
49
102
50
[Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`.
103
51
104
-
###Available Commands
52
+
##💻 Available Commands
105
53
106
-
| Command | Description |
107
-
|---------|-------------|
108
-
|`npm install`| Install project dependencies |
109
-
|`npm run dev`| Launch a development web server |
110
-
|`npm run build`| Create a production build in the `dist` folder |
111
-
|`npm run dev-nolog`| Launch a development web server without sending anonymous data (see "About log.js" below) |
|`npm run build`| Create a production build in the `dist` folder|
59
+
|`npm run dev-nolog`| Launch a development web server without sending anonymous data (see "About log.js" below)|
112
60
|`npm run build-nolog`| Create a production build in the `dist` folder without sending anonymous data (see "About log.js" below) |
113
61
114
62
### Writing Code
115
63
116
64
After cloning the repo, run `npm install` from your project directory. Then, you can start the local development server by running `npm run dev`.
117
65
118
-
The local development server runs on `http://localhost:8080` by default. Please see the Vite documentation if you wish to change this, or add SSL support.
66
+
The local development server runs on `http://localhost:8080` by default. Please see the Vite documentation if you wish to change this or add SSL support.
119
67
120
-
Once the server is running you can edit any of the files in the `src` folder. Vite will automatically recompile your code and then reload the browser.
68
+
Once the server is running, you can edit any of the files in the `src` folder. Vite will automatically recompile your code and then reload the browser.
121
69
122
70
### Template Project Structure
123
71
@@ -127,16 +75,15 @@ We have provided a default project structure to get you started. This is as foll
127
75
128
76
We have provided a default project structure to get you started:
|`index.html`| A basic HTML page to contain the game. |
81
+
|`public/assets`| Game sprites, audio, etc. Served directly at runtime. |
82
+
|`public/style.css`| Global layout styles. |
83
+
|`src/main.ts`| Application bootstrap. |
84
+
|`src/game`| Folder containing the game code. |
85
+
|`src/game/main.ts`| Game entry point: configures and starts the game. |
86
+
|`src/game/scenes`| Folder with all Phaser game scenes. |
140
87
141
88
### Handling Assets
142
89
@@ -148,44 +95,43 @@ This template provides support for both embedding assets and also loading them f
148
95
importlogoImgfrom'./assets/logo.png'
149
96
```
150
97
151
-
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:
98
+
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:
152
99
153
100
```js
154
-
preload ()
155
-
{
156
-
// This is an example of an imported bundled image.
157
-
// Remember to import it at the top of this file
158
-
this.load.image('logo', logoImg);
159
-
160
-
// This is an example of loading a static image
161
-
// from the public/assets folder:
162
-
this.load.image('background', 'assets/bg.png');
101
+
preload() {
102
+
// This is an example of an imported bundled image.
103
+
// Remember to import it at the top of this file
104
+
this.load.image('logo', logoImg);
105
+
106
+
// This is an example of loading a static image
107
+
// from the public/assets folder:
108
+
this.load.image('background', 'assets/bg.png');
163
109
}
164
110
```
165
111
166
112
When you issue the `npm run build` command, all static assets are automatically copied to the `dist/assets` folder.
167
113
168
114
### Deploying to Production
169
115
170
-
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.
116
+
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 asset's folder.
171
117
172
-
In order to deploy your game, you will need to upload *all*of the contents of the `dist` folder to a publicfacing web server.
118
+
To deploy your game, you will need to upload *all* the contents of the `dist` folder to a public-facing web server.
173
119
174
120
### Customizing the Template
175
121
176
122
#### Vite
177
123
178
-
If you want to customize your build, such as adding plugin (i.e. for loading CSS or fonts), you can modify the `vite/config.*.mjs` 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 [Vite documentation](https://vitejs.dev/) for more information.
124
+
If you want to customize your build, such as adding plugin (i.e., for loading CSS or fonts), you can modify the `vite/config.*.mjs` 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 [Vite documentation](https://vitejs.dev/) for more information.
179
125
180
126
### About log.js
181
127
182
-
If you inspect our node scripts you will see there is a file called `log.js`. This file makes a single silent API call to a domain called `gryzor.co`. This domain is owned by Phaser Studio Inc. The domain name is a homage to one of our favorite retro games.
128
+
If you inspect our node scripts, you will see there is a file called `log.js`. This file makes a single silent API call to a domain called `gryzor.co`. This domain is owned by Phaser Studio Inc. The domain name is homage to one of our favorite retro games.
183
129
184
-
We send the following 3 pieces of data to this API: The name of the template being used (vue, react, etc). If the build was 'dev' or 'prod' and finally the version of Phaser being used.
130
+
We send the following 3 pieces of data to this API: The name of the template being used (vue, react, etc.). If the build was 'dev' or 'prod' and finally the version of Phaser being used.
185
131
186
132
At no point is any personal data collected or sent. We don't know about your project files, device, browser or anything else. Feel free to inspect the `log.js` file to confirm this.
187
133
188
-
Why do we do this? Because being open source means we have no visible metrics about which of our templates are being used. We work hard to maintain a large and diverse set of templates for Phaser developers and this is our small anonymous way to determine if that work is actually paying off, or not. In short, it helps us ensure we're building the tools for you.
134
+
Why do we do this? Because being open source means we have no visible metrics about which of our templates are being used. We work hard to maintain a large and diverse set of templates for Phaser developers, and this is our small anonymous way to determine if that work is actually paying off, or not. In short, it helps us ensure we're building the tools for you.
189
135
190
136
However, if you don't want to send any data, you can use these commands instead:
191
137
@@ -201,39 +147,28 @@ Build:
201
147
npm run build-nolog
202
148
```
203
149
204
-
Or, to disable the log entirely, simply delete the file `log.js` and remove the call to it in the `scripts` section of `package.json`:
150
+
Or, to disable the log entirely, delete the file `log.js` and remove the call to it in the `scripts` section of `package.json`:
Either of these will stop `log.js` from running. If you do decide to do this, please could you at least join our Discord and tell us which template you're using! Or send us a quick email. Either will be super-helpful, thank you.
225
171
226
-
## Join the Phaser Community!
227
-
228
-
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 😄
229
-
230
-
**Visit:** The [Phaser website](https://phaser.io) and follow on [Phaser Twitter](https://twitter.com/phaser_)<br />
231
-
**Play:** Some of the amazing games [#madewithphaser](https://twitter.com/search?q=%23madewithphaser&src=typed_query&f=live)<br />
232
-
**Learn:**[API Docs](https://newdocs.phaser.io), [Support Forum](https://phaser.discourse.group/) and [StackOverflow](https://stackoverflow.com/questions/tagged/phaser-framework)<br />
233
-
**Discord:** Join us on [Discord](https://discord.gg/phaser)<br />
0 commit comments