欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Cocoscreator(入门)简单的动态加载界面制作

程序员文章站 2022-06-15 14:24:31
...

Cocoscreator简单的动态加载界面制作

效果展示

是动态的哦!
Cocoscreator(入门)简单的动态加载界面制作

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

Cocoscreator(入门)简单的动态加载界面制作
将所需要的用的资源拖进层次管理器中
Cocoscreator(入门)简单的动态加载界面制作
此时场景编辑器会变化为
Cocoscreator(入门)简单的动态加载界面制作
之后将loging作为预制体拖入我们创建好的prefab文件中 ,然后从层次资源管理器中删除,之后将预制体的位置设置为(0,0)。
Cocoscreator(入门)简单的动态加载界面制作

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脚本拖入做好的预制体中 设置我们的组件属性
Cocoscreator(入门)简单的动态加载界面制作
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) {},});

Cocoscreator(入门)简单的动态加载界面制作

相关标签: 界面UI 入门