Cocos Creator is very friendly to write games, and the official documentation is quite complete. Use cocoscreator to trace numbers/letters/lines and curves.
Implementation approach
Here we have described the number 2 as an example to talk about the specific implementation ideas. In fact, whether we do tracing, or drawing lines, drawing graphics. We all trace by connecting points with straight lines.
- So the first thing we need to achieve tracing is to get the coordinate points of each trace we trace. Now, how do we get the coordinates of this string of trajectories
Gets the track coordinate points
- 1, there are many ways to get coordinate points, but the more reliable is to let the UI sister, to provide us with the following data, the following data is the UI sister using PS to draw 2 when some important points
Bezier2path. move(to: NSPoint(x: 26, y: 287)) bezier2path. curve(to: NSPoint(x: 26, y: 287)) bezier2Path. 122, y: 414), controlPoint1: NSPoint(x: 26, y: 287), controlPoint2: NSPoint(x: 25, y: 400)) bezier2Path.curve(to: NSPoint(x: 200, y: 247), controlPoint1: NSPoint(x: 219, y: 428), controlPoint2: NSPoint(x: 257, y: 323)) bezier2Path.curve(to: NSPoint(x: 38, y: 42), controlPoint1: NSPoint(x: 143, y: 171), controlPoint2: NSPoint(x: 38, y: 42)) bezier2Path.curve(to: NSPoint(x: 46, y: 26), controlPoint1: NSPoint(x: 38, y: 42), controlPoint2: NSPoint(x: 30, y: 26)) bezier2Path.curve(to: NSPoint(x: 234, y: 26), controlPoint1: NSPoint(x: 62, y: 26), controlPoint2: NSPoint(x: 234, y: 26)) */Copy the code- 2. After getting the data from the UI sister, we will write the code to obtain a series of coordinate points we need. We need to create three JS script files as shown in the figure below
- 3. Next, in Cocos-Creator, start creating the basic game scene to trace
- 4. Create the nodes and components required for tracing
- 5. Look at the four nodes created in step 4
When creating the BG node, select monochrome Sprite: The purpose is to set the bg background color. Then associate guiji.js with the BG node
[{"x": 26."y": 287}, {"x": 26."y": 287}, {"x": 26.18."y": 292.56}, {"x": 26.26."y": 293.84}, {"x": 26.33."y": 294.76}, {"x": 26.41."y": 295.93}, {"x": 26.52."y": 297.25}, {"x": 26.73."y": 299.41}, {"x": 26.91."y": 301.14}, {"x": 27.11."y": 302.88}, {"x": 27.6."y": 306.62}, {"x": 27.91."y": 308.74}, {"x": 28.34."y": 311.42}, {"x": 28.82."y": 314.16}, {"x": 29.23."y": 316.31}, {"x": 29.74."y": 318.79}, {"x": 30.32."y": 321.45}, {"x": 30.96."y": 324.15}, {"x": 31.69."y": 327.05}, {"x": 32.56."y": 330.23}, {"x": 33.34."y": 332.9}, {"x": 34.2."y": 335.68}, {"x": 35.2."y": 338.67}, {"x": 36.31."y": 341.8}, {"x": 37.36."y": 344.58}, {"x": 38.56."y": 347.56}, {"x": 39.98."y": 350.86}, {"x": 41.29."y": 353.7}, {"x": 42.73."y": 356.64}, {"x": 44.29."y": 359.64}, {"x": 45.9."y": 362.55}, {"x": 47.66."y": 365.52}, {"x": 49.53."y": 368.49}, {"x": 51.39."y": 371.25}, {"x": 53.56."y": 374.26}, {"x": 55.65."y": 376.98}, {"x": 56.35."y": 377.84}, {"x": 60.27."y": 382.4}, {"x": 62.93."y": 385.2}, {"x": 65.48."y": 387.69}, {"x": 68.21."y": 390.17}, {"x": 71,"y": 392.51}, {"x": 74.07."y": 394.9}, {"x": 77.2."y": 397.13}, {"x": 80.36."y": 399.21}, {"x": 82.56."y": 400.55}, {"x": 87.57."y": 403.31}, {"x": 91.21."y": 405.08}, {"x": 94.76."y": 406.64}, {"x": 98.77."y": 408.21}, {"x": 102.76."y": 409.59}, {"x": 107.23."y": 410.93}, {"x": 111.63."y": 412.05}, {"x": 116.27."y": 413.04}, {"x": 120.78."y": 413.82}, {"x": 131.99."y": 415.04}, {"x": 136.46."y": 415.24}, {"x": 141.01."y": 415.25}, {"x": 145.33."y": 415.09}, {"x": 149.62."y": 414.75}, {"x": 153.86."y": 414.22}, {"x": 157.95."y": 413.53}, {"x": 161.99."y": 412.66}, {"x": 165.77."y": 411.67}, {"x": 169.44."y": 410.53}, {"x": 173.2."y": 409.16}, {"x": 176.74."y": 407.69}, {"x": 180.1."y": 406.1}, {"x": 183.55."y": 404.26}, {"x": 186.58."y": 402.46}, {"x": 189.71."y": 400.41}, {"x": 192.63."y": 398.29}, {"x": 195.55."y": 395.96}, {"x": 198.22."y": 393.61}, {"x": 200.93."y": 391.01}, {"x": 203.37."y": 388.44}, {"x": 205.79."y": 385.65}, {"x": 207.97."y": 382.89}, {"x": 210.11."y": 379.95}, {"x": 212.11."y": 376.94}, {"x": 213.99."y": 373.81}, {"x": 215.81."y": 370.48}, {"x": 217.4."y": 367.26}, {"x": 218.88."y": 363.94}, {"x": 220.26."y": 360.47}, {"x": 221.52."y": 356.93}, {"x": 222.63."y": 353.34}, {"x": 223.63."y": 349.62}, {"x": 224.47."y": 345.96}, {"x": 225.18."y": 342.22}, {"x": 225.76."y": 338.43}, {"x": 226.2."y": 334.54}, {"x": 226.52."y": 330.55}, {"x": 226.68."y": 326.82}, {"x": 226.71."y": 322.78}, {"x": 226.61."y": 318.85}, {"x": 226.35."y": 314.68}, {"x": 225.98."y": 310.85}, {"x": 225.42."y": 306.59}, {"x": 224.74."y": 302.51}, {"x": 223.91."y": 298.37}, {"x": 222.93."y": 294.28}, {"x": 221.83."y": 290.27}, {"x": 220.55."y": 286.13}, {"x": 219.16."y": 282.1}, {"x": 217.53."y": 277.88}, {"x": 215.91."y": 274.05}, {"x": 213.68."y": 269.27}, {"x": 209.6."y": 261.58}, {"x": 207.51."y": 258.06}, {"x": 205.1."y": 254.26}, {"x": 202.37."y": 250.25}, {"x": 199.69."y": 246.59}, {"x": 196.81."y": 242.75}, {"x": 193.77."y": 238.74}, {"x": 190.61."y": 234.57}, {"x": 187.49."y": 230.47}, {"x": 184.48."y": 226.53}, {"x": 181.26."y": 222.33}, {"x": 177.85."y": 217.9}, {"x": 174.51."y": 213.56}, {"x": 171.16."y": 209.23}, {"x": 167.73."y": 204.81}, {"x": 164.32."y": 200.42}, {"x": 160.91."y": 196.04}, {"x": 157.32."y": 191.44}, {"x": 153.78."y": 186.92}, {"x": 150.25."y": 182.41}, {"x": 146.6."y": 177.76}, {"x": 142.98."y": 173.15}, {"x": 139.48."y": 168.71}, {"x": 135.87."y": 164.13}, {"x": 132.24."y": 159.54}, {"x": 128.66."y": 155.01}, {"x": 124.98."y": 150.36}, {"x": 121.53."y": 146.01}, {"x": 117.78."y": 141.29}, {"x": 114.32."y": 136.94}, {"x": 110.92."y": 132.66}, {"x": 107.21."y": 128.01}, {"x": 103.93."y": 123.9}, {"x": 100.44."y": 119.53}, {"x": 97.16."y": 115.42}, {"x": 93.89."y": 111.33}, {"x": 90.69."y": 107.33}, {"x": 87.35."y": 103.17}, {"x": 84.15."y": 99.18}, {"x": 81.26."y": 95.57}, {"x": 78.25."y": 91.83}, {"x": 75.23."y": 88.07}, {"x": 72.42."y": 84.58}, {"x": 69.7."y": 81.2}, {"x": 66.9."y": 77.72}, {"x": 64.31."y": 74.5}, {"x": 61.89."y": 71.51}, {"x": 59.39."y": 68.42}, {"x": 57.22."y": 65.72}, {"x": 54.93."y": 62.88}, {"x": 52.91."y": 60.39}, {"x": 50.94."y": 57.95}, {"x": 49.15."y": 55.75}, {"x": 47.31."y": 53.48}, {"x": 45.79."y": 51.59}, {"x": 44.32."y": 49.78}, {"x": 43.08."y": 48.25}, {"x": 41.84."y": 46.73}, {"x": 40.88."y": 45.55}, {"x": 39.99."y": 44.44}, {"x": 39.27."y": 43.56}, {"x": 38.68."y": 42.83}, {"x": 38.3."y": 42.37}, {"x": 38.06."y": 42.07}, {"x": 38."y": 42}, {"x": 37.99."y": 41.98}, {"x": 37.97."y": 41.94}, {"x": 37.94."y": 41.87}, {"x": 37.9."y": 41.78}, {"x": 37.84."y": 41.66}, {"x": 37.78."y": 41.52}, {"x": 37.71."y": 41.38}, {"x": 37.63."y": 41.19}, {"x": 37.55."y": 41}, {"x": 37.47."y": 40.78}, {"x": 37.38."y": 40.55}, {"x": 37.28."y": 40.3}, {"x": 37.18."y": 40.03}, {"x": 37.08."y": 39.74}, {"x": 36.99."y": 39.46}, {"x": 36.89."y": 39.16}, {"x": 36.79."y": 38.83}, {"x": 36.69."y": 38.5}, {"x": 36.59."y": 38.14}, {"x": 36.5."y": 37.79}, {"x": 36.41."y": 37.42}, {"x": 36.34."y": 37.07}, {"x": 36.27."y": 36.7}, {"x": 36.2."y": 36.29}, {"x": 36.14."y": 35.93}, {"x": 36.09."y": 35.53}, {"x": 36.05."y": 35.14}, {"x": 36.02."y": 34.72}, {"x": 36."y": 34.32}, {"x": 36."y": 33.92}, {"x": 36.01."y": 33.52}, {"x": 36.03."y": 33.13}, {"x": 36.07."y": 32.74}, {"x": 36.13."y": 32.35}, {"x": 36.2."y": 31.93}, {"x": 36.29."y": 31.56}, {"x": 36.4."y": 31.19}, {"x": 36.53."y": 30.8}, {"x": 36.67."y": 30.46}, {"x": 36.85."y": 30.08}, {"x": 37.04."y": 29.74}, {"x": 37.26."y": 29.39}, {"x": 37.49."y": 29.08}, {"x": 37.75."y": 28.76}, {"x": 38.06."y": 28.44}, {"x": 38.38."y": 28.15}, {"x": 38.71."y": 27.89}, {"x": 39.08."y": 27.63}, {"x": 39.48."y": 27.38}, {"x": 39.93."y": 27.15}, {"x": 40.39."y": 26.94}, {"x": 40.88."y": 26.75}, {"x": 41.44."y": 26.57}, {"x": 42.01."y": 26.42}, {"x": 42.6."y": 26.29}, {"x": 43.21."y": 26.19}, {"x": 43.91."y": 26.1}, {"x": 44.63."y": 26.04}, {"x": 45.36."y": 26.01}, {"x": 46.13."y": 26}, {"x": 47.14."y": 26}, {"x": 48.37."y": 26}, {"x": 49.84."y": 26}, {"x": 51.5."y": 26}, {"x": 53.4."y": 26}, {"x": 55.58."y": 26}, {"x": 57.93."y": 26}, {"x": 60.5."y": 26}, {"x": 63.24."y": 26}, {"x": 66.11."y": 26}, {"x": 68.99."y": 26}, {"x": 72.36."y": 26}, {"x": 75.57."y": 26}, {"x": 79.23."y": 26}, {"x": 82.88."y": 26}, {"x": 86.58."y": 26}, {"x": 90.59."y": 26}, {"x": 94.53."y": 26}, {"x": 98.63."y": 26}, {"x": 102.62."y": 26}, {"x": 106.91."y": 26}, {"x": 111.29."y": 26}, {"x": 115.68."y": 26}, {"x": 119.94."y": 26}, {"x": 124.52."y": 26}, {"x": 128.68."y": 26}, {"x": 133.24."y": 26}, {"x": 137.7."y": 26}, {"x": 142.32."y": 26}, {"x": 146.84."y": 26}, {"x": 151.25."y": 26}, {"x": 155.89."y": 26}, {"x": 160.22."y": 26}, {"x": 164.57."y": 26}, {"x": 168.86."y": 26}, {"x": 173.48."y": 26}, {"x": 177.59."y": 26}, {"x": 181.55."y": 26}, {"x": 185.79."y": 26}, {"x": 189.64."y": 26}, {"x": 193.53."y": 26}, {"x": 197.23."y": 26}, {"x": 200.72."y": 26}, {"x": 204.15."y": 26}, {"x": 207.4."y": 26}, {"x": 210.68."y": 26}, {"x": 213.62."y": 26}, {"x": 216.6."y": 26}, {"x": 219.3."y": 26}, {"x": 221.73."y": 26}, {"x": 224.01."y": 26}, {"x": 225.93."y": 26}, {"x": 227.87."y": 26}, {"x": 229.49."y": 26}, {"x": 230.93."y": 26}, {"x": 232.04."y": 26}, {"x": 232.93."y": 26}, {"x": 233.56."y": 26}, {"x": 233.91."y": 26}]Copy the code- 6. We copy the coordinates obtained in the image above to the arrows in guiji.js below
Implementation to depict the
Now that we have the coordinates we need for trace 2, it’s time to trace. So one thing to notice here Is, we put Is Audio Get Gj on autotrace 2 to Get coordinates, and now we want the user to manually trace, so we don’t put Is Audio Get Gj on it.
The following several js script code involved in all posted out
- Guiji.js is used to store data from the UI and track coordinates
cc.Class({
extends: cc.Component,
properties: {
// values: [cc.Vec2],
},
// LIFE-CYCLE CALLBACKS:
onLoad() { this.gj = []; this.arr = []; Bezier2path. move(to: NSPoint(x: 26, y: 287)) bezier2path. curve(to: NSPoint(x: 26, y: 287)) bezier2Path. 122, y: 414), controlPoint1: NSPoint(x: 26, y: 287), controlPoint2: NSPoint(x: 25, y: 400)) bezier2Path.curve(to: NSPoint(x: 200, y: 247), controlPoint1: NSPoint(x: 219, y: 428), controlPoint2: NSPoint(x: 257, y: 323)) bezier2Path.curve(to: NSPoint(x: 38, y: 42), controlPoint1: NSPoint(x: 143, y: 171), controlPoint2: NSPoint(x: 38, y: 42)) bezier2Path.curve(to: NSPoint(x: 46, y: 26), controlPoint1: NSPoint(x: 38, y: 42), controlPoint2: NSPoint(x: 30, y: 26)) bezier2Path.curve(to: NSPoint(x: 234, y: 26), controlPoint1: NSPoint(x: 62, y: 26), controlPoint2: NSPoint(x: 234, y: 26)) */ ** * write the following trace array according to the track point given by the UI girl. *typeMoveto moves to point01, *typeTime: time * */ this.gj[2] = [{"type": "moveto"."point01" : cc.v2(26, 287)},
{"type" :"bezier"."time": 1,"point01" : cc.v2(26, 287),"point02" : cc.v2(25, 400),"point03" : cc.v2(122, 414)},
{"type" : "bezier"."time": 1,"point01" : cc.v2(219, 428),"point02" : cc.v2(257, 323),"point03" : cc.v2(200, 247)},
{"type" : "bezier"."time": 1,"point01" : cc.v2(143, 171),"point02" : cc.v2(38, 42),"point03" : cc.v2(38, 42)},
{"type" : "bezier"."time": 1,"point01" : cc.v2(38, 42),"point02" : cc.v2(30, 26),"point03" : cc.v2(46, 26)},
{"type" : "bezier"."time": 1,"point01" : cc.v2(62, 26),"point02" : cc.v2(234, 26),"point03": cc.v2(234, 26)}, ]; /** * get trace 2 coordinates * @type {*[]}
*/
this.arr[2] = []
// [{"x": 26."y": 287}, {"x": 26."y": 287}, {"x": 29.82."y": 319.15}, {"x": 33.18."y": 332.37}, {"x": 34.7."y": 337.19}, {"x": 37.35."y": 344.55}, {"x": 38.34."y": 347.02}, {"x": 44.76."y": 360.52}, {"x": 48.43."y": 366.77}, {"x": 52.16."y": 372.35}, {"x": 57.72."y": 379.49}, {"x": 60.9."y": 383.08}, {"x": 62.23."y": 384.48}, {"x": 66.65."y": 388.78}, {"x": 68.13."y": 390.1}, {"x": 70.37."y": 392}, {"x": 72.83."y": 393.96}, {"x": 76.27."y": 396.49}, {"x": 79.19."y": 398.46}, {"x": 82.19."y": 400.33}, {"x": 85.58."y": 402.25}, {"x": 89.87."y": 404.45}, {"x": 93.25."y": 406}, {"x": 96.9."y": 407.5}, {"x": 100.9."y": 408.97}, {"x": 105.04."y": 410.3}, {"x": 109.52."y": 411.53}, {"x": 113.86."y": 412.55}, {"x": 118.55."y": 413.45}, {"x": 123.86."y": 414.25}, {"x": 128.12."y": 414.73}, {"x": 132.74."y": 415.09}, {"x": 143.79."y": 415.17}, {"x": 150.38."y": 414.66}, {"x": 152.7."y": 414.38}, {"x": 155.15."y": 414.02}, {"x": 163.86."y": 412.19}, {"x": 174.63."y": 408.59}, {"x": 177.88."y": 407.17}, {"x": 181.39."y": 405.44}, {"x": 186.88."y": 402.28}, {"x": 195.23."y": 396.22}, {"x": 199.49."y": 392.42}, {"x": 205.49."y": 386}, {"x": 208.55."y": 382.13}, {"x": 215.56."y": 370.97}, {"x": 217.27."y": 367.54}, {"x": 218.88."y": 363.94}, {"x": 220.18."y": 360.7}, {"x": 221.35."y": 357.44}, {"x": 222.47."y": 353.88}, {"x": 223.53."y": 350.02}, {"x": 224.37."y": 346.43}, {"x": 225.1."y": 342.69}, {"x": 225.68."y": 338.98}, {"x": 226.16."y": 335.01}, {"x": 226.47."y": 331.21}, {"x": 226.66."y": 327.32}, {"x": 226.71."y": 323.16}, {"x": 226.63."y": 319.43}, {"x": 226.41."y": 315.43}, {"x": 226.01."y": 311.12}, {"x": 225.51."y": 307.2}, {"x": 224.87."y": 303.24}, {"x": 224.05."y": 299.06}, {"x": 223.11."y": 294.97}, {"x": 221.94."y": 290.63}, {"x": 220.71."y": 286.62}, {"x": 219.36."y": 282.66}, {"x": 217.86."y": 278.71}, {"x": 216.09."y": 274.46}, {"x": 214.24."y": 270.43}, {"x": 212.31."y": 266.56}, {"x": 210.12."y": 262.5}, {"x": 207.88."y": 258.67}, {"x": 205.33."y": 254.61}, {"x": 202.79."y": 250.85}, {"x": 200.09."y": 247.11}, {"x": 197.02."y": 243.03}, {"x": 194.26."y": 239.38}, {"x": 191.24."y": 235.39}, {"x": 188,"y": 231.14}, {"x": 184.88."y": 227.06}, {"x": 181.67."y": 222.87}, {"x": 178.43."y": 218.65}, {"x": 174.4."y": 213.43}, {"x": 171.71."y": 209.94}, {"x": 168.33."y": 205.58}, {"x": 164.78."y": 201.01}, {"x": 161.22."y": 196.44}, {"x": 157.59."y": 191.79}, {"x": 154.15."y": 187.38}, {"x": 150.75."y": 183.04}, {"x": 142.35."y": 172.36}, {"x": 138.7."y": 167.72}, {"x": 135.12."y": 163.17}, {"x": 131.55."y": 158.66}, {"x": 127.95."y": 154.11}, {"x": 124.36."y": 149.58}, {"x": 120.8."y": 145.1}, {"x": 117.29."y": 140.67}, {"x": 113.71."y": 136.17}, {"x": 110.23."y": 131.79}, {"x": 106.71."y": 127.38}, {"x": 103.3."y": 123.1}, {"x": 99.92."y": 118.87}, {"x": 96.57."y": 114.68}, {"x": 93.36."y": 110.67}, {"x": 90.05."y": 106.54}, {"x": 86.88."y": 102.57}, {"x": 83.67."y": 98.58}, {"x": 80.57."y": 94.71}, {"x": 77.65."y": 91.08}, {"x": 74.71."y": 87.42}, {"x": 71.75."y": 83.75}, {"x": 69.13."y": 80.49}, {"x": 66.47."y": 77.19}, {"x": 63.93."y": 74.03}, {"x": 61.44."y": 70.95}, {"x": 58.83."y": 67.72}, {"x": 56.71."y": 65.09}, {"x": 54.52."y": 62.38}, {"x": 52.57."y": 59.98}, {"x": 50.6."y": 57.53}, {"x": 48.77."y": 55.28}, {"x": 47.12."y": 53.24}, {"x": 45.56."y": 51.32}, {"x": 44.07."y": 49.48}, {"x": 42.82."y": 47.93}, {"x": 41.7."y": 46.55}, {"x": 40.7."y": 45.32}, {"x": 39.83."y": 44.26}, {"x": 39.15."y": 43.41}, {"x": 38.59."y": 42.72}, {"x": 38.24."y": 42.29}, {"x": 38.04."y": 42.05}, {"x": 38."y": 42}, {"x": 37.99."y": 41.98}, {"x": 37.97."y": 41.93}, {"x": 37.93."y": 41.86}, {"x": 37.88."y": 41.76}, {"x": 37.83."y": 41.64}, {"x": 37.77."y": 41.5}, {"x": 37.7."y": 41.34}, {"x": 37.62."y": 41.16}, {"x": 37.54."y": 40.96}, {"x": 37.45."y": 40.74}, {"x": 37.36."y": 40.51}, {"x": 37.26."y": 40.24}, {"x": 37.16."y": 39.97}, {"x": 37.07."y": 39.69}, {"x": 36.97."y": 39.4}, {"x": 36.87."y": 39.08}, {"x": 36.77."y": 38.77}, {"x": 36.67."y": 38.43}, {"x": 36.58."y": 38.08}, {"x": 36.49."y": 37.74}, {"x": 36.4."y": 37.37}, {"x": 36.32."y": 36.99}, {"x": 36.25."y": 36.62}, {"x": 36.19."y": 36.24}, {"x": 36.13."y": 35.85}, {"x": 36.08."y": 35.46}, {"x": 36.04."y": 35.06}, {"x": 36.02."y": 34.66}, {"x": 36."y": 34.24}, {"x": 36."y": 33.87}, {"x": 36.01."y": 33.47}, {"x": 36.04."y": 33.06}, {"x": 36.08."y": 32.67}, {"x": 36.14."y": 32.27}, {"x": 36.21."y": 31.89}, {"x": 36.31."y": 31.48}, {"x": 36.42."y": 31.12}, {"x": 36.55."y": 30.75}, {"x": 36.7."y": 30.38}, {"x": 36.88."y": 30.03}, {"x": 37.07."y": 29.68}, {"x": 37.3."y": 29.34}, {"x": 37.54."y": 29.01}, {"x": 37.81."y": 28.7}, {"x": 38.12."y": 28.39}, {"x": 38.43."y": 28.11}, {"x": 38.78."y": 27.83}, {"x": 39.16."y": 27.57}, {"x": 39.57."y": 27.33}, {"x": 40."y": 27.11}, {"x": 40.49."y": 26.9}, {"x": 40.99."y": 26.71}, {"x": 41.53."y": 26.54}, {"x": 42.08."y": 26.4}, {"x": 42.71."y": 26.27}, {"x": 43.36."y": 26.17}, {"x": 44.03."y": 26.09}, {"x": 44.73."y": 26.04}, {"x": 45.49."y": 26.01}, {"x": 46.32."y": 26}, {"x": 47.34."y": 26}, {"x": 48.6."y": 26}, {"x": 50.12."y": 26}, {"x": 51.86."y": 26}, {"x": 53.85."y": 26}, {"x": 55.97."y": 26}, {"x": 58.3."y": 26}, {"x": 60.88."y": 26}, {"x": 63.77."y": 26}, {"x": 67.03."y": 26}, {"x": 69.84."y": 26}, {"x": 73.2."y": 26}, {"x": 76.55."y": 26}, {"x": 80.03."y": 26}, {"x": 83.7."y": 26}, {"x": 87.29."y": 26}, {"x": 91.78."y": 26}, {"x": 95.16."y": 26}, {"x": 99.45."y": 26}, {"x": 103.5."y": 26}, {"x": 107.94."y": 26}, {"x": 112.12."y": 26}, {"x": 116.42."y": 26}, {"x": 120.68."y": 26}, {"x": 125.67."y": 26}, {"x": 129.78."y": 26}, {"x": 134.18."y": 26}, {"x": 138.94."y": 26}, {"x": 143.27."y": 26}, {"x": 147.89."y": 26}, {"x": 152.33."y": 26}, {"x": 156.61."y": 26}, {"x": 161.36."y": 26}, {"x": 165.79."y": 26}, {"x": 169.94."y": 26}, {"x": 174.14."y": 26}, {"x": 178.56."y": 26}, {"x": 182.43."y": 26}, {"x": 186.31."y": 26}, {"x": 190.5."y": 26}, {"x": 194.05."y": 26}, {"x": 198.26."y": 26}, {"x": 201.95."y": 26}, {"x": 204.92."y": 26}, {"x": 208.06."y": 26}, {"x": 211.39."y": 26}, {"x": 214.21."y": 26}, {"x": 217.2."y": 26}, {"x": 219.86."y": 26}, {"x": 222.18."y": 26}, {"x": 224.46."y": 26}, {"x": 226.53."y": 26}, {"x": 228.26."y": 26}, {"x": 229.87."y": 26}, {"x": 231.16."y": 26}, {"x": 232.27."y": 26}, {"x": 233.13."y": 26}, {"x": 233.67."y": 26}, {"x": 233.96."y"GetGj (num) {returnGetXYPoints (num) {this.gj[num]}, getXYPoints (num) {return this.arr[num]
},
});
Copy the code- Mmgraphics.js trace the brush implementation
cc.Class({
extends: cc.Component,
properties: {
touchNode: {
default: null,
type: cc.Node,
tooltip: 'Draw point (arrow)'
},
guijiNode: {
default: null,
type: cc.Node,
tooltip: 'Trace region'
},
isMiaoMobg: {
default: false.type: Boolean,
tooltip: 'Is it the base of tracing?'
},
isAudioGetGj: {
default: false.type: Boolean,
tooltip: 'Can I automatically trace and get track coordinate points?'
}
},
// LIFE-CYCLE CALLBACKS:
onLoad() {
console.log(this.guijiNode);
let miaomoNum = 2;
// alert(1);
this.arr = this.guijiNode.getComponent("guiji").getXYPoints(miaomoNum);
this.gj = this.guijiNode.getComponent("guiji").getGj(miaomoNum);
},
start() {
cc.log("Brush begins to paint.");
this.graphics = this.getComponent(cc.Graphics);
let lv = 1;
if(this.ismiaomobg) {// Draw the trace bottomfor (let index = 0; index < this.gj.length; index++) {
const element = this.gj[index];
if (element.type === "moveto") {
this.graphics.moveTo(element.point01.x, element.point01.y);
} else if (element.type === "bezier") {
this.graphics.bezierCurveTo(element.point01.x, element.point01.y, element.point02.x, element.point02.y, element.point03.x, element.point03.y);
} else if (element.type === "lineto") {
this.graphics.lineTo(element.point01.x, element.point01.y)
}
}
this.graphics.stroke();
} else {
if (this.isAudioGetGj) {
this.actionRun = true;
this.index = 0;
this.loadArr = [];
this.touchNode.x = this.gj[0].point01.x;
this.touchNode.y = this.gj[0].point01.y;
let seq = cc.callFunc(() => {
}, this);
for (let index = 0; index < this.gj.length; index++) {
const element = this.gj[index];
if (element.type === "moveto") {
cc.log("moveto: " + element.point01.x + "" + element.point01.y)
} else if (element.type === "bezier") {
let bezier = [element.point01, element.point02, element.point03];
let bezierTo = cc.bezierTo(element.time, bezier);
seq = cc.sequence(seq, bezierTo)
} else if (element.type === "lineto") {
let moveTo = cc.moveTo(element.time, element.point01);
seq = cc.sequence(seq, moveTo)
}
}
let callFunc = cc.callFunc(() => {
this.actionRun = false;
cc.log(JSON.stringify(this.loadArr));
}, this);
seq = cc.sequence(seq, callFunc);
this.touchNode.runAction(seq);
}
}
},
update(dt) {
if (this.isAudioGetGj) {
if(! this.isMiaoMobg && this.actionRun) { // cc.log("this.touchNode update: "+this.touchNode.x+""+this.touchNode.y)
this.loadArr[this.index] = cc.v2(Math.round(this.touchNode.x * 100) / 100, Math.round(this.touchNode.y * 100) / 100)
this.index += 1
}
}
},
setPos(index) {
if (this.isMiaoMobg) {
return
}
for (let a = this.newIndex; a < index; a++) {
const elementold = this.arr[a - 1] || this.arr[a];
const elementnew = this.arr[a];
this.graphics.moveTo(elementold.x, elementold.y);
this.graphics.lineTo(elementnew.x, elementnew.y);
this.graphics.stroke();
this.graphics.fill();
}
this.newIndex = index;
},
clearDraw() {
this.graphics.clear();
// this.touchNode.x = this.arr[0].x
// this.touchNode.y = this.arr[0].y
this.touchNode.x = this.gj[0].point01.x;
this.touchNode.y = this.gj[0].point01.y;
}
// update (dt) {},
});
Copy the code- Mmtouch.js handles user touch implementation tracing
Cc. Class({extends: cc.component.properties: {// Trace pen graphicsNode: {default: null,type: cc.Node,
tooltip: 'A brush for tracing.'}, // Trace guijiNode in that region: {default: null,type: cc.Node,
tooltip: 'Region of track'}},onLoad() {
letmiaomoNum = 2; 2 / / / / to depict the detection of depict 2 need to track this. Arr = this. GuijiNode. GetComponent ("guiji").getXYPoints(miaomoNum); }, // Set the arrow direction (including the arrow direction during tracing)initAngle() {
let angle = this.getAngle(this.arr[0].x, this.arr[0].y, this.arr[2].x, this.arr[2].y);
this.node.rotation = -angle;
},
start() {
if (this.arr.length === 0) {
return
}
this.initAngle();
this.init();
},
init() {
let node = this.node;
node.x = this.arr[0].x;
node.y = this.arr[0].y;
this.gameOver = false;
this.arrIndex = 0;
node.on(cc.Node.EventType.TOUCH_START, (event) => {
this.touchBegin = true
}, node);
node.on(cc.Node.EventType.TOUCH_MOVE, (event) => {
if(! this.touchBegin) {return
}
let nodeWorldPos = this.node.parent.convertToWorldSpaceAR(cc.v2(this.node.x, this.node.y));
let position = event.touch.getLocation();
cc.log("position" + position.x, position.y);
cc.log("nodeWorldPos" + nodeWorldPos.x, nodeWorldPos.y);
this.move(cc.v2(position.x - nodeWorldPos.x, position.y - nodeWorldPos.y));
}, node);
node.on(cc.Node.EventType.TOUCH_END, (event) => {
this.touchBegin = false}, node); }, // The arrow restores the animation interruptAnm(position) {letAction = cc. Sequence (cc. MoveBy (0.2, position.x, position.y), cc. MoveBy (0.2, -position.x, -position.y)); this.node.runAction(action); }, // Get the Angle at which the arrow should rotate with the trace during tracingletGetAngle (x1, y1, x2, y2) {// The length of the right Anglelet x = Math.abs(x1 - x2);
let y = Math.abs(y1 - y2);
let z = Math.sqrt(x * x + y * y);
let angle = Math.round((Math.asin(y / z) / Math.PI * 180));
if (y2 > y1 && x2 < x1) {
angle = 180 - angle
} else if (y2 < y1 && x2 < x1) {
angle = 180 + angle
} else if (y2 < y1 && x2 > x1) {
angle = 360 - angle
}
returnangle; }, // move(position) {if (this.gameOver) {
cc.log("Game over, smooth trace out 2!!");
return
}
let dx = position.x + this.node.x;
let dy = position.y + this.node.y;
let node_d = (position.x) * (position.x) + (position.y) * (position.y)
if (node_d > 120 * 120) {
cc.log(" Beyond the scope Beyond the scope Beyond the scope ")
this.interruptAnm(position);
this.touchBegin = false;
return
}
let range = 20;
let distance = 80;
let max = this.arrIndex + range;
if (max >= this.arr.length) {
// this.touchBegin = false
// this.gameOver = true
// cc.log("game over ") / /return
max = this.arr.length
}
for (let index = this.arrIndex; index < max; index++) {
// let index = max
const element = this.arr[index];
// cc.log("index "+index)
let d = (dx - element.x) * (dx - element.x) + (dy - element.y) * (dy - element.y)
if (d < distance * distance) {
this.graphicsNode.getComponent('mmGraphics').setPos(index);
this.arrIndex = index;
this.node.x = element.x;
this.node.y = element.y;
if (index === this.arr.length - 1) {
this.drawEnd()
} else {
letangle = this.getAngle(this.arr[index].x, this.arr[index].y, this.arr[index + 1].x, this.arr[index + 1].y); this.node.rotation = -angle; }}}}, // Trace completedrawEnd() {
this.touchBegin = false;
this.gameOver = true;
this.scheduleOnce(() => {
this.graphicsNode.getComponent('mmGraphics').clearDraw();
this.gameOver = false; this.arrIndex = 0; this.initAngle() }, 2); }});Copy the codeHere to achieve the effect of using Cocoscreator to trace the number 2, we then trace other numbers or trace English letters, graphics are the same truth, first find UI sister to ps trace reference point, and then according to the reference point to generate track coordinate point, and then according to the track coordinate point trace can be achieved.
The source code download: download.csdn.net/download/qi…
Author: Rice cake mother — small stone