码迷,mamicode.com
首页 > 其他好文 > 详细

遮罩和图层

时间:2018-01-30 12:21:11      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:加载   模式   水平   too   extends   item   头像   代码   etc   

预制体


1.制作预制体,将节点拖入到assets文件下;

2.加载预制体 代码加载和手动绑定

3.预制体对象实例化:cc.instantiate(预制体)

4.假如你有一个 飞机游戏 他有源源不断的×××,这时候

就可以把这个×××当成模板,然后不断复制这个预制体.


5.把要当预制体的节点 复制到 资源管理器即可

技术分享图片



6.在代码里面创建预制体

首先要获得预制体对象 可以外部加载也可以绑定组件

cc.Class({
    extends: cc.Component,
    properties: {
    item_prefab:{
    type: cc.Prefab,
    default: null,
    },
    
    },

把预制体拖动到这里
技术分享图片



    start :function() {
    //实例化预制体
    var itema = cc.instantiate(this.item_prefab);
    //加入到场景
    this.node.addChild(itema);
    },



Mask组件 遮罩


1.Mask组件是提供viewport功能的一个组件,你可以想象通过

一个窗口去看外面的世界,只能看到这个窗口大小的视区.

2.Mask的形状:矩形.圆形.图片的Alpha制来做mask;

3.一个节点加上Mask组件后,他和他的子节点如果:

在这个范围内就会显示, 不在范围的就不会显示.会被裁剪掉.


4.面板属性 

Type类型

技术分享图片

(1)RECT矩形  

矩形的高度和宽度在size里设置 技术分享图片


(2)ELLIPSE椭圆

(3)IMAGE_STENCIL图片


Inverted 反向遮罩 效果是相反的


首先使用矩形 在他下面添加一个子节点,无论子节点多大只显示这个范围.

技术分享图片

技术分享图片  技术分享图片

反向遮罩 他只裁剪 mask范围内的 

技术分享图片

圆形

技术分享图片


使用图片来做遮罩,例如一个圆形头像,就要这个圆形的遮罩图

技术分享图片

放到这里

技术分享图片

拖动修改就行

技术分享图片




cc.Layout 


1.布局组件:

  有些物体的布局,可以不用我们写死位置,可以根据内容来排版

比如垂直排版,水平排版,就不用手动去调整.

2布局组件的面板属性:

技术分享图片

Type:排布类型

VERTICAL 垂直自动排布

他又多出几个属性

Top距离上面

Bottom 底部的距离

Spacing Y 两个垂直节点 间距 

技术分享图片

技术分享图片



Resize Mode缩放模式 默认不使用

但是有的元素会超出

技术分享图片

CONTAINER 会自动对容器大小进行缩放

CHILDREN 对子节点大小缩放




GRID 先水平在垂直

技术分享图片






cc.ScrollView 


1滚动列表主要结构:

root->view(Mask裁剪超出范围的内容)-->content(Layout)负责内容排版

2 滚动列表的每个选项

root(x,h,指定大小给Layout同)

3代码里面使用cc.ScrollView

将选项做成预制体

在代码里实例化预制体,加到这个content节点下


他有两个子节点 一个是滚动条

技术分享图片


还有一个view是 mask组件的  因为我们要超过这个范围的

 让他不能显示的

技术分享图片


每一项都是放在这个content下面的

技术分享图片


item就是里面的 视图里的一个项

技术分享图片


直接在content里添加一个 Layout布局组件


首先要设置 size大小 因为layout是根据这个来调整的

技术分享图片


技术分享图片




4.在代码里使用cc.ScrollView



    //往scrollview里添加 实际上就是添加到Content里面

    //添加10个
    for(var i =0;i<10;i++){
    //实例化 预设体
    var opt_item = cc.instantiate(this.opt_item);
    opt_item.getChildByName("uname").
    getComponent(cc.Label).string="中年人";
    //把这个项添加到 content上面去
    this.scrollView.content.addChild(opt_item);
    }


技术分享图片








遮罩和图层

标签:加载   模式   水平   too   extends   item   头像   代码   etc   

原文地址:http://blog.51cto.com/12158490/2066720

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!