Cocos Creator使用记录

Cocos Creator 用户手册

Cocos Creator api文档

仿雷达搜索附近人的小动画demo地址
效果图：

Cocos Creator 版本：2.1.0

使用json文件

首先需要在assets文件夹下建立一个resources文件夹。

resources文件夹是Cocos Creator规定的动态加载的文件夹，如果需要动态加载资源，就需要使用该文件夹。

Cocos Creator提供了cc.loader.loadRes来专门加载位于 resources 目录下的文件，所以提前把JSON文件放到 assets/resources 目录下即可。

我的config.json文件路径是assets/resources/json/config.json,
使用方法如下所示：

cc.Class({
    extends: cc.Component,

    properties: {
        res_config:"json/config"//加载resources下的资源无需写后缀
    },
    onLoad () {
		var that=this;
		cc.loader.loadRes(that.res_config,function(error,result){
			console.log(result.json);//这里就是你json文件中的内容
		})
	}
});

动态设置label的显示文字

var lable=this.node.getChildByName('test_text').getComponent(cc.Label);
lable.string='text';

动态设置精灵（sprite）的图片地址

使用cc.loader.load设置网络图片

 var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
var url='https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/union/playable/remote_res/projects/socialradar/newres2/textures/pointer_circle.png';
cc.loader.load(url, function(err, texture) {
	//设置图像
	sprite.spriteFrame = new cc.SpriteFrame(texture);
})

使用cc.loader.loadRes设置assets/resources 目录下的图片

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
cc.loader.loadRes("radar_radiation", function(err, texture) {
	//设置图像
	sprite.spriteFrame = new cc.SpriteFrame(texture);
})

使用cc.url.raw加载本地图片

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/radar_radiation.png'));

隐藏、显示一个节点

1. 设置node.active为true/false
2. 设置node.opacity为0/255

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/radar_radiation.png'));

sprite.node.active=false;
// sprite.node.opacity=0;

cc.instantiate()克隆节点

cc.instantiate()：克隆指定的任意类型的对象，或者从 Prefab 实例化出新节点。

cc.Class({
	extends: cc.Component,

	properties: {
		radar_role_item: cc.Prefab,
	},
	onLoad() {
		var sprite = this.node.getChildByName('test_sprite');
		//克隆节点
		var new_sprite=cc.instantiate(sprite);
		new_sprite.parent=this.node;
		
		//实例化预制节点
		var new_node = cc.instantiate(radar_role_item);
		new_node.parent = this.node;
	}
});

节点动作

节点动作详细文档

cc.repeatForever()和cc.repeat()

1. cc.repeatForever()：永远地重复一个动作

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/radar_role2.png'));

var repeat = cc.repeatForever(cc.rotateBy(1.0, 360));
sprite.node.runAction(repeat)

2. cc.repeat()：有限次数内重复一个动作

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/radar_role2.png'));

var repeat = cc.repeat(cc.rotateBy(1.0, 360),5);
sprite.node.runAction(repeat)

cc.fadeIn(duration)、cc.fadeOut(duration)、cc.fadeTo(duration,opacity)

注：opacity是0-255,0是透明

var action = cc.fadeIn(1.0);
var action = cc.fadeOut(1.0);
var action = cc.fadeTo(1.0, 0);

cc.callFunc()

cc.callFunc():执行回调函数。
参数：

• selector：function
• selectorTarget：object
• data：Any data for function, it accepts all data types

重复执行多个动作

• spawn：同步执行动作，同步执行一组动作，参数是动作、动作数组、空数组
• sequence：顺序执行动作，创建的动作将按顺序依次运行，参数是动作、动作数组、空数组
• repeatForever：重复执行
• pauseAllActions()：暂停本节点上所有正在运行的动作
• resumeAllActions()：恢复运行本节点上所有暂停的动作
• runAction():执行并返回该执行的动作

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/radar_radiation.png'));

var action1=cc.spawn(cc.fadeTo(1,180),cc.scaleTo(1,0.3));
var action2=cc.spawn(cc.fadeTo(1,20),cc.scaleTo(1,0.7));
var action3=cc.spawn(cc.fadeTo(0.1,0),cc.scaleTo(0.1,0));
var action4=cc.callFunc(function(){
	console.log('我们执行完一次了')
})
var seq1 = cc.sequence([action1,action2,action3,action4]);  
var rep1 = cc.repeatForever(seq1);  
 sprite.node.runAction(rep1);

360度顺时针循环旋转

ps：在2.1.0版本可以，在2.3.1版本会来回转，可以使用Animation去改变angle

var sprite = this.node.getChildByName('test_sprite').getComponent(cc.Sprite);
sprite.spriteFrame = new cc.SpriteFrame(cc.url.raw('resources/test.jpg'));

var rep = cc.repeatForever(cc.rotateBy(2, -360));
sprite.node.runAction(rep);

定时器

定时器文档详情

首先，先创建一个指向某个组件的变量，变量名为 component(this)。

1. 开始一个计时器

component.schedule(function() {
    console.log(1) 
}, 5);

上面这个计时器将每隔 5s 执行一次。

2. 更灵活的计时器

// 以秒为单位的时间间隔
var interval = 5;
// 重复次数
var repeat = 3;
// 开始延时
var delay = 10;
component.schedule(function() {
    console.log(1) 
}, interval, repeat, delay);

上面的计时器将在 10 秒后开始计时，每 5 秒执行一次回调，执行 3 + 1 次。

3. 只执行一次的计时器（快捷方式）

component.scheduleOnce(function() {
    console.log(1) 
}, 2);

上面的计时器将在两秒后执行一次回调函数，之后就停止计时。

4. 取消计时器

使用回调函数本身来取消计时器：

this.count = 0;
this.callback = function () {
    if (this.count === 5) {
        // 在第六次执行回调时取消这个计时器
        this.unschedule(this.callback);
    }
    console.log(1)
}
component.schedule(this.callback, 1);

注意：组件的计时器调用回调时，会将回调的 this 指定为组件本身，因此回调中可以直接使用 this。

下面是 Component 中所有关于计时器的函数：

• schedule：开始一个计时器
• scheduleOnce：开始一个只执行一次的计时器
• unschedule：取消一个计时器
• unscheduleAllCallbacks：取消这个组件的所有计时器

Animation组件

Animation组件文档

本例中的节点是名称是anim_test。

1. 创建 Animation 组件，有两种方式：
   • 选中相应的节点，点击属性检查器下方的添加组件，在其他组件中选择 Animation。
     
   • 选中相应的节点，打开动画编辑器，在动画编辑器中点击添加 Animation 组件按钮。
     
2. 创建与挂载动画剪辑，两种方式：
   • 在资源管理器中点击左上方的+，或者右键空白区域，选择 Animation Clip，这时候会在管理器中创建一个名为 ‘New AnimationClip’ 的剪辑文件。 单单创建还是不够的，我们再次在层级管理器中点选刚刚的节点，在属性检查器中找到 Animation，这时候的 Clips 显示的是 0，我们将它改成 1。 然后将刚刚在资源管理器中创建的 ‘New AnimationClip’ ，拖入刚刚出现的 animation-clip选择框 内。
     
   • 如果 Animation 组件中还没有添加动画剪辑文件，则可以在动画编辑器中直接点击 新建 AnimationClip 按钮，根据弹出的窗口创建一个新的动画剪辑文件。 需要注意的是，如果选择覆盖已有的剪辑文件，被覆盖的文件内容会被清空。
     
3. 编辑动画序列
   点击动画编辑器中的编辑按钮进入动画编辑。
   

   • 添加属性：点击属性列表下方的 Add Property按钮添加你需要的属性。
     

   • 添加关键帧：点击属性后面的菜单按钮插入关键帧
     

   • 编辑关键帧：插入完关键帧之后，可以在右方的属性检查器修改当前帧当前属性的值，可以看见时刻下面有一个小的三角形，就代表这是在当前帧下。
     

   • 设置默认动画：将动画文件拖入节点下的Default Clip中
     
     根据自己的需要编辑动画之后在点击动画编辑器的编辑按钮保存动画。

4. 使用动画

   var anim_test_anim=this.node.getChildByName('anim_test').getComponent(cc.Animation);
   // 如果没有传参则播放的是defalut clip指向的动画clip，anim是创建的动画的名称
   anim_test_anim.play(); 
   

使用util.js

将util.js放在assets/scripts下面，使用时用相对路径引入，否则打包完成时会找不到utils.js文件。

var utils = require('./utils/utils.js');

使用VideoPlayer 组件播放视频

cocos Creator添加视频并且自动播放循环播放。
注意：

1. 我的版本是2.1.0，所以’ready-to-play’事件压根没触发，我是在’meta-loaded’中播放的视频。
2. 视频播放前会有白屏或者黑屏出现，需要给添加VideoPlayer 组件的splash sprite组件添加 sprite frame，图片是视频的第一帧。

项目打包自定义要打包的模块来减少包的体积

点击项目——》项目设置——》模块设置选择你要打包的模块。

暂时我就使用过这些，以后会持续更新的，希望对大家有帮助。