cocos2d-js

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);
cocos2d-js_第1张图片
富文本

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轴效果

你可能感兴趣的:(cocos2d-js)