cocos2d 工具使用方法介绍(包含字体，图片，粒子等工具)

1.Tiled Map:游戏关卡制作

下载地址：http://download.csdn.net/detail/chuanyu/8894901

2.TexturePacker:图片打包下载地址：http://download.csdn.net/detail/chuanyu/8894529

cocos2d-html5 使用方法

生成的资源文件： test.plist ,    test.png

在resource.js下面增加：

var p_list = "res/test.plist";

var p_png = "res/test.png";

var g_resources = [

    {src:p_list},

    {src:p_png}

]

然后在使用的地方调用：

        //texturePacker

        console.log("texturePacker begin");

        cc.SpriteFrameCache.getInstance().addSpriteFrames(p_list);

        var test1 = cc.Sprite.createWithSpriteFrameName("27.jpg");

        test1.setPosition(150,140);

        this.addChild(test1);

        console.log("texturePacker end");

3. ParticleDesigner:粒子编辑器

下载地址：http://download.csdn.net/detail/chuanyu/8894529

cocos2d-html5使用方法：

利用ParticleEditor生成2个文件，firework.plist和stars.png

然后在resource.js下面增加：

//particle

var par_list = "res/firework.plist";

var par_png = "res/stars.png";

var g_resources = [

    //image

    {src:par_list},

    {src:par_png}

]

最后在使用的地方调用：

//particle

        console.log("particle begin");

        var emitter = cc.ParticleSystem.create(par_list);

        emitter.setPosition(cc.p(size.width/2,size.height/2));

        this.addChild(emitter, 10);

        console.log("particle end");

4.BMPFont：美术字 下载地址：http://download.csdn.net/detail/chuanyu/8894283
http://www.7edown.com/soft/down/soft_46015.html http://www.2cto.com/kf/201403/286776.html http://blog.csdn.net/keshuiyun/article/details/9960589
cocos2d-html5使用方法：

生成的资源文件： 234.fnt,   234_0.png

在resource.js下面增加：   

var f_fnt = "res/234.fnt";

var f_png = "res/234_0.png";

var g_resources = [

    {src:f_fnt},

    {src:f_png}

]

然后在使用的地方调用：

    //测试

    test:function(){

        /** 使用字体位图 **/

        //创建位图 第一个参数要和在BMFont中载入的文字中存在的

        console.log("test begin");

        var label = cc.LabelBMFont.create("测试",f_fnt);

        label.setPosition(cc.p(size.width/2,size.height-50));

        this.addChild(label,10);

        console.log("test end");

    },



5.cocos  studio 工具的使用：



在代码中使用：

cc.log("scene is begin");
var mainscene = ccs.load(res.MainScene_json);
this.addChild(mainscene.node);

var btn = ccui.helper.seekWidgetByName(mainscene.node,"Button_1");
btn.addTouchEventListener(this.selectedStateEvent,this);
cc.log("scene is over");

selectedStateEvent:function(sender, type){
switch(type){
case ccui.Widget.TOUCH_BEGAN:
cc.log("touch begin");
break;
case ccui.Widget.TOUCH_MOVED:
cc.log("touch moved");
break;
case ccui.Widget.TOUCH_ENDED:
cc.log("touch end");
break;
case ccui.Widget.TOUCH_CANCELED:
cc.log("touch cancle");
break;
default:
break;
}
}

最后在浏览器中的效果：