Class BeetPxDraw

Gets a XY (left-top corner) of a camera's view. Could be used e.g. for drawing a game's HUD, or anything else that should be positioned against the viewport and against the global game canvas' coordinates.

Fill the entire canvas with a given color. It's a method which you would typically call as the very first inside BeetPx.setOnDraw in order to not clear the canvas from what was drawn in the previous game loop iteration.

Removes the currently set clipping region, if any.

Sets a new XY (left-top corner) of a camera's view

Example

const prevCameraXy = $d.setCameraXy($v(50,50));
// draw something that requires the camera to be moved to (50,50)
$d.setCameraXy(prevCameraXy);
Copy

Sets a clipping region, which is a rectangular boundary which limits all the subsequent drawing to happen only within it.

Sets a drawing pattern to use. A drawing pattern is a 4x4 definition of which pixels should be drawn with the primary and which with the secondary of BpxPatternColors.

Example

const prevPattern = $d.setDrawingPattern(BpxDrawingPattern.from(`
  ##--
  ##--
  --##
  --##
`));
$d.rectFilled($v(10), $v(20), BpxPatternColors.of($rgb_red, $rgb_blue));
$d.setDrawingPattern(prevPattern);
Copy

Takes a snapshot of the canvas, so it can be later used together with BpxCanvasSnapshotColorMapping. Can be used e.g. for drawing a lighter pixels around light sources.

See

https://github.com/beetrootpaul/beetpx-examples/tree/main/canvas-snapshot

Example

$d.takeCanvasSnapshot();
$d.ellipseFilled(lightXy.sub(lightRadius), $v(lightRadius * 2), BpxCanvasSnapshotColorMapping.of(
  (color: BpxRgbColor | null): BpxRgbColor | null =>
    color
      ? $rgb((50 + color.r) * 1.25, (30 + color.g) * 1.2, (10 + color.b) * 1.05)
      : null
));
Copy

Draws an ellipse, boundary only.

See

An implementation of Bresenham's Algorithm by Alois Zingl: http://members.chello.at/easyfilter/bresenham.html and https://github.com/zingl/Bresenham

Draws an ellipse, filled.

See

An implementation of Bresenham's Algorithm by Alois Zingl: http://members.chello.at/easyfilter/bresenham.html and https://github.com/zingl/Bresenham

Draws an ellipse, boundary only, and fills the entire canvas around the ellipse.

See

An implementation of Bresenham's Algorithm by Alois Zingl: http://members.chello.at/easyfilter/bresenham.html and https://github.com/zingl/Bresenham

Draws a line.

See

An implementation of Bresenham's Algorithm by Alois Zingl: http://members.chello.at/easyfilter/bresenham.html and https://github.com/zingl/Bresenham

Draws a single colored pixel.

Example

$d.pixel($v(10,20), $rgb_red);
Copy

Draws pixels based on a visual 2d representation, defined by BpxPixels. Helpful for quickly drawing a shape that you don't have a sprite for in your spritesheet.

Example

$d.pixels(BpxPixels.from(`
  #####
  #-#-#
  #-#-#
  #####
`, $v(10,20), $rgb_red);
Copy

Draws a rectangle, boundary only.

Draws a rectangle, filled.

Draws a rectangle, boundary only, and fills the entire canvas around the rectangle.

Allows to define a color mapping from the sprite colors to the desired ones.

Example

const prevMapping = $d.setSpriteColorMapping(BpxSpriteColorMapping.from([
  [$rgb_red, $rgb_blue],
]));
$d.sprite(mySprite, $v(10));
$d.setSpriteColorMapping(prevMapping);
Copy

Draws a given sprite.

Example

const mySprite = $spr("spritesheet.png")(8,8,0,0);
$d.sprite(mySprite, $v(10));
Copy

Measures the space that would be occupied by the text if it was drawn on the canvas.

Example

const line1Wh = $d.measureText(textLine1).wh;
const line2Wh = $d.measureText(textLine2).wh;
const line3Wh = $d.measureText(textLine3).wh;
const totalW = Math.max(line1Wh.x, line2Wh.x, line3Wh.x);
const totalH = line1Wh.y + line2Wh.y + line3Wh.y;
const leftTop = $x.canvasSize.div(2).sub(totalW / 2, totalH / 2)
Copy

Sets a font to be used for subsequent text drawing.

See

https://github.com/beetrootpaul/beetpx-examples/tree/main/fonts

Example

const prevFont = $d.setFont($font_saint11Minimal4);
$d.text("hello!", $v(10), $rgb_red);
$d.setFont(prevFont);
Copy

Sets color markers to be used for subsequent text drawing. Color markers are used inside text to indicate places where a color should change to another one.

Example

const prevMarkers = $d.setTextColorMarkers({
  red_theBest: $rgb_red,
  b: $rgb_blue,
});
$d.text("colors are: green, [b]blue, [red_theBest]red", $v(10), $rgb_green);
$d.setTextColorMarkers(prevMarkers);
Copy

Draws a text.

Example

$d.text("hello!\nThe 2nd line", $v(10), $rgb_red);
Copy

Remarks

Use \n to split the text into multiple lines (aligned to the left).