cocos creator基础一文通(十一)--预制体 mask layout scrollView

预制体

一.创建预制体

1.创建预制体

将配置好的节点从节点树拖到资源管理器就可以创建预制体

创建好的预制体直接拖拽至节点树就可以创建预制体实例

2.拿到预制体对象

两种方法:<1>资源动态加载 //挖坑

<2> 绑定至属性面板 //老方法了

        cc.Class({extends: cc.Component,properties: {item_frefab:{type:cc.Prefab,default:null,}},start () {console.log(this.item_frefab);var item=cc.instantiate(this.item_frefab);console.log(item);this.node.addChild(item);},
});

这样就找到了.

3. 代码创建预制体实例

cc.instance(预制体) //返回预制体对象

                var item=cc.instantiate(this.item_frefab);console.log(item);this.node.addChild(item);

Mask组件 (蒙版)

一. 添加mask组件

1.正方形蒙版 size设大小 Inverted 反向遮罩

2. 椭圆蒙版 segement确定圆的边数 size设大小 Inverted 反向遮罩

3.图片蒙版 //设置一张图片,图片a值小于...的会被蒙住

layout 布局

一. 添加layout组件

1.垂直布局 //resize mode:缩放容器还是缩放孩子

// padding:不用说了和CSS一样最后一项是元素间距

2.水平布局 //类似于垂直布局

3.先水平后垂直和写字一样,写完一行再一行

滚动条

一. scrollView节点结构

先看scrollView本身 //本身就挂了sprite做背景还带一个scrollview组件

2. scrollbar子节点 //

3. view子节点 //只有一个mask组件控制显示区域

view下子节点content是内容的纸张大小,并与滚动条相连

view的子节点item是真正的内容,如果他的高度超过 content ,滚动条也拖不到

所以,可以为content设置 layout组件,并设置为根据孩子调整,以便条目增加时,能滚动到

//注意控制content锚点,以控制拓展方向!!!!

二. scrollview应用

很适合做排行榜但排行榜的条目不是固定的,所以..应该用预制体来做

把player做成预制体

然后,把scrollView节点和预制件都绑定给挂脚本的节点

代码如下: 加了个按钮按一下加一个玩家

        cc.Class({extends: cc.Component,properties: {item_frefab:{type:cc.Prefab,default:null,},item_scroll:{type:cc.ScrollView,default:null,}},add_btn:function(){var item=cc.instantiate(this.item_frefab);this.item_scroll.content.addChild(item);},
});

三. 创建一个scroolbar

由于scrollview只带了一个垂直方向的 scrollbar ,且scrollbar不是标准的节点组件,只能自己添加了

1.创建一个新的空节点

2.为其添加属性精灵组件 cc.sprite 把背景图给他精灵图显示模式应为:slice九宫格

3. 为它添加一个widget属性组件确定位置 //(参见(十三))

4. 为它添加一个scrollbar属性组件将其变为scrollbar

5. 这里需要一个handle 给他创建一个子节点 bar 并添加精灵属性组件,然后挂载scrollhandle图片(九宫格)

6. 将子节点 bar 给父节点的scrollbar属性组件做handle

7.这样一个scrollbar就做完了,此时可以把它挂载到scrollView上做水平拖拽条 别忘记开启水平拖拽 这样就实现了水平滚动条了