🎨 Graphics (2D)
Understanding the allocation system
When you create graphics, you need to allocate them. This means that you need to create a new graphics object, and then you need to draw on it.
When you're done drawing, you need to dispose of it. This must be done by yourself in order to avoir memory leaks.
Creating a graphics
You can easily create & store 2D graphics with the following expression:
As explained above, you need to dispose of the graphics when you're done drawing on it. You can do so with the following effect:
You won't be able to draw on the graphics after disposing it.
Drawing on a graphics
You can draw several shapes on a graphics. You first need to create and configure the shape itself, then draw it at the specified location.
When you have a shape, you can draw it using the following effect:
The colors are Skript color. You can however use
color from rgb to create a color from RGB values.
In order to draw a text, you'll have to create its object, configure its properties, and then draw it.
The first thing to do is creating the font that will be used to draw the text. You can create a font with the following expression:
The font name is case-sensitive. You can find the list of available fonts on your system by using the following expression:
Wants to add a style?
You can add a style to the font by using the following expression:
You can replace the
XXX with the following styles:
How to use custom font?
You must load the font before using it. It's best to put the following effect inside a
on load or
on skript load event:
Supported formats are
Now that you have a font, you can create the text object:
SkImage2 uses a powerful 'text format' system, therefore you can easily change the text's color by using Minecraft's colors, for example:
As you can see here, you can use
$ to change the color of the text (using Minecraft's color codes, or HEX codes), and
%nl% to create a new line. Also, you can specify either the vertical or horizontal alignment of the text.
Supported Color Codes
$1- Dark Blue
$2- Dark Green
$3- Dark Aqua
$4- Dark Red
$5- Dark Purple
$8- Dark Gray
$d- Light Purple
The format is
000000 is the HEX code.
You can now draw the text as when you draw a shape:
If you center the text, the input position will be considered as 'offset' from the center of the text.
Therefore, if you want your text perfectly centered, you'll have to set 0, 0 for the position when drawing the text!
You can also draw images on the graphics. Here again, simply draw the image as when you draw a shape:
Customizing a graphics
Anti-aliasing is a technique used to make the edges of shapes smoother:
It is disabled by default. If you wish to enable it for both shapes & text, you can simply set the property to true, for instance:
You can simply turn it off by setting it to false.
This will be taken in account for all shapes & text drawn after the property has been set!
The stroke is the outline of a shape, or how the line shape is drawn. By default, it has a width of 1 and is filled.
A stroke can have several properties:
width: the width of the stroke (in pixel)
cap(optional): the cap of the stroke. Can be
square. Defaults to
join(optional): the join of the stroke. Can be
round. Defaults to
mitter limit(optional): the mitter limit of the stroke. Defaults to 10.
dash array(optional): the dash array of the stroke. Defaults to
none(aka full line).
dash phase(optional): the dash phase of the stroke. Defaults to 0.
Here's some example code when drawing a rectangle: (anti-aliasing is enabled)