Skip to content

bmpickford/tinycanvas

Repository files navigation

@tinycanvas WIP

CI

Minimal 2D library for helping with working with the canvas

Installation

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

Development

Using vanilla JS and the canvas API to create objects and binding events using the native DOM API

API

Create game

import TC from '@tinycanvas/core';

const game = TC.create();

Draw a square

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

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

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();

About

Minimal library for making small canvas based 2D games

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published