cocos2d-js
2017-10-26 本文已影响553人
玉米包谷
cocos-js Http方式网络请求
JavaScript秘密花园
廖雪峰的官方网站
文档参考
动作列表
Node.js
node.js怎么判断当前是mac系统还是windows系统
【Cocos2d-x】实现可上下左右无限滚动的背景
Node.js v8.9.3 文档
颜色
// 定义
static const Color3B WHITE;
static const Color3B YELLOW;
static const Color3B BLUE;
static const Color3B GREEN;
static const Color3B RED;
static const Color3B MAGENTA;
static const Color3B BLACK;
static const Color3B ORANGE;
static const Color3B GRAY;
/* 使用方式 */
// 预设颜色
cc.color.WHITE;
/*
* 自定义颜色
* @param R 红色取值，0~255
* @param G 红色取值，0~255
* @param B 红色取值，0~255
* @param A 颜色透明度，0~255，可不传(默认255)
*/
cc.color(R,G,B,A);
/*
* 十六进制颜色值
*/
cc.hexToColor("#FFD751")
Layout
// 初始化
var bg_layout = new ccui.Layout();
// 设置大小
bg_layout.setSize(1280, 720);
// 设置位置
bg_layout.setPosition(0, 0);
/*
* 设置图层背景色填充类型
* void setBackGroundColorType(BackGroundColorType type);
* @param type NONE——无填充色 SOLID——纯色背景 GRADIENT——渐变色
*/
bg_layout.setBackGroundColorType(ccui.Layout.BG_COLOR_SOLID);
/*
* 设置图层背景色（要与setBackGroundColorType配合使用）
* void setBackGroundColor(const Color3B &color); 纯色背景
* void setBackGroundColor(const Color3B &startColor, const Color3B &endColor); 渐变色背景
* @param color 背景色
* @param startColor 渐变色开始颜色
* @param endColor 渐变色结束颜色
*/
bg_layout.setBackGroundColor(cc.color.WHITE);
/*
* 设置图层背景色透明度
* @param opacity 透明度0~255
*/
bg_layout.setBackGroundColorOpacity(160);
/*
* 设置背景图
* void setBackGroundImage(const std::string& fileName,TextureResType texType = TextureResType::LOCAL);
* @param fileName 图片地址
* @param texType 图片来源： 0——本地 1——plist
*/
bg_layout.setBackGroundImage("abc.png", ccui.Widget.PLIST_TEXTURE);
/*
* 九宫格渲染图片
*/
void setBackGroundImageScale9Enabled(bool enabled);
TableView(列表)
参考：
Cocos2d-lua示例（一）排行榜之TableView
cocos2d-x CCTableView动态插入删除元素bug修正及动画表现
/**
* TableView初始化
* @param dataSource 数据源
* @param size 视图大小
*/
static TableView* create(TableViewDataSource* dataSource, Size size);
// 初始化
this._tableView = new cc.TableView(this, cc.size(200, 500));
// 设置滚动方向
// cc.SCROLLVIEW_DIRECTION_HORIZONTAL = 0;
// cc.SCROLLVIEW_DIRECTION_VERTICAL = 1;
this._tableView.setDirection(cc.SCROLLVIEW_DIRECTION_VERTICAL);
// 添加交互
this._tableView.setTouchEnabled(true);
// 设置锚点
this._tableView.setAnchorPoint(0, 5);
// 位置
this._tableView.setPosition(170, 640);
// this._tableView.x = 0;
// this._tableView.y = 0;
// 设置委托
this._tableView.setDelegate(this);
// 刷新列表
this._tableView.reloadData();
// tableView填充方式 （如果数组是[1, 2, 3]，那么使用TABLEVIEW_FILL_BOTTOMUP会展示3，2，1由上向下）
// cc.TABLEVIEW_FILL_TOPDOWN = 0; 由上往下排序
// cc.TABLEVIEW_FILL_BOTTOMUP = 1; 又下往上排序
this._tableView.setVerticalFillOrder(cc.TABLEVIEW_FILL_TOPDOWN);
/**
* 设置cell个数
* @paramer table 列表
*/
numberOfCellsInTableView: function (table) {
return 20;
},
/**
* 添加Cell
* @paramer table 列表
* @paramer idx 索引
*/
tableCellAtIndex: function (table, idx) {
var cell = table.dequeueCell();
// var item = this._listArray[idx];
if (!cell) {
cell = new CustomTableViewCell();
}else{
cell.removeAllChildren();
}
var _tip_txt = new cc.LabelTTF("", "Arial", 20,cc.size(550, 125),0,cc.VERTICAL_TEXT_ALIGNMENT_CENTER);
cell.addChild(_tip_txt);
return cell;
},
/**
* 设置点击cell后的回调函数
* @paramer table 列表
* @paramer cell 行
*/
tableCellTouched: function (table, cell) {
// cell的下标
var index = cell.getIdx();
},
/**
* 设置cell大小
* @paramer table 列表
* @paramer idx 索引
*/
tableCellSizeForIndex: function (table, idx) {
return cc.size(600, 60);
},
/**
* 交互事件
* @paramer sender
* @paramer type
*/
touchEvent: function (sender, type) {
if (type == ccui.Widget.TOUCH_ENDED) {
}
},
var CustomTableViewCell = cc.TableViewCell.extend({
draw: function (ctx) {
this._super(ctx);
}
});
// 问题解决：点击列表cell的时候，如果直接执行界面转换会导致tableView被释放，被释放的tableView会执行onTouchEnded方法，从而导致应用崩溃。
// 执行延迟跳转，可以让tableView将剩余的方法调用完才进行跳转，解决崩溃。
setTimeout(function () {
game.Proceduar.switch(game.proceduar.MyNiuCircle);
}.bind(this), 30);
RichText(富文本)
// 初始化
var richText = new ccui.RichText();
// 忽略内容自适应
richText.ignoreContentAdaptWithSize(false);
// 设置位置
richText.setPosition(this.width / 2, 520);
// 宽高
richText.width = 340;
richText.height = 46;
// 三种元素分别是文字、图片、普通节点（用普通节点就可以挂从Node派生的类）。
// tag貌似内部没有用，外部也访问不了，其他参数容易理解。
static RichElementText* create(int tag, const Color3B& color, GLubyte opacity, const std::string& text, const std::string& fontName, float fontSize);
static RichElementImage* create(int tag, const Color3B& color, GLubyte opacity, const std::string& filePath);
static RichElementCustomNode* create(int tag, const Color3B& color, GLubyte opacity, Node* customNode);
// 创建样式
var re1 = new ccui.RichElementText(1, cc.color.WHITE, 255, '这是白色白色白色白色白色白色', '黑体', 24);
var re2 = new ccui.RichElementText(2, cc.color.RED, 255, '这是红色红色红色红色红色红色红色', '楷体', 24);
var reimg = new ccui.RichElementImage(3, cc.color.WHITE, 255, 'res/pic/CloseNormal.png');
var renode = new ccui.RichElementCustomNode(4, cc.color.WHITE, 255, new cc.Sprite('res/pic/CloseNormal.png'));
// 增删元素
void insertElement(RichElement* element, int index);
void pushBackElement(RichElement* element);
void removeElement(int index);
void removeElement(RichElement* element);
// 添加样式
richText.pushBackElement(re1);
richText.pushBackElement(re2);
richText.pushBackElement(reimg);
richText.pushBackElement (renode);
// 添加到界面
this.addChild(richText);
富文本
EditBox（输入框，可自动将界面上移）
// 初始化
textfield = new cc.EditBox(cc.size(100, 100), new cc.Scale9Sprite(""))
// 控件名
textfield.setName("");
// 设置锚点
textfield.setAnchorPoint(0, 0);
// 设置位置
textfield.setPosition(0, 0);
// 设置代理
textfield.setDelegate(this);
// 最大长度
textfield.setMaxLength(100);
// 占位符
textfield.setPlaceHolder("输入聊天内容");
// 占位符字体色
textfield.setPlaceholderFontColor(cc.color(53,53,53))
// 字体色
textfield.setFontColor(cc.color(53,53,53))
//修改为不使用密文
textfield.setInputFlag(cc.EDITBOX_INPUT_FLAG_SENSITIVE);
//设置不可换行,可以输入任意文字
textfield.setInputMode(cc.EDITBOX_INPUT_MODE_SINGLELINE);
this.addChild(this._chatTextField);
// 返回键类型
cc.KEYBOARD_RETURNTYPE_DEFAULT = 0; // 默认
cc.KEYBOARD_RETURNTYPE_DONE = 1; // 完成
cc.KEYBOARD_RETURNTYPE_SEND = 2; // 发送
cc.KEYBOARD_RETURNTYPE_SEARCH = 3 ; // 搜索
cc.KEYBOARD_RETURNTYPE_GO = 4; // 前往
// 输入键盘类型
cc.EDITBOX_INPUT_MODE_ANY = 0; // 任何类型
cc.EDITBOX_INPUT_MODE_EMAILADDR = 1; // 允许用户输入电子邮件地址
cc.EDITBOX_INPUT_MODE_NUMERIC = 2; // 允许用户输入一个整数值。
cc.EDITBOX_INPUT_MODE_PHONENUMBER = 3; // 允许用户输入电话号码
cc.EDITBOX_INPUT_MODE_URL = 4; // 允许用户输入一个URL。
cc.EDITBOX_INPUT_MODE_DECIMAL = 5; // 允许用户输入实数值,允许小数点扩展
cc.EDITBOX_INPUT_MODE_SINGLELINE = 6; // 允许用户输入任何文字，除了换行符。
// 输入框上的文字
cc.EDITBOX_INPUT_FLAG_PASSWORD = 0; // 表示输入的文本是应该是的机密数据
cc.EDITBOX_INPUT_FLAG_SENSITIVE = 1; // 表示输入的文本是敏感数据
cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_WORD = 2; // 这个标志是一个提示，在文本编辑过程中
cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_SENTENCE = 3; // 这个标志是一个提示，在文本编辑过程中
cc.EDITBOX_INPUT_FLAG_INITIAL_CAPS_ALL_CHARACTERS = 4; // 自动大写所有字符
Button
// 初始化，参数分别是默认状态、按下状态、禁用状态下的图片
var button = new ccui.Button("", "", "");
// 锚点
button.setAnchorPoint(0.5, 0.5);
// 设置图片(正常情况下的图片、点击时的图片、禁用时的图片)
button.loadTextures("res/a.png", "res/b.png", "res/c.png");
// 位置
button.setPosition(10, 10);
// 设置是否伴随点击缩放按钮图片
emojiBtn.setPressedActionEnabled(false);
// 按钮标题
button.setTitleText(emojiList[i]);
// 按钮标题大小
button.setTitleFontSize(40);
// 按钮标题颜色 两者相同
button.setTitleColor(cc.color(53,53,53))
button.setColor(cc.color(0, 0, 0, 255));
// 设置字体样式
button.setTitleFontName("宋体,微软雅黑");
// 允许按钮穿透（解决在tableView上无法滚动的问题）
button.setSwallowTouches(false);
this.addChild(button);
// 透明按钮（先设置图片，然后再调用loadTextures，参数传入""）
var copy_button = new ccui.Button(this.btn_back_img, this.btn_back_img, "", 1);
copy_button.loadTextures("", "", "");
延时调用
// 每三秒调用一次
var interval = setInterval(function () {
}.bind(this), 1000 * 3);
// 结束定时调用
clearInterval(interval);
// 三秒后调用，仅调用一次
setTimeout(function(){
}.bind(this), 1000 * 3);
LayerColor(颜色图层)
var layer = new cc.LayerColor(cc.color(52,52,52,120));
this.addChild(layer);
Slider(可以做成进度条)
var loadingBar = new ccui.Slider();
// 设置slider背景图片
loadingBar.loadBarTexture("res/Circle/Circle_Hongbao/17.png");
// 设置slider进度图片
loadingBar.loadProgressBarTexture("res/Circle/Circle_Hongbao/17.png");
// 设置slider滑动按钮图片
// 参数：1. 正常状态下的纹理贴图 2.被选中状态下的纹理贴图 3.禁用状态下的纹理贴图
loadingBar.loadSlidBallTextures("res/4.png", "res/4.png" ,"res/4.png");
loadingBar.setAnchorPoint(0, 0);
loadingBar.setPosition(currentX + 10, currentY);
// 设置进度0~100
loadingBar.setPercent(100);
// 视图旋转角度
loadingBar.rotation = angle;
this.addChild(loadingBar);
旋转动画/抖动动画
var hongbaoAnimation = {
// 抖动时间
duration:0,
// 已抖动时间
dtCost:0.0,
// X轴抖动范围
shakeStrengthX:0,
shakeStrengthY:0,
// 抖动节点
shakeNode :null,
// 抖动节点初始位置
nodeInitialPos :null,
// 定时器绑定回调
bindCallback :null,
// 定时器唯一键(WEB)
key :null,
pause:false,
/**
* 自定义抖动效果，用于WEB和JSB环境
* @param {float}duration 抖动时间
* @param {number}shakeStrengthX X轴抖动幅度
* @param {number}shakeStrengthY Y轴抖动幅度
* @param {cc.Node}shakeNode 抖动节点
* @param {string}key 唯一key(WEB环境)
* @example:
* var shakeAction = new Shake2(0.5,20,20,node,"shakeKey");
* shakeAction.shake();
*/
startAnimation:function(duration, shakeStrengthX, shakeStrengthY, shakeNode, key) {
this.duration = duration;
this.shakeStrengthX = shakeStrengthX;
this.shakeStrengthY = shakeStrengthY;
this.shakeNode = shakeNode;
this.nodeInitialPos = shakeNode.getPosition();
this.key = key;
this.shake();
},
stopAnimation:function(shakeNode) {
this.shakeNode = shakeNode;
this.shakeNode.unscheduleUpdate();
this.shakeNode.unscheduleAllCallbacks();
this.shakeNode.rotation = 0;
},
shake:function() {
this.bindCallback = this.doSchedule.bind(this);
this.shakeNode.unschedule(this.bindCallback);
if(cc.sys.isNative){
this.shakeNode.schedule(this.bindCallback, 0.1, cc.REPEAT_FOREVER, 0.5);
}else{
this.shakeNode.schedule(this.bindCallback, 0.1, cc.REPEAT_FOREVER, 0.5, this.key);
}
},
doSchedule:function(dt) {
if (!this.pause) {
var dt2 = dt * 50;
var randX = this.getRandomStrength(-this.shakeStrengthX,this.shakeStrengthX);
var randY = this.getRandomStrength(-this.shakeStrengthY,this.shakeStrengthY);
// this.shakeNode.setPosition(cc.pAdd(this.nodeInitialPos,cc.p(randX,randY)));
this.shakeNode.rotation = randX;
this.dtCost = this.dtCost + parseFloat(parseFloat(dt).toFixed(2));
}
if(this.dtCost >= this.duration){
this.pause = true;
this.dtCost = 0;
// this.shakeNode.unschedule(this.bindCallback);
// this.shakeNode.setPosition(this.nodeInitialPos);
this.shakeNode.rotation = 0;
setTimeout(function(){
cc.log("进来了");
this.pause = false;
}.bind(this), 1000 * 2);
}
},
// 获取两个数间的随机值
getRandomStrength:function(min,max) {
return Math.random()*(max-min+1)+min;
},
};
// 使用
var view = ...; // 要旋转的视图
// 开始动画
hongbaoAnimation.startAnimation(1, 10, 3, view, "shakeKey");
// 结束动画
hongbaoAnimation.stopAnimation(view);
左右抖动动画
/**
* 抖动红包
* @param node 要旋转的视图
* @param angle 角度 缺省10度摆动
*/
game.ui.shake = function(node, angle){
this.shake = true;
// 开始抖动动画
this.action = cc.sequence(
// 第一个参数：秒，第二个参数：绕x轴转动， 第三个参数：绕y轴转动
cc.rotateBy(0.2, -10||(-angle),-10||(-angle)),
cc.rotateBy(0.2, 20||2*angle,20||2*angle),
cc.rotateBy(0.2, -20||(-2*angle),-20||(-2*angle)),
cc.rotateBy(0.2, 10||angle,10||angle),
cc.delayTime(0.7)
);
this.action.setTag(1717);
// 开始执行动画
node.runAction(this.action.repeatForever());
/**
* 停止抖动动画
* @param restore 是否恢复到原来的角度
*/
this.stop = function(restore){
if(this.shake)
node.stopAction(this.action);
if (restore) {
node.rotation = 0;
}
this.shake = false;
};
};
// 需要旋转的视图
var view = game.findUI(node, "view");
// 初始化一个旋转控制对象
this.shake = new game.ui.shake(view);
// 停止
this.shake.stop(true);
LabelTTF（自动换行）
/**
* LabelTTF初始化
* @param text 文本文本内容
* @param fontFilePath ttf字体文件
* @param fontSize 字体大小
* @param dimensions 控件大小
* @param hAlignment 文本横向对齐方式
* cc.TEXT_ALIGNMENT_CENTER -- 居中对齐
* cc.TEXT_ALIGNMENT_RIGHT -- 居右对齐
* cc.TEXT_ALIGNMENT_LEFT -- 居左对齐
* @param vAlignment 文本纵向对齐方式
* cc.VERTICAL_TEXT_ALIGNMENT_TOP, -- 顶部对齐
* cc.VERTICAL_TEXT_ALIGNMENT_CENTER, -- 居中对齐
* cc.VERTICAL_TEXT_ALIGNMENT_BOTTOM, -- 底部对齐
*/
static Label * createWithTTF(const std::string& text,
const std::string& fontFilePath,
float fontSize,
const Size& dimensions = Size::ZERO,
TextHAlignment hAlignment = TextHAlignment::LEFT,
TextVAlignment vAlignment = TextVAlignment::TOP);
// 初始化
var txt = new cc.LabelTTF("", "Arial", 20,cc.size(550, 125),0,cc.VERTICAL_TEXT_ALIGNMENT_CENTER);
// 设置位置
txt.setPosition(640,200);
// 视图大小
txt.setDimensions(100, 100);
// 设置字体颜色
txt.color = cc.color(252, 211, 84, 255);
// 设置内容
txt.setString("内容");
// 文字大小
txt.setFontSize(100);
// 文字对齐
// cc.TEXT_ALIGNMENT_LEFT;
// cc.TEXT_ALIGNMENT_RIGHT;
txt.textAlign = cc.TEXT_ALIGNMENT_CENTER;
txt.setHorizontalAlignment(cc.TEXT_ALIGNMENT_CENTER);
txt.setVerticalAlignment(cc.VERTICAL_TEXT_ALIGNMENT_CENTER);
// 文字显示范围
txt.setDimensions(width, height);
// 忽略anchor的设置
txt.ignoreAnchor = true; // 设置后，label的起始点在左下角
// 添加到图层
this.addChild(txt);
// 文字定义：
var text = new cc.LabelTTF(“文字”, def);
// def 是这样定义:
var def = new cc.FontDefinition(); // 声明文字定义
def.fontName = "STYuanti-SC-Regular"; // 字体
def.fontSize = 20; // 字号大小
def.alignment = cc.TEXT_ALIGNMENT_CENTER; // 文字对齐
def.vertAlignment = cc.VERTICAL_TEXT_ALIGNMENT_CENTER;
def.fillStyle = cc.color("#FFFFFF"); // 字体(内部)颜色
def.strokeEnabled = true; // 开启文字描边效果
def.strokeStyle = cc.color("#535D39"); // 描边的颜色
def.lineWidth = 3; // 字体的宽度
def.shadowEnabled = true; // 开启阴影效果
def.shadowOffsetX = 12; // 阴影X轴效果
def.shadowOffsetY = 12; // 阴影Y轴效果
