cocos creator写游戏还是很友好的，官方文档给的也挺全。今天带大家来用cocoscreator实现描摹数字／描摹英文字母／描摹直线曲线的功能。

先看下效果图

实现思路

这里我们已描摹数字2为例，来讲下具体实现思路。其实我们不管是做描摹，还是做画线，画图形。我们都是通过直线链接一个个点来实现描摹功能的。

所以我们实现描摹的首要一点就是要获取到描摹的一个个的轨迹的坐标点。下面我们就如何获取到这一串的轨迹坐标点来做文章

获取轨迹坐标点

1，获取坐标点的方式有很多种，但是比较靠谱的还是要让ui妹子，给我们提供下面的数据,下面数据是ui妹子用ps画2的时候的一些重要的点

 /* 描摹2的贝塞尔轨迹图需要ui妹子出，就是ui妹子用ps画2时的一些轨迹点
bezier2Path.move(to: NSPoint(x: 26, y: 287))
bezier2Path.curve(to: NSPoint(x: 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))
*/

2，拿到ui妹子给的数据以后，我们就来写代码，获取我们所需要的一系列坐标点，我们需要创建如下图所示的三个js脚本文件
3，接下来在cocos-creator里开始创建描摹的基本的游戏场景

4，创建描摹所需的节点和组件
5，分别看下第4步创建的四个节点

创建bg节点时，选择单色sprite：目的是可以设置bg的背景色。然后把guiji.js关联到bg节点

创建graphics底层节点时需要添加Graphics(画笔)，然后把mmGraphics.js脚本关联到这个节点，并把 Is Miao Mobg 钩上，这一步的主要目前是我们自己画一个2的底层，用来让用户跟着描摹。

创建描摹用的graphics，就是我们提供给用户用来描摹的节点了，这里先把 Is Audio Get Gj勾上。目的是让箭头自动描摹2，然后获取到描摹2所需要的轨迹坐标点，如下图所示。

获取到的坐标点如下

[{"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}]

6，我们把上图中获取到的坐标点复制到如下图guiji.js里箭头所示位置

实现描摹

我们在获取到描摹2所需的坐标点以后，接下来就要来实现描摹了。
这里有个注意点，我们在自动描摹2获取坐标点时把 Is Audio Get Gj勾上，现在我们需要让用户自己手动描摹，就不要把 Is Audio Get Gj勾上了。

下面把涉及到的几个js脚本代码全部贴出来

guiji.js 主要用来存储ui给的数据和获取到的轨迹坐标点


cc.Class({extends: cc.Component,properties: {// values: [cc.Vec2],},// LIFE-CYCLE CALLBACKS:onLoad () {this.gj = [];this.arr = [];/* 描摹2的贝塞尔轨迹图需要ui妹子出，就是ui妹子用ps画2时的一些轨迹点
bezier2Path.move(to: NSPoint(x: 26, y: 287))
bezier2Path.curve(to: NSPoint(x: 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))*//*** 根据上门ui妹子给出的轨迹点，写出下面轨迹数组。* type：moveto 移动到point01，* type：bezier 画贝塞尔曲线，point01，point02，point03是贝塞尔的三个参考点* 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)},];/*** 获取到的描摹2的坐标点* @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":26}]},//获取轨迹点getGj (num) {return this.gj[num]},//获取坐标点getXYPoints (num) {return this.arr[num]},
});

mmGraphics.js 描摹的画笔实现

cc.Class({extends: cc.Component,properties: {touchNode: {default: null,type: cc.Node,tooltip: '绘制点（箭头）'},guijiNode: {default: null,type: cc.Node,tooltip: '描摹区域'},isMiaoMobg: {default: false,type: Boolean,tooltip: '是否作为描摹的底层'},isAudioGetGj: {default: false,type: Boolean,tooltip: '是否能自动描摹获取轨迹坐标点'}},// 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("画笔开始绘制");this.graphics = this.getComponent(cc.Graphics);let lv = 1;if (this.isMiaoMobg) {//绘制描摹底部for (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].ythis.touchNode.x = this.gj[0].point01.x;this.touchNode.y = this.gj[0].point01.y;}// update (dt) {},
});

mmTouch.js 处理用户触摸实现描摹

cc.Class({extends: cc.Component,properties: {//描摹的画笔graphicsNode: {default: null,type: cc.Node,tooltip: '用来描摹的画笔'},//在那个区域描摹guijiNode: {default: null,type: cc.Node,tooltip: '轨迹所在区域'}},onLoad() {let miaomoNum = 2;//描摹2//获取描摹2需要的轨迹点this.arr = this.guijiNode.getComponent("guiji").getXYPoints(miaomoNum);},//设置箭头方向（包括描摹过程中箭头的方向）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);},//箭头复原动画interruptAnm(position) {let action = cc.sequence(cc.moveBy(0.2, position.x, position.y),cc.moveBy(0.2, -position.x, -position.y));this.node.runAction(action);},//获取描摹过程中，箭头要跟着轨迹旋转的角度letgetAngle(x1, y1, x2, y2) {// 直角的边长let 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}return angle;},//根据轨迹坐标点描摹move(position) {if (this.gameOver) {cc.log("游戏已经结束，顺利的描摹出来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 ")// returnmax = this.arr.length}for (let index = this.arrIndex; index < max; index++) {// let index = maxconst 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 {let angle = this.getAngle(this.arr[index].x, this.arr[index].y, this.arr[index + 1].x, this.arr[index + 1].y);this.node.rotation = -angle;}}}},//描摹完成drawEnd() {this.touchBegin = false;this.gameOver = true;this.scheduleOnce(() => {this.graphicsNode.getComponent('mmGraphics').clearDraw();this.gameOver = false;this.arrIndex = 0;this.initAngle()}, 2);},});

到这里就实现了用cocoscreator描摹数字2的效果，我们再描摹别的数字或者描摹英文字母，图形都是同样的道理，先找ui妹子要到ps描摹的参考点，然后根据参考点生成轨迹坐标点，然后再根据轨迹坐标点实现描摹即可。

有问题可以加我微信交流：2501902696（备注游戏）
源码下载：https://download.csdn.net/download/qiushi_1990/10736112

Cocos Creator 入门篇-描摹小游戏（描摹数字，描摹英语字母）相关推荐

Cocos Creator 入门篇-描摹小游戏（cocos描摹数字，描摹英语字母，描摹图形）
cocos creator写游戏还是很友好的,官方文档给的也挺全.今天带大家来用cocoscreator实现描摹数字/描摹英文字母/描摹直线曲线的功能. 实现思路这里我们已描摹数字2为例,来讲下具体 ...
拖动小游戏html,Cocos Creator 入门篇-拖拽小游戏（一）
前言 Cocos Creator的官方文档还是非常友好的,有中英文两个版本. [强烈建议] 初学者先把官方文档看一遍.里面还包含了很多demo. 今天主要先带大家简单熟悉一下Cocos Creator ...
cocos creator 3.7微信小游戏开发云函数和云托管部署
cocos creator开发跨平台游戏能力不错,可以一次开发适用于多个平台,如andriod,ios原生,网页,各类小程序等等.就实际情况而言,能够跨1-2个平台已经不容易了,这是因为在跨平台开发中 ...
Cocos Creator 3D发布QQ小游戏并打APK包
Cocos Creator 3D版本 : 1.2.0 Visual Studio版本:2017,typeScripts. 1. 构建QQ小游戏 1. 在菜单栏的项目里打开构建发布因为QQ跟微信的平台 ...
基于Cocos creator 实现坦克大战小游戏【100010131】
疯狂坦克引言坦克大战是一款曾经风靡一时的小游戏,本次的实训,就是要力图让经典历久弥新.因此在老师的帮助下,我们将尽力开发一款在原有基础上有突破的"疯狂坦克2",加入新的元素,融 ...
Cocos Creator 发布到微信小游戏的资源管理
环境:Cocos Creator v1.9.1: 微信web开发者工具 v1.02.0808300,线上基础调试库 1.9.92. 以下,ccc指cocos creator.资源均指Texture.A ...
初学者使用cocos creator制作第一个小游戏以及脚本编辑器的选择
这是一个官方文档的补充版,以官方文档的快速上手:制作第一个游戏为基础,整合了其他文档内容,同时添加一下自己学习文档的理解,不仅能复习一下自己学到的知识,也帮助新人学习开发更加简单,好了,话不多说,进入 ...
cocos creator JS 实现微信小游戏体力倒计时恢复的代码
写微信小游戏时写的,功能可能还有待改进.目前这里只是在逻辑层获取了当前的系统时间,所以离开页面倒计时会停止(所以想要完成场景跳转之后仍在继续倒计时的功能,必须在逻辑层取回离开某个场景时的时间来做条件运 ...
Cocos Creator开发制作的小游戏《5人足球》
作为一个足球爱好者,眼看卡塔尔世界杯要来了,身残志坚的我总想着做点事满足一下"私欲".于是在每个夜深人静的时候狂敲120分钟,大概耗了2520分钟敲完了第一版.目前已经上线微信小游 ...

Cocos Creator 入门篇-描摹小游戏（描摹数字，描摹英语字母）

先看下效果图

实现思路

获取轨迹坐标点

实现描摹

Cocos Creator 入门篇-描摹小游戏（描摹数字，描摹英语字母）相关推荐

最新文章

热门文章