|
1 | | -# template-vite-ts |
| 1 | +# Phaser Vite TypeScript Template |
| 2 | + |
| 3 | +This is a Phaser 3 project template that uses Vite for bundling. It supports hot-reloading for quick development workflow, includes TypeScript support and scripts to generate production-ready builds. |
| 4 | + |
| 5 | +### Versions |
| 6 | + |
| 7 | +This template has been updated for: |
| 8 | + |
| 9 | +- [Phaser 3.70.0](https://github.com/phaserjs/phaser) |
| 10 | +- [Vite 5.0.8](https://github.com/vitejs/vite) |
| 11 | +- [TypeScript 5.2.2](https://github.com/microsoft/TypeScript) |
| 12 | + |
| 13 | + |
| 14 | + |
| 15 | +## Requirements |
| 16 | + |
| 17 | +[Node.js](https://nodejs.org) is required to install dependencies and run scripts via `npm`. |
| 18 | + |
| 19 | +## Available Commands |
| 20 | + |
| 21 | +| Command | Description | |
| 22 | +|---------|-------------| |
| 23 | +| `npm install` | Install project dependencies | |
| 24 | +| `npm run dev` | Launch a development web server | |
| 25 | +| `npm run build` | Create a production build in the `dist` folder | |
| 26 | + |
| 27 | +## Writing Code |
| 28 | + |
| 29 | +After cloning the repo, run `npm install` from your project directory. Then, you can start the local development server by running `npm run dev`. |
| 30 | + |
| 31 | +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. |
| 32 | + |
| 33 | +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. |
| 34 | + |
| 35 | +## Template Project Structure |
| 36 | + |
| 37 | +We have provided a default project structure to get you started. This is as follows: |
| 38 | + |
| 39 | +- `index.html` - A basic HTML page to contain the game. |
| 40 | +- `src` - Contains the game source code. |
| 41 | +- `src/main.ts` - The main entry point. This contains the game configuration and starts the game. |
| 42 | +- `src/scenes/` - The Phaser Scenes are in this folder. |
| 43 | +- `public/style.css` - Some simple CSS rules to help with page layout. |
| 44 | +- `public/assets` - Contains the static assets used by the game. |
| 45 | + |
| 46 | +## Handling Assets |
| 47 | + |
| 48 | +Vite supports loading assets via JavaScript module `import` statements. |
| 49 | + |
| 50 | +This template provides support 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: |
| 51 | + |
| 52 | +```js |
| 53 | +import logoImg from './assets/logo.png' |
| 54 | +``` |
| 55 | + |
| 56 | +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: |
| 57 | + |
| 58 | +```js |
| 59 | +preload () |
| 60 | +{ |
| 61 | + // This is an example of an imported bundled image. |
| 62 | + // Remember to import it at the top of this file |
| 63 | + this.load.image('logo', logoImg); |
| 64 | + |
| 65 | + // This is an example of loading a static image |
| 66 | + // from the public/assets folder: |
| 67 | + this.load.image('background', 'assets/bg.png'); |
| 68 | +} |
| 69 | +``` |
| 70 | + |
| 71 | +When you issue the `npm run build` command, all static assets are automatically copied to the `dist/assets` folder. |
| 72 | + |
| 73 | +## Deploying to Production |
| 74 | + |
| 75 | +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. |
| 76 | + |
| 77 | +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. |
| 78 | + |
| 79 | +## Customizing the Template |
| 80 | + |
| 81 | +### Vite |
| 82 | + |
| 83 | +If you want to customize your build, such as adding plugin (i.e. for loading CSS or fonts), you can modify the `vite/config.js` 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. |
| 84 | + |
| 85 | +## Join the Phaser Community! |
| 86 | + |
| 87 | +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 😄 |
| 88 | + |
| 89 | +**Visit:** The [Phaser website](https://phaser.io) and follow on [Phaser Twitter](https://twitter.com/phaser_)<br /> |
| 90 | +**Play:** Some of the amazing games [#madewithphaser](https://twitter.com/search?q=%23madewithphaser&src=typed_query&f=live)<br /> |
| 91 | +**Learn:** [API Docs](https://newdocs.phaser.io), [Support Forum](https://phaser.discourse.group/) and [StackOverflow](https://stackoverflow.com/questions/tagged/phaser-framework)<br /> |
| 92 | +**Discord:** Join us on [Discord](https://discord.gg/phaser)<br /> |
| 93 | +**Code:** 2000+ [Examples](https://labs.phaser.io)<br /> |
| 94 | +**Read:** The [Phaser World](https://phaser.io/community/newsletter) Newsletter<br /> |
| 95 | + |
| 96 | +Created by [Phaser Studio ](mailto:[email protected]). Powered by coffee, anime, pixels and love. |
| 97 | + |
| 98 | +The Phaser logo and characters are © 2011 - 2024 Phaser Studio Inc. |
| 99 | + |
| 100 | +All rights reserved. |
0 commit comments