För er som ska bygga Phaser spel / göra tutorials.
Den här länken är en bra start https://blog.ourcade.co/posts/2020/make-first-phaser-3-game-modern-javascript-part1/
Men se till att du byter ut start-templaten och kör https://github.com/ourcade/phaser3-vite-template
Den här videon förklara om du vill köra TS men även hur det funkar med assets. https://www.youtube.com/watch?v=isSXKBcuWxw
Assets kommer från phasers start tutorial.
https://phaser.io/tutorials/making-your-first-phaser-3-game/part1
Make Phaser 3 games with modern frontend tooling.
You'll need Node.js and npm installed.
It is highly recommended to use Node Version Manager (nvm) to install Node.js and npm.
For Windows users there is Node Version Manager for Windows.
Install Node.js and npm
with nvm
:
nvm install node
nvm use node
Replace 'node' with 'latest' for nvm-windows
.
You can clone this repository or use degit to scaffold the project like this:
npx degit https://github.com/ourcade/phaser3-vite-template my-folder-name
cd my-folder-name
npm install
Start development server:
npm run start
To create a production build:
npm run build
Production files will be placed in the dist
folder. Then upload those files to a web server. 🎉
.
├── dist
├── node_modules
├── public
├── src
│ ├── HelloWorldScene.js
│ ├── main.js
├── index.html
├── package.json
JavaScript files are intended for the src
folder. main.js
is the entry point referenced by index.html
.
Other than that there is no opinion on how you should structure your project.
There is an example HelloWorldScene.js
file that can be placed inside a scenes
folder to organize by type or elsewhere to organize by function. For example, you can keep all files specific to the HelloWorld scene in a hello-world
folder.
It is all up to you!
Any static assets like images or audio files should be placed in the public
folder. It'll then be served from the root. For example: http://localhost:8000/images/my-image.png
Example public
structure:
public
├── images
│ ├── my-image.png
├── music
│ ├── ...
├── sfx
│ ├── ...
They can then be loaded by Phaser with this.image.load('my-image', 'images/my-image.png')
.
This template uses a basic eslint
set up for code linting to help you find and fix common problems in your JavaScript code.
It does not aim to be opinionated.
See here for rules to turn on or off.
You can change the dev server's port number by modifying the vite.config.js
file. Look for the server
section:
{
// ...
server: { host: '0.0.0.0', port: 8000 },
}
Change 8000 to whatever you want.