Cocoscreator（入门）简单的动态加载界面制作

效果展示

是动态的哦！

1、创建资源目录、场景布置

将所需要的用的资源拖进层次管理器中

此时场景编辑器会变化为

之后将loging作为预制体拖入我们创建好的prefab文件中 ，然后从层次资源管理器中删除，之后将预制体的位置设置为（0，0）。

2、 Script

我们在scirpt文件夹中创建两个javascript
一个为loging一个为welcome
loging脚本主要存放预制体的节点

cc.Class({
extends: cc.Component,

properties: {
    //加载条组件
    proImg:cc.Node,
    proMaxLen:cc.Integer,   //设置一个整型存放加载条的最大长度
    //加载速度
    Speed:{
        default:300,
        type:cc.Integer,
    },
   
 },

// LIFE-CYCLE CALLBACKS:

onLoad () {
    //设置proImg初始化长度为0
    this.proImg.width=0;

},

setProgress:function(pro){
    if(pro>1||pro<0){
        return;
    }
    this.setWidth=this.proMaxLen*pro;
    
},

start () {

},
//用 updata()来动态变化长度
update (dt) {
    if(this.proImg.width<this.setWidth){
        this.proImg.width+=dt*this.Speed;
    }
},});

保存好代码后我们返回cocos 将lodging脚本拖入做好的预制体中 设置我们的组件属性

welcome脚本主要存放背景的节点

cc.Class({
extends: cc.Component,
properties: {
    backGround:cc.Node,//背景组件用来存放预制体
    logingPrefab:cc.Prefab,//预制体
    
},

// LIFE-CYCLE CALLBACKS:

onLoad () {
    this.loging=cc.instantiate(this.logingPrefab);
    this.loging.y=-290;
    this.backGround.addChild(this.loging);
    this.loging=this.loging.getComponent('lodging');//通过getComponent将两个脚本连通
    this.loging.setProgress(1);
},



start () {

},

// update (dt) {},});