[cocos2d]cocos creator的常规用法

cocos creator的常规用法

cc 属性介绍
获取组件的几种形式
全局变量的访问
模块之间的访问
在当前节点下添加一个组件
复制节点/或者复制 prefab
销毁节点(销毁节点并不会立刻发生，而是在当前 帧逻辑更新结束后，统一执行)
事件监听 on 4种形式（包括坐标获取）
关闭监听
发射事件（事件手动触发)
动作示例，类似c2dx api 基本无变化
计时器 (component)schedule (cc.Node 不包含计时器相关 API)
url raw资源获取

下面代码：

cc.Class({

extends: cc.Component,

properties: {

label: {

default: null,

type: cc.Label

},

text: 'Hello, World!',

t_prefab:{

default:null,

type:cc.Prefab

},

t_sprite:{//定义一个cc的类型，并定义上常用属性

default:null,

type:cc.SpriteFrame,//类型的定义

// url:cc.Texture2D, //Raw Asset(cc.Texture2D, cc.Font, cc.AudioClip)

visible:true,//属性检查器中是否可见

displayName:'himi',//属性检查器中属性的名字

tooltip:"测试脚本",//属性检查器中停留此属性名称显示的提示文字

readonly:false,//属性检查器中显示（readonly）且不可修改[当前有bug，设定只读也能修改]

serializable:true,//设置false就是临时变量

editorOnly:false//导出项目前剔除此属性

},

t_url:{

default:null,

url:cc.Texture2D

},

t_count_2:200,//基础类型

//可以只定义 get 方法，这样相当于一份 readonly 的属性。[当前有bug，只设定get也能修改]

t_getSet:{

default:12,

get:function(){returnthis.t_getSet},//get

set:function(value){this.t_getSet =value;}//set

},

t_array:{//定义一个数组

default:[],

type:[cc.Sprite]

}

},

// use this for initialization

onLoad: function () {

//--->>> 获取组件的集中形式:

//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);

//5.也可以如下形式【注意此种方式，目前有BUG，无法正常使用 (0.7.1) 】

// var _label = cc.find("Canvas/label<cc.Label>");

console.log(_label.string);

console.log(this.t_getSet);

//--->>>全局变量的访问

/* 任意脚本中定义如下：【注意不要有var哦】

t_global = {

tw:100,

th:200

};

*/

t_global.th =2000;

console.log(t_global.th);

//--->>>模块之间的访问

/*任意脚本中定义如下 【注意关键字是module.exports】

module.exports= {

tme_pa1:"100",

tme_pa2:333221

};

*/

//--->>>用 require + 文件名(不含路径) 来获取到其他 模块 的对象

var tModuleData =require("test");

tModuleData.tme_pa2 =991;

console.log(tModuleData.tme_pa2);

//--->>>在当前节点下添加一个组件

var mySprite =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

var tPrefab =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("已摧毁");

}

//--->>> 事件监听 on 4种形式

//枚举类型注册

var tFun =function (event){

console.log("touchend event:"+event.touch.getLocation().x +"|"+event.touch.getLocation().y);

};

this.node.on(cc.Node.EventType.TOUCH_END,tFun,this);

//事件名注册

// var tFun =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");

// });

//--->>> 关闭监听

this.node.off("touchend",tFun,this);

//--->>> 发射事件（事件手动触发)

this.node.on("tEmitFun",function (event){

console.log("tEmitFun event:"+event.detail.himi+"|"+event.detail.say);

//-->>> 事件中断,如下函数阻止事件向当前父级进行事件传递

// event.stopPropagation();

});

this.node.emit("tEmitFun",{himi:27,say:"hello,cc!"});

//--->>> 动作，类似c2dx api 基本无变化

var mTo =cc.moveBy(1,-100, -200);

var mAction =cc.repeatForever(cc.sequence(cc.moveBy(1,-100, -200),mTo.reverse(),cc.delayTime(0.5),cc.callFunc(function(action,data){

console.log("action callback:"+data.himi);

},this,{tx:100,himi:"i'm action callback and bring data"})));

mySprite.node.runAction(mAction);

//暂停动作

mySprite.node.stopAction(mAction);

//--->>> 计时器 (component)schedule (cc.Node 不包含计时器相关 API)

//参数： call funtion/interval/repeat times/delay time

//不延迟，永久重复

this.schedule(function(){

console.log("schedule log...");

},1);

//不延迟，有重复次数限定

// this.schedule(function(){

// console.log("schedule log...");

// },1,2);

//重复2次，重复间隔为1秒，延迟1秒进行

// this.schedule(function(){

// console.log("schedule log...");

// },1,2,1);

//一次性的计时器

var mySch =function(){console.log("schedule Once log..."); }

this.scheduleOnce(mySch);

//取消定时器

this.unschedule(mySch);

//--->>> url raw资源获取

var mSf =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

var mUrl =cc.textureCache.addImage(cc.url.raw("himi.png"));

console.log("raw asset url:"+mUrl);

},

// called every frame

update: function (dt) {

// if (cc.isValid(this.label.node) ) {

// console.log("有效存在，进行摧毁");

// }else{

// console.log("已摧毁");

// }

},

});

test.js

t_global = {

tw:100,

th:200

};

module.exports= {

tme_pa1:"100",

tme_pa2:333221

};

制作动态生成内容的列表

http://www.cocos.com/docs/creator/ui/list-with-data.html#

HelloWorld默认脚本

cc.Class({

    extends: cc.Component,

    properties: {

        label: {
            default: null,
            type: cc.Label
        },
        text: 'Hello, World!'
    },

    // use this for initialization
    onLoad: function () {
        this.label.string = this.text;
    },
    // called every frame
    update: function (dt) {   },


});

按钮常用事件

cc.Node.EventType.TOUCH_START   //按下时事件
cc.Node.EventType.TOUCH_MOVE    //按住移动后事件
cc.Node.EventType.TOUCH_END     //按下后松开事件
cc.Node.EventType.TOUCH_CANCEL  //按下后取消事件

范例：
//当按下按钮后松开后，跳转到指定场景
cc.Class({
    extends: cc.Component,
    properties: {
        ToScene: '00'
    },
    onLoad: function () {
        this.node.on(cc.Node.EventType.TOUCH_END,function(event){
            cc.director.loadScene(this.ToScene);
        },this);
    },
});

按钮点击后播放背景音乐

cc.Class({
    extends: cc.Component,
    properties:{
        BGAudio:{
            default:null,
            url:cc.AudioClip
        },
    },
    onLoad: function () {
        this.node.on(cc.Node.EventType.TOUCH_END,function(event){
            cc.audioEngine.playMusic(this.BGAudio,true);
        },this);
    },
});

按钮点击后跳转场景

新建如下脚本
cc.Class({
    extends: cc.Component,
    properties: {
        ToScene: '00'
    },
    onLoad: function () {
        this.node.on(cc.Node.EventType.TOUCH_END,function(event){
            cc.director.loadScene(this.ToScene);
        },this);
    },
});

二、挂载脚本到对象组件上
三、在组件上修改“ToScene”的值（跳转的场景名）

按钮点击时的点击声音

一、新建如下脚本
cc.Class({
    extends: cc.Component,
    properties:{
        ClickAudio:{
            default:null,
            url:cc.AudioClip
        },
    },
    onLoad: function () {
        this.node.on(cc.Node.EventType.TOUCH_START,function(event){
            cc.audioEngine.playEffect(this.ClickAudio,false);
        },this);
    },
});

二、挂载脚本到对象组件上
三、在组件上修改“ClickAudio:”的值（音频资源）

api常用功能

cc.log(变量);//输出日志（若输出固定文本，需要加上“”）
cc.director.loadScene('场景名称');//场景跳转
this.node.setPosition(x,y);//设置节点位置
this.node.runAction(cc.moveTo(1,cc.p(0,0)));//移动当前节点（移动指定距离用moveBy）
this.node.runAction(cc.scaleTo(1,0.7,0.8));/缩放当前节点
this.node.runAction(cc.rotateTo(1,160,160));//旋转当前节点（旋转指定角度用rotateBy）
this.node.setOpacity(20);//设置节点透明度
hero1_X = hero1.node.getPositionX();//获取节点的X轴位置
this.node.color = new cc.color(100,100,100,255);//设置节点颜色
var a = cc.find("Canvas/1").getComponent(cc.Sprite);//获取组件

node.on(cc.Node.EventType.TOUCH_START, callback, this.node);//添加该节点的事件监听
node.off(cc.Node.EventType.TOUCH_START, callback, this.node);//删除该节点的事件监听

if (cc.isValid(this.label.node) )//判定节点是否存在
this.node.destroy();//销毁节点
//计算1次的计时器,2秒后执行
        this.scheduleOnce(function(){
            this.doSomething();  
        },2);
//每隔5秒执行1次
        this.schedule(function(){
            this.doSomething();  
        },5);
//计算多次的计时器（1秒后，以0.1秒的执行间隔，执行10次）
        this.schedule(function(){
            this.doSomething();
        },0.1,10,1);
this.unscheduleAllCallbacks(this);//停止某组件的所有计时器
cc.sys.localStorage.setItem('G01.level',G01.level);//存储存档数据
cc.sys.localStorage.getItem('G01.level');//读取存档数据
cc.sys.localStorage.removeItem('G01.level');//擦除存档数据
cc.find('canvas/map' + num)//读取带变量的路径
//定义数组
var a= ['java','c++','c#'];
var a={}
var a=new Array(40);
hero1.node.getLocalZOrder();//层级获取
hero1.node.setLocalZOrder(1);//层级改变
//获得设备分辨率
var b = cc.director.getWinSizeInPixels()
var bx = b.width
var by = b.height
node.active = false;//激活节点
包含其他脚本
const Polyglot = require('polyglot');
Polyglot.a = 1;
//定义全局变量
window.G = {
    a: null,
    b: null,
};
//访问全局变量
G.a = 0;
G.b = 0;
Math.round(num)//四舍五入
Math.floor(num)//小于等级num的整数
Math.ceil(num)//大于等级num的整数
//获得节点
var node = this.node;
node.x = 100;
//获得所有节点
this.cannons = [];
this.cannons = this.node.getChildren();

获取组件的3种形式：
    1、通过属性检查器被赋值的label组件所在的node节点，然后通过getComponent获取
        this.label.string = this.text;    
    2、获取当前this(node)节点上的label组件
        var label = this.getComponent(cc.Label);
    3、先获取目标组件所在的节点，然后通过getComponent获取目标组件
        var a = cc.find("Canvas/1").getComponent(cc.Sprite);
在当前节点下添加一个组件
    var mySprite = new cc.Node().addComponent(cc.Sprite); 
    mySprite.spriteFrame = this.t_sprite;
    mySprite.node.parent = this.node;
    mySprite.node.setPosition(300,200);
复制节点
    var lLabel = cc.instantiate(this.label);
    lLabel.node.parent = this.node;
    lLabel.node.setPosition(-200,0);
复制prefab
    var tPrefab = cc.instantiate(this.t_prefab);
    tPrefab.parent = this.node;
    tPrefab.setPosition(-210,100);
实例预制体
    t_prefab:{
        default:null,
        type:cc.Prefab
    },

    var tPrefab = cc.instantiate(this.t_prefab);
    tPrefab.parent = this.node;
    tPrefab.setPosition(-210,100);

触摸事件

cc.Node.EventType.TOUCH_START     //当手指触点落在目标节点区域内时
cc.Node.EventType.TOUCH_MOVE      //当手指在屏幕上目标节点区域内移动时
cc.Node.EventType.TOUCH_END       //当手指在目标节点区域内离开屏幕时
cc.Node.EventType.TOUCH_CANCEL    //当手指在目标节点区域外离开屏幕时

API名                  类型        意义
touch                  cc.Touch    与当前事件关联的触点对象
getID                  Number      获取触点的ID，用于多点触摸的逻辑判断
getLocation            Object      获取触点位置对象，对象包含x和y属性
getLocationX           Number      获取触点的X轴位置
getLocationY           Number      获取触点的Y轴位置
getPreviousLocation    Object      获取触点上一次触发事件时的位置对象，对象包含x和y属性
getStarLocation        Object      获取触点初始时的位置对象，对象包含x和y属性
getDelta               Object      获取触点距离上一次事件移动的距离对象，对象包含x和y属性

范例：
        this.node.on(cc.Node.EventType.TOUCH_MOVE,function(event){
            var a = event.getLocationX();
            var b = event.getLocationY();
            var hero1 = cc.find("Canvas/Game/hero1").getComponent(cc.Sprite);
            hero1.node.setPosition(a-180,b-320);
        },this);  

创建和销毁节点

创建新节点
var node = new cc.Node(sprite);
var sp = node.addComponent(cc.Sprite);

sp.spriteFrame = this.sprite;
node.parent = this.node;
node.setPosition(0,0);

克隆节点
var scene = cc.director.getScene();
var node = cc.instantiate(this.target);
node.parent = this.node;
node.setPosition(0,0);

生命周期回调

onLoad
场景载入时触发

start
第一次执行update前触发

update
每一帧触发

声明基本格式

音频：
        名称:{
            default:null,
            url:cc.AudioClip
        },
图片：
        名称:{
            default:null,
            type:cc.SpriteFrame
        },
文本：
        名称: {
            default: null,
            type: cc.Label
        },
节点：
        名称: {
            default: null,
            type: cc.Node
        },

声音的播放

播放背景音乐
cc.audioEngine.playMusic("assets/Sound/00/bg.mp3",true)
停止背景音乐
cc.audioEngine.stopMusic()
播放音效
var effect = cc.audioEngine.playEffect(声音对象,false);
停止音效
cc.audioEngine.stopEffect(音效变量名)
停止所有音效
cc.audioEngine.AllEffects()
单独设置背景音乐的音量
cc.audioEngine.setMusicVolume(参数);  //该参数范围是0到1
单独设置音效的音量
cc.audioEngine.setEffectsVolume(参数);  //该参数范围是0到1

范例：
properties:{
    jumpAudio:{
        default:null,
        url:cc.AudioClip
    },
},
然后在使用的节点上添加jumpAudio的声音资源
cc.audioEngine.playEffect(this.jumpAudio,false);

图片不抗锯齿

在onLoad或update函数里添加：
this.node.getComponents(cc.Sprite)[0].spriteFrame.getTexture().setAliasTexParameters()
把JS文件挂到需要不抗锯齿的带图片的控件下面

setAliasTexParameters()//不抗锯齿
setAntiAliasTexParameters()//抗锯齿