Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rei1024/math-vis
Math visualization
https://github.com/rei1024/math-vis
math phaser
Last synced: about 2 hours ago
JSON representation
Math visualization
- Host: GitHub
- URL: https://github.com/rei1024/math-vis
- Owner: rei1024
- License: mit
- Created: 2024-09-02T04:53:16.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-02-04T02:53:40.000Z (about 16 hours ago)
- Last Synced: 2025-02-04T03:26:20.113Z (about 15 hours ago)
- Topics: math, phaser
- Language: TypeScript
- Homepage: https://rei1024.github.io/math-vis/
- Size: 44.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# math-vis
## 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.
## Project Structure
- `index.html` - A basic HTML page to contain the game.
- `src` - Contains the game source code.
- `src/main.ts` - The main **entry** point. This contains the game configuration and starts the game.
- `src/vite-env.d.ts` - Global TypeScript declarations, provide types information.
- `src/scenes/` - The Phaser Scenes are in this folder.
- `public/style.css` - Some simple CSS rules to help with page layout.
- `public/assets` - Contains the static assets used by the game.
## Handling Assets
Vite supports loading assets via JavaScript module `import` statements.
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:
```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 Template
### 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.