Graphics

Singleton

The heavy rendering part of Micron. Graphics groups all the drawXXX methods, as well as image loading and manipulation.

IMPORTANT: there are several considerations you should know:

  • Color (r, g, b, a components for Red, Green, Blue and Alpha) are always normalized values between 0..1.
  • Position: all the values you pass as position coordinates (x, y) are from the upper left corner of the image or primitive.
  • Rotation and scale: the values passed for rotation and scaling are considered from the center of the image or primitive.

Members


canvas

canvas : object{Canvas}

The basic canvas object. Feel free to manipulate it directly to suit your needs.


context

context : object{Canvas2DContext}

read-only


images

images : Array

The list of all the images loaded by Graphics. Useful to have access to the raw ImageElement data.


imagesMap

imagesMap : {}

Same as above, but in form of map.


autoClearScreen

autoClearScreen : Boolean

Flag. When true (which it is, by default), it will clear the screen automatically before drawing. If false, the user will have to do it manually. This is very useful to create several FX as blur (combined with drawing in full screen with low alpha values).


Methods


init

init (width, height)

Called automatically by Core. No matter how big or small is your game window, you will always have width,height pixels in your app.


pixelify

pixelify (flag)

If flag is true, all the textures will be displayed using nearest filtering. Useful for 8bit/pixelart games.


getWidth

getWidth ()

Return the width of your virtual window (the same value you provided in init). The same as Core.width.


getHeight

getHeight ()

See above and change width by height.


loadImage

loadImage (alias, path)

All images loaded have an alias. The path can be any local image or link.


getImage

getImage (pathOrAlias)

Get an [Image] object previously loaded, using it's path or alias. Better use the alias (it's simpler).


preDraw

preDraw ()

You shouldn't have to touch these two, but in case you need to alter the default drawing of the entire engine: here's the place to do so.


postDraw

postDraw ()

enableBlur

enableBlur (size, r, g, b, a)

Start drawing "blur". It will create a blurry halo around everything you draw. It can kill performance.


disableBlur

disableBlur()

Stop using blur.


drawText

drawText (text, x, y, r, g, b, a, size : number, [font=defaultFont] : string)

Example: Graphics.drawText("Hello world!", 0, 0, 1, 1, 1, 1, 32, "Arial");


drawRect

drawRect (x, y, width, height, r, g, b, a, [mode="fill"])

For all the methods that have a "mode" parameter, it can always be either "fill" or "stroke".


drawFullScreenRect

drawFullScreenRect (r,g,b,a)

Draws a rectangle in fullscreen, no matter where the Camera is.


drawLine

drawLine (x1, y1, x2, y2, r, g, b, a, lineWidth, [round])

If round is not empty, it will be used to define lineCap.


drawArc

drawArc (x, y, radius, startAngle, endAngle, r, g, b, a, lineWidth, [mode="fill"])

Draw an arc. Can be used to draw circles as well, but it is better to use drawCircle instead.


drawCircle

drawCircle (x, y, radius, r, g, b, a, [mode="fill"])

drawSprite

drawSprite (path, x, y, width, height, angle, scaleX, scaleY, alpha)

Path can be the full path to the image or the key used when the asset is loaded.


drawSpriteCropped

drawSpriteCropped (img:[Image], x, y, width, height, angle, scaleX, scaleY, alpha, uvX, uvY, uvW, uvH)

A cropped sprite displays a part of the texture defined by its uv in pixels.


drawPolygon

drawPolygon (points : array, x, y, r, g, b, a, [mode="fill"])

The points array must have a pair number of elements. Each succesive value is a pair (x,y).


drawRegularPolygon

drawRegularPolygon (x, y, numberOfSides, size, r, g, b, a, [mode="fill"])

A regular polygon is the one which has all sides equally long. From 3 up to infinite.