2017年10月27日
cocos creator基础教程-从头开始（一）
大家好，今天给大家分享的是cocos creator新手基础教程，这个基础教程提笔前我想了很久才写，一是考虑每个人的基础不同，需求也不同，可能照顾不到部分人的想法以及某些需求……话不多说直奔今天的主题，
对于cocos新手刚接触会有些抵触，会感觉迷茫，以至于无从下手，不知道如何开始，给大家分享list包括：
1.一些常用的组件访问。
2，当前js文件访问其余js节点。
3，复制节点／复制prefab。
4，销毁节点。
5，事件侦听on的四种方法。
6，缓动动画处理与(tween.js插件运用)。
7，计时器的操作与使用。
8，资源读取与操作。
9，更换图集操作。
一. 获取组件的几种形式:
//1. 通过属性检查器被赋值的label组件，直接拿到得到实例
//2. 通过属性检查器被赋值的label组件所在的node节点，然后通过getComponent获取
// this.label.string = this.text;
//3. 获取当前this(node)节点上的label组件
// var _label = this.getComponent(cc.Label);
//4. 先获取目标组件所在的节点，然后通过getComponent获取目标组件
var_label=cc.find(“Canvas/label”).getComponent(cc.Label);
之后进行console.log(_label);
看看我们的控制台，是否已经访问到了我们想要实现的效果。
二.通过当前js文件来访问其他模块的代码
//—>>>用 require + 文件名(不含路径) 来获取到其他 模块 的对象
vartModuleData=require(“testJs”);
tModuleData.tme_pa2=991;
console.log(tModuleData.tme_pa2);
三.在当前节点下添加一个新组件
varmySprite=newcc.Node().addComponent(cc.Sprite);
mySprite.spriteFrame=this.t_sprite;
mySprite.node.parent=this.node;
mySprite.node.setPosition(300,200);
三.复制节点/或者复制 prefab
//复制节点
var lLabel = cc.instantiate(this.label);
lLabel.node.parent=this.node;
lLabel.node.setPosition(-200,0);
//复制prefab
vartPrefab=cc.instantiate(this.t_prefab);
tPrefab.parent=this.node;
tPrefab.setPosition(-210,100);
四.销毁节点
第一种方法：//—>>> 销毁节点(销毁节点并不会立刻发生，而是在当前 帧逻辑更新结束后，统一执行)
if (cc.isValid(this.label.node) ) {
console.log(“有效存在，进行摧毁”);
this.label.destroy();
}else{
console.log(“已摧毁”);
}
第二种：removeFromParent();移除后保留在内存中
第三种: destroy(); 彻底从内存删除掉
五.事件监听 on 4种形式
vartFun=function (event){
console.log(“touchend event”);
};
this.node.on(“touchend”,tFun);
this.node.on(“touchend”,function (event){
console.log(“touchend event”);
});
this.node.on(“touchend”,function (event){
console.log(“touchend event”);
},this);
this.node.on(“touchend”,function (event){
console.log(“touchend event”);
}.bind(this));
// —>>> 一次性的事件监听 once
this.node.once(“touchend”,function (event){
console.log(“touchend event”);
});
六.缓动动画处理( tween.js插件)
一次触发
letcapModule=cc.moveTo(1,cc.p(-312,-84));//物品2位移到指定位置
cap_2.runAction(capModule);
不断重复多次触发
this.setHand.runAction(
cc.sequence(cc.scaleTo(0.8, 0.8),
cc.scaleTo(1, 1))).repeatForever();
七.计时器的使用
多次计时器
ar interval = 1,repeat = 0, delay = 3;// 1s ,重复次数1 ,3s开始延时
this.schedule(function() {
console.log(123);
})
//一次性的计时器
varmySch=function(){ console.log(“schedule Once log…”); }
this.scheduleOnce(mySch);
//取消定时器
this.unschedule(mySch);
八.资源读取
//—>>> url raw资源获取
varmSf=newcc.Node().addComponent(cc.Sprite);
mSf.spriteFrame=this.t_sprite;
mSf.spriteFrame.setTexture(this.t_url);
mSf.node.setPosition(400,0);
mSf.node.parent=this.node;
mSf.node.setScale(0.5);
//获得 Raw Asset 的 url
varmUrl=cc.textureCache.addImage(cc.url.raw(“himi.png”));
console.log(“raw asset url:”+mUrl);
九.背景图片获取与更替
changeBg:function(){ //更换背景
varsprite_pic=cc.find(“Canvas/background”);
varchangePic=cc.url.raw(‘resources/bg_s.png’);
vartexture=cc.textureCache.addImage(changePic);
sprite_pic.getComponent(cc.Sprite).spriteFrame.setTexture(texture);
这篇文章写出来讲真都是我一步一步走出来的，或许你正在迷茫，正在不知从何下手，希望能够帮到你，开源让世界更加美好，转载请命名出处，谢谢。