Class: jBB

jBB(widthopt, heightopt, mainLoop)

The main jBB engine class that orchestrates all modules and provides the core object-oriented API.

Constructor

new jBB(widthopt, heightopt, mainLoop)

Parameters:
Name Type Attributes Default Description
width number <optional>
 640 The width of the main graphics canvas.
height number <optional>
 480 The height of the main graphics canvas.
mainLoop function The user-defined function that will be called every frame.
Source:

Classes

jBB

Members

canvas

The active 2D rendering context.
Source:

mainloop :function

Type:
  • function
Source:

Methods

autoMidHandle(valueopt)

Enables or disables automatic centering of the handle for all subsequently loaded images.
Parameters:
Name Type Attributes Default Description
value boolean <optional>
 false True to enable auto-mid-handling, false to disable.
Source:

backBuffer() → {null}

Returns a token representing the main screen buffer.
Source:
Returns:
A null value representing the backbuffer.
Type
null

cls()

This command will wipe the canvas clean of any graphics or text present and reset the canvas back to the color defined in the ClsColor command
Source:

clsColor(redopt, greenopt, blueopt)

Sets the color used by the `cls()` command.
Parameters:
Name Type Attributes Default Description
red number <optional>
 0 The red component (0-255).
green number <optional>
 0 The green component (0-255).
blue number <optional>
 0 The blue component (0-255).
Source:

color(redopt, greenopt, blueopt, alphaopt)

This command sets the drawing color (using RGB values) for all subsequent drawing commands (Line, Rect, Text, etc.).
Parameters:
Name Type Attributes Default Description
red number <optional>
 255 The red component (0-255).
green number <optional>
 255 The green component (0-255).
blue number <optional>
 255 The blue component (0-255).
alpha number <optional>
 255 The alpha component (0-255 or 0.0-1.0).
Source:

copyImage(img) → {Jmage}

Creates a copy of an image. The new image shares the same underlying pixel data but has its own independent transformation properties (handle, scale, rotation).
Parameters:
Name Type Description
img Jmage The Jmage instance to copy.
Source:
Returns:
A new Jmage instance.
Type
Jmage

createImage(width, height) → {Jmage}

Creates a new, blank, drawable image.
Parameters:
Name Type Description
width number The width of the image.
height number The height of the image.
Source:
Returns:
A new Jmage instance.
Type
Jmage

drawImage(img, x, y, frameopt)

Draws an image to the active buffer.
Parameters:
Name Type Attributes Description
img Jmage The Jmage object to draw.
x number The x-coordinate to draw the image at (relative to its handle).
y number The y-coordinate to draw the image at (relative to its handle).
frame number <optional>
 The animation frame to draw (1-based).
Source:

grabImage(targetImage, x, y)

Grabs a portion of the current drawing buffer into an existing image. The grab area is defined by the target image's dimensions.
Parameters:
Name Type Description
targetImage Jmage The destination image to copy the pixels to.
x number The top-left x-coordinate of the grab area in the source buffer.
y number The top-left y-coordinate of the grab area in the source buffer.
Source:

graphicsHeight() → {number}

Returns the height of the main graphics canvas.
Source:
Returns:
Type
number

graphicsWidth() → {number}

Returns the width of the main graphics canvas.
Source:
Returns:
Type
number

imageHandle(image) → {Object}

Returns the handle of an image.
Parameters:
Name Type Description
image Jmage The Jmage object.
Source:
Returns:
An object containing the x and y coordinates of the handle.
Type
Object

imageHeight(image) → {number}

Returns the height of a single frame of an image.
Parameters:
Name Type Description
image Jmage The Jmage object.
Source:
Returns:
The height in pixels.
Type
number

imageWidth(image) → {number}

Returns the width of a single frame of an image.
Parameters:
Name Type Description
image Jmage The Jmage object.
Source:
Returns:
The width in pixels.
Type
number

imageXHandle(image) → {number}

Returns the x-coordinate of an image's handle.
Parameters:
Name Type Description
image Jmage The Jmage object.
Source:
Returns:
The x-coordinate of the handle.
Type
number

imageYHandle(image) → {number}

Returns the y-coordinate of an image's handle.
Parameters:
Name Type Description
image Jmage The Jmage object.
Source:
Returns:
The y-coordinate of the handle.
Type
number

imagesOverlap() → {boolean}

Checks if two images, placed at specific coordinates, overlap based on their bounding boxes.
Source:
Returns:
True if the images' bounding boxes overlap, false otherwise.
Type
boolean

keyDown(keyCode) → {boolean}

Checks if a specific key is currently being held down.
Parameters:
Name Type Description
keyCode number The key code to check.
Source:
Returns:
True if the key is down, false otherwise.
Type
boolean

keyHit(keyCode) → {boolean}

Checks if a specific key was pressed once. This is true for only one frame.
Parameters:
Name Type Description
keyCode number The key code to check.
Source:
Returns:
True if the key was just hit, false otherwise.
Type
boolean

line(x1, y1, x2, y2)

This command draws a line, in the current drawing color, from one point on the screen to another (from the x,y to x1,y1 location).
Parameters:
Name Type Description
x1 number The starting x-coordinate of the line.
y1 number The starting y-coordinate of the line.
x2 number The ending x-coordinate of the line.
y2 number The ending y-coordinate of the line.
Source:

loadAnimImage(path, width, height, first, count) → {Jmage}

Loads an animated image (spritesheet) and queues it for processing.
Parameters:
Name Type Description
path string The path to the spritesheet file.
width number The width of a single frame.
height number The height of a single frame.
first number The index of the first frame in the animation sequence (1-based).
count number The total number of frames in the animation sequence.
Source:
Returns:
A Jmage instance representing the animated image.
Type
Jmage

loadBrush(tilesetImage, tileWidth, tileHeight) → {object|null}

Creates a brush object from a tileset image for use with TileBlock.
Parameters:
Name Type Description
tilesetImage Jmage The image containing the tiles.
tileWidth number The width of a single tile.
tileHeight number The height of a single tile.
Source:
Returns:
A brush object or null if the image is invalid.
Type
object | null

loadFont(path, name) → {Font}

Loads a font file and queues it for processing.
Parameters:
Name Type Description
path string The path to the font file (e.g., .ttf, .woff).
name string The name to assign to the font-family for CSS.
Source:
Returns:
A Font instance representing the loaded font.
Type
Font

loadImage(path) → {Jmage}

Loads a static image and queues it for processing.
Parameters:
Name Type Description
path string The path to the image file.
Source:
Returns:
A Jmage instance representing the image.
Type
Jmage

midHandleImage(img)

Sets the handle of a specific image to its center.
Parameters:
Name Type Description
img Jmage The Jmage object to modify.
Source:

mouseDown(button) → {boolean}

Checks if a specific mouse button is currently held down.
Parameters:
Name Type Description
button number The button to check (1=left, 2=right, 3=middle).
Source:
Returns:
Type
boolean

mouseHit(button) → {boolean}

Checks if a specific mouse button was just pressed in the current frame.
Parameters:
Name Type Description
button number The button to check (1=left, 2=right, 3=middle).
Source:
Returns:
Type
boolean

mouseX() → {number}

Returns the x-coordinate of the mouse relative to the canvas.
Source:
Returns:
The x-coordinate.
Type
number

mouseY() → {number}

Returns the y-coordinate of the mouse relative to the canvas.
Source:
Returns:
Type
number

oval(x, y, width, height, filled)

Use this to draw an oval shape at the screen coordinates of your choice. You can make the oval solid or hollow.
Parameters:
Name Type Default Description
x number The x-coordinate of the oval's center.
y number The y-coordinate of the oval's center.
width * how wide to make the oval
height * how high to make the oval
filled * true true to make the oval filled
Source:

plot(x, y)

Used to put a pixel on the screen defined by its x, y location in the current drawing color.
Parameters:
Name Type Description
x number The x-coordinate of the pixel.
y number The y-coordinate of the pixel.
Source:

readPixel(x, y) → {Object}

Reads the color data of a single pixel from the main canvas.
Parameters:
Name Type Description
x number The x-coordinate of the pixel.
y number The y-coordinate of the pixel.
Source:
Returns:
An object with the RGBA color components.
Type
Object

rect(x, y, width, height, filled)

This command will draw a rectangle in the current drawing Color starting at the location specified. The last parameter determines if the rectangle is filled or just a 'box'.
Parameters:
Name Type Default Description
x * x coordinate to begin drawing the rectangle
y * y coordinate to begin drawing the rectangle
width * how wide to make the rectangle in pixels
height * how tall to make the rectangle in pixels
filled * true False for unfilled and True for filled
Source:

rotateImage(img, value)

rotate an image a specified number of degrees
Parameters:
Name Type Description
img Jmage The Jmage object to rotate.
value number The rotation in degrees.
Source:

scaleImage(image, x, y)

Rescales an image. Using a negative value will flip the image on that axis.
Parameters:
Name Type Description
image Jmage The Jmage object to scale.
x number The horizontal scale factor (e.g., 1.0 for 100%, 2.0 for 200%).
y number The vertical scale factor.
Source:

setBlendMode(mode)

Sets the composition mode for all subsequent drawing operations.
Parameters:
Name Type Description
mode string The blend mode to apply (e.g., "add", "multiply", "screen").
Source:

setBuffer(buffer)

Sets the current drawing buffer to an image or the backbuffer.
Parameters:
Name Type Description
buffer Jmage | null The Jmage instance to use as a buffer, or null to reset to the screen.
Source:

setFont(fnt, size, boldopt, italicopt, weightopt)

Sets the active font for subsequent text drawing operations.
Parameters:
Name Type Attributes Default Description
fnt Font The Font object to set as active.
size number The font size in pixels.
bold boolean <optional>
 false True to make the font bold.
italic boolean <optional>
 false True to make the font italic.
weight number <optional>
 0 An optional font weight (e.g., 700). Overrides `bold` if set.
Source:

start()

Starts the game engine. This should be called after all initial assets have been queued for loading. It will display a "Loading..." message, wait for all assets to load, and then start the main loop.
Source:

stringHeight(value) → {number|undefined}

Measures the height of a string using the currently active font.
Parameters:
Name Type Description
value string The string to measure.
Source:
Returns:
The height in pixels, or undefined if no font is set.
Type
number | undefined

stringWidth(value) → {number|undefined}

Measures the width of a string using the currently active font.
Parameters:
Name Type Description
value string The string to measure.
Source:
Returns:
The width in pixels, or undefined if no font is set.
Type
number | undefined

tFormFilter(valueopt)

Enables or disables image smoothing (bilinear filtering) for scaled images.
Parameters:
Name Type Attributes Default Description
value boolean <optional>
 false True to enable smoothing, false to disable it (pixelated look).
Source:

text(x, y, value)

Draws text to the screen using the currently active font.
Parameters:
Name Type Description
x number The x-coordinate to draw the text at.
y number The y-coordinate to draw the text at.
value string The text to draw.
Source:

tileBlock(brush, mapData, destXopt, destYopt)

Draws a map of tiles using a specified brush.
Parameters:
Name Type Attributes Default Description
brush object The brush object created by LoadBrush.
mapData Array.<Array.<number>> A 2D array of tile IDs. Tile ID 0 is considered empty.
destX number <optional>
 0 The top-left X screen coordinate to start drawing the map.
destY number <optional>
 0 The top-left Y screen coordinate to start drawing the map.
Source: