Cocos2d-x custom blood bar and Its beautification ---- game development "zhao Yun to fight" (4), cocos2d

Cocos2d-x custom blood bar and Its beautification ---- game development "zhao Yun to fight" (4), cocos2d

This chapter will explain how to add a blood stick to the interface, old rules, or in the Cocos2d-x map with the genie unlimited rolling and edge detection ---- game development "Zhao cloud to fight" on the basis of the increase of functionality.

In game development, the blood bar is a very important thing. Here the blood bar is completed through two pictures, one is the foreground image (red), and the other is the background image (Gray ), by changing the length of the red graph, the gray graph can change the blood volume without changing. Of course, in order to make the interface look better, a blood frame and a small avatar are added to the blood strip.

Cocos2d-x version: 2.2.5

Project Environment: Windows 7 + VS2010

Let's take a look at the effect: because no monsters have been introduced, I have made an attack once, and there are 1 or 10 fewer blood records to see the effect.

Directory:

I. Custom blood records

Ii. Use custom blood strips for beautification

Iii. Change hero's blood volume

I. Custom blood records

In the back of the blood to be used for monsters, so the design of a blood. The principle is actually two ccsprite images. Controlling the foreground size can change the blood volume.

First, add a slice in Resources.

Red blood strip (foreground ):

Gray blood strip (background ):

Blood stripe frame:

Small Avatar in the upper left corner of Zhao Yun:

Header file ProgressView. h:

# Ifndef _ PROGRESSVIEW_H __# define _ PROGRESSVIEW_H __# include "cocos2d. h "using namespace cocos2d; class ProgressView: public CCNode {public: ProgressView (); public: // set the blood bar background void setBackgroundTexture (const char * pName ); // set the foreground void setForegroundTexture (const char * pName); // set the total volume of void setTotalProgress (float total); // set the current volume of void setCurrentProgress (float progress ); // obtain the current blood volume float getCurrentProgress () const; // obtain the total blood volume float getTotalProgress () const; private: // set the length of the foreground blood bar void setForegroundTextureRect (const CCRect & rect); private: CCSprite * m_progressBackground; // The background blood bar CCSprite * m_progressForeground; // foreground blood cord float m_totalProgress; // total blood volume float m_currentProgress; // current blood volume float m_scale; // magnification}; # endif

Implement file ProgressView. cpp:

# Include "ProgressView. h "ProgressView: ProgressView (): m_progressBackground (NULL), m_progressForeground (NULL), m_totalProgress (0.0f), m_currentProgress (0.0f), m_scale (1.0f) {} void ProgressView :: setBackgroundTexture (const char * pName) {m_progressBackground = CCSprite: create (pName); this-> addChild (m_progressBackground);} void ProgressView: setForegroundTexture (const char * pName) {m_progressForeground = CCSprite: create (pName); m_progressForeground-> setAnchorPoint (ccp (0.0f, 0.5f )); // set the anchor m_progressForeground-> setPosition (ccp (-m_progressForeground-> getContentSize (). width * 0.5f, 0); this-> addChild (m_progressForeground);} void ProgressView: setTotalProgress (float total) {if (m_progressForeground = NULL) {return ;} m_scale = m_progressForeground-> getContentSize (). width/total; m_totalProgress = total;} void ProgressView: setCurrentProgress (float progress) {if (m_progressForeground = NULL) {return;} if (progress <0.0f) {progress = 0.0f;} if (progress> m_totalProgress) {progress = m_totalProgress;} m_currentProgress = progress; float rectWidth = progress * m_scale; const CCPoint from = progress-> getTextureRect (). origin; const CCRect rect = CCRectMake (from. x, from. y, rectWidth, m_progressForeground-> getContentSize (). height); Progress (rect);} void ProgressView: setForegroundTextureRect (const CCRect & rect) {m_progressForeground-> setTextureRect (rect);} float ProgressView: getCurrentProgress () const {return m_currentProgress;} float ProgressView: getTotalProgress () const {return m_totalProgress ;}

Okay, this blood class is defined. No error is reported during compilation. You can change the value.

Ii. Use custom blood strips for beautification

First, add the header file # include "ProgressView. h" to HelloWorldScene. h"

Then define the member variables:

Private: HRocker * rocker; // joystick, Hero * hero defined in the first joystick article; // genie, <span style = "font-family: Arial, Helvetica, sans-serif; "> the </span> ControlButton * btn defined in the first joystick article; // button control variables, and the Map * mymap defined by the second Custom button; // map, the third definition of the ProgressView * m_pProgressView; // blood bar

Then initialize in the init () function:

// Set the hero's blood bar m_pProgressView = new ProgressView (); m_pProgressView-> setPosition (ccp (150,450); m_pProgressView-> setScale (2.2f ); m_pProgressView-> setBackgroundTexture ("progress"); m_pProgressView-> progress ("progress"); m_pProgressView-> setTotalProgress (1001_f); m_pProgressView-> setCurrentProgress (1001_f ); this-> addChild (m_pProgressView, 2 );

Effect:

Semi-blood

It feels ugly. think about adding a frame to the blood bar and a small avatar.

Change the above:

// Set the hero's blood bar m_pProgressView = new ProgressView (); m_pProgressView-> setPosition (ccp (150,450); m_pProgressView-> setScale (2.2f ); m_pProgressView-> setBackgroundTexture ("progress"); m_pProgressView-> progress ("progress"); m_pProgressView-> setTotalProgress (1001_f); m_pProgressView-> setCurrentProgress (501_f ); // The following two items are used to make the blood strip look better. CCSprite * xuekuang = CCSprite: create ("kuang.png "); // Add the frame xuekuang-> setPosition (ccp (m_pProgressView-> getPositionX (), m_pProgressView-> getPositionY (); CCSprite * touxiang = CCSprite :: create ("touxiang.png"); // Add touxiang-> setPosition (ccp (m_pProgressView-> getPositionX ()-120, m_pProgressView-> getPositionY (); this-> addChild (touxiang, 2); this-> addChild (xuekuang, 2); this-> addChild (m_pProgressView, 2 );

Next let's take a look at the effect:

Facts once again prove how important art is! This looks much better, and there is a blood strip.

Iii. Change hero's blood volume

In fact, it's easy to change the blood volume here,

M_pProgressView-> setCurrentProgress (Change); this sentence is enough. How can we verify it? I thought of a method, an attack once, reduce the number of blood records by 1 (initially 100 );

Void HelloWorld: update (float delta) function changes:

Void HelloWorld: update (float delta) {// determines whether to press the joystick and its type CCSize visibleSize1 = CCDirector: shareddire()-> getVisibleSize (); // get the window size switch (rocker-> rocketDirection) {case 1: hero-> SetAnimation ("run_animation.plist", "run_animation.png", "run _", 8, rocker-> rocketRun); // "run _" indicates the public name of each image in the run_animation.png set. if (hero-> getPositionX () <= visibleSize1.width-8) // do not let the genie go beyond the right side. You can change 8 to your {if (! Hero-> JudgePositona (visibleSize1) | mymap-> JudgeMap (hero, visibleSize1) // The genie can move only when they do not reach the middle of the window or the map has been moved to the edge, otherwise, only play the animation hero-> setPosition (ccp (hero-> getPosition (). x + 1, hero-> getPosition (). y); // move to the right. // The following figure shows the mobile map mymap-> MoveMap (hero, visibleSize1);} break; case 2: hero-> SetAnimation ("run_animation.plist ", "run_animation.png", "run _", 8, rocker-> rocketRun ); // "run _" indicates the public name of each image in the run_animation.png set. hero-> setPosition (ccp (hero-> getPosition (). x, hero-> getPosition (). y + 1); // go up to break; case 3: hero-> SetAnimation ("run_animation.plist", "run_animation.png", "run _", 8, rocker-> rocketRun); // "run _" indicates the public name of each image in the run_animation.png set. if (hero-> getPositionX ()> = 8) // do not let the genie go beyond the left. You can change 8 to your favorite hero-> setPosition (ccp (hero-> getPosition (). x-1, hero-> getPosition (). y); // take break to the left; case 4: hero-> SetAnimation ("run_animation.plist", "run_animation.png", "run _", 8, rocker-> rocketRun ); // "run _" indicates the public name of each image in the run_animation.png set. hero-> setPosition (ccp (hero-> getPosition (). x, hero-> getPosition (). y-1); // walk down break; case 0: hero-> StopAnimation (); // stop all animation and motion break ;} // determine whether to launch an attack if (btn-> isTouch) {if (hero-> IsAttack) // the hero is not attacking return; hero-> AttackAnimation ("attack1_animation.plist ", "attack1_animation.png", "attack _", 6, rocker-> rocketRun); m_pProgressView-> setCurrentProgress (m_pProgressView-> getCurrentProgress ()-1); // change the blood volume }}

1 reduction each time:

Decrease by 10 each time:

<Span style = "font-size: 24px;"> at last, you can leave your email address as needed, whether it is a project or a resource ~ </Span>