[Cloudbox] An example of Angry Birds sliding buttons based on a cross-platform framework

Source: Internet
Author: User

I decided to make cloudbox open-source!
To share with you, cloudbox is a cross-platform framework for IOS/android.
This example shows the elements in the Angry Birds that slide the storage button.

Use xcode or eclipse to compile program code

/* *  CBSlideBar.h *  CloudBox Cross-Platform Framework Project * *  Created by Cloud on 2012/4/8. *  Copyright 2012 Orz. All rights reserved. * */#include "CBView.h"#include "CBAction.h"#ifdef __CBIOS__#define OPTION_NAME "button_options.png"#define OPTION_BG_NAME "options_bg.png"#define OPTION_MUSIC_ON_NAME "button_music_on.png"#define OPTION_MUSIC_OFF_NAME "button_music_off.png"#define OPTION_INFO_NAME "button_info.png"#define OPTION_HELP_NAME "button_help.png"#define OPTION_CLOSE_NAME "button_close.png"#else#define OPTION_NAME "system/button_options.png"#define OPTION_BG_NAME "system/options_bg.png"#define OPTION_MUSIC_ON_NAME "system/button_music_on.png"#define OPTION_MUSIC_OFF_NAME "system/button_music_off.png"#define OPTION_CLOSE_NAME "system/button_close.png"#define OPTION_INFO_NAME "system/button_info.png"#define OPTION_HELP_NAME "system/button_help.png"#define OPTION_CLOSE_NAME "system/button_close.png"#endifenum SlideBarStatus{        SlideBarHide = 0,        SlideBarShow = 1};enum DefaultSlideBar{        DefaultSlideBar1 = 1};class CBSlideBar : public CBView{private:        SlideBarStatus m_status;                CBView* m_optionButton;        CBView* m_optionBar;                CBDelegate<void(int)>* m_click;        vector<CBView* > m_options;        CBAction* m_optionButtonShowClick;        CBAction* m_optionButtonHideClick;        CBAction* m_optionBarShow;        CBAction* m_optionBarHide;                void onClickOption();        void onBarAnimationScrolling(CBView* target);        void onBarAnimationFinish(CBView* target);                void setDefaultBar1();        protected:        void draw();public:        CBSlideBar();        CBSlideBar(DefaultSlideBar defaultType);        ~CBSlideBar();                inline void setShowButtonAction(CBAction* action) { m_optionButtonShowClick = action; }        inline void setHideButtonAction(CBAction* action) { m_optionButtonHideClick = action; }        inline void setShowBarAction(CBAction* action) { m_optionBarShow = action; }        inline void setHideBarAction(CBAction* action) { m_optionBarHide = action; }                void onClick(float x,float y);                void setOptionButton(const string& imageName);        void setOptionBar(const string& imageName);                void addButton(const string& imageName);        void addSwitchButton(const string& imageName1,const string& imageName2);};

/* *  CBSlideBar.cpp *  CloudBox Cross-Platform Framework Project * *  Created by Cloud on 2012/4/8. *  Copyright 2012 Orz. All rights reserved. * */#include "CBSlideBar.h"#include "CBImage.h"#include "CBRotateAction.h"#include "CBPropertyAction.h"CBSlideBar::CBSlideBar(): m_optionButton(NULL), m_optionBar(NULL), m_status(SlideBarHide),m_optionButtonShowClick(NULL), m_optionButtonHideClick(NULL),m_optionBarShow(NULL), m_optionBarHide(NULL){        registerClickEvent();}CBSlideBar::CBSlideBar(DefaultSlideBar defaultType): m_optionButton(NULL), m_optionBar(NULL), m_status(SlideBarHide),m_optionButtonShowClick(NULL), m_optionButtonHideClick(NULL),m_optionBarShow(NULL), m_optionBarHide(NULL){        registerClickEvent();        setDefaultBar1();}CBSlideBar::~CBSlideBar(){        DELETE(m_optionButton);        DELETE(m_optionBar);        for(int i = 0 ; i < m_options.size() ; i++)        {                DELETE(m_options[i]);        }        m_options.clear();}void CBSlideBar::setDefaultBar1(){        // template in CloudBox        setOptionButton(OPTION_NAME);        setOptionBar(OPTION_BG_NAME);        m_optionButtonShowClick =                 new CBPropertyAction(Property(ActionPropertyAngle,0,360,10, PropertyFromCurrent),                                                 0.015, ActionManualRelease);        m_optionButtonHideClick =                 new CBPropertyAction(Property(ActionPropertyAngle,360,0,10, PropertyFromCurrent),                                                 0.015, ActionManualRelease);                m_optionBarShow =                new CBPropertyAction(                                Property(ActionPropertyWidth,m_optionButton->getWidth(),m_optionBar->getWidth(),10, PropertyFromCurrent),                                0.025, ActionManualRelease);        m_optionBarShow->addTriggerEvent(this,&CBSlideBar::onBarAnimationScrolling);                m_optionBarHide =                new CBPropertyAction(                                Property(ActionPropertyWidth,m_optionBar->getWidth(),m_optionButton->getWidth(),-10, PropertyFromCurrent),                                0.025, ActionManualRelease);        m_optionBarHide->addTriggerEvent(this,&CBSlideBar::onBarAnimationScrolling);        m_optionBarHide->addFinishEvent(this,&CBSlideBar::onBarAnimationFinish);        m_optionBar->setWidth(m_optionButton->getWidth());        addButton(OPTION_INFO_NAME);        addButton(OPTION_HELP_NAME);        addButton(OPTION_CLOSE_NAME);}void CBSlideBar::onBarAnimationScrolling(CBView* target){        int x = target->getX() + target->getWidth();        for(int i = 0 ; i < m_options.size() ; i++)        {                if(m_status == SlideBarShow)                {                        if((m_options[i]->getX() + m_options[i]->getWidth()) < x)                        {                                m_options[i]->show();                        }                }                else if(m_status == SlideBarHide)                {                        if((m_options[i]->getX() + m_options[i]->getWidth()) > x)                        {                                m_options[i]->hide();                        }                }        }}void CBSlideBar::onBarAnimationFinish(CBView* target){        if(m_status == SlideBarHide)        {                target->hide();        }}void CBSlideBar::setOptionButton(const string& imageName){        DELETE(m_optionButton);        m_optionButton = new CBImage(imageName);}void CBSlideBar::setOptionBar(const string& imageName){        DELETE(m_optionBar);        m_optionBar = new CBImage(imageName);        m_optionBar->hide();}void CBSlideBar::addButton(const string& imageName){        CBImage* image = new CBImage(imageName);        image->hide();        m_options.push_back(image);}void CBSlideBar::addSwitchButton(const string& imageName1,const string& imageName2){}void CBSlideBar::onClickOption(){        if(m_status == SlideBarShow)        {                m_status = SlideBarHide;                m_optionButtonHideClick->stop();                m_optionBarShow->stop();                m_optionButtonHideClick->commit(m_optionButton);                m_optionBarHide->commit(m_optionBar);        }        else        {                m_status = SlideBarShow;                m_optionButtonHideClick->stop();                m_optionBarHide->stop();                m_optionButtonShowClick->commit(m_optionButton);                m_optionBarShow->commit(m_optionBar);                m_optionBar->show();        }}void CBSlideBar::onClick(float x,float y){        if(m_optionButton->isTrigger(x, y))        {                onClickOption();        }        if(m_status == SlideBarShow)        {        }}void CBSlideBar::draw(){        m_optionBar->moveToAbsolute(m_x, m_y);        m_optionBar->visit();        m_optionButton->moveToAbsolute(m_x, m_y);        m_optionButton->visit();        int width = 0;        for(int i = 0 ; i < m_options.size() ; i++)        {                m_options[i]->moveToAbsolute(m_x + m_optionButton->getWidth() + width, m_y);                m_options[i]->visit();                width += m_options[i]->getWidth();        }}

Cloudbox is a drawing Engine Based on opengles. Therefore, during design, image loading is primarily based on the UI components.
The cbslidebar Design Concept
The first is based on analysis. After pressing the button, there are two animations. One is that the button will rotate, and the other is that the stored bar will stretch.
The concept of component design has been analyzed. Currently, at least two graphical components and two animation controls are required.
I set the entire component as a state machine. Only two statuses are hidden and displayed.
To determine whether to display the storage button, the storage button is added with addbutton.


How to Set up an eclipse builder project through eclipse

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.