游戏客户端之cocostudio的界面库

cocostudio 提供ui编辑工具,以及相应的控件,可以衔接到cocos2dx的引擎。


一个测试工程可参考:http://blog.csdn.net/chenjiayi_yun/article/details/22595387

这个测试工程相较于一般的Cocos2d-x程序多了两个库,第一个是UI库,第二个是动画库。本文说的是界面库。

设计上:

(1)ui库的控件是继承于CocoWidget,每个CocoWidget有成员cocos2d::CCNode* m_pRenderNode,是真正的渲染节点.

CocoWidget每次添加子节点,是把另一个CocoWidget控件加入到孩子节点容器cocos2d::CCArray* m_children,并把子控件的渲染节点添加到自己的渲染节点下。

(2)渲染节点的纹理可以从精灵帧缓存(CCSpriteFrameCache::sharedSpriteFrameCache())或纹理缓存(CCTextureCache::sharedTextureCache())中加载.


参考:http://www.verydemo.com/demo_c441_i93779.html

本文内容:

1、cocostudio的控件

(1)CocoWidget控件基类

(2)CocoButton 按钮

(3)CocoTextButton  文本按钮

(4)CocoContainerWidget 控件管理容器

(5)CocoPanel 面板

(6)CocoScrollView 滚动列表

(7)CocoSlider 滑动条

2、BatchNodeManager 节点管理器

3、cocostudio的控件加入到场景

4、cocostudio ui编辑器的生成配置

5、控件事件回调


1、cocostudio的控件

(1)CocoWidget控件基类

class CocoWidget : public cocos2d::CCObject{
    public:
        CocoWidget();
        virtual ~CocoWidget();
        virtual void releaseResoures();
        static CocoWidget* create(); 
        virtual bool init();
        virtual void initNodes();
        virtual bool addChild(CocoWidget* child);
        virtual void addChildNode(CocoWidget* child);
        virtual void addElementNode(UIElement* element);//添加到子控件
        virtual void activeToUIInputManager();
        virtual void cleanFromUIInputManager();
        virtual void setWidgetZOrder(int z);
        virtual int getWidgetZOrder();
        virtual void reorderChild(CocoWidget* child);
        virtual void setNeedCheckVisibleDepandParent(bool need);
        virtual void setVisibleTouch(bool visible);
        virtual void addUIElement(UIElement* element);
        virtual bool removeChild(CocoWidget* child,bool cleanup);
        virtual void removeChildMoveToTrash(CocoWidget* child);
        virtual void removeChildReferenceOnly(CocoWidget* child);
        virtual void removeFromParentAndCleanup(bool cleanup);
        virtual void removeAllChildrenAndCleanUp(bool cleanup);
        virtual void removeAllUIElementsAndCleanUp(bool cleanup);
        int checkContainedChild(CocoWidget* child);
        void setBeTouchAble(bool able);
        bool getBeTouchAble();
        void setUpdateEnable(bool able);
        void setBeFocus(bool fucos);
        void didNotSelectSelf();

//触摸事件回调(根据控件的按下状态显示不同的精灵)
        virtual bool onTouchPressed(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchMoved(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchReleased(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchCanceled(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchLongClicked(cocos2d::CCPoint &touchPoint);
        void setPressState(int state);
        virtual void disable();
        virtual void active();
        virtual bool getActive();

//按下按钮,转换到状态的回调
        virtual void onPressStateChangedToNormal();
        virtual void onPressStateChangedToPressed();
        virtual void onPressStateChangedToDisabled();
        virtual cocos2d::CCRect getRect();//获取控件的大小
        virtual cocos2d::CCRect getRelativeRect();
        void getLocationInWindow();
        virtual CRenderNode* getValidNode();
        CRenderNode* getContainerNode();
        virtual bool pointAtSelfBody(cocos2d::CCPoint &pt);
        bool checkVisibleDependParent(cocos2d::CCPoint &pt);
        bool checkBeVisibleInParent();
        virtual void checkChildInfo(int handleState,CocoWidget* sender,cocos2d::CCPoint &touchPoint);
        void setVisible(bool visible);
        bool getVisible();
        virtual float getRelativeLeftPos();
        virtual float getRelativeBottomPos();
        virtual float getRelativeRightPos();
        virtual float getRelativeTopPos();

        CocoWidget* getWidgetParent();
        virtual bool getClipAble(){return false;};
        virtual void update(float dt){};
        CocoWidget* getChildByName(const char* name);//获取子控件
        CocoWidget* getChildByTag(int tag);
        //触发事件回调
        void pushDownEvent();
        void releaseUpEvent();
        void cancelUpEvent();
        void longClickEvent();
        //添加事件回调
        virtual void addPushDownEvent(cocos2d::CCObject* target,SEL_PushEvent selector);
        virtual void addMoveEvent(cocos2d::CCObject* target,SEL_MoveEvent selector);
        virtual void addReleaseEvent(cocos2d::CCObject* target,SEL_ReleaseEvent selector);
        
        //cocos2d property
        void setPosition(cocos2d::CCPoint pos);
        cocos2d::CCPoint getPosition();
        void setScale(float scale);
        float getScale();
        void setScaleX(float scaleX);
        float getScaleX();
        void setScaleY(float scaleY);
        float getScaleY();
        void setRotation(float rotation);
        float getRotation();
        virtual void setFlipX(bool flipX){this->m_pCContainerNode->setFlipX(flipX);};
        virtual bool isFlipX(){return this->getValidNode()->isFlipX();};
        virtual void setFlipY(bool flipY){this->m_pCContainerNode->setFlipY(flipY);};
        virtual bool isFlipY(){return this->getValidNode()->isFlipY();};
        virtual void setColor(int r,int g,int b){this->m_pCContainerNode->setColor(r, g, b);};
        virtual cocos2d::ccColor3B getColor(){return this->getValidNode()->getColor();};
        virtual void setOpacity(int opacity){this->m_pCContainerNode->setOpacity(opacity);};
        virtual int getOpacity(){return this->getValidNode()->getOpacity();};
        
        //widget prop   控件的属性
        float getAbsoluteScaleX();
        float getAbsoluteScaleY();
        void updateChildrenScaleXDirty(bool dirty);
        void updateChildrenScaleYDirty(bool dirty);
        bool getAbsoluteVisible();
        void updateChildrenVisibleDirty(bool dirty);
        
        //cocos action
        virtual void setActionManager(cocos2d::CCActionManager* actionManager);
        /**
         * Gets the CCActionManager object that is used by all actions.
         * @see setActionManager(CCActionManager*)
         * @return A CCActionManager object.
         */
        virtual cocos2d::CCActionManager* getActionManager();
        /**
         * Executes an action, and returns the action that is executed.
         *
         * This node becomes the action's target. Refer to CCAction::getTarget()
         * @warning Actions don't retain their target.
         *
         * @return An Action pointer
         */
        cocos2d::CCAction* runAction(cocos2d::CCAction* action);
        /**
         * Stops and removes all actions from the running action list .
         */
        void stopAllActions(void);
        /**
         * Stops and removes an action from the running action list.
         *
         * @param An action object to be removed.
         */
        void stopAction(cocos2d::CCAction* action);
        /**
         * Removes an action from the running action list by its tag.
         *
         * @param A tag that indicates the action to be removed.
         */
        void stopActionByTag(int tag);
        /**
         * Gets an action from the running action list by its tag.
         *
         * @see setTag(int), getTag().
         *
         * @return The action object with the given tag.
         */
        cocos2d::CCAction* getActionByTag(int tag);
    protected:
        bool m_bEnabled;
        bool m_bVisible;
        bool m_bActived;
        bool m_bFocus;
        bool m_bBeTouchEnabled;
        int m_nWidgetZOrder;
    
        CocoWidget* m_pWidgetParent;
        
        int m_nCurPressState;
        int m_nPrevPressstate;
        bool m_bUpdateAble;
        CRenderNode* m_pCContainerNode;
        float m_fContentSizeWidth;
        float m_fContentSizeHeight;
        
        cocos2d::CCPoint m_locationInWindow;
        cocos2d::CCSize m_contentSize;
        cocos2d::CCRect m_rect;
        cocos2d::CCRect m_relativeRect;
        
        cocos2d::CCArray* m_UIElements;
        bool m_bNeedCheckVisibleDependParent;
        bool m_bVisibleTouch;
        CC_SYNTHESIZE_READONLY(cocos2d::CCArray*, m_children, Children);
        CC_SYNTHESIZE_READONLY(cocos2d::CCPoint,m_touchStartPos,TouchStartPos)
        CC_SYNTHESIZE_READONLY(cocos2d::CCPoint,m_touchEndPos,TouchEndPos)
        CC_SYNTHESIZE(int, m_nWidgetTag, WidgetTag)
        CC_SYNTHESIZE(std::string, m_strName, Name)
        CC_SYNTHESIZE(bool,m_bUseMergedTexture,UseMergedTexture)
        CC_SYNTHESIZE_READONLY(int, m_nWidgetType, WidgetType)
        cocos2d::CCObject*       m_pPushListener;
        SEL_PushEvent    m_pfnPushSelector;
        cocos2d::CCObject*       m_pMoveListener;
        SEL_MoveEvent    m_pfnMoveSelector;
        cocos2d::CCObject*       m_pReleaseListener;//释放的监听器
        SEL_ReleaseEvent    m_pfnReleaseSelector;
        float m_fAbsoluteScaleX;
        float m_fAbsoluteScaleY;
        bool m_bAbsoluteVisible;
        bool m_bScaleXDirty;
        bool m_bScaleYDirty;
        bool m_bVisibleDirty;
    };


(2)CocoButton 按钮

class CocoButton : public CocoWidget
    {
    public:
        CocoButton();
        virtual ~CocoButton();
        static CocoButton* create();
 
        virtual bool init();
  //设置按钮的精灵,从帧批量节点获取帧节点(或者帧缓存的帧精灵来初始化),更新节点
        void setTextures(const char* normal,const char* selected,const char* disabled,bool useSpriteFrame = false);
        void setTexturesScale9(const char* normal,const char* selected,const char* disabled,cocos2d::CCRect capInsets,bool useSpriteFrame = false);
        void setNormalTexture(const char* normal,bool useSpriteFrame = false);
        void setPressedTexture(const char* selected,bool useSpriteFrame = false);
        void setDisabledTexture(const char* disabled,bool useSpriteFrame = false);
        void setNormalTextureScale9(const char* normal,cocos2d::CCRect capInsets,bool useSpriteFrame = false);
        void setPressedTextureScale9(const char* selected,cocos2d::CCRect capInsets,bool useSpriteFrame = false);
        void setDisabledTextureScale9(const char* disabled,cocos2d::CCRect capInsets,bool useSpriteFrame = false);
        virtual void onPressStateChangedToNormal();
        virtual void onPressStateChangedToPressed();
        virtual void onPressStateChangedToDisabled();
        virtual CRenderNode* getValidNode();//获取按钮的当前状态下的按钮的渲染节点
        void setScale9Enable(bool able);
        void setScale9Size(float width,float height);
        virtual void setColor(int r,int g,int b);//设置按钮的颜色
        virtual void setOpacity(int opcity);
        virtual void setFlipX(bool flipX);
        virtual void setFlipY(bool flipY);
    protected:
        UIElement* m_pButtonNormal;//正常的按钮(UIElement cocoWeget的封装)
        UIElement* m_pButtonClicked;//按下的按钮
        UIElement* m_pButtonDisable;//失效的按钮
        
        bool m_bScale9Enable;//设置9宫格按钮
    };

(3)CocoTextButton  文本按钮

class CocoTextButton : public CocoButton
    {
    public:
        CocoTextButton();
        virtual ~CocoTextButton();
        static CocoTextButton* create();
        virtual bool init();
        void setText(const char* text);
        void setTextColor(int r,int g,int b);
        void setFontSize(int size);
        void setFontName(const char* fontName);
        virtual void setFlipX(bool flipX);//x坐标按中心线反过来
        virtual void setFlipY(bool flipY);
        virtual void setColor(int r,int g,int b);
        virtual void setOpacity(int opcity);//设置所有子节点的透明度
    protected:
        UIText * m_pTextLable;//文本标签
        
    };

(4)CocoContainerWidget 控件管理容器

class CocoContainerWidget : public CocoWidget
    {
    public:
        CocoContainerWidget();
        virtual ~CocoContainerWidget();
        static CocoContainerWidget* create();
        virtual bool init();
        virtual void initNodes();
        virtual bool addChild(CocoWidget* child);
        virtual void setClipAble(bool able);
        virtual void setClipRect(cocos2d::CCRect rect);
        virtual void updateWidth();
        virtual void updateHeight();
        virtual void setColorAndSize(int r,int g,int b,int o,float width,float height);
        virtual void setSize(float width,float height);
        virtual void setWidth(float width);
        virtual float getWidth();
        virtual void setHeight(float height);
        virtual float getHeight();
        virtual void setColor(int r,int g,int b);
        virtual void setOpcity(int opcity);
 
        virtual bool getClipAble();
        virtual bool pointAtSelfBody(cocos2d::CCPoint &pt);
    protected:
        float m_fWidth;
        float m_fHeight;
        float m_bClipAble;
    };

(5)CocoPanel 面板

class CocoPanel : public CocoContainerWidget
    {
    public:
        CocoPanel();
        virtual ~CocoPanel();
        static CocoPanel* create();
        virtual bool init();
        void setBackGroundImage(const char* fileName,bool useSpriteFrame = false);
        void setBackGroundImageScale9(const char* fileName,cocos2d::CCRect capInsets,bool useSpriteFrame = false);
        virtual void setColorAndSize(int r,int g,int b,int o,float width,float height);
        virtual void setSize(float width,float height);
        void setBackGroundImageScale9Enable(bool able);
        virtual void setColor(int r,int g,int b);
        virtual void setOpacity(int opcity);
    protected:
        bool m_bBackGroundScale9Enable;
        UIElement* m_pBackGroundImage;//背景控件(渲染节点)
    };

(6)CocoScrollView 滚动列表

class CocoScrollView : public CocoPanel
    {
    public:
        CocoScrollView();
        virtual ~CocoScrollView();
        static CocoScrollView* create();
        virtual bool init();
        virtual bool addChild(CocoWidget* widget);
        virtual void removeChildMoveToTrash(CocoWidget* child);
        virtual void removeChildReferenceOnly(CocoWidget* child);
        virtual void removeAllChildrenAndCleanUp(bool cleanup);
        void resortChildren();
        void moveChildren(float offset);
        void autoScrollChildren(float dt);
        void startAutoScrollChildren(float v);
        void stopAutoScrollChildren();
        float getCurAutoScrollDistance(float time);
        void setDirection(int direction);
        bool scrollChildren(float touchOffset);
        void scrollToBottom();
        void scrollToTop();
        void startRecordSlidAction();
        void endRecordSlidAction();
        void handlePressLogic(cocos2d::CCPoint &touchPoint);//处理按下时的逻辑
        void handleMoveLogic(cocos2d::CCPoint &touchPoint);
        void handleReleaseLogic(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchPressed(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchMoved(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchReleased(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchCanceled(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchLongClicked(cocos2d::CCPoint &touchPoint);
        virtual void update(float dt);//(所有子节点)处理自动返回运动
        void recordSlidTime(float dt);//滑动时间
        virtual void checkChildInfo(int handleState,CocoWidget* sender,cocos2d::CCPoint &touchPoint);
        virtual void setColorAndSize(int r,int g,int b,int o,float width,float height);
        virtual void setSize(float width,float height);//设置限制大小,面板大小
    protected:
        int m_nDirection;
        float m_fTouchStartLocation;
        float m_fTouchEndLocation;
        float m_fTouchMoveStartLocation;
        float m_fTopBoundary;//test
        float m_fBottomBoundary;//test
        float m_fLeftBoundary;
        float m_fRightBoundary;
        CocoWidget* m_pTopChild;//记录上下左右控件(按添加时的位置来记录)
        CocoWidget* m_pBottomChild;
        CocoWidget* m_pLeftChild;
        CocoWidget* m_pRightChild;
        
        int m_nHandleState;//0 normal, 1 top boundary, 2 bottom boundary
        int m_nMoveDirection;//0 pull down, 1 push up
        
        bool m_bTopEnd;
        bool m_bBottomEnd;
        
        bool m_bAutoScroll;
        
        float m_fAutoScrollOriginalSpeed;
        float m_fAutoScrollAcceleration;
        
        bool m_bBePressed;
        float m_fSlidTime;
        cocos2d::CCPoint moveChildPoint;
        float m_fChildrenSizeHeight;
        float m_fChildrenSizeWidth;
        float m_fChildFocusCancelOffset;
    };

(7)CocoSlider 滑动条

class CocoSlider : public CocoWidget
    {
    public:
        CocoSlider();
        virtual ~CocoSlider();
        static CocoSlider* create();
        virtual bool init();
        void setBarTexture(const char* fileName,bool useSpriteFrame = false);
        void setBarTextureScale9(const char* fileName,float x,float y,float width,float height,bool useSpriteFrame = false);
        void setBarTextureScale9Enable(bool able);
        void setSlidBallTextures(const char* normal,const char* pressed,const char* disabled,bool useSpriteFrame = false);
        void setSlidBallNormalTexture(const char* normal,bool useSpriteFrame = false);
        void setSlidBallPressedTexture(const char* pressed,bool useSpriteFrame = false);
        void setSlidBallDisabledTexture(const char* disabled,bool useSpriteFrame = false);
        void setBarLength(float length);
        void setSlidBallPercent(int percent);
        int getClickPercent(float location);
        void checkSlidBoundary();
        virtual bool onTouchPressed(cocos2d::CCPoint &touchPoint);//设置滚动球位置,滚动球的状态,触发百分比改变后的事件
        virtual bool onTouchMoved(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchReleased(cocos2d::CCPoint &touchPoint);
        virtual bool onTouchCanceled(cocos2d::CCPoint &touchPoint);
        float getPercentWithBallPos(float px,float py);
        virtual bool pointAtSelfBody(cocos2d::CCPoint &pt);
        virtual CRenderNode* getValidNode();
        virtual void addPercentChangedEvent(cocos2d::CCObject* target,SEL_PushEvent selector);
        void percentChangedEvent();
        int getPercent();
        virtual void setColor(int r,int g,int b);
        virtual void setOpacity(int opcity);
    protected:
        UIElement*  m_pBarNode;
        float m_fMinLength;
        float m_fBarLength;
        int m_nDirection;
        int m_nBarPercent;
        CocoButton* m_pSlidBall;
        float m_fBarNodeScaleValue;
        float m_fTouchMoveStartLocation;
        bool m_bBarScale9Enable;
        cocos2d::CCObject*       m_pPercentListener;
        SEL_PushEvent    m_pfnPercentSelector;//百分比改变回调函数
    };


2、BatchNodeManager 节点管理器

缓存管理当前层的所有CCNode 节点。

class BatchNodeManager {
public:
    /*
     * If you want to reset the AlphaTestValue, you can use this method.
     * You should note this method will effect all CCNode used cocos2dx's Alpha Test Shader
     *
     * @param  _value  the value you want to set to Alpha Test, 
     */
    static void setBatchNodeAlphaTestValue(float _value);
public:
    static BatchNodeManager *sharedBatchNodeManager();

    //使用层来初始化节点管理器
    /*
     * Init members with a CCLayer
     */
    virtual bool initWithLayer(CCLayer *_layer, std::string _layerName);
    /*
     * Add a BatchNode to current layer
     *
     * @param  name The image name used by _batchNode, used for a key
     * @param  batchNode  The BatchNode you want to added to current layer
     * @param  zOrder BatchNode's zorder, defualt is 0
     */
    void addBatchNode(const std::string &name, BatchNode *batchNode, int zOrder = 0);
    /*
     * Get a BatchNode which used a image named _name from current layer. 
     * If do not exsit, create a new BatchNode named _name and add to current layer
     */
    BatchNode *getBatchNode(const std::string &name);
    /*
     * Set the zorder of BatchNode named _name
     *
     * @param name BatchNode's name
     * @param zOrder The zorder you want to set
     */
    void setBatchNodeZOrder(const std::string &name, int zOrder);
    //设置批节点混合函数
    void setBatchNodeBlendFunc(const std::string &name, unsigned int src, unsigned int dst);
    /*
     * Remove all BatchNodes added to the layer named _layerName
     * @param name The layer's name
     */
    void removeBatchNodes(const std::string &layerName);
    
    CCLayer *getCurrentLayer();
private:
    /*
     * When create a BatchNodeManager, it will set Alpha Test to 0.5
     */
    BatchNodeManager();
    ~BatchNodeManager();
    
    static BatchNodeManager *m_sBatchNodeManager;
    //图片索引的批量帧节点
    /*
     * @key The image name the CCSpriteBatchNode use
     * @value  CCSpriteBatchNode*
     */
    CCDictionary *m_pBatchNodeDic;

//按层名字索引的层的所有节点的字典
    /*
     * @key Layer's name
     * @value  BatchNode dictionary
     */
    CCDictionary *m_pLayer2BatchNodeDic;
    //当前层
    CCLayer *m_pLayer; //! Current CCLayer
    
    CCDictionary *m_pLayerMap; //! a map used to judge if a layer with a name is the same with the layer in the map named with the same name.
};

3、cocostudio的ui控件加入到场景

场景的层的初始化

bool HelloWorld::init()

{
// 初始化层的大小、不可触碰等
if ( !CCLayer::init() )
{
return false;

}

//COCOUISYSTEM这是一个宏,用来获取一个UISystem对象

//初始化当前场景对象、纹理缓存、输入管理器等

COCOUISYSTEM->init();

//重置当前场景的ui系统,重置所有控件,添加ui系统触摸层到当前的容器层,replaceUISceneWithFile 会调用resetSystem

COCOUISYSTEM->resetSystem(this)

//从配置文件加载ui界面控件

//其四个参数分别是UI目标,也就是添加UI的对象指针(这里是层),配置文件,读取方式(1为json文件,0为plist文件),最后一个是是否允许自适应

COCOUISYSTEM->replaceUISceneWithFile(this, "CocoGUISample.json", 1, false);

//设置关闭按钮

//这几行是生成一个CocoButton,也就是CocoStudio自己的UI控件

//这里要说一下,CocoButton的控件几乎都是自己重写的,不继承于Cocos2d-x的控件,其触碰分派也是独立的

CocoGUI::CocoButton* closeButton = CocoGUI::CocoButton::create();
closeButton->setTextures("CloseNormal.png", "CloseSelected.png", "");
closeButton->setPosition(ccp(430, 40));

closeButton->setBeTouchAble(true);

//设置按钮的释放事件回调

closeButton->addReleaseEvent((CCObject*)this, coco_releaseselector(HelloWorld::menuCloseCallback));

//把控件add到当前场景中

//这些空间都是重写的,而且不是继承于CCNode,所以不能直接用addChild来add,而是通过UISystem来add,并且通过UISystem来管理的,

//也就是说Remove也不是通过this.remove而是通过COCOUISYSTEM->getCurScene()->removeWidgetAndCleanUp

COCOUISYSTEM->getCurScene()->addWidget(closeButton);

//获取scrollview控件

//在UI编辑器中只能编辑样子,不能添加事件,时间的添加只能在代码中添加,而获取对象则是添加的关键

//COCOUISYSTEM->getCurScene()->getRootWidget() 是当前场景的所有控件的根节点

//CocoStudio就是通过UISystem中的checkWidgetByName来获取对象的

//其参数分别为:当前场景的rootwidget和对象名称(UI编辑器中使用的)

//这样就可以对控件进行一系列修改,也包括最重要的添加事件了

CocoGUI::CocoScrollView* sc =

 (CocoGUI::CocoScrollView*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "scrollview"));

//添加到当前场景的更新控件列表

sc->setUpdateEnable(true);

//获取文本按钮

CocoGUI::CocoTextButton* bt =

 (CocoGUI::CocoTextButton*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "backtotopbutton"));

//注册文本按钮的释放事件

bt->addReleaseEvent(this, coco_releaseselector(HelloWorld::backToTop));

//获取滑条控件

CocoGUI::CocoSlider* sld = (CocoGUI::CocoSlider*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "slider"));

//注册滑条控件改变事件

sld->addPercentChangedEvent(this, coco_percentchangedselector(HelloWorld::sliderPercentChanged));

//获取普通按钮

CocoGUI::CocoButton* anib = (CocoGUI::CocoButton*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "animationbutton"));

......

//添加以TEST_LAYER 命名的字典容器到批量节点管理器,用来管理BatchNode类(继承于CCSpriteBatchNode),也就是该层的批量节点对象

cs::BatchNodeManager::sharedBatchNodeManager()->initWithLayer(this, "TEST_LAYER");

.....

return true;

}


4、cocostudio ui编辑器的生成配置
生成json配置,设置ui控件的位置信息、属性、纹理等

{
    "version" : 1.0,
    "textures" : [],
    "designWidth" : 480.0,
    "designHeight" : 320.0,
    "widgetTree" : {
        "classname" : "Panel",//面板
        "options" :
        {
            "width" : 480,
            "height" : 320
        },
        "children" :
        [
        {
         "classname" : "ScrollView", //滑动列表
         "options" :
         {
         "x" : 330,
         "y" : 220,
         "width" : 150,
         "height" : 100,
         "backGroundScale9Enable" : true,
         "clipAble" : true,
         "touchAble" : true,
         "backGroundImage" : "scrollviewbg.png",
         "name" : "scrollview"
         },

 "children" :
         [
          {
          "classname" : "Label",//滑动列表上的标签
          "options" : {
          "x" : 75,//x轴
          "y" : 90,//y轴
          "text" : "Anchor:"
          },
          "children" : []//没有子节点
          },
......
{
          "classname" : "TextButton",//滑动列表上的返回顶部按钮
          "options" : {
          "x" : 75,
          "y" : -170,
          "text" : "返回顶部",
          "normal" : "backtotopnormal.png",
          "pressed" : "backtotoppressed.png",
          "touchAble" : true,
          "name" : "backtotopbutton"
          },
          "children" : []
          }
  ]
},
{
         "classname" : "ImageView",//静态图片
         "options" :
         {
         "x" : 30,
         "y" : 290,
         "fileName" : "ccicon.png"
         },
         "children" :[]
         },
{
         "classname" : "Label",//文本标签
         "options" :
         {
         "x" : 70,
         "y" : 300,
         "gravity" : 1,
         "text" : "name : CocoStudio"
         },
"children" :[]
         },
  {
         "classname" : "LabelAtlas",
         "options" :
         {
         "x" : 150,
         "y" : 270,
         "stringValue" : "3256",
         "charMapFile" : "labelatlas.png",
         "itemWidth" : 17,
         "itemHeight" : 22,
         "startCharMap" : "0"
         },
         "children" :[]
         },
         {
         "classname" : "LoadingBar",
         "options" :
         {
         "x" : 70,
         "y" : 200,
         "texture" : "loadingbar.png",
         "percent" : 50,
         "name" : "loadingbar"
         },
         "children" :[]
         },
         {
         "classname" : "Slider",//滑动条
         "options" :
         {
         "x" : 70,
         "y" : 160,
         "barFileName" : "slidbar.png",//滑动条名称
         "ballNormal" : "sliderballnormal.png", //正常状态的滑动条
         "ballPressed" :"sliderballpressed.png",//按下状态的滑动条
         "percent" : 50,
         "touchAble" : true,
         "name" : "slider"
         },
         "children" :[]
         },
         {
         "classname" : "Label",//可触摸的文本框
         "options" :
         {
         "x" : 70,
         "y" : 230,
         "text" : "播放速度",
         "touchAble" : true,
         "touchSacleEnable" : true
         },
         "children" :[]
         },
{
         "classname" : "CheckBox",//复选框
         "options" :
         {
         "x" : 250,
         "y" : 290,
         "backGroundBox" : "check_box_normal.png",//正常状态的复选框
         "backGroundBoxSelected" : "check_box_normal_press.png",//选中状态的复选框 
         "frontCross" : "check_box_active.png",//复选框的激活的叉型图片
         "backGroundBoxDisabled" : "check_box_normal_disable.png",//复选框失效图片
         "frontCrossDisabled" : "check_box_active_disable.png",//复选框激活状态下的失效图片
         "touchAble" : true//可否触摸
         },
         "children" :[]
         },

  

5、控件事件回调
在层初始化,加上动作按钮的释放事件
CocoGUI::CocoButton* anib = (CocoGUI::CocoButton*)(COCOUISYSTEM->checkWidgetByName(COCOUISYSTEM->getCurScene()->getRootWidget(), "animationbutton"));
anib->addReleaseEvent(this, coco_releaseselector(HelloWorld::playUIAnimation));

事件回调函数
void HelloWorld::playUIAnimation(cocos2d::CCObject *pSender)
{
CocoGUI::CocoWidget* widget = (CocoGUI::CocoWidget*)pSender;
widget->stopAllActions();
CCSequence* seq = CCSequence::create(CCMoveTo::create(1.0, ccp(300, 300)),CCScaleTo::create(1, 0.5),CCMoveTo::create(1.0, ccp(127, 96)),CCScaleTo::create(1.0, 1.0),CCRotateTo::create(0.5, 720),CCRotateTo::create(0.5, 0),NULL);
widget->runAction(seq);
}


你可能感兴趣的:(游戏客户端之cocostudio的界面库)