CVP认证学习笔记--李天宇008Node的父子关系

 本节课是继上堂课内容后，继续深入的一课。在上节课的基础上，我为每个数字都绘制了一个背景。让背景成为每个数字的父节点，并将数字添加到背景上。核心代码如下：

        //数字5的背景

        var bg3 = new cc.LayerColor(cc.color(0,0,0,255),100,200);

        bg3.ignoreAnchorPointForPosition(false);//不忽略锚点

        bg3.setAnchorPoint(0.5,0.5);//默认的锚点就是node的中心，这句可以不写

        bg3.setPosition(size.width*3/4,size.height/2);//在屏幕中心

        this.addChild(bg3,0);

        var layer5 = new cc.LayerColor(cc.color(0,0,255,255),100,25);

        layer5.ignoreAnchorPointForPosition(false);//不忽略锚点

        layer5.setAnchorPoint(0.5,-3);//默认的锚点就是node的中心，这句可以不写

        //layer5.setPosition(size.width*3/4,size.height/2);//在屏幕中心

        layer5.setPosition(0,size.height/5);

        bg3.addChild(layer5,1);

        var layer6 = new cc.LayerColor(cc.color(192,14,235,255),25,75);

        layer6.ignoreAnchorPointForPosition(false);//不忽略锚点

        layer6.setAnchorPoint(2,0);//默认的锚点就是node的中心，这句可以不写

        //layer6.setPosition(size.width*3/4,size.height/2);//在屏幕中心

        layer6.setPosition(0,size.height/5);

        bg3.addChild(layer6,1);

        var layer7 = new cc.LayerColor(cc.color(255,99,71,255),75,25);

        layer7.ignoreAnchorPointForPosition(false);//不忽略锚点

        layer7.setAnchorPoint(0.33,0);//默认的锚点就是node的中心，这句可以不写

        //layer7.setPosition(size.width*3/4,size.height/2);//在屏幕中心

        layer7.setPosition(0,size.height/5);

        bg3.addChild(layer7,1);

        var layer8 = new cc.LayerColor(cc.color(160,82,45,255),25,100);

        layer8.ignoreAnchorPointForPosition(false);//不忽略锚点

        layer8.setAnchorPoint(-1,1);//默认的锚点就是node的中心，这句可以不写

        //layer8.setPosition(size.width*3/4,size.height/2);//在屏幕中心

        layer8.setPosition(0,size.height/5);

        bg3.addChild(layer8,1);

        var layer9 = new cc.LayerColor(cc.color(192,192,192,255),75,25);

        layer9.ignoreAnchorPointForPosition(false);//不忽略锚点

        layer9.setAnchorPoint(0.67,4);//默认的锚点就是node的中心，这句可以不写

        //layer9.setPosition(size.width*3/4,size.height/2);//在屏幕中心

        layer9.setPosition(0,size.height/5);

        bg3.addChild(layer9,1);

        //数字8的背景

        var bg4 = new cc.LayerColor(cc.color(0,0,0,255),100,200);

        bg4.ignoreAnchorPointForPosition(false);//不忽略锚点

        bg4.setAnchorPoint(0.5,0.5);//默认的锚点就是node的中心，这句可以不写

        bg4.setPosition(size.width*13/14,size.height/2);//在屏幕中心

        this.addChild(bg4,0);

        //先把8的三个横线画出来

        var layer10 = new cc.LayerColor(cc.color(255,0,0,255),100,25);

        layer10.ignoreAnchorPointForPosition(false);

        layer10.setAnchorPoint(0.5,-3);

        //layer10.setPosition(size.width*13/14,size.height/2);

        layer10.setPosition(0,size.height/5);

        bg4.addChild(layer10,1);

        var layer11 = new cc.LayerColor(cc.color(255,0,0,255),100,25);

        layer11.ignoreAnchorPointForPosition(false);

        layer11.setAnchorPoint(0.5,0);

        //layer11.setPosition(size.width*13/14,size.height/2);

        layer11.setPosition(0,size.height/5);

        bg4.addChild(layer11,1);

        var layer12 = new cc.LayerColor(cc.color(255,0,0,255),100,25);

        layer12.ignoreAnchorPointForPosition(false);

        layer12.setAnchorPoint(0.5,4);

        l//ayer12.setPosition(size.width*13/14,size.height/2);

        layer12.setPosition(0,size.height/5);

        bg4.addChild(layer12,1);

        //然后把几条竖线依次画出来

        var layer13 = new cc.LayerColor(cc.color(255,0,0,255),25,50);

        layer13.ignoreAnchorPointForPosition(false);

        layer13.setAnchorPoint(2,-0.5);

        //layer13.setPosition(size.width*13/14,size.height/2);

        layer13.setPosition(0,size.height/5);

        bg4.addChild(layer13,1);

        var layer14 = new cc.LayerColor(cc.color(255,0,0,255),25,50);

        layer14.ignoreAnchorPointForPosition(false);

        layer14.setAnchorPoint(-1,-0.5);

        //layer14.setPosition(size.width*13/14,size.height/2);

        layer14.setPosition(0,size.height/5);

        bg4.addChild(layer14,1);

        var layer15 = new cc.LayerColor(cc.color(255,0,0,255),25,75);

        layer15.ignoreAnchorPointForPosition(false);

        layer15.setAnchorPoint(2,1);

        //layer15.setPosition(size.width*13/14,size.height/2);

        layer15.setPosition(0,size.height/5);

        bg4.addChild(layer15,1);

        var layer16 = new cc.LayerColor(cc.color(255,0,0,255),25,75);

        layer16.ignoreAnchorPointForPosition(false);

        layer16.setAnchorPoint(-1,1);

        //layer16.setPosition(size.width*13/14,size.height/2);

        layer16.setPosition(0,size.height/5);

        bg4.addChild(layer16,1);

 

与上一次的作业相比，我是把部分数字添加到了背景上边，从而可以将其分割出去。实现5和8的移动。同时这节课还讲到了绘制顺序。数值越大，越后绘制，同时如果这时候移动背景的话，5和8也会相应跟着进行移动。因为子节点继承了父节点，这是我本节课的学习心得。

最后附上作业链接：

http://www.cocoscvp.com/usercode/2016_04_16/bfb4710bee9a24d6b477aa6aa2e7bd80e525ce50/