Cocos Creator is a popular game development engine with rich components and tools, among which the Graphics component allows you to draw 2D graphics and geometric shapes in the game, and control its appearance and behavior by writing scripts.
Table of contents
1. Component properties
| Attributes | Function Description |
|---|---|
| lineWidth | Set or return the current line width |
| lineJoin | Sets or returns the type of corner created when two lines intersect |
| lineCap | Sets or returns the end endpoint style of a line |
| strokeColor | Sets or returns the color of the stroke |
| fillColor | Sets or returns the color of the fill painting |
| miterLimit | Set or return the maximum miter length |
2. Component method
| method | Function Description |
|---|---|
| moveTo (x, y) | Moves the path to the specified point in the canvas without creating a line |
| lineTo(x,y) | Adds a new point, then creates a line in the canvas from that point to the last specified point |
| bezierCurveTo (c1x, c1y, c2x, c2y, x, y) | Create Cubic Bézier Curves |
| quadraticCurveTo (cx, cy, x, y) | Create quadratic Bézier curves |
| arc (cx, cy, r, a0, a1, counterclockwise) | Create arcs/curves (for creating circles or partial circles) |
| ellipse (cx, cy, rx, ry) | create ellipse |
| circle(cx, cy, r) | create circle |
| rect(x, y, w, h) | create rectangle |
| close () | Create a path from the current point back to the starting point |
| stroke() | draw the defined path |
| fill() | Fill current drawing (path) |
| clear () | clear all paths |
3. Script example
The basic usage of the Graphics component is very simple. In Cocos Creator editor, you can create a new node and add Graphics component to it. You can then use the component's API to draw shapes, lines, and fill colors. For example, the following code will draw a red circle on the screen:
var graphics = this.getComponent(cc.Graphics);
graphics.circle(0, 0, 100);
graphics.fillColor = cc.Color.RED;
graphics.fill();
In this example, we first get the Graphics component on the current node. We then created a circle using the circle() method, which accepts the coordinates of the center and the radius as parameters. Next, we set the fillColor property to red and call the fill() method to fill the circle.
In addition to drawing basic shapes, the Graphics component also supports drawing paths and curves. For example, the following code will draw a curved line on the screen:
var graphics = this.getComponent(cc.Graphics);
graphics.moveTo(0, 0);
graphics.quadraticCurveTo(100, 100, 200, 0);
graphics.strokeColor = cc.Color.BLUE;
graphics.stroke();
In this example, we use the moveTo() method to move the drawing pen to the starting point, and then use the quadraticCurveTo() method to draw a quadratic curve. Finally, we set the strokeColor property to blue and call the stroke() method to draw the outline of the curve.
The Graphics component also supports many other features, such as setting line width, drawing text, and gradient fills. You can find complete API reference and sample code in Cocos Creator documentation. By mastering the Graphics component, you can create beautiful 2D graphics and visual effects that enhance your gaming experience.
In short, Graphics is one of the very powerful components of Cocos Creator, which can be used to create and render various 2D graphics. It has rich properties and methods, so that users can easily achieve various effects.