Scholar teach you cocos2d-x-protect radish (4)

Source: Internet
Author: User

Scholar teach you cocos2d-x-guard radish 4)

This blog is a selection page with no complicated content. Then we can play games. Let's take a look.

650) this. width = 650; "style =" background-image: none; border: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; "title =" image_thumb "border =" 0 "alt =" image_thumb "src =" http://img1.51cto.com/attachment/201311/30/8148702_1385817918DDlj.png "height =" 166 "/>

650) this. width = 650; "style =" background-image: none; border: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; "title =" image_thumb [1] "border =" 0 "alt =" image_thumb [1] "src =" http://www.bkjia.com/uploads/allimg/131229/1239402Z8-1.png "height =" 171 "/>

650) this. width = 650; "style =" background-image: none; border: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; "title =" image_thumb [2] "border =" 0 "alt =" image_thumb [2] "src =" http://www.bkjia.com/uploads/allimg/131229/1239402F5-2.png "height =" 167 "/>

The following figure shows the structure of the interface.

A background and a start button. The middle part is the preview content of the level. Mouse finger) when dragging, the content screen will move, and the mouse finger will be released), the screen will be frozen to the corresponding level.

Sliding to the left is the next turn, and sliding to the right is the last turn.

Source http://down.51cto.com/data/1028692

I will not mention the background creation, the start button, and the return button.

There are two key contents:

1. Create a level preview.

We have a total of 9 levels. The preview content of each level has a map preview background, and a tower icon indicates which towers can appear in this level ).

Defending radish made all these resources into images, including the preview map of each level and the small icon of the following tower, and did not reuse the resources in the map. This is terrible and a waste, but it saves a lot of effort for us to learn.

I made an xml file to record this information.

<?xml version="1.0" encoding="UTF-8"?>
<levels count="9">
  <level bg="ss_map01.png" towers_icon="ss_towers_01.png"></level>
  <level bg="ss_map02.png" towers_icon="ss_towers_02.png"></level>
  <level bg="ss_map03.png" towers_icon="ss_towers_03.png"></level>
  <level bg="ss_map04.png" towers_icon="ss_towers_04.png"></level>
  <level bg="ss_map05.png" towers_icon="ss_towers_05.png"></level>
  <level bg="ss_map06.png" towers_icon="ss_towers_06.png"></level>
  <level bg="ss_map07.png" towers_icon="ss_towers_07.png"></level>
  <level bg="ss_map08.png" towers_icon="ss_towers_08.png"></level>
  <level bg="ss_map09.png" towers_icon="ss_towers_09.png"></level>
</levels>
There are a total of 9 levels, each of which has 2 familiar, preview charts and small icons.
It is not recommended that you directly write the code to make it difficult to modify.
Similarly, we construct related classes in the Code to read this information.
class LevelSummary:public cocos2d::CCObject{
public:
static LevelSummary* create(std::string bg_name,std::string towers_icon_name);
virtual ~LevelSummary();
private:
    LevelSummary();
bool init(std::string bg_name,std::string towers_icon_name);
    CC_SYNTHESIZE_READONLY(std::string ,bg_name,BgName);
    CC_SYNTHESIZE_READONLY(std::string ,towers_icon_name,TowerIconName);
};
 
class LevelsSummary:public cocos2d::CCObject{
public:
static LevelsSummary* ShardLevelsSummary();
virtual ~LevelsSummary();
bool init();
    LevelSummary* GetLevel(int index);
private:
    LevelsSummary();
    CC_SYNTHESIZE_READONLY(int ,level_count,LevelCount);
    cocos2d::CCArray* levels_array;
};
Because we only record the information required for the Level preview, I call this class levelSummary. If we add the sequence of troops for each level, it will become levelbase. Each levelSummary has two familiarity

CC_SYNTHESIZE_READONLY (std: string, bg_name, BgName );
CC_SYNTHESIZE_READONLY (std: string, towers_icon_name, TowerIconName );

The name of the previewed background image and the name of the image.

The class for storing and managing them is LevelsSummary which is easy to confuse here and only has one more S. it is more reasonable to change it to LevelsManager ).

This is a singleton. It provides us with an interface GetLevel to get the information of each level.

bool LevelsSummary::init(){
    tinyxml2::XMLDocument* doc=new tinyxml2::XMLDocument();
    doc->LoadFile("levels_summary.xml");
    tinyxml2::XMLElement *root_node=doc->RootElement();  
    std::string count_str=   root_node->Attribute("count");
this->level_count=cocos2d::CCString::create(count_str)->intValue();
    tinyxml2::XMLElement *level_node=root_node->FirstChildElement("level");  
 
    levels_array=cocos2d::CCArray::create();
    levels_array->retain();
while (level_node)  
    {      
        std::string bg=level_node->Attribute("bg");
        std::string towers_icon=level_node->Attribute("towers_icon");
        LevelSummary* ls=LevelSummary::create(bg,towers_icon);
        levels_array->addObject(ls);
        level_node=level_node->NextSiblingElement();  
    }  
    delete doc;
 
returntrue;
}


When this class is created, the content in xml is read and the information of each mark is read into the memory.


The following describes how to create the content to be displayed based on this class on the selection interface.

        levels_node=cocos2d::CCNode::create();
this->addChild(levels_node);
        levels_node->setPosition(ccp(0,0));
        cocos2d::CCSpriteFrameCache::sharedSpriteFrameCache()->addSpriteFramesWithFile("stages_theme1.plist");
int start_btn_y=0;    
for(int i=0;i<level_count;i++){
            std::string temp_map_name=level_summary->GetLevel(i)->getBgName();
            std::string temp_icon_name=level_summary->GetLevel(i)->getTowerIconName();
 
            cocos2d::CCSprite* level_map_bac=cocos2d::CCSprite::createWithSpriteFrameName(temp_map_name.c_str());
            levels_node->addChild(level_map_bac);
            level_map_bac->setPosition(ccp(win_size.width/2+i*win_size.width,win_size.height/2));
            cocos2d::CCSprite* level_towers_icon=cocos2d::CCSprite::createWithSpriteFrameName(temp_icon_name.c_str());
            levels_node->addChild(level_towers_icon);
            level_towers_icon->setPosition(ccp(win_size.width/2+i*win_size.width,win_size.height/2-level_map_bac->getContentSize().height/2
                -level_towers_icon->getContentSize().height/2));
if(start_btn_y==0){
                start_btn_y=(level_towers_icon->getPositionY()-level_towers_icon->getContentSize().height/2)/2;
            }
        }


The middle part is slide, So we open a single node levels_node to store the content. This node is offset when the finger slides the screen.


The default initial position of a node is the lower left corner of the screen. And then traverse all the levels. Create a background preview and a small icon for the exit card.

The background image of the first level is in the center of the screen, and the preview image of the subsequent level is shifted to half the screen size to the right.

650) this. width = 650; "style =" background-image: none; border: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; "title =" image_thumb [3] "border =" 0 "alt =" image_thumb [3] "src =" http://www.bkjia.com/uploads/allimg/131229/1239405D8-3.png "height =" 163 "/>

Nov, effect.

After reading and creating the information, we can slide our fingers to change the current level.

void SelectLevelLayer::ccTouchesBegan(CCSet *pTouches, CCEvent *pEvent){
    cocos2d::CCTouch* touch=dynamic_cast<cocos2d::CCTouch*> (pTouches->anyObject());
 
    start_drag_point=touch->getLocation();
    start_drag_level_node_point=levels_node->getPosition();
}


When we press the finger, record the coordinate start_drag_point of the finger and the coordinate start_drag_level_node_point of levels_node.


void SelectLevelLayer::ccTouchesMoved(CCSet *pTouches, CCEvent *pEvent){    cocos2d::CCTouch* touch=dynamic_cast<cocos2d::CCTouch*> (pTouches->anyObject());float px=touch->getLocation().x-start_drag_point.x;float py=0;float new_node_point_x=start_drag_level_node_point.x+px;float new_node_point_y=start_drag_level_node_point.y+py;    levels_node->setPosition(ccp(new_node_point_x,new_node_point_y));}


When the finger slides, obtain the coordinates of the finger and calculate the offset value.

Then, we can use the offset value px and the coordinate start_drag_level_node_point of the recorded level node to calculate the new coordinate and assign it to the node to achieve the effect of moving the level with the finger.

650) this. width = 650; "style =" background-image: none; border: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; "title =" image_thumb [4] "border =" 0 "alt =" image_thumb [4] "src =" http://www.bkjia.com/uploads/allimg/131229/1239402E1-4.png "height =" 177 "/>

void SelectLevelLayer::ccTouchesEnded(CCSet *pTouches, CCEvent *pEvent){
    cocos2d::CCTouch* touch=dynamic_cast<cocos2d::CCTouch*> (pTouches->anyObject());
int new_level_index= this->select_level_index;
 
float px=touch->getLocation().x-start_drag_point.x;
if(px>200){
// Move the cursor to the left-side Navigation Pane
        new_level_index=this->select_level_index-1;
if(new_level_index<0){
            new_level_index=0;
        }
 
    }elseif(px<-200){
// Shift left, next level
        new_level_index=this->select_level_index+1;
if(new_level_index>  LevelsSummary::ShardLevelsSummary()->getLevelCount()-1){
            new_level_index=LevelsSummary::ShardLevelsSummary()->getLevelCount()-1;
        }
    }
this->ChangeSelectLevel(new_level_index);
}

Finally, when the finger is raised, we use the coordinates at this time to compare with the coordinates recorded during the press. Check whether the user wants to switch to the next level or the last level.

The right shift is the last off, and the left shift is the next off. If the offset of the move is not more than 200 pixels, this operation is invalid. In addition, we have protected the level and cannot switch to a level index that is-1 or greater than the total number of levels.

Finally, calibrate the coordinates of the level node based on the obtained level index new_level_index. In this example, the range is 0-8, because we will close it after 9.

ChangeSelectLevelint index) the function is used to calibrate the coordinates of the level node based on the last obtained level index, because we cannot keep the level node like that, for example, you can set the preview information of the selected level to the center of the screen.

void SelectLevelLayer::ChangeSelectLevel(int new_level_index){    cocos2d::CCSize win_size=cocos2d::CCDirector::sharedDirector()->getWinSize();    select_level_index=new_level_index;    levels_node->setPositionX(-1*select_level_index*win_size.width);}


When 0th off is selected, the x coordinate of the node is 0. Each time a level is added, the entire node shifts the screen offset to the left, so that the preview map of the corresponding level is in the center of the screen.


650) this. width = 650; "style =" background-image: none; border: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; "title =" image_thumb [5] "border =" 0 "alt =" image_thumb [5] "src =" http://www.bkjia.com/uploads/allimg/131229/1239405954-5.png "height =" 167 "/>

Effect. At the same time, we record the index of this level and know the selected level.

The check page ends. After clicking the start button, we have the selected level id. To find the level information, I may add the content to levelsummary or open a class separately ). Then, create a scenario based on the specific information of the level and switch over.

I updated the content in the game scenario as soon as possible.

Apart from the interface, there are only the following things in the scenario. You can first think about how to implement them:

1, radish, 10 points of blood

2. When a monster appears, move it to the radish path

3. The defense Tower will attack monsters in the range

4. Obstacles: block us from building a tower. Reward us after hitting it, and we can leave the space to create a tower.

5. Map

6. Bullets

Because some bullets slow down, we may need to write a buff class.

We will update it here today. You will see it next time.

This article from the "Scholar teach you cocos2dx" blog, please be sure to keep this source http://luoposhusheng.blog.51cto.com/8148702/1334242

Related Article

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.