This library for nodejs allows you, thanks to SDL2, to create windows and draw on the screen.
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.
Visual Studio VC tools are required. For more, see https://github.com/nodejs/node-gyp#readme
To use Simply2D you must have installed make, a C++ compiler and SDL2. To install SDL2 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
If you encounter any problems, it is recommended to install the latest version of python3 and run
python3 -m pip install setuptools
or justpip install setuptools
On Windows you must create the following files in your project directory:
📁 bin
│ 📁 sdl
│ │ 📁 winx64
│ │ │ 📄 SDl2.dll
│ │ │ 📄 SDL2.lib
│ │ │ 📄 SDL2main.lib
│ │ │ 📄 SDL2test.lib
│ 📁 sdlimg
│ │ 📁 winx64
│ │ │ 📄 SDL2_image.dll
│ │ │ 📄 SDL2_image.lib
│ 📁 sdlttf
│ │ 📁 winx64
│ │ │ 📄 SDL2_ttf.dll
│ │ │ 📄 SDL2_ttf.lib
These files can be extracted from the following links:
- https://github.com/libsdl-org/SDL/releases/download/release-2.30.7/SDL2-devel-2.30.7-VC.zip
- https://github.com/libsdl-org/SDL_image/releases/download/release-2.8.2/SDL2_image-devel-2.8.2-VC.zip
- https://github.com/libsdl-org/SDL_ttf/releases/download/release-2.22.0/SDL2_ttf-devel-2.22.0-VC.zip
Under the lib/x64 path
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,
antiAliasing: true
})
show(): void
Show the window
hide(): void
Hide the window
setBackgroundColor(color: RGBAColor): void
Set the background color. An RGBAColor is an object that contains red
, green
, blue
and alpha
properties.
sleep(ms: number): void
Sleep ms
milliseconds
drawPoint(color: RGBAColor, position: Position): void
Draw a point on the screen. Position is an object with the x and y properties.
drawLine(color: RGBAColor, from: Position, to: Position): void
Draw a line from from
coordinates to to
coordinates
drawRectangle(color: RGBAColor, pos: Position, width: number, height: number, fill?: boolean): void
Draw a rectangle in the canvas
get width(): number
Return the window width
get height(): number
Return the window height
clear(): void
Clear the screen
loadRawData(pixels: Uint8Array, bitPerPixel: 8 | 16 | 24 | 32): void
Write directly into the video buffer
loadPNG(filename: string): void
Write an PNG image into the canvas
loadJPG(filename: string): void
Write a JPG image into the canvas
dumpPNG(filename: string): void
Save the canvas as a PNG file
dumpJPG(filename: string): void
Save the canvas as a JPG file
getScale(): number
Return the scale factor
onClick(callback: (x: number, y: number) => void): void
On click event
onKeyDown(callback: (key: Key) => void): void
On key down event
onKeyUp(callback: (key: Key) => void): void
On key up event
initRenderSequence(): void
It is used to initialize the rendering sequence. Every drawing process will not be displayed until exposeRender is called
exposeRender(): void
Shows rendering
waitFrame(): void
Sleep for a certain time before the next frame is rendered
loop(callback: () => void): void
Start the rendering loop
onKeysDown(callback: (key: Key[]) => void): void
On keys down event
onKeysUp(callback: (key: Key[]) => void): void
On keys up event
loadFont(fontName: string, filePath: string): void
Load a new font
drawText(text: string, fontName: string, size: number, color: RGBAColor, start: Position): void
Draw text on the canvas
drawArc(color: RGBAColor, center: Position, radius: number, startingAngle: number, endingAngle: number): void
Draw an arc
static convertPolarCoords(center: Position, angle: number, radius: number): Position
Convert polar coordinates into x, y coordinates
loadTexture(textureID: string, filePath: string): void
Load a new texture from the specified file
drawTexture(textureID: string, pos: Position): void
Draw a previously loaded texture
static getScreenResolution(): Resolution
Get the screen resolution
getTextureResolution(textureID: string): Resolution
Get the resolution of a previously loaded texture
drawPath(path: Path, pos?: Position, color?: RGBAColor)
Draw a path
addLayer(layerId: string): void
Add a new layer
removeLayer(layerId: string): void
Remove layer
changeLayer(layerId: string): void
Change current layer
useMainLayer(): void
Change to the main default layer
get frameTime(): number
Get current frame time, only if the scene is rendered with loop
get fps(): number
Get current frame time, only if the scene is rendered with loop
getLayers(): Layer[]
Get layers in order of appearance
activateLayer(layerID: string): void
Activate a layer
deactivateLayer(layerID: string): void
Deactivate a layer
get antialiasing(): boolean
Get antialiasing flag
set antialiasing(): void
Set antialiasing flag
clearAll(): void
Clear all layers, including the main layer
moveLayer(layerID: string, direction: "up" | "down", steps: number = 1): void
Change layer rendering priority
attach(buffer: Uint8Array, bitPerPixel: PixelFormat): void
Attach a buffer to the video memory. The loop and every other drawing functions will be disabled.
detach(): void
Detach the current buffer from the video memory
close(): void
Close the window
endLoop(): void
Terminate the current loop
get mousePosition(): Position
Return the current mouse position
type CanvasOptions = {
mode?: "fullscreen" | "minimized" | "maximized" | "hidden" | "shown",
resizable?: boolean,
scale?: number,
antiAliasing?: boolean,
removeWindowDecoration?: boolean
}
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 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()
}
);
from8bit(color256: number): RGBAColor
Convert an 8 bit color into a 24 bit color
from16bit(color: number): RGBAColor
Convert a 16 bit color into a 24 bit color
from24bit(color: number): RGBAColor
Convert a 24 bit color number into a 24 bit color RGBAColor object
from32bit(color: number): RGBAColor
Convert a 32 bit color number into a RGBAColor object
Is a type for storing coordinates
import { Position } from "simply2d" // only in typescript
let cord: Position = {
x: 203,
y: 301
}
Used to save RGBA color values
import { RGBAColor } from "simply2d" // only in typescript
let color: RGBAColor = {
red: 255,
green: 255,
blue: 0,
alpha: 255
}
Used to save a pair of width and height values
import { Resolution } from "simply2d"
let res: Resolution = {
w: 1920,
h: 1080
}
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();
Static class that stores all the available pixel formats
PixelFormats.rgb332;
PixelFormats.rgb565;
PixelFormats.rgb888;
PixelFormats.rgba8888;