Graphics

View source
Entity → Visual → ceramic.Graphics (Class)

Immediate-mode graphics API for Ceramic, similar to Canvas 2D or Flash Graphics.

Graphics provides a familiar drawing API while efficiently managing memory through Ceramic's pooling system. It internally uses Mesh, Quad, Line, and Arc objects which are recycled between frames to minimize garbage collection.

Features:

  • Basic shape drawing (rectangles, circles, polygons)
  • Line and path drawing with configurable styles
  • Bezier and quadratic curves
  • Fill and stroke operations
  • Efficient object pooling for all visuals

Example usage:

var graphics = new Graphics();

// Draw a filled rectangle
graphics.beginFill(Color.RED);
graphics.drawRect(10, 10, 100, 50);
graphics.endFill();

// Draw a stroked circle
graphics.lineStyle(2, Color.BLUE);
graphics.drawCircle(100, 100, 30);

// Draw a path
graphics.moveTo(10, 10);
graphics.lineTo(50, 30);
graphics.quadraticCurveTo(100, 20, 150, 50);

// Clear and reuse next frame
graphics.clear();

Instance Members

clear(): Void

Clear all graphics and recycle visuals to pools

lineStyle(?thickness: Float = 0, ?color: Color = null, ?alpha: Float = 1.0): Void

Set the line style for subsequent drawing operations. Call with no arguments or thickness <= 0 to disable stroking.

Name Type Default
thickness Float 0
color Color null
alpha Float 1.0
beginFill(?color: Color = null, ?alpha: Float = 1.0): Void

Begin a fill for subsequent shape operations

Name Type Default
color Color null
alpha Float 1.0
endFill(): Void

End the current fill operation

drawRect(x: Float, y: Float, width: Float, height: Float): Void

Draw a rectangle

Name Type
x Float
y Float
width Float
height Float
drawCircle(x: Float, y: Float, radius: Float, ?sides: Int = -1): Void

Draw a circle

Name Type Default
x Float
y Float
radius Float
sides Int -1
drawArc(x: Float, y: Float, radius: Float, startAngle: Float, endAngle: Float, ?sides: Int = -1): Void

Draw an arc

Name Type Default
x Float
y Float
radius Float
startAngle Float
endAngle Float
sides Int -1
drawTriangle(x1: Float, y1: Float, x2: Float, y2: Float, x3: Float, y3: Float): Void

Draw a triangle

Name Type
x1 Float
y1 Float
x2 Float
y2 Float
x3 Float
y3 Float
drawPolygon(points: Array<Float>): Void

Draw a polygon from an array of points

Name Type
points Array<Float>
moveTo(x: Float, y: Float): Void

Move the drawing position to a new point

Name Type
x Float
y Float
lineTo(x: Float, y: Float): Void

Draw a line from the current position to a new point

Name Type
x Float
y Float
drawLine(x1: Float, y1: Float, x2: Float, y2: Float): Void

Draw a line between two points

Name Type
x1 Float
y1 Float
x2 Float
y2 Float
quadraticCurveTo(cpx: Float, cpy: Float, x: Float, y: Float): Void

Draw a quadratic Bezier curve

Name Type
cpx Float
cpy Float
x Float
y Float
bezierCurveTo(cp1x: Float, cp1y: Float, cp2x: Float, cp2y: Float, x: Float, y: Float): Void

Draw a cubic Bezier curve

Name Type
cp1x Float
cp1y Float
cp2x Float
cp2y Float
x Float
y Float
drawPath(): Void

Draw all accumulated path segments

closePath(): Void

Close the current path

destroy(): Void
new(): Void

Private Members

activeMeshes: Array<Mesh>

Active meshes currently being displayed

activeQuads: Array<Quad>

Active quads currently being displayed

activeLines: Array<Line>

Active lines currently being displayed

activeArcs: Array<Arc>

Active arcs currently being displayed

pooledMeshes: Array<Mesh>

Pooled meshes ready for reuse

pooledQuads: Array<Quad>

Pooled quads ready for reuse

pooledLines: Array<Line>

Pooled lines ready for reuse

pooledArcs: Array<Arc>

Pooled arcs ready for reuse

fillColor: Color

Current fill color

fillAlpha: Float

Current fill alpha

filling: Bool

Whether we're currently filling

lineThickness: Float

Current line thickness

lineColor: Color

Current line color

lineAlpha: Float

Current line alpha

stroking: Bool

Whether we have an active line style for stroking

currentPath: Array<Float>

Current path being built

currentX: Float

Current X position for path operations

currentY: Float

Current Y position for path operations

pathSegments: Array<Array<Float>>

Path segments for complex shapes

currentDepth: Float

Current depth value for ordering visuals. Incremented for each visual added to ensure proper render order. Strokes are given higher depth than fills to render on top.

getMesh(): Mesh

Get a mesh from the pool or create a new one

Returns
Mesh
getQuad(): Quad

Get a quad from the pool or create a new one

Returns
Quad
getLine(): Line

Get a line from the pool or create a new one

Returns
Line
getArc(): Arc

Get an arc from the pool or create a new one

Returns
Arc
fillRect(x: Float, y: Float, width: Float, height: Float): Void

Draw a filled rectangle using a mesh with 4 vertices.

Name Type
x Float
y Float
width Float
height Float
strokeRect(x: Float, y: Float, width: Float, height: Float): Void

Draw a stroked rectangle outline using a mesh with 8 vertices. More efficient than using 4 Line objects.

Name Type
x Float
y Float
width Float
height Float

Metadata

Name Parameters
:build tracker.macros.EventsMacro.build()
:autoBuild tracker.macros.EventsMacro.build()
:build ceramic.macros.EntityMacro.buildForCompletion()
:autoBuild ceramic.macros.EntityMacro.buildForCompletion()