Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the advantages of Bezier Game". Friends who are interested might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "what are the advantages of Bezier Game"?

BezierGame a Web-based Photoshop pen tool practice game, for designers using Photoshop, if you do not master the pen tool, you might as well try this pen game, which can help you better master the practical skills of the pen tool. Software with pen tools: Photoshop, Illustrator, Flash, Fireworks, CorelDraw and other graphics and image design software. It is common in the series of software of Adobe company. The pen tool is a tool used to create a path in the drawing software, which can be edited again after creating the path. The pen tool belongs to the vector drawing tool, which has the advantage of drawing smooth curves and maintaining the smooth effect after zooming or deforming.

What about Bezier curve practice?

In the use of CocosCreator to do curve action, always some deliberately avoid using cc.bezierTo (Bezier curve), but simply use cc.moveTo, cc.JumpTo to simulate, and later more lazy directly use Creator animation editor to generate, although the above method can also solve some problems, but always close to far, there is a simple way not to use, the reason is that they do not understand.

How about the Bezier curve practice tool?

In order to really use cc.bezierTo, I combined with cc.Graphics components to create a simple Bezier curve editing tool.

There are two curves in the figure, and the curve path can be displayed in real time by directly changing the position of the starting point, the end point, the control point 1 and the control point 2 in the editor.

On the left, there is a text attribute of Params in the DrawBezier component panel, which is the parameter that can be used by cc.bezierTo. The structure is as follows:

[

[/ / Curve one

{"x":-123, "y": 214}, / / starting point

{"x":-418, "y": 214}, / / control point 1

{"x":-418, "y": 42}, / / control point 2

{"x":-92, "y": 42} / / end point

]

[/ / Curve two

{"x":-92, "y": 42}

{"x":-26, "y": 235}

{"x": 90, "y": 266}

{"x": 228, "y": 134}

]

]

You can also modify the editing curve by running this scene, and use the parameters generated above to preview the effect of the cc.bezierTo action:

Bezier curve. Gif

three

The following is a brief introduction to the relevant component properties, first take a look at the components on the two red starting points in the figure

No matter it is the starting point, the end point, or the control point, there is a Dragable component, which is responsible for dragging the node.

The two red sections in the figure are the starting point, with a BezierAction component hanging on it, the Target attribute of which is the end node, and Ctrl1 and Ctrl2 are its control points respectively.

Take another look at the properties of the DrawBezier drawing component:

Image.png

Add a node to the scene and mount a cc.Graphics

Mount the DrawBezier component. BezierActions is an array of BezierAction components. Drag the two red nodes in the above figure here.

ActionNode is the node used to execute the cc.bezierTo. The gold coin in the previous figure

Duration is the duration of each curve (for now, this property is better placed on the BezierAction component)

At this point, I believe you have a deeper understanding of "what are the advantages of Bezier Game?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.