Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ourcade/phaser3-typescript-vite-template
Make Phaser 3 games with TypeScript and modern frontend tooling.
https://github.com/ourcade/phaser3-typescript-vite-template
phaser3 phaser3-boilerplate typescript vite
Last synced: about 2 months ago
JSON representation
Make Phaser 3 games with TypeScript and modern frontend tooling.
- Host: GitHub
- URL: https://github.com/ourcade/phaser3-typescript-vite-template
- Owner: ourcade
- Created: 2022-10-14T17:20:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-29T07:34:56.000Z (almost 2 years ago)
- Last Synced: 2023-06-26T02:57:57.493Z (over 1 year ago)
- Topics: phaser3, phaser3-boilerplate, typescript, vite
- Language: TypeScript
- Homepage: https://youtu.be/isSXKBcuWxw
- Size: 45.9 KB
- Stars: 70
- Watchers: 3
- Forks: 24
- Open Issues: 3
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Phaser 3 + TypeScript + Vite.js Template
> Make Phaser 3 games with TypeScript and modern frontend tooling.
This is a TypeScript specific fork of [phaser3-vite-template](https://github.com/ourcade/phaser3-vite-template).
## Prerequisites
You'll need [Node.js](https://nodejs.org/en/) and [npm](https://www.npmjs.com/) installed.
It is highly recommended to use [Node Version Manager](https://github.com/nvm-sh/nvm) (nvm) to install Node.js and npm.
For Windows users there is [Node Version Manager for Windows](https://github.com/coreybutler/nvm-windows).
Install Node.js and `npm` with `nvm`:
```bash
nvm install node
nvm use node
```
Replace 'node' with 'latest' for `nvm-windows`.
## Getting Started
You can clone this repository or use [degit](https://github.com/Rich-Harris/degit) to scaffold the project like this:
```bash
npx degit https://github.com/ourcade/phaser3-typescript-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. 🎉
## Project Structure
```
.
├── dist
├── node_modules
├── public
├── src
│ ├── HelloWorldScene.ts
│ ├── main.ts
├── index.html
├── package.json
```
TypeScript files are intended for the `src` folder. `main.ts` 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.ts` 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!
## Static Assets
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')`.
# TypeScript ESLint
This template uses a basic `typescript-eslint` set up for code linting.
It does not aim to be opinionated.
[See here for rules to turn on or off](https://eslint.org/docs/rules/).
## Dev Server Port
You can change the dev server's port number by modifying the `vite.config.ts` file. Look for the `server` section:
```js
{
// ...
server: { host: '0.0.0.0', port: 8000 },
}
```
Change 8000 to whatever you want.
## License
[MIT License](https://github.com/ourcade/phaser3-vite-template/blob/master/LICENSE)