Using image textures is one of the most useful ways to make sprites, but Pixi also has its own low-level drawing tools. You can use them to make rectangles, shapes, lines, complex polygons and text. And, luckily, it uses pretty much the same API as the Canvas drawing API, so if you're already familiar with canvas, there's nothing really new to learn here. But the big advantage is that, unlike the Canvas drawing API, the shapes you draw with Pixi are rendered by WebGL on the GPU. Pixi gives you access to all unused performance power. Let's take a quick look at how to make some basic shapes. Here are all the shapes we will come up with in code.
(1) Rectangle
All shapes are realized by first creating a Graphics instance of Pixi
var rectangle = new Graphics();
Fill the interior of the rectangle with the beginFill hex code value with a light blue fill as follows:
rectangle.beginFill(0x66CCFF);
If you want to give the shape an outer border, use the lineStyle method. Here's how to give the rectangle a 4 pixel wide red outline with an alpha value of 1.
rectangle.lineStyle(4, 0xFF3300, 1);
Use the drawRect method to draw rectangles. Its four parameters x, y, width and height.
rectangle.drawRect(x, y, width, height);
After completion, you need to call the endFill method
rectangle.endFill();
It's like the Canvas drawing API! Here is all the code you need to draw a rectangle, change its position, and add it to the stage.
var rectangle = new Graphics(); rectangle.lineStyle(4, 0xFF3300, 1); rectangle.beginFill(0x66CCFF); rectangle.drawRect(0, 0, 64, 64); rectangle.endFill(); rectangle.x = 170; rectangle.y = 170; stage.addChild(rectangle);
This code uses a 64 x 64 blue rectangle with an x and y position of 170 for its red border.
(2) Circle
Use the drawCircle method to create a circle. Its three arguments are x, y and radius
drawCircle(x, y, radius)
Unlike rectangles and sprites, a circle's x and y position is also its center point. Here's how to make a purple circle with a radius of 32 pixels.
var circle = new Graphics(); circle.beginFill(0x9966FF); circle.drawCircle(0, 0, 32); circle.endFill(); circle.x = 64; circle.y = 130; stage.addChild(circle);
(3) Ellipse
As an API for drawing on canvas, Pixi allows you to draw an ellipse with the drawEllipse method.
drawEllipse(x, y, width, height);
The x/y position defines the top left corner of the ellipse (assuming the ellipse is surrounded by an invisible rectangular border - the top left corner of this box will represent the x/y anchor position of the ellipse). This is a yellow oval, 50 pixels wide and 20 pixels high.
var ellipse = new Graphics(); ellipse.beginFill(0xFFFF00); ellipse.drawEllipse(0, 0, 50, 20); ellipse. endFill(); ellipse.x = 180; ellipse.y = 130; stage.addChild(ellipse);
(4) Rounded Rectangle
Pixi also allows you to use the drawRoundedRect method to make a rounded rectangle. The last parameter cornerRadius is a number in pixels that determines how much the corners should be rounded.
drawRoundedRect(x, y, width, height, cornerRadius)
Here's how to make a rounded rectangle with a corner radius of 10 pixels.
var roundBox = new Graphics(); roundBox.lineStyle(4, 0x99CCFF, 1); roundBox.beginFill(0xFF9933); roundBox.drawRoundedRect(0, 0, 84, 36, 10) roundBox.endFill(); roundBox.x = 48; roundBox.y = 190; stage.addChild(roundBox);
(5) Line
As you can see in the above example, the lineStyle method allows you to define a line. You can use the moveTo and lineTo methods to draw the start and end of the line, just as you would with the Canvas Drawing API. Here's how to draw a 4 pixel wide, white diagonal line.
var line = new Graphics(); line.lineStyle(4, 0xFFFFFF, 1); line.moveTo(0, 0); line.lineTo(80, 50); line.x = 32; line.y = 32; stage.addChild(line);
PIXI.Graphics objects, like lines, have x and y values, just like sprites, so you can place them anywhere on the stage when you draw them.
(6) Polygons
You can connect lines together and fill them with color to create complex shapes using the drawPolygon method. The argument to drawPolygon is a path array of x/y points that define the position of each point on the shape.
var path = [ point1X, point1Y, point2X, point2Y, point3X, point3Y ]; graphicsObject.drawPolygon(path);
drawPolygon takes the three points together to make the shape. Here's how to use drawPolygon to connect three lines together, making a red triangle with a blue border. The triangle is drawn at position 0,0 and then moved to its position on the stage using its x and y properties.
var triangle = new Graphics();
triangle.beginFill(0x66FF33);
//Use `drawPolygon` to define the triangle as
//a path array of x/y positions
triangle.drawPolygon([
-32, 64, //First point
32, 64, //Second point
0, 0 //Third point
]);
//Fill shape's color
triangle.endFill();
//Position the triangle after you've drawn it.
//The triangle's x/y position is anchored to its first point in the path
triangle.x = 180;
triangle.y = 22;
stage.addChild(triangle);
(6) Display text
Use Textobject (PIXI.Text) to display text on the stage. The constructor accepts two parameters: the text to display and a style object that defines the font properties. Here's how to display the word "Hello Pixi" in white, 32px tall Arial font.
var message = new Text(
"Hello Pixi!",
{fontFamily: "Arial", fontSize: 32, fill: "white"}
);
message.position.set(54, 96);
stage.addChild(message);
PIXI's text objects inherit from the Sprite class, so they all contain the same properties like x, y, width, height, alpha, and rotation. Position and resize the text on the stage just like you would any other sprite.
Use the text property if you want to change the contents of a text object after it is created.
message.text = "Text changed!";
Use the style attribute if you want to redefine the font attribute.
message.style = {fill: "black", font: "16px PetMe64"};
Pixi creates text objects by rendering text as invisible and temporary canvas elements using the Canvas drawing API. It then turns the canvas into a WebGL texture so it can be mapped to the sprite. That's why the color of the text needs to be wrapped in a string: it's a Canvas drawing API color value. As with any canvas color value, you can use common colors (such as "red" or "green") or use rgba, hsla, or hex values.
Other style properties you can include include stroke font outline color and strokeThickness outline thickness. Set the text's dropShadow property to true to make the text appear shadowed. Use dropShadowColor to set the shadow's hex color value, dropShadowAngle to set the shadow's angle in radians, and dropShadowDistance to set the shadow's height in pixels. And more: Check out Pixi's full list of text documentation.
Pixi can also wrap long lines of text. Set the text's wordWrap style property to true, then set wordWrapWidth to the maximum length (in pixels) a line of text should be. Use the align property to set the alignment of multiline text.
message.style = {wordWrap: true, wordWrapWidth: 100, align: center};
(Note: align does not affect single-line text.)
If you want to use a custom font file, use the CSS @font-face rule to link the font file to the HTML page running the Pixi application.
@font-face {
font-family: "fontFamilyName";
src: url("fonts/fontFile.ttf");
}
Add this @font-face rule to the CSS stylesheet of the HTML page.
Pixi also supports bitmap fonts. You can use Pixi's loader to load bitmap font XML files just like JSON or image files.