@catyen/catyen NPM

Catyen - (Ca)nvas (Ty)pescript (En)gine

Catyen is a lightweight wrapper to make the handling of canvas related programming more easy.

Usage

npm install @catyen/catyen

<canvas id ="canvas-element"></canvas>

import Catyen from '@catyen/catyen';

const catyen = new Catyen("#canvas-element",window);

// With the initialization call all required event handlers are set.
catyen.initialize();

catyen.loop.requestFrame(()=>{
    catyen.draw.clear("black");
    catyen.draw.print(0,0,"Hello World","white");
});

Quick Start

The easiest way to start is by using this boilerplate.

Features

Game loop

Whenever the browser requests a frame, this loop is called. With each call, the screen is re-rendered.

import Catyen from '@catyen/catyen';

const catyen = new Catyen("#canvas-element",window);

catyen.loop.requestFrame(()=>{});

Drawing

Clear screen

 catyen.draw.clear("white");

Print text

 catyen.draw.print(0,0,"Hello World","white");

Fill rect

 catyen.draw.fillRect(10,10,10,10,"white");

Draw line

 catyen.draw.line(10,10,10,10,"white");

Load and display images

const myImage = new CatyenImage("./path/img.png");

catyen.loop.requestFrame(()=>{
    catyen.draw.blit(0,0,myImage);
});

Controls

Keyboard

const catyen = new Catyen("#canvas-element",window);

catyen.initialize();

catyen.loop.requestFrame(()=>{
    if(catyen.controls.isPressed(KeyboardKeys.UP))
    {
        console.log("up!");
    }
    
    if(catyen.controls.isPressed(KeyboardKeys.DOWN))
    {
        console.log("down!");
    }
});

Mouse

const catyen = new Catyen("#canvas-element",window);

catyen.initialize();

catyen.loop.requestFrame(()=>{
    if(catyen.controls.mouseState.mouseDown)
    {
        console.log("mouse down!",
        catyen.controls.mouseState.clientX,
        catyen.controls.mouseState.clientY);
    }
});