Cocoscreator(入门)简单的动态加载界面制作
程序员文章站
2022-06-15 14:24:31
...
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) {},});
上一篇: Flume的描述和使用
下一篇: php 环境安装(源码包)