js2dx --- UI1

来源：互联网发布：控制孩子上网软件编辑：程序博客网时间：2024/05/16 04:39

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