Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

栏目: 后端 · 发布时间: 5年前

内容简介:cocos creator写游戏还是很友好的,官方文档给的也挺全。今天带大家来用cocoscreator实现描摹数字/描摹英文字母/描摹直线曲线的功能。这里我们已描摹数字2为例,来讲下具体实现思路。其实我们不管是做描摹,还是做画线,画图形。我们都是通过直线链接一个个点来实现描摹功能的。创建graphics底层节点时需要添加Graphics(画笔),然后把mmGraphics.js脚本关联到这个节点,并把 Is Miao Mobg 钩上,这一步的主要目前是我们自己画一个2的底层,用来让用户跟着描摹。
Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

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脚本文件
    Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)
  • 3,接下来在cocos-creator里开始创建描摹的基本的游戏场景
Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)
  • 4,创建描摹所需的节点和组件
    Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)
  • 5,分别看下第4步创建的四个节点
    Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)
    创建bg节点时,选择单色sprite:目的是可以设置bg的背景色。然后把guiji.js关联到bg节点
Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

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

Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

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

Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

获取到的坐标点如下

[{"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里箭头所示位置
    Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

实现描摹

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

Cocos Creator 入门篇-描摹小游戏(cocos描摹数字,描摹英语字母,描摹图形)

下面把涉及到的几个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…

作者:年糕妈妈---小石头


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

从点子到产品

从点子到产品

刘飞 / 电子工业出版社 / 2017-1-1 / 49.00元

《从点子到产品:产品经理的价值观与方法论》以产品经理的方法论与价值观为主线,讲述了产品经理在从点子到产品的过程中应该考虑的问题、思考问题的思路,以及如何解决问题的方法。第一部分主要讲述从粗略的点子到具体的方案,要经历的步骤。第二部分主要讲述如何落实方案,以及如何进行用户研究、需求分析和产品设计。第三部分主要讲述在落实方案的过程中要掌握的方法和管理技巧。最后一部分主要讲述产品经理在工作和成长过程中要......一起来看看 《从点子到产品》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具