预制模板的制作-cocosCreator

❤️最近也才来学习的cocosCeator,有很多不懂的地方,欢迎多多交流.❤️
我用自己学习的代码作为🌰给大家介绍一下,制作一个关卡页面,并且开始都是锁的页面,只有通过了第一关,才能进入下一关

关卡页面.png
🍎我们需要创建两个脚本,分别命名为ItemList(用来创建模板)和ItemTemplate(用来对模板的逻辑处理),接下来拖进去一个button,用来制作模板,模板的默认图片我们设置为"有锁的图片",并对两个脚本分别初始化处理

//ItemList.js
var Item = cc.Class({
    name: 'Item',
    properties: {
        id: 0,
//这是动态设置button的背景图片
        iconSF: cc.SpriteFrame,
//填写对应关卡的名字,可以实现动态跳转
        sceneName: "",
    }
});
cc.Class({
    extends: cc.Component,
    properties: {
        items: {
            default: [],
            type: Item
        },
        itemPrefab: cc.Prefab
    },
    onLoad: function () {
        for (var i = 0; i < this.items.length; ++i) {
            var item = cc.instantiate(this.itemPrefab);
            var data = this.items[i];
            this.node.addChild(item);
            item.getComponent('ItemTemplate').init({
                id: data.id,
                iconSF: data.iconSF,
                sceneName: data.sceneName,
            });
        }
    },
});

在ItemTemplate.js中我们要进行初始化以及相应的逻辑处理

cc.Class({
    extends: cc.Component,
    properties: {
        id: 0,
        btn: cc.Button,
        sceneName: "",
    },
    init: function (data) {
        this.id = data.id;
        this.sceneName = data.sceneName;
        var level = cc.sys.localStorage.getItem("level");
        if (level !== null){
            if (this.id<= level) {
//设置只有当关卡闯关成功了才显示第几关的图片
               this.btn.normalSprite = data.iconSF;
            }
        }
    },
    // use this for initialization
    onLoad: function () {
    },
    chooseLevel: function(event){
//这是对得到存储的关卡,判断用户当前关卡和已经闯关成功的关卡进行比较,如果点击的是小于成功关卡数,则可以进入,否则点击无效
        var level = cc.sys.localStorage.getItem("level");
        if (level !== null){
            if (this.id-1 <= level) {
               cc.director.loadScene(this.sceneName);
            }else{
                cc.log("不能进入这个关卡");
            }
        }else{
            if(this.id === 1){
//这是对第一次进入游戏的用户来说,直接进入第一关,而不是关卡选择页面
                cc.director.loadScene(this.sceneName);
            }
        }
        //console.log("点击了关卡"+this.sceneName);
    },
});

🍎接下来就是脚本的绑定操作了,在button这节点中绑定对应的ItemTemplate.js,并将ClickEvents下的Handler改成对应的chooseLevel: function(event)方法,对于该脚本中的"id,ScenceName"等属性是不需要设置的,我们是通过动态传递来改变的.一切设置完成后,我们可以把节点拖到资源管理器中变成prefab了,之后你就可以把节点从场景中删除了
🍎接下来就是动态创建了,在需要创建的节点上,属性检查器中添加ItemList.js,你需要创建多少个item自己填入就好了,并且拖入关卡对应的图片以及关卡名字(关卡名称要和你每个关卡场景的名字相同),再把刚才制作好的预制资源拖进对应的Item Prefab就可以了.
🍎最后你显示出来的页面可能还不是自己想要的,你需要添加layout约束,进行布局,在content和item分别设置对应的约束,在这个scrollView中,view控制的是视图一开始展示的部分,content的锚点,控制item距离上部距离.这些的调整都需要根据不同情况进行调整.
以上😄