成都创新互联网站制作重庆分公司

遮罩和图层-创新互联

预制体

创新互联公司专注于企业网络营销推广、网站重做改版、谢通门网站定制设计、自适应品牌网站建设、H5页面制作商城网站建设、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为谢通门等各大城市提供网站开发制作服务。

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);     }


遮罩和图层

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


本文名称:遮罩和图层-创新互联
链接分享:http://cxhlcq.cn/article/doddjj.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部