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

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].y
        this.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);
    },

    //获取描摹过程中，箭头要跟着轨迹旋转的角度let
    getAngle(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 ")
            // 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 {
                    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描摹的参考点，然后根据参考点生成轨迹坐标点，然后再根据轨迹坐标点实现描摹即可。

源码下载： download.csdn.net/download/qi…