https://github.com/RSamaium/CanvasEngine
Framework for HTML5 Canvas oriented 2D video games
https://github.com/RSamaium/CanvasEngine
Last synced: 4 months ago
JSON representation
Framework for HTML5 Canvas oriented 2D video games
- Host: GitHub
- URL: https://github.com/RSamaium/CanvasEngine
- Owner: RSamaium
- Created: 2012-08-31T12:41:30.000Z (over 13 years ago)
- Default Branch: v2
- Last Pushed: 2025-09-04T08:05:19.000Z (6 months ago)
- Last Synced: 2025-11-11T03:39:11.659Z (4 months ago)
- Language: TypeScript
- Size: 22.4 MB
- Stars: 395
- Watchers: 58
- Forks: 110
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-frontend - CanvasEngine
- awesome-frontend - CanvasEngine
- awesome-front-end - CanvasEngine
README
# CanvasEngine - A reactive HTML5 Canvas management library built on top of PixiJS and Vite
CanvasEngine is a reactive HTML5 Canvas management library built on top of PixiJS and Vite. It provides a component-oriented approach to canvas rendering, similar to modern frontend frameworks.
Features:
- Reactive components
- Use flex in Canvas !
- Easy Animation system
- Keyboard, Gamepad et Virtual Joystick
- Tiled Map Editor integration
- Particle Emitter
- Audio System
## Installation
```bash
npx degit RSamaium/CanvasEngine/starter my-project
cd my-project
npm install
npm run dev # and go to localhost:5173
```
## Documentation
https://canvasengine.net
## Example:
```html
import { signal, tick, animatedSignal, Easing } from "canvasengine";
const { text } = defineProps();
const rotation = signal(0);
const scale = animatedSignal(1, {
duration: 300,
ease: Easing.easeInOut,
});
tick(() => {
rotation.update(rotation => rotation + 0.01);
});
const onEnter = () => {
scale.set(1.5);
};
const onLeave = () => {
scale.set(1);
};
```
## Contributing
Before, install `pnpm` and run the following command:
```bash
git clone https://github.com/RSamaium/CanvasEngine.git
cd CanvasEngine
pnpm install
pnpm run dev # to build the libraries
```
To run the sample project:
```bash
pnpm run dev:sample
```
### Build Documentation/Website
```
cd docs
pnpm install
pnpm run dev
```
### Release
```bash
pnpm run release
```
> Choose the version you want to release
Push the release branch to the remote repository
```bash
git push origin v2
```