The Graphic Primitive
Indigo has a number of primitives that all serve the same purpose, which is to help you tell Indigo how to fill a space on the screen.
The graphic primitive is probably the simplest, its job is to take a texture and render it. Depending on the material type you choose, you can achieve different effects, but materials apply to most primitives universally.
Graphic's special ability is that it can crop images.
Example Links
This example shows how to create a simple graphic and display it on the screen. It demonstrates a number of transformations.
The graphic in this example has been setup using an ImageEffects material that allows you to set properties like transparency (alpha). However you have also use the Bitmap material for simpler rendering use cases.
The graphic also has a reference point set, which is used to determine the origin of the
graphic. By default the origin is in the top left corner of the graphic, meaning that if you
do graphic.moveTo(10, 10), the graphics top left will be placed at 10, 10. If you set the
reference point to the center of the graphic, then the center of the graphic will be placed at
pixel coordinates (10, 10). In the example below, the reference point is set to (48, 48), so
that if we did the moveTo again it would place the graphic at (10, 10), offset by 48 pixels
in both directions. This is very handy for placing characters in a game. If you set the
reference point to be at their feet, the character will 'stand' on the moveTo coordinate.
val graphic: Graphic[Material.ImageEffects] =
Graphic(0, 0, 256, 256, 1, Material.ImageEffects(Assets.assets.graphics))
.withRef(48, 48)This is another graphic that is based on the first graphic, but has had some transformations
including graphic's party piece, the crop. Setting the crop allows you to take a sub-section
of the image and display it.
val basic: Graphic[Material.ImageEffects] =
graphic
.withCrop(128, 0, 96, 96)
.moveTo(200, 200)
.scaleBy(1.5, 1.5)
.withRef(96, 96)