介绍整理Cocos基本功能
部分未讲请参考 Cocos官方文档http://docs.cocos.com/creator/manual/zh/
界面介绍请阅读 http://docs.cocos.com/creator/manual/zh/getting-started/basics/editor-overview.html
1.资源工作流程
1.1 图像资源（Texture）：每个图像资源导入后编辑器会自动在它下面创建同名的 SpriteFrame 资源。图集资源使用：
image.png
图集打包后由两个文件组成：.plist和.png（图片合集图片） 打包工具建议（TexturePacker ）
1.2预制资源：在场景中编辑好节点后，直接将节点从 层级管理器 拖到 资源管理器。 编辑好画面后下拉即可。
image.png
2.场景工作流程
2.1节点：在 Cocos Creator 中，节点（Node）是承载组件的实体，我们通过将具有各种功能的组件（Component）挂载到节点上，来让节点具有各式各样的表现和功能。
image.png
在节点上你可以挂载Sprite，Button，脚本 只需直接拖入即可（跟Unity3d差不多）
2.2 管理节点层级和显示顺序
image.png
即下面层级的节点将会覆盖在上面层级 一点点盖上去~~~~
其余简单组件请阅读 http://docs.cocos.com/creator/manual/zh/render/
搭建场景其实挺简单de~
3.脚本资源
使用 cc.Class 声明类型
1.脚本动画资源（如何使用一个动画）
image.png
image.png
在节点上 添加动画 加制作好的动画拖进节点
具体参考： http://docs.cocos.com/creator/manual/zh/animation/
2.脚本中使用cc.vv 自己绑定
一开始我也不知道这是什么玩意，后来研究了下
我们可以在最初试的时候加载所需要的脚本 将工具脚本打包提出 直接调用。以下以全局音乐脚本控制介绍：
声音脚本
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
bgmVolume:1.0, //背景音乐
sfxVolume:1.0, //音效
bgmAudioID:-1,
},
// use this for initialization
init: function () {
var t = cc.sys.localStorage.getItem("bgmVolume");
if(t != null){
this.bgmVolume = parseFloat(t);
}
var t = cc.sys.localStorage.getItem("sfxVolume");
if(t != null){
this.sfxVolume = parseFloat(t);
}
cc.game.on(cc.game.EVENT_HIDE, function () {
console.log("cc.audioEngine.pauseAll");
cc.audioEngine.pauseAll();
});
cc.game.on(cc.game.EVENT_SHOW, function () {
console.log("cc.audioEngine.resumeAll");
cc.audioEngine.resumeAll();
});
},
// called every frame, uncomment this function to activate update callback
// update: function (dt) {
// },
getUrl:function(url){
return cc.url.raw("resources/sounds/" + url);
},
//播放背景音乐
playBGM(url){
var audioUrl = this.getUrl(url);
console.log(audioUrl);
if(this.bgmAudioID >= 0){
cc.audioEngine.stop(this.bgmAudioID);
}
this.bgmAudioID = cc.audioEngine.play(audioUrl,true,this.bgmVolume);
},
//播放音效
playSFX(url){
var audioUrl = this.getUrl(url);
if(this.sfxVolume > 0){
var audioId = cc.audioEngine.play(audioUrl,false,this.sfxVolume);
}
},
//设置音效
setSFXVolume:function(v){
if(this.sfxVolume != v){
cc.sys.localStorage.setItem("sfxVolume",v);
this.sfxVolume = v;
}
},
//设置背景音乐
setBGMVolume:function(v,force){
if(this.bgmAudioID >= 0){
if(v > 0){
cc.audioEngine.resume(this.bgmAudioID);
}
else{
cc.audioEngine.pause(this.bgmAudioID);
}
//cc.audioEngine.setVolume(this.bgmAudioID,this.bgmVolume);
}
if(this.bgmVolume != v || force){
cc.sys.localStorage.setItem("bgmVolume",v);
this.bgmVolume = v;
cc.audioEngine.setVolume(this.bgmAudioID,v);
}
},
pauseAll:function(){
cc.audioEngine.pauseAll();
},
resumeAll:function(){
cc.audioEngine.resumeAll();
}
});
如何通过自己绑定cc.vv来全局调用呢~
打开cocos的第一个页面 进行初始化
// Compatible with v1.5.0+
function initMgr(){
cc.vv = {}; //定义cc.vv
//初始化声音脚本
var AudioMgr = require("AudioMgr");
cc.vv.audioMgr = new AudioMgr();
cc.vv.audioMgr.init();
}
var waiting=require("WaitingConnect")
cc.Class({
extends: cc.Component,
properties: {
},
// use this for initialization
onLoad: function () {
initMgr(); //调用初始化脚本
},
});
接下来看如何使用：
// Compatible with v1.5.0+
cc.Class({
extends: cc.Component,
properties: {
},
// use this for initialization
onLoad: function () {
cc.vv.audioMgr.playBGM("bg.mp3"); //播放背景音乐
cc.vv.audioMgr.playSFX("button.mp3");//播放音效
cc.vv.audioMgr.setSFXVolume(0);//设置声音 0开启1关闭
cc.vv.audioMgr.setBGMVolume(0);
},
});
3.如何使用脚本创建预制体（已一个发牌做讲解）
首现先制作一个卡牌的预制体
image.png
创建预制体脚本：
cc.Class({
extends: cc.Component,
properties: {
// foo: {
// default: null, // The default value will be used only when the component attaching
// to a node for the first time
// url: cc.Texture2D, // optional, default is typeof default
// serializable: true, // optional, default is true
// visible: true, // optional, default is true
// displayName: 'Foo', // optional
// readonly: false, // optional, default is false
// },
// ...
spriteCard:{
default:[],
type:cc.SpriteFrame,
},
},
// use this for initialization
onLoad: function () {
this.sprite = this.node.getComponent(cc.Sprite);
this.cardid = 0;
this.m_cbCardListData = new Array();
this.m_cbCardListData=[
0x01,0x02,0x03
];
},
setCardDataView:function(data){
cc.log(">>>>>>>this><<<<"+data);
for(var i=0;i挂载到预制体上 右边数组把牌加进去
接下来是发牌~
cc.Class({
extends: cc.Component,
properties: {
pokercard_prefab:{
default:null,
type:cc.Prefab
},
},
// use this for initialization
onLoad: function () {
var cardIndex = 0;
this.pokerArray = [0x00,0x01,0x02,0x03,0x02,0x03,0x02,0x03,0x02,0x03,0x02,0x03,0x02,0x03];//手牌数组
this.pokercard=[];//节点数组
//对手牌数组进行发牌
for (var j = 0; j < this.pokerArray.length; j++)
{
if(this.pokerArray[j] == 0x00)
{
continue;
}
cardIndex++;
var x = 0;//x坐标
x = -320 + 50 * j ;
this.on_send_poker(j,this.pokerArray[j],cardIndex,x);//发送单张扑克
}
},
//创建单个扑克牌
on_send_poker:function(id,data,times,x){
this.pokercard[id] = cc.instantiate(this.pokercard_prefab);
this.node.addChild(this.pokercard[id]);
this.pokercard[id].setScale(0.6);
var poker = this.pokercard[id].getComponent('poker');//得到提示脚本
poker.setCardDataView(0x00);//0x00
var pos = cc.v2(0,250);//设置初始化坐标
this.pokercard[id].setPosition(pos);
//发牌移动到具体的位置
var actionMoveTo = cc.moveTo(0.5,cc.p(x,0));
//放大
var actionScaleTo = cc.scaleTo(0.5, 1);
//延时
var delay = cc.delayTime(times * 0.1);
var actionBy = cc.rotateBy(0.1, 180);
var rep = cc.repeat(actionBy, 2);
var action = cc.spawn(actionMoveTo, actionScaleTo,rep);
// //缩小 换牌 放大
var poker = this.pokercard[id].getComponent('poker');//得到提示脚本
var scaleX1 = cc.scaleTo(0.2,0, 1);
var func =cc.callFunc(function(target, data) {
//target 默认是调用这个action的本体Node，Sprite等等
//data 传递的参数，多个参数可以用[data1, data2] 的Array方式组合
data[0].setCardDataView(data[1]);
},
this, //通常绑定最外围的HelloWorldLayer 之类的， 可以方便调用， 比如为了removeChild
[poker,data] //参数，任意格式
);
var scaleX2 = cc.scaleTo(0.2,0.8, 0.8);
var seq = cc.sequence(delay,action,scaleX1,func,scaleX2);
this.pokercard[id].runAction(seq);
}
});
代码很简单
最后看下发牌及整体效果
https://github.com/balckban/niuniu-cocos-creator/blob/master/1.gif