Simply2D

Introduction

This library for nodejs allows you, thanks to SDL2, to create windows and draw on the screen.

Installation

You can install this library using npm i simply2d.
This library require SDL2 in order to run. Simple DirectMedia Layer is a cross-platform library designed to provide low level access to different resources such as video. SDL2 is available for windows, linux and macos as well.

For Linux

To use Simply2D you must have installed SDL2. To install it you can use the following command:

• For Ubuntu: sudo apt install libsdl2-2.0-0 libsdl2-image-2.0-0 libsdl2-ttf-2.0-0
• For Red Hat and Fedora: sudo dnf install SDL2 SDL2_image SDL2_ttf

API

Canvas

The Canvas class allows you to create a canvas and to draw on it

import { Canvas } from "simply2d";
const canvas = new Canvas(
	"my canvas",	// window title
	600,			// window width
	400,			// window height
);

You can specify other window options

const canvas = new Canvas("title", 200, 400, 0, 0, {
	mode: "fullscreen",
	resizable: false,
	scale: 2
})

Canvas.show

show(): void

Show the window

Canvas.hide

hide(): void

Hide the window

Canvas.setBackgroundColor

setBackgroundColor(color: RGBAColor): void

Set the background color. An RGBAColor is an object that contains red, green, blue and alpha properties.

Canvas.sleep

sleep(ms: number): void

Sleep ms milliseconds

Canvas.drawPoint

drawPoint(color: RGBAColor, position: Position): void

Draw a point on the screen. Position is an object with the x and y properties.

Canvas.drawLine

drawLine(color: RGBAColor, from: Position, to: Position): void

Draw a line from from coordinates to to coordinates

Canvas.drawRectangle

drawRectangle(color: RGBAColor, pos: Position, width: number, height: number, fill?: boolean): void

Draw a rectangle in the canvas

Canvas.getWidth

getWidth(): void

Return the window width

Canvas.getHeight

getHeight(): void

Return the window height

Canvas.clear

clear(): void

Clear the screen

Canvas.loadRawData

loadRawData(pixels: Uint8Array, bitPerPixel: 8 | 16 | 24 | 32): void

Write directly into the video buffer

Canvas.loadPNG

loadPNG(filename: string): void

Write an PNG image into the canvas

Canvas.loadJPG

loadJPG(filename: string): void

Write a JPG image into the canvas

Canvas.dumpPNG

dumpPNG(filename: string): void

Save the canvas as a PNG file

Canvas.dumpJPG

dumpJPG(filename: string): void

Save the canvas as a JPG file

Canvas.getScale

getScale(): number

Return the scale factor

Canvas.onClick

onClick(callback: (x: number, y: number) => void): void

On click event

Canvas.onKeyDown

onKeyDown(callback: (key: Key) => void): void

On key down event

Canvas.onKeyUp

onKeyUp(callback: (key: Key) => void): void

On key up event

Canvas.initRenderSequence

initRenderSequence(): void

It is used to initialize the rendering sequence. Every drawing process will not be displayed until exposeRender is called

Canvas.exposeRender

exposeRender(): void

Shows rendering

Canvas.waitFrame

waitFrame(): void

Sleep for a certain time before the next frame is rendered

Canvas.loop

loop(callback: () => void): void

Start the rendering loop

Canvas.onKeysDown

onKeysDown(callback: (key: Key[]) => void): void

On keys down event

Canvas.onKeysUp

onKeysUp(callback: (key: Key[]) => void): void

On keys up event

Canvas.loadFont

loadFont(fontName: string, filePath: string): void

Load a new font

Canvas.drawText

drawText(text: string, fontName: string, size: number, color: RGBAColor, start: Position): void

Draw text on the canvas

Canvas.drawArc

drawArc(color: RGBAColor, center: Position, radius: number, startingAngle: number, endingAngle: number): void

Draw an arc

Canvas.convertPolarCords

convertPolarCoords(center: Position, angle: number, radius: number): Position

Convert polar coordinates into x, y coordinates

Canvas.loadTexture

loadTexture(textureID: string, filePath: string): void

Load a new texture from the specified file

Canvas.drawTexture

drawTexture(textureID: string, pos: Position): void

Draw a previously loaded texture

Canvas.getScreenResolution

static getScreenResolution(): Resolution

Get the screen resolution

Canvas.getTextureResolution

getTextureResolution(textureID: string): Resolution

Get the resolution of a previously loaded texture

Canvas.drawPath

drawPath(path: Path, pos?: Position, color?: RGBAColor)

Draw a path

Canvas constant positions

It is possible to access constant positions relative to the size of the canvas. Example:

import { Canvas, Colors } from "simply2d"

const canvas = new Canvas("myCanvas", 200, 200);
canvas.drawLine(Colors.BLUE, canvas.TOP_LEFT /* the top left corner */, canvas.BOTTOM_RIGHT /* the bottom right corner */);

Colors

Colors is an object that contains different standard colors and some useful function

import { Canvas, Colors } from "simply2d";
const canvas = new Canvas("title", 100, 100);
canvas.setBackgroundColor(Colors.RED);	// #FF0000 hex color
canvas.drawLine(
	Colors.BLACK, 	// #000000 hex color
	{
		x: 0,
		y: 0
	},
	{
		x: canvas.getWidth(),
		y: canvas.getHeight()
	}
);

Colors.from8bit

from8bit(color256: number): RGBAColor

Convert an 8 bit color into a 24 bit color

Colors.from16bit

from16bit(color: number): RGBAColor

Convert a 16 bit color into a 24 bit color

Colors.from24bit

from24bit(color: number): RGBAColor

Convert a 24 bit color number into a 24 bit color RGBAColor object

Colors.from32bit

from32bit(color: number): RGBAColor

Convert a 32 bit color number into a RGBAColor object

Position

Is a type for storing coordinates

import { Position } from "simply2d"	// only in typescript
let cord: Position = {
	x: 203,
	y: 301
}

RGBAColor

Used to save RGBA color values

import { RGBAColor } from "simply2d"	// only in typescript
let color: RGBAColor = {
	red: 255,
	green: 255,
	blue: 0,
	alpha: 255
}

Resolution

Used to save a pair of width and height values

import { Resolution } from "simply2d"
let res: Resolution = {
	w: 1920,
	h: 1080
}

Path

A path is an object used to represent a polyline

import { Path } from "simply2d";
const p = new Path();
p.setStart({ x: 10, y: 15 });
p.pushLine({ x: 20, y: 60 });
p.close();