cocos2d-js总结

cocos2d-js总结

安装和目录介绍：

• 下载引擎包 http://www.cocos2d-x.org/download
• 安装Cocos Console
• 工程创建 cocos new -l js ProjectName 生成ProjectName文件夹
• web打包命令 ：cocos compile -p web -m release

frameworks 包含Web引擎以及Native引擎

res文件夹存放资源文件

src文件夹是主要的程序代码

app.js是实现游戏场景的JavaScript文件

resource.js在src文件夹中，定义资源对应的变量

config.json保存模拟器运行配置信息

project.json是项目的配置信息

index.html是Web工程的首页

main.js与首页index.html对应的JavaScript文件，负责启动游戏场景

---

cocos常用的一些标签 封装成方法

1.创建文字的方法

setTextPos: function (position) {
    var range = position.range || ""; // 文字对齐的范围
    var pos =  position.pos || ""; // 文字对齐的方式 
    var period = new cc.LabelTTF(position.text, "",  position.fontSize,range,pos);
    var tag = position.tag || "";
    period.attr({
        x: position.X,
        y: position.Y,
        fontName: position.fontName || "",
        visible: position.visible == undefined ? true : position.visible
    });
    if (position.flag || position.Mcolor || position.Mwidth) { 
        period.strokeEnabled = position.flag; // 开启文字描边效果
        period.strokeStyle = cc.color(position.Mcolor); // 描边的颜色
        period.lineWidth = position.Mwidth; // 字体的宽度
    }
    period.setColor(position.color);
    period.setSkewX(position.setSkewX || 0) // 设置文字倾斜
    this.addChild(period, position.zOrder, tag);
},
// 文字对其方式
1.TEXT_ALIGNMENT_LEFT // 居左
2.TEXT_ALIGNMENT_RIGHT // 居右
3.TEXT_ALIGNMENT_CENTER // 居中

2.创建图片精灵的方法

setSprite: function (option) {
    // 设置筹码
    var img = option.img; // 图片
    var zOrder = option.zOrder; // 显示层级
    var tag = option.tag || ""; // tag值
    var scale = option.scale || 1; // 缩放值
    var chip = new cc.Sprite(img); // 创建精灵
    // 设置精灵属性
    chip.attr({
        x: option.positionX,
        y: option.positionY,
        scale: scale,
        visible:option.visible == undefined ? true : option.visible
    }) 
    this.addChild(chip, zOrder, tag)
},

3.创建字体图片

createText: function (option) {
      var tag = option.tag || "";
      var helloLabel = new cc.LabelBMFont(option.text, option.fnt);
      helloLabel.attr({
          x: option.X,
          y: option.Y,
          scale: option.scale || 1
      });
      this.addChild(helloLabel, option.zOrder, tag);
  },
},
// fnt图片中必须包含text值。使用GlyphDesigner软件制作自体图片。

4.请求的方法

function getRequestData(request) {
     var xhr = cc.loader.getXMLHttpRequest();
     xhr.open("GET", request.url, true);
     xhr.onreadystatechange = function () {
         if (xhr.readyState == 4 && (xhr.status >= 200 && xhr.status <= 207)) {
             if (JSON.parse(xhr.responseText).code == 0) {
                 request.handler_success(JSON.parse(xhr.responseText));
             } else {
                 request.handler_error(JSON.parse(xhr.responseText));
             }
         }
     };
     xhr.send();
 }
}

---