基本語法
1.JS
// 代碼組件模版類
cc.Class({
extends:cc.Component, //繼承
properties:{
// 放置屬性、對象
// 這里的屬性赦政、對象會(huì)映射到畫布的屬性檢查器中
pos:cc.p(0,0),
size:cc.size(0,0),
test_Node:{//定義膜廊，獲取操作對象;在屬性檢查器中拖入要操控的組件
type:cc.Node,
default:null,
},
FIXED_TIME:0.03,
},
onLoad(){
},
start(){
//放置 初始化數(shù)據(jù)苇本，控制畫布初始樣式
},
update(dt){
// 畫布刷新，放置一些需變動(dòng)的畫布樣式/節(jié)點(diǎn)
},
});
生命周期
onLoad
onLoad 回調(diào)會(huì)在組件首次激活時(shí)觸發(fā)摧冀，比如所在的場景被載入倍踪，或者所在節(jié)點(diǎn)被激活的情況下。在 onLoad 階段索昂，保證了你可以獲取到場景中的其他節(jié)點(diǎn)建车，以及節(jié)點(diǎn)關(guān)聯(lián)的資源數(shù)據(jù)。onLoad 總是會(huì)在任何 start 方法調(diào)用前執(zhí)行椒惨，這能用于安排腳本的初始化順序缤至。通常我們會(huì)在 onLoad 階段去做一些初始化相關(guān)的操作。
start
start 回調(diào)函數(shù)會(huì)在組件第一次激活前康谆，也就是第一次執(zhí)行 update 之前觸發(fā)领斥。start 通常用于初始化一些中間狀態(tài)的數(shù)據(jù)，這些數(shù)據(jù)可能在 update 時(shí)會(huì)發(fā)生改變沃暗，并且被頻繁的 enable 和 disable月洛。
update
游戲開發(fā)的一個(gè)關(guān)鍵點(diǎn)是在每一幀渲染前更新物體的行為，狀態(tài)和方位描睦。這些更新操作通常都放在 update 回調(diào)中膊存。
lateUpdate
update 會(huì)在所有動(dòng)畫更新前執(zhí)行，但如果我們要在動(dòng)畫更新之后才進(jìn)行一些額外操作忱叭，或者希望在所有組件的 update 都執(zhí)行完之后才進(jìn)行其它操作隔崎，那就需要用到 lateUpdate 回調(diào)。
onDestroy
當(dāng)組件或者所在節(jié)點(diǎn)調(diào)用了 destroy()韵丑，則會(huì)調(diào)用 onDestroy 回調(diào)爵卒，并在當(dāng)幀結(jié)束時(shí)統(tǒng)一回收組件。
onEnable
當(dāng)組件的 enabled 屬性從 false 變?yōu)?true 時(shí)撵彻，或者所在節(jié)點(diǎn)的 active 屬性從 false 變?yōu)?true 時(shí)钓株，會(huì)激活 onEnable 回調(diào)实牡。倘若節(jié)點(diǎn)第一次被創(chuàng)建且 enabled 為 true，則會(huì)在 onLoad 之后轴合，start 之前被調(diào)用创坞。
onDisable
當(dāng)組件的 enabled 屬性從 true 變?yōu)?false 時(shí)，或者所在節(jié)點(diǎn)的 active 屬性從 true 變?yōu)?false 時(shí)受葛，會(huì)激活 onDisable 回調(diào)题涨。
2.組件實(shí)例化
rope:{
type:cc.Node,
default:null,
},
cow_prefab:{
type:cc.Prefab,
default:null,
},
cow_root:{
type:cc.Node,
default:null,
},
// 組件實(shí)例化
var cow = cc.instantiate(this.cow_prefab);
// 添加節(jié)點(diǎn)
this.cow_root.addchild(cow);
//從節(jié)點(diǎn)下移除
cow.removeFromparent();
3.隨機(jī)數(shù)
//隨機(jī)取3-5
var time = 3 + Math.random() *2;
//隨機(jī)0-2
var num = Math.random() *2;
4.間隔性調(diào)用方法
get_one_cow(){
// 在節(jié)點(diǎn)下產(chǎn)生一頭牛
var cow = cc.instantiate(this.cow_prefab);
this.cow_root.addChild(cow);
// 初始位置
cow.y = -66;
cow.x = 550;
// 隔3-5秒產(chǎn)生一頭牛
var time = 3 + Math.random() * 2;
this.scheduleOnce(this.get_one_cow.bind(this),time);
}
5.節(jié)點(diǎn)下的組件數(shù)、組件
hit_test(){ //套牛觸發(fā)
for(var I=0;i<this.cow_root.childrenCount;i++){
// 取節(jié)點(diǎn)下的組件
var cow = this.cow_root.children[I];
if(cow.x >= 78 && cow.x <= 152){
return cow;
}
}
return null;
}
6.制作cow組件
1.層級管理器畫布下創(chuàng)建空節(jié)點(diǎn)cow_root
2.在cow_root下創(chuàng)建空節(jié)點(diǎn)cow
3.將節(jié)點(diǎn)cow拖至資源管理器自動(dòng)生成cow組件
7.動(dòng)作回掉
var end_func = cc.callFunc(function(){
// 操作代碼
}.bind(this));
8.順序動(dòng)作（按順序執(zhí)行）
start(){
this.is_throwing = false;
},
//為避免重復(fù)按鈕點(diǎn)擊加一個(gè)bool值
on_throw_button_click(){
if(this.is_throwing){
return;
}
this.rope = -560;
// 移動(dòng)
var m1 = cc.moveTo(0.5,cc.p(0,57));
var mid_func = cc.callFunc(function(){
// 判斷是否套住牛,m1執(zhí)行完調(diào)用此方法
}.bind(this));
var m2 = cc.moveTo(0.5,cc.p(0,-500));
var end_func = cc.callFunc(function(){
this.is_throwing = false;
}.bind(this));
// 按順序調(diào)用
var seq = cc.sequence(m1,m2,end_func);
// Action
this.rope.runAction(seq);
}
9.獲取腳本對象
// 獲取cow腳本對象
var cow_js = cow.getComponent("cow")
// 獲取腳本對象中的屬性c_type
var cow_type = cow.getComponent("cow").c_type;
引用腳本joy.js
var joy = require("joy");
properties:{
stick:{
type:joy,
default:null,
}
}
10.場景切換
// 發(fā)生mousedown事件总滩，場景一切換到場景二
onLoad(){
this.node.on('mousedown',function(){
cc.director.loadScene('scene2');
})
}
11.倒計(jì)時(shí)場景切換
properties:{
time_label:{
type:cc.Label,
default:null,
}
},
onLoad(){
var timeIn = 5;
this.schedule(function(){
timeIn--;
// js控制其label顯示
this.time_label.string = timeIn;
if(timeIn === 0){
cc.director.loadScene('scene3');
}
},1);
}
12.this纲堵、this.node
this 指當(dāng)前組件實(shí)例
this.node 指當(dāng)前組件實(shí)例所在的節(jié)點(diǎn)
13.代碼示例
cc.Class({
extends: cc.Component,
properties: {//屬性列表
rope:{ // 節(jié)點(diǎn)
type:cc.Node,
default:null,
},
cow_prefab:{ //自主生成的組件
type:cc.Prefab,
default:null,
},
cow_root:{
type:cc.Node,
default:null,
},
rope_img:{ //圖片數(shù)組
type:cc.SpriteFrame,
default:[],
},
rope_sprite:{
type:cc.Sprite,
default:null,
},
},
// onLoad () {},
start () { // 初始化
this.rope.y = -560;
this.is_throwing = false;
this.rope_sprite.spriteFrame = this.rope_img[0];
this.get_one_cow();
},
get_one_cow(){//產(chǎn)生一頭牛
console.log('一頭牛')
var cow = cc.instantiate(this.cow_prefab);//實(shí)例化
this.cow_root.addChild(cow);//放到節(jié)點(diǎn)下
cow.y = -66;
cow.x = 550;
//3-5秒產(chǎn)生一頭牛
var time = 3 + Math.random() * 2;//隨機(jī)3-5
this.scheduleOnce(this.get_one_cow.bind(this),time);//隔一段時(shí)間調(diào)用此方法
},
hit_test(){//套牛
for(var i=0;i<this.cow_root.childrenCount;i++){
var cow = this.cow_root.children[I];
if(cow.x >= 78 && cow.x <= 152){
return cow;
}
}
return null;
},
on_thorw_button_click(){
console.log('thoow -click');
// this - game-scene 當(dāng)前組件實(shí)例
// this.node - Canvas 組件上的節(jié)點(diǎn)
if(this.is_throwing){
return;
}
this.is_throwing = true;
this.rope.y = -560;
this.rope_sprite.spriteFrame = this.rope_img[0];//圖片切換成沒套住牛的初始圖片
var m1 = cc.moveTo(0.5,cc.p(0,57));
var mid_func = cc.callFunc(function(){//完成上個(gè)方法/語句，進(jìn)入此方法
var cow = this.hit_test();
if(cow){ //套牛成功
var cow_type = cow.getComponent("cow").c_type;//獲取腳本對象 - 屬性
cow.removeFromparent();
this.rope_sprite.spriteFrame = this.rope_img[cow_type];//圖片切換成套住牛的圖片
this.rope.y = 143; //同一個(gè)牛頭 適應(yīng)位置
}
}.bind(this));
var m2 = cc.moveTo(0.5,cc.p(0,-560));
var end_func = cc.callFunc(function(){//方法返回闰渔，重置
this.is_throwing = false;
}.bind(this));
//順序調(diào)用隊(duì)列
var seq = cc.sequence(m1,m2,end_func);
this.rope.runAction(seq);
},
update (dt) {//刷新
},
});
