js2dx --- UI1

1.添加精灵

this.addSprite(image, cc.p(0,0), 1, cc.p(0, 0), this，1)   way没有在内存里读取图片

addSprite:function(name, pos, zOrder, anchor, target, way){
        var sprite;
        if(way) sprite= cc.Sprite.create(name);
        else sprite= cc.Sprite.createWithSpriteFrameName(name);
        sprite.setAnchorPoint(anchor);
        sprite.setPosition(pos);
        target.addChild(sprite, zOrder);
        return sprite;
    },

2.Scale9Sprite

有利于图片的重用和扩展

this.addNineSprite(s_extensions_buttonBackground, cc.p(screenSize.width / 2.0, screenSize.height / 2.0),cc.size(total_width + 14, height + 14));

addNineSprite:function(image, pos, size){
        var background = cc.Scale9Sprite.create(image);  符合九宫格的图片
        background.setContentSize(size);                             设定框的大小
        background.setPosition(pos);
        this.addChild(background);
        return background;
    }

2.添加文字Label

this.addLabel("1232", cc.p(0, 0), 4, "Arial",  39, cc.c3b(255, 255, 255), cc.p(1, 0.5), this);
addLabel:function(string, pos, zOrder, type, fontSize, color, anchor, target){
        var label = cc.LabelTTF.create(string, type, fontSize);
        label.setPosition(pos);
        label.setAnchorPoint(anchor);
        label.setColor(color);
        target.addChild(label, zOrder);
        return label;
    },

竖着字体

cc.Vertical.create = function(string, font, fontSize, color){

    var array=string.split("");

    var newString="";

    for(var i=0;i<array.length;i++){

        newString += array[i];

            newString += '\n';

    }

    var label=cc.LabelTTF.create(newString, font, fontSize);

    label.setColor(color);

    return label;

}

3.LabelBMFont 图片、数字、字母 fnt

this.addLabelBM("123",  fnt, 5, cc.p(100, 40), 1, this);

addLabelBM:function(content, fnt, zOrder, pos, scale, target){
        var labelBM = cc.LabelBMFont.create(content, fnt, 20, cc.TEXT_ALIGNMENT_CENTER);
        labelBM.setScale(scale);
        labelBM.setPosition(pos);
        target.addChild(labelBM, zOrder);
        return labelBM;
    },

4.添加图片按钮

1.普通按钮

this.addSpriteMenu(img_common_close0, img_common_close1, cc.p(screenWidth/1.2+4, screenHeight/1.35+13), 4, this.closeMenu, this);

addImageMenu:function(image1, image2, pos, zOrder, callBack, target, way){
        var sprite1;
        var sprite2;
        if(way){
            sprite1 = cc.Sprite.create(image1);
            sprite2 = cc.Sprite.create(image2);
        }else{
            sprite1 = cc.Sprite.createWithSpriteFrameName(image1 + png_suffix);
            sprite2 = cc.Sprite.createWithSpriteFrameName(image2 + png_suffix);
        }


        var closeItem = cc.MenuItemSprite.create(sprite1, sprite2, callBack,this);
        closeItem.setAnchorPoint(cc.p(0.5, 0.5));
        closeItem.setPosition(pos);
        var menu = cc.Menu.create(closeItem);
        menu.setPosition(cc.p(0, 0));
        target.addChild(menu, zOrder);
        return closeItem;
    },

2.按钮不可用时显示的是一张图片，可用显示的是另外一张

var s1 = cc.Sprite.create("");

var s2 = cc.Sprite.create("");

var s3 = cc.Sprite.create("");

var menuItem = cc.MenuItemSprite.create(s1, s2, s3, this.methon, this);

menuItem.setPosition(cc.p(screenWidth/1.2-74, screenHeight/1.2-74));

var menu = cc.Menu.create(menuItem);

menu.setPosition(cc.p(0, 0));

this.addChild(menu, 4);

menuItem.setEnabled(false)  //显示最后一个图片s3

3.按钮图片文字整合一体

HeTi.create(this, function(), "tete", "", 20)

HeTi.create = function(target, callback, text, font_family, font_size){

    var btn1 = cc.Sprite.create(image1);

    var btn2 = cc.Sprite.create(image2);

    var text1 = cc.LabelBMFont.create(text,  font1);

    var text2 = cc.LabelBMFont.create(text, font1);

    text1.setPosition(cc.p(btn1.getContentSize().width/2,btn1.getContentSize().height/2-3));

    text2.setPosition(cc.p(btn2.getContentSize().width/2,btn2.getContentSize().height/2-3));

    btn1.addChild(text1);

    btn2.addChild(text2);

    var menuItem = cc.MenuItemSprite.create(btn1,btn2, callback, target);

    return menuItem;

}

改变此按钮上的文字

menuItem.getChildren()[0].getChildren()[0].setString(str);    得到的孩子是一个数组

4.合体按钮可以选择显示那个按钮

toggleItem = function(str) {

        var text1 = cc.LabelBMFont.create(str, font1);

        text1.setPosition(cc.p(1, 1));

        var text2 = cc.LabelBMFont.create(str, font1);

        text2.setPosition(cc.p(1, 1));

        var spriteNormal = cc.Sprite.create(image);

        var spriteNormal2 = cc.Sprite.create(image);

        var spriteSelected = cc.Sprite.create(image);

        var spriteSelected2 = cc.Sprite.create(image);

        var menuItemNormal = cc.MenuItemSprite.create(spriteNormal, spriteNormal2);

        menuItemNormal.addChild(text1);

        var menuItemSelected = cc.MenuItemSprite.create(spriteSelected, spriteSelected2);

        menuItemSelected.addChild(text2);

        var commonMenuItem = cc.MenuItemToggle.create(

            menuItemNormal,

            menuItemSelected

        );

        commonMenuItem.setAnchorPoint(cc.p(0, 0));

        return commonMenuItem;

    }

选中和平常两个效果

item.setSelectedIndex(1);

0.方法

重新设置按钮精灵图片

menuItem.setNormalImage(s1);

menuItem.setSelectedImage(s2);

5.动画 plist文件

var testPlist = cc.Sprite.extend({

    _testPlist:"test",

    init:function(){

        if(this._super())

        {

        var spriteFC=cc.SpriteFrameCache.getInstance();

        spriteFC.addSpriteFrames( plist文件 );

        var animate=cc.Animation.create();

        animate.addSpriteFrame(spriteFC.getSpriteFrame("0.png"));    //用 for 循环添加

        animate.addSpriteFrame(spriteFC.getSpriteFrame("1.png"));

        animate.addSpriteFrame(spriteFC.getSpriteFrame("2.png"));

        animate.addSpriteFrame(spriteFC.getSpriteFrame("3.png"));

        animate.addSpriteFrame(spriteFC.getSpriteFrame("4.png"));

        animate.addSpriteFrame(spriteFC.getSpriteFrame("5.png"));

        animate.addSpriteFrame(spriteFC.getSpriteFrame("6.png"));

        animate.addSpriteFrame(spriteFC.getSpriteFrame("7.png"));

        cc.AnimationCache.getInstance().addAnimation(animate, this._testPlist);    //注册动画事件名

        var aniSprite=cc.Sprite.createWithSpriteFrameName("0.png");    

        aniSprite.runAction(cc.MoveTo.create(4, cc.p(-screenWidth/2, screenWidth/2)));

        aniSprite.setPosition(cc.p(screenWidth/2,screenWidth/2));

        this.addChild(aniSprite, 5);

        var aniCircle=cc.AnimationCache.getInstance().getAnimation(this._testPlist);

        aniCircle.setDelayPerUnit(0.1);    //每隔0.1秒切换一个精灵

        var animateCircle=cc.Animate.create(aniCircle);

       aniSprite.runAction(cc.MoveTo.create(cc.p(screenWidth/2, screenHeight)) ,  3);    //精灵移动：就可以一边移动一边播放动画了

        aniSprite.runAction(cc.RepeatForever.create(animateCircle));

            return true;

        }

        return false;

    }

});

调用

var test = new testPlist();

test.init();

test.setPosition(cc.p(screenWidth/2,screenWidth/2));

this.addChild(test, 4);

6.EditBox

this.addEditBox(cc.size(130, 40), "res/extensions/green_edit.png", cc.p(220, 190), cc.c3b(255, 250, 0) ,"EditBox Sample", cc.EDITBOX_INPUT_FLAG_PASSWORD);

addEditBox:function(size, image, pos, color,content, flag){
        this._box2 = cc.EditBox.create(size, cc.Scale9Sprite.create(image));
        if(content != undefined) this._box2.setText(content);
        this._box2.setPosition(pos);
        if(flag != undefined) this._box2.setInputFlag(flag);
        this._box2.setFontColor(color);
//        if(holder != undefined) this._box2.setPlaceHolder("Tooltip:");  上面没有这个形参，不能使用
        this._box2.setDelegate(this);
        this.addChild(this._box2);
    },

delegate：

editBoxEditingDidBegin: function (editBox) {
    },

editBoxEditingDidEnd: function (editBox) {
    },

editBoxTextChanged: function (editBox, text) {
    },

editBoxReturn: function (editBox) {
    },

6.进度条progressto

时间、百分比

addProgress:function(time, percent, image, pos, target){
        var progressto = cc.ProgressTo.create(time, percent);//时间 百分比90
        var sprite = cc.Sprite.createWithSpriteFrameName(image + png_suffix);//运动图片，背景图片另加精灵
        var progress = cc.ProgressTimer.create(sprite);
        progress.setType(cc.PROGRESS_TIMER_TYPE_BAR);
        progress.setMidpoint(cc.p(0, 0));
        progress.setBarChangeRate(cc.p(1, 0));
        progress.setPosition(pos);
        target.addChild(progress);
        progress.runAction(progressto)
    },

6.预先加载资源   有待研究

var testCase = testNames[idx];

        var res = testCase.resource || [];

        cc.Loader.preload(res, function () {

            

        }, this);

7.Layer 和 Scene

var myLayer = cc.Layer.extend({
    init:function() {//2  界面
        var bRet = false;
        if (this._super()) {

            bRet = true;
        }

        return bRet;
    },
    ctor:function(can){//1  初始全局  new Object(can);
        this._super();
    },
    onEnter:function(){//3  将要进入
        this._super();
    },
    onExit:function(){//1000  释放
    }
});
myLayer.create = function() {
    var layer = new myLayer();
    if (layer && layer.init()) {
        return layer;
    }
    return null;
}

//Scene
var mydScene = cc.Scene.extend({
    onEnter:function () {
        this._super();
        var layer = new myLayer();
        layer.init();
        this.addChild(layer);
    }
});

//Scene 跳转
cc.Director.getInstance().director.replaceScene(new mydScene());