CVP认证学习笔记--李天宇008Node的父子关系
来源:互联网 发布:怎么提升淘宝店铺排名 编辑:程序博客网 时间:2024/04/27 15:12
本节课是继上堂课内容后,继续深入的一课。在上节课的基础上,我为每个数字都绘制了一个背景。让背景成为每个数字的父节点,并将数字添加到背景上。核心代码如下:
//数字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/
- CVP认证学习笔记--李天宇008Node的父子关系
- CVP认证学习笔记--李天宇013在Node的生命周期和图层种处理触摸
- CVP认证学习笔记--李天宇013在Node的生命周期和图层种处理触摸
- CVP认证学习笔记--李天宇011节点的Action
- CVP认证学习笔记--李天宇001添加文字层
- CVP认证学习笔记--李天宇002添加图片层
- CVP认证学习笔记--李天宇004实现自定义场景
- CVP认证学习笔记--李天宇006场景切换特效
- CVP认证学习笔记--李天宇012组合动作
- CVP认证学习笔记--李天宇014点击英雄
- CVP认证学习笔记--李天宇015实现绘图节点
- CVP认证学习笔记--李天宇018spriteBatchNode使用
- CVP认证学习笔记--李天宇020实现切图帧动画
- CVP认证学习笔记--李天宇007节点的锚点和坐标
- CVP认证学习笔记--李天宇009节点的缩放和旋转
- CVP认证学习笔记--李天宇010节点的计划任务
- CVP认证学习笔记--李天宇017图片加载的进度实现
- CVP认证学习笔记--李天宇026对数组的使用
- iOS 原生二维码扫描(可限制扫描区域)
- atoi函数实现
- requireJs
- 使用nodejs开发树莓派远程控制小车
- Jenkins使用(五)shell软件的使用
- CVP认证学习笔记--李天宇008Node的父子关系
- CATIA VBA二次开发(一)快速入门之宏脚本
- CVP认证学习笔记--李天宇009节点的缩放和旋转
- [主席树 Kruscal] BZOJ 3545 [ONTAK2010]Peaks & 3551 [ONTAK2010]Peaks加强版
- PAT乙级练习题B1017. A除以B
- CVP认证学习笔记--李天宇010节点的计划任务
- 【json】jsoncpp函数接口
- Android Studio com.android.dex.DexException: Multiple dex files define(重复引用包)
- 2016年年中计划