WebGL Component

Events

Draw [Data = {type: "canvas", pos, co, ctx}]
when the entity is ready to be drawn to the stage
NoCanvas
if the browser does not support canvas

When this component is added to an entity it will be drawn to the global webgl canvas element. Its canvas element (and hence any WebGL entity) is always rendered below any DOM entities.

Sprite, Image, SpriteAnimation, and Color all support WebGL rendering. Text entities will need to use DOM or Canvas for now.

If a webgl context does not yet exist, a WebGL entity will automatically create one.

Note: For better performance, minimize the number of spritesheets used, and try to arrange it so that entities with different spritesheets are on different z-levels. This is because entities are rendered in z order, and only entities sharing the same texture can be efficiently batched.

Create a webgl entity like this

var myEntity = Crafty.e("2D, WebGL, Color")
     .color(1, 1, 0, 0.5)
     .attr({x: 13, y: 37, w: 42, h: 42});

Properties

Methods

Back to top

.context

The webgl context this entity will be rendered to.

Back to top

.draw()

public this .draw([[Context ctx, ]Number x, Number y, Number w, Number h])
ctx

Optionally supply a different r 2D context if drawing on another canvas is required

x

X offset for drawing a segment

y

Y offset for drawing a segment

w

Width of the segment to draw

h

Height of the segment to draw

An internal method to draw the entity on the webgl canvas element. Rather then rendering directly, it writes relevent information into a buffer to allow batch rendering.