cocos js 怎样做出按钮选中效果

cocos js 做出按钮选中效果示例睁吵：

一，首先使用cocos新建一个Cocos2d-js的新项目，然后再cocostudio中创建一个场景，在场景中添加三个按钮分别设置三态的图片

二告桥，打开编辑器，实现代码如下：

var HelloWorldLayer = cc.Layer.extend({

ctor:function () {

this._super()

//导入cocostudio中拼好的界面

mainscene = ccs.load(res.MainScene_json).node

this.addChild(mainscene)

this.teamButton = ccui.helper.seekWidgetByName(mainscene,"Button_0")

var btn2 = ccui.helper.seekWidgetByName(mainscene,"Button_1")

var btn3 = ccui.helper.seekWidgetByName(mainscene,"Button_2")

//先默认设置一个按钮为选中状态   this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT)

this.teamButton.setEnabled(false)

var teamInfo = this.teamButton

this.teamButton.addTouchEventListener(this.selectedBtn1,this)

btn2.addTouchEventListener(this.selectedBtn2,this)

btn3.addTouchEventListener(this.selectedBtn3,this)

return true

},

selectedBtn1: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========商店界面")

}

},

selectedBtn2: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========卡牌袜早猛界面")

}

},

selectedBtn3: function (sender, type) {

if(type == ccui.Widget.TOUCH_ENDED){

this.callBack(sender)

cc.log("==========战斗界面")

}

},

callBack: function (sender) {

if (this.teamButton == sender){

return

}else{

this.teamButton.setBrightStyle(ccui.Widget.BRIGHT_STYLE_NORMAL)

this.teamButton.setEnabled(true)

sender.setBrightStyle(ccui.Widget.BRIGHT_STYLE_HIGH_LIGHT)

sender.setEnabled(false)

this.teamButton = sender

}

},

})

var HelloWorldScene = cc.Scene.extend({

onEnter:function () {

this._super()

var layer = new HelloWorldLayer()

this.addChild(layer)

}

})

三，运行就可以查看界面，点击不同的按钮显示不同的输出结果

[Log] ==========商店界面 (CCDebugger.js, line 331)

[Log] ==========卡牌界面 (CCDebugger.js, line 331)

[Log] ==========战斗界面 (CCDebugger.js, line 331)

cocos2d为我们提供了好用的摇杆控制器，主要是对ZJoystick.h和ZJoystick.m的添加，实现了如下图的功能。通过摇杆亮轮可以控制图中精灵的移动。（但是还有一个技术性问题亟待解决，就是精灵移动后会有一个重影留在初始位置）

2.摇杆的实现

1） 将资源中的ZJoystick文件夹加到工程中（页面下方提供下载地址）， 精灵的添加以及移动前面已经讲了，不知道的同学可以看教程四。工程名字为ControlWalking。

2）修改HelloWorldLayer.h文件。加入一些需要孝键备的节点参数。

#import <GameKit/GameKit.h>

/巧毁/ When you import this file, you import all the cocos2d classes

#import "cocos2d.h"

#import "ZJoystick.h"

// HelloWorldLayer

@interface HelloWorldLayer : CCLayer<ZJoystickDelegate>

{

CCTexture2D *spriteTexture_ // weak ref

//b2World* world // strong ref

//GLESDebugDraw *m_debugDraw // strong ref

//CCTMXTiledMap *_gameMap

CCSprite*_player//是精灵，图中的熊猫

}

// returns a CCScene that contains the HelloWorldLayer as the only child

+(CCScene *) scene

@end

3) 修改HelloWorldLayer.m文件。

首先，在HelloWorld接口中定义摇杆函数

　

@interface HelloWorldLayer()

//-(void) initPhysics

-(void) initJoystick

@end

接着，添加initJoystick函数，方便在init中调用。

　

-(void) initJoystick{

ZJoystick *_joystick2= [ZJoystick joystickNormalSpriteFile:@"JoystickContainer_norm.png"

selectedSpriteFile:@"JoystickContainer_trans.png"

controllerSpriteFile:@"Joystick_norm.png"]

_joystick2.position = ccp(_joystick2.contentSize.width/2 + 10,

_joystick2.contentSize.height/2 + 10)

_joystick2.delegate = self //Joystick Delegate

_joystick2.controlledObject = _player

_joystick2.speedRatio= 2.0f

_joystick2.joystickRadius= 50.0f //added in v1.2

_joystick2.joystickTag = 999

[self addChild:_joystick2]

}

下一步，添加Joystick的一些属性，也直接写在HelloWorldLayer.m文件里。

#pragma mark - zJoystick delegate methods

-(void)joystickControlBegan {

// CCLOG(@"Joystick Began Controlling")

}

-(void)joystickControlMoved {

// CCLOG(@"Joystick Move Controlling")

}

-(void)joystickControlEnded {

// CCLOG(@"Joystick End Controlling")

}

-(void)joystickControlDidUpdate:(id)joystick toXSpeedRatio:(CGFloat)xSpeedRatio toYSpeedRatio:(CGFloat)ySpeedRatio{

ZJoystick *zJoystick = (ZJoystick *)joystick

if (zJoystick.joystickTag == 999) {

CGFloat xPos = _player.position.x

CGFloat yPos = _player.position.y

_player.position = ccp(xPos + xSpeedRatio, yPos + ySpeedRatio)//定义精灵的移动方式

}

}

@end

最后一步就是要修改，init函数。前提是我们已经添加完成精灵（也就是图中的熊猫，前面第四章讲了）。

其实只要将精灵对象付给头文件中定义的_player，再调用一下前面定义的initJoystick就可以了。

1

2

_player=panda//panda为自己定义的精灵对象

[self initJoystick]//调用initJoystick函数

cocos2d-x 是一款基于 c++/Opengl 的强劲跨平台引擎，通过一次编码，你可以同时用于 android ， iOS 等大多数主流平台。这使得多平台的开发更加方便。

虽然比起带团 cocos2d-x 的有名的兄弟 -cocos2d-iphone ， -x 还很年轻并缺少教程，但是由于团队的不懈努力，使得 -x 逐渐完善并不断被市场认可。

如果你想把 UIKit 折腾进 Cocos2d-x ， Github 有一个开源工程，推荐给大家学习没袜一下： open source project on GitHub .

相反，如果你想把 coocs2d-x 折腾进 UIKit (UIVIewController)，以下是详细步骤：

0. 废话少说，这里是本文的示例代码： Sample project Cocos2dxOnUikit.zip .

1.我们有一个 UIKit 工程，同时希望在某一个 view controller中显示Cocos2d-x （OpenGL view）。

2. 下载 Cocos2d-x 代码（哥说了句废话，你知道该去哪下载的）

3. 解压（废话 again ）

4. 创建工程，如果你不会，推荐看看泰然以往的教程。

5. 移除cocos2dx/platform/目录下的CCImage.cpp 和 CCThread.cpp

6. 打开 xcode 的项目配置，点击 build Settings ，在 “ Library Search Paths ” 参数添加$(SRCROOT)/cocos2dx/platform/third_party/ios/libraries/(为了在cocos2dx中使用curl库)

7. 接着，在“ Headers Search Paths ” 参数添加

$(SRCROOT)/cocos2dx and $(SDKROOT)/usr/include/libxml2 (为了蠢察橘使用libxml 库)

8. 在 “ Other C++ Flags ” 参数添加-DCC_UNDER_IOS

9.从HelloWorld示例工程中拷贝AppDelegate.cpp 和 AppDelegate.h并添加到我们现在这个工程中。

#import <UIKit/UIKit.h>是objective-c文件才能使用的，你不会从c++文件调用了吧。

如果是这个原因，你可以换用cocos2d-iPhone。

或者写wrapper class（与native Objective-C class 交流）需要写wrapper class可以继续问。

---