Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/wanicolas/bullet-ballet

Phaser platform shooting game.
https://github.com/wanicolas/bullet-ballet

phaser platform shooter

Last synced: 30 days ago
JSON representation

Phaser platform shooting game.

Awesome Lists containing this project

README 

        
# Phaser Vite TypeScript Game



This is a Phaser 3 game that uses Vite for bundling. It supports hot-reloading for quick development workflow, includes TypeScript support and scripts to generate production-ready builds.



### Versions



This game uses:



- [Phaser 3.80.1](https://github.com/phaserjs/phaser)

- [Vite 5.1.4](https://github.com/vitejs/vite)

- [TypeScript 5.3.3](https://github.com/microsoft/TypeScript)



## Requirements



[Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`.



## Available Commands



| Command         | Description                                    |

| --------------- | ---------------------------------------------- |

| `npm install`   | Install project dependencies                   |

| `npm run dev`   | Launch a development web server                |

| `npm run build` | Create a production build in the `dist` folder |



## Writing Code



After cloning the repo, run `npm install` from your project directory. Then, you can start the local development server by running `npm run dev`.



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.



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.



## Handling Assets



Vite supports loading assets via JavaScript module `import` statements.



This supports 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:



```js

import logoImg from "./assets/logo.png";

```



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:



```js

preload();

{

  //  This is an example of an imported bundled image.

  //  Remember to import it at the top of this file

  this.load.image("logo", logoImg);



  //  This is an example of loading a static image

  //  from the public/assets folder:

  this.load.image("background", "assets/bg.png");

}

```



When you issue the `npm run build` command, all static assets are automatically copied to the `dist/assets` folder.



## Deploying to Production



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.



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.



## Customizing the game



### Vite



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.