Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bmpickford/tinycanvas
Minimal library for making small canvas based 2D games
https://github.com/bmpickford/tinycanvas
canvas jsk13
Last synced: about 2 months ago
JSON representation
Minimal library for making small canvas based 2D games
- Host: GitHub
- URL: https://github.com/bmpickford/tinycanvas
- Owner: bmpickford
- Created: 2021-11-19T16:50:12.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-01-01T06:34:02.000Z (about 3 years ago)
- Last Synced: 2024-11-02T01:05:18.585Z (2 months ago)
- Topics: canvas, jsk13
- Language: JavaScript
- Homepage: https://www.tinycanvas.benpickford.me
- Size: 2.71 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @tinycanvas WIP
> Minimal 2D library for helping with working with the canvas
#### [Example](https://www.game.benpickford.me/) - [Docs](https://www.tinycanvas.benpickford.me/)
## Installation
```bash
npm install @tinycanvas/core
```
#### What's Included
- ✔ Collision detection
- ✔ Easy object creation API
- ✔ Levels
- ❌ Spritesheet
- ❌ Text
- ✔ Animations (with `@tinycanvas/animations`)
- ✔ WASD / Arrow key / Mouse click / Enter key object listener (with `@tinycanvas/interactions`)
## Running
`npm run start`
## Building
`npm run build`
## Testing
`npm run test`
## Tooling
* [web-test-runner](https://modern-web.dev/docs/test-runner/overview/) as a testing configuration helper.
* [playwright](https://modern-web.dev/docs/test-runner/browser-launchers/playwright/) as the browser launcher
* [mocha](https://mochajs.org/) as the test runner and testing syntax.
* github actions for CI
* [size-limit](https://github.com/ai/size-limit) for tracking bundle size
* [eslint](https://eslint.org/) for linting
* [husky](https://github.com/typicode/husky) for pre-commit hooks
* [jsdoc](https://jsdoc.app/) for documentation
## Development
Using vanilla JS and the canvas API to create objects and binding events using the native DOM API
### API
#### Create game
```javascript
import TC from '@tinycanvas/core';
const game = TC.create();
```
#### Draw a square
```javascript
import TC from '@tinycanvas/core';
const game = TC.create();
const square = game.add.object({
name: 'square',
init: (self) => {
self.x = 100;
self.y = 100;
self.width = 50;
self.height = 50;
},
render: (self) => self.context.drawRect(self.x / 2, self.y / 2, self.width, self.height),
});
game.start();
```
#### Movable square
```javascript
import TC from '@tinycanvas/core';
import { ArrowKeys } from '@tinycanvas/interaction';
const game = TC.create();
const square = game.add.object({
name: 'square',
init: (self) => {
self.x = 100;
self.y = 100;
self.width = 50;
self.height = 50;
// delta defines how far to move
self.delta = 50;
},
render: (self) => {
self.context.drawRect(self.x / 2, self.y / 2, self.width, self.height);
},
interactions: [ArrowKeys],
});
game.start();
```
#### Movable square with custom movement
```javascript
import TC from '@tinycanvas/core';
import { ArrowKeys } from '@tinycanvas/interaction';
const game = TC.create();
const square = game.add.object({
name: 'square',
init: (self) => {
self.x = 100;
self.y = 100;
self.width = 50;
self.height = 50;
// delta defines how far to move
self.delta = 50;
},
render: (self) => self.context.drawRect(self.x / 2, self.y / 2, self.width, self.height),
interactions: [ArrowKeys],
create: (self) => {
// You can add multiple of for a single event, but adding one will remove the default behaviour
self.on(ArrowKeys.LEFT, self.moveLeft);
},
moveLeft: (self) => {
self.x =- self.delta / 2;
}
});
game.start();
```