As mini-games continue to grow, Cocos Creator has become the darling of game development. As an excellent game engine framework, Cocos Creator also provides an excellent editor, Cocos Creator has good API support for image rendering, UI system and animation system, and supports building and publishing on multiple platforms. In addition, Cocos Creator integrates the whole solution of mobile pager into the editor tool. There is no need to shuttle between multiple software. As long as you open the editor, various one-click automated processes can solve many problems of code editing with the least amount of time and energy.

Problems seem to have

Let’s cut to the chase.

Cocos Creator provides a Mask Mask component, which is used to specify the range of child nodes that can be rendered. A Node with a Mask component will create a render Mask using the constraint box of the Node (the range specified by the Size of the Node component in the property inspector). All children of the node will be clipped according to the mask, and those outside the mask will not be rendered. This component can only crop child nodes into polygons or ellipses, not the ordered but irregular shape of puzzle pieces.

Then, how to customize the image clipping in Cocos Creator to achieve the shape of concave and convex puzzle pieces with rank, let’s look at the drawing first.

The core idea

Extend the application of clipping function, use the API (Graphics) provided by Cocos Creator to draw the Mask path, customize the basic clipping shape, and realize the clipping of irregular Graphics.

  1. Create the project using Cocos Creator
  2. Child elements are masked and clipped using the Mask component
  3. Cc.Mask _graphics function original content empty, logic rewrite.
  4. Redraw the clipping path using lintTo() and bezierCurveTo()

Draw the fragment CreateChipMask

Looking at a single fragment, each fragment has four sides, and each side can be divided into three parts: straight line, curve and straight line. The length of the straight part is consistent, and the curve part can be divided into three cases: concave, convex and straight, so the puzzle pieces have regular irregular shapes.

  1. Graphics redraw the cutting path of puzzle pieces, and proceed smoothly in order of up, right, down, and left. First set the base draw field:

    const defaultChip = {
    start: { x: -100, y: 0 },
    w: 150,  
    h: 150,
    r: 25,
    circleStatus: [0, 0, 1, 1],
    offset: 32,
    space:0
}
Copy the code
    field The default value instructions
    start {x:0,y:0} The starting point of the clipping path
    w 150 Fragment width
    h 150 Height of debris
    r 25 Half the distance of the fragment’s unilateral curve
    circleStatus ,0,1,1 [0] Describe the state of the curve on each side of the fragment: 0 (straight line) 1 (convex) -1 (concave), corresponding to up, right, down and left successively
    offset 32 The offset of two control points of a third-order Bezier curve determines the radian of the curve
    space 0 The gap between each fragment (the width and height of the fragment includes the distance of the gap)

  2. According to the basic drawing field, with the diagram of the above puzzle pieces, the following values are obtained:

    A) Actual width of fragment: chip-w = chip-w-chip-space (same for height)

    B) Length of fragment unilateral (upper and lower) straight line lineW= Chester. w / 2-chester. r, if convex curve, need to subtract chester. space, namely lineHN = Chester. h / 2-chester. r + chester. space (same height)

  3. Use graphics.moveto (start.x, start.y) to move the path to the specified point on the canvas, first draw ‘top’, and draw the 3 parts of the fragment ‘top’ separately

    A) linear

    Draw a line using graphics.lineto. The starting point is the value of the base draw field start, and the end point of the line is

    graphics.lineTo(start.x + (circleStatus[0] == 1 ? lineWN : lineW), start.y)  
Copy the code

    B) curve

    If circleStatus is set to 0, that is, a straight line, do not draw this part, if a curve, use graphics.beziercurveto three times bezier curve draw. The starting point of drawing is the end point of a) step, and the end point is:

    (Starting point (start.x) + width of the fragment (chchip. W) - Length of the straight part (linW/lineWN), start.y)Copy the code

    CPS1 and CPS2 need two control points to draw the cubic Bezier curve, which should be in the same direction. Offset determines the concave-convex state of the curve.

    C) a straight line

    Again using graphics.lineto to draw a line, the end of the last part of the side is

    (Starting point (start.x) + fragment width (chchip. W), start.y)Copy the code

  4. To draw the right, down, and left paths, see Step 7.

  5. Finally, close the drawn path, draw the path, and fill it.

ctx.close(); / / closed CTX. Stroke (); // Draw the defined path ctx.fill(); / / fillCopy the code

At this point we are done drawing the basic shard.

Image fragmentation

The next step is to divide the whole picture into ordered pieces.

  1. Create a project using the tools and steps provided on the Cocos Creator website

  2. According to the operation of the official website document, create a new scene, create an empty node (Clip) in the hierarchy manager, and add the Mask component. Under this node, create a Sprite node for placing pictures that need to be clipped (under the empty node, any node can be placed according to requirements, and it will be clipped). Finally, set the null node (CLIP) into the prefabricated resource clipRrefab.

  3. Create a script file stage.js in the project explorer, create an empty node (stage) in the hierarchy manager, and introduce the stage.js script and the clipRrefab prefab resource under this node.

  4. In the stage.js script, set the basic information for the image

    const picture = {
    w: 980,
    h: 700,
    chipW: 140,
    chipH: 140,
    rowNum: 6,
    column: 8
}
Copy the code
    field instructions
    w Initial picture width
    h Initial height of picture
    chipW Fragments of wide
    chipH Fragments of high
    rowNum The number of lines the image needs to crop
    column The number of columns the image needs to crop

  5. Call the prefab resource and clear the default _graphics path under cc.mask.

  6. Look for a bump pattern for each fragment. Except for the boundary fragment, the concave and convex state on the left and right of the fragment is the same, and the concave and convex state on the top and bottom is the same, that is, if the left side is concave, the right side must be concave.

    If (row % 2 == 0) {t = col % 2 == 0? 1 : -1 } else { t = col % 2 == 0 ? If (row % 2 == 0) {r = col % 2 == 0? -1 : 1 } else { r = col % 2 == 0 ? 1:1}Copy the code

  7. Call draw picture CreateChipMask to achieve picture jigsaw state.

    CreateChipMask.createMask(graphics, { start: { x: picture.chipW * (col - 1), y: -picture.chipH * (row - 1) }, w: CircleStatus: [row == 1? 0: t, col == picture. Column-1? 0: r, row == picture.rowNum - 1 ? 0 : t, col == 1 ? 0 : r], space:2 })Copy the code

    Where, the state of the first row (last row) and above (below) the fragment is straight line, the state of the first column (last column) and left (right) of the fragment is straight line.

Code express: github.com/yangxiaolu1…

conclusion

Unconsciously has come to the end, small make up to change the style of the past, there is no too much nonsense, no noun explanation, just described their own implementation ideas, I hope you can understand.

Welcome to disturb!!