Cocos2d-x 3.1.1 Lua sample ActionsProgressTest (progress bar), cocos2dlua

Cocos2d-x 3.1.1 Lua sample ActionsProgressTest (progress bar), cocos2dlua

Cocos2d-x 3.1.1 Lua sample ActionsProgressTest (progress bar)

This blog introduces the progress bar animation in the Cocos2d-x, the progress bar involves the following important classes and methods, I will give you a detailed explanation:

ProgressTo class: Progress controller, which controls the progress from the current progress to a value. In fact, it is an action that controls the progress bar changes.

Its class inheritance diagram is as follows:

Progresst is a subclass of Node.. This class renders and displays internal Sprite objects based on percentages. The change direction includes the radial, horizontal, or vertical direction.

ProgressFromTo: FromTo progress controller, which controls the change of progress from one specified value to another.

Two methods may be confusing:

Left: setMidpoint (cc. p (0, 0 ))

The setMidpoint () function is the starting point for setting the progress bar. (0, y) indicates the leftmost, (1, y) indicates the rightmost, and (x, 1) indicates the top, (x, 0) indicates the bottom.

Right: setBarChangeRate (cc. p (1, 0 ))

The setBarChangeRate () function is used to set the animation direction of the progress bar. () indicates the horizontal direction, and () indicates the vertical direction.

Below I have posted the code in the example and made a detailed comment, corresponding to the animation effect of each progress. If you have any questions, you can leave a message or join the group created by the author:299402133

-- Obtain the screen size: local s = cc. director: getInstance (): getWinSize () -------------------------------------- SpriteProgressToRadial progress bar that rotates around the center. -- a circular progress animation is an animation that disappears while scanning the sprite edge in a circle. ---------------------------------- Local function SpriteProgressToRadial () -- create layer local layer = cc. layer: create () -- initialize the Layer Helper. initWithLayer (layer) -- creates and initializes the progress. The first parameter is the duration, and 100 is the progress local to1 = cc. progressTo: create (2,100) local to2 = cc. progressTo: create (2,100) -- progresststo is a subclass of Node. This class renders and displays internal Sprite objects based on percentages. The change direction includes the radial, horizontal, or vertical direction. Local left = cc. progressTimer: create (cc. sprite: create (s_pPathSister1) -- set the type of progress timing. Here it is left: setType (cc. PROGRESS_TIMER_TYPE_RADIAL) -- sets the display position left: setPosition (cc. (p, 100, s. height/2) -- running action left: runAction (cc. repeatForever: create (to1) -- add to layer: addChild (left) -- right square local right = cc. progressTimer: create (cc. sprite: create (s_pPathBlock) -- set the progress timing type right: setType (cc. PROGRESS_TIMER_TYPE _ RADIAL) -- Makes the ridial CCW right: setReverseDirection (true) -- sets reverse -- sets the position right: setPosition (cc. p (s. width-100, s. height/2) -- running action, infinite loop right: runAction (cc. repeatForever: create (to2) -- add to layer: addChild (right) -- set the title Helper. subtitleLabel: setString ("ProgressTo Radial") return layerend -------------------------------------- SpriteProgressToHorizontal horizontal progress animation demonstration ------------------------ ------------ Local function SpriteProgressToHorizontal () -- create layer local layer = cc. layer: create () -- initialize the Layer Helper. initWithLayer (layer) -- create progress bar local to1 = cc. progressTo: create (2,100) local to2 = cc. progressTo: create (2,100) -- create progress bar animation Renderer local left = cc. progressTimer: create (cc. sprite: create (s_pPathSister1) -- set the progress bar type, which is left: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set left: setMidpoint in the lower left corner of the center. (Cc. p (0, 0) -- sets the horizontal progress bar change rate. y = 0 means no vertical change left: setBarChangeRate (cc. p (1, 0) -- set to left: setPosition (cc. (p, 100, s. height/2) -- execute the action left: runAction (cc. repeatForever: create (to1) -- add to layer: addChild (left) -- progress bar Renderer, which is the progress bar shown on the right. local right = cc. progressTimer: create (cc. sprite: create (s_pPathSister2) -- set the rendering type right: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- Setup for a bar starting fro M the left since the midpoint is 1 for the x -- used to set the direction of the horizontal forward of the progress bar from left to right or from right to left. Here is from right to left right: setMidpoint (cc. p (1, 0) -- Setup for a horizontal bar since the bar change rate is 0 for y meaning no vertical change -- used to set progress bar growth to horizontal or vertical growth, here is the horizontal growth right: setBarChangeRate (cc. p (1, 0) -- set the Renderer to right: setPosition (cc. p (s. width-100, s. height/2) -- let it run an infinite loop progress animation. The progress change is controlled by Controller 2 right: runAction (cc. repeatForever: Create (to2) layer: addChild (right) -- title Helper. subtitleLabel: setString ("ProgressTo Horizontal") return layerend into SpriteProgressToVertical vertical bar progress animation demonstration extends local function SpriteProgressToVertical () -- create layer local layer = cc. layer: create () -- initialize the Layer Helper. initWithLayer (layer) -- creates two Progress animation controllers. 2 s progress value changed to 100 local to1 = cc. progressTo: creat E (2,100) local to2 = cc. progressTo: create (2,100) -- create progress bar Renderer local left = cc. progressTimer: create (cc. sprite: create (s_pPathSister1) -- set the Renderer progress bar type left: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set the progress start point in the left: setMidpoint (cc. p (0, 0) -- set the progress bar to be unchanged horizontally and left: setBarChangeRate (cc. p (0, 1) -- set the left: setPosition (cc. (p, 100, s. height/2) -- infinite loop the first animation controller left: runAction (cc. repeatForever: create (to1 ))- -Add the Renderer to the layer: addChild (left) -- create the progress bar Renderer on the right local right = cc. progressTimer: create (cc. sprite: create (s_pPathSister2) -- set the rendering type right: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set the center point in the upper left corner right: setMidpoint (cc. p (0, 1) -- sets the vertical direction of the progress bar and the horizontal direction does not change. right: setBarChangeRate (cc. p (0, 1) -- set the display position right: setPosition (cc. p (s. width-100, s. height/2) -- let it run an infinite loop progress animation. The progress change is controlled by Controller 2 right: runAction (cc. repeatForever: cr Eate (to2) layer: addChild (right) -- sets the subtitle Helper. subtitleLabel. layer: create () -- initialize the Layer Helper. initWithLayer (layer) -- creates a progress animation controller and completes the 100 progress value loca in 2 seconds. L action = cc. progressTo: create (2,100) -- creates a progress animation Renderer. use the block color image sprite to render local left = cc. progressTimer: create (cc. sprite: create (s_pPathBlock)-sets a progress animation that appears as a circle around the center. Left: setType (cc. PROGRESS_TIMER_TYPE_RADIAL) -- sets the center of the rotation to the left 1/4 position, and the left: setMidpoint (cc. p (0.25, 0.75) -- set the Renderer position to left: setPosition (cc. (p, 100, s. height/2) -- let it run an infinite loop progress animation. The progress change is controlled by the action left: runAction (cc. repeatForever: create (action) layer: addChild (left) -- creates a progress animation Renderer. use the block color image sprite to render local right = cc. progressTimer: create (cc. sprite: create (s_pPathBlock)-sets a progress animation that appears as a circle around the center. Right: setType (cc. PROGRESS_TIMER_TYPE_RADIAL) -- sets the center point of the rotation to the right 3/4 position, and the right: setMidpoint (cc. p (0.75, 0.25) -- [[Note the reverse property (default = NO) is only added to the right image. that's how we get a counter clockwise progress.] right: setPosition (cc. p (s. width-100, s. height/2) right: runAction (cc. repeatForever: create (action) layer: addChild (right) -- set the subtitle Helper. subtitleLabel: setS Tring ("Radial w/Different Midpoints") return layerend -------------------------------------- spriteprogressbarvarous implements local function SpriteProgressBarVarious () -- create layer local layer = cc. layer: create () -- initialize the Layer Helper. initWithLayer (layer) -- creates a progress animation controller and completes the 100 progress value in 2 seconds. local to = cc. progressTo: create (2,100) -- create PROGRESS animation Renderer and use actress genie to render local left = cc. progressTimer: create (cc. Sprite: create (s_pPathSister1) -- set the progress animation left: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set left: setMidpoint (cc. p (0.5, 0.5) -- sets the horizontal change of the progress bar without vertical changes left: setBarChangeRate (cc. p (1, 0) -- set to left of the screen: setPosition (cc. (p, 100, s. height/2) -- let it run an infinite loop progress animation left: runAction (cc. repeatForever: create (cc. progressTo: create (2,100) layer: addChild (left) local middle = cc. progressTimer: create (cc. sprite: c Reate (s_pPathSister2) middle: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- sets the starting position in the middle of middle: setMidpoint (cc. p (0.5, 0.5) -- set progress changes in both the vertical and horizontal directions. middle: setBarChangeRate (cc. p (1, 1) -- sets the middle: setPosition (cc. p (s. width/2, s. height/2) -- let it run an infinite loop progress animation middle: runAction (cc. repeatForever: create (cc. progressTo: create (2,100) layer: addChild (middle) local right = cc. progressTimer: create (cc. sprite: create (s _ PPathSister2) -- set the progress animation right: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set the starting position in the center right: setMidpoint (cc. p (0.5, 0.5) -- set that the horizontal direction of the progress bar does not change, and the vertical direction changes right: setBarChangeRate (cc. p (0, 1) -- set the sprite's position on the right: setPosition (cc. p (s. width-100, s. height/2) right: runAction (cc. repeatForever: create (cc. progressTo: create (2,100) layer: addChild (right) -- set the subtitle Helper. subtitleLabel: setString ("ProgressTo Bar Mid") return Layerend short SpriteProgressBarTintAndFade -- Changes in the color and transparency of progress animations ---------------------------------- local function SpriteProgressBarTintAndFade () -- create layer local layer = cc. layer: create () -- initialize the Layer Helper. initWithLayer (layer) -- creates a progress animation controller and completes the 100 progress value in 6 seconds. local to = cc. progressTo: create (6,100) -- creates an animation sequence, first changes to red in 1 second, then changes to green in 1 second, and then changes to blue in the last 1 second. Local tint = cc. sequence: create (cc. tintTo: create (1,255, 0, 0), cc. tintTo: create (1, 0,255, 0), cc. tintTo: create (1, 0, 0,255) -- creates an animation sequence. First, the transparency changes to 0 in 1 second and disappears, the local fade = cc is displayed after 1 second change to 255. sequence: create (cc. fadeTo: create (1.0, 0), cc. fadeTo: create (1.0, 255) -- create a progress animation Renderer and use the actress genie to render local left = cc. progressTimer: create (cc. sprite: create (s_pPathSister1) -- set the progress animation left: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set left: setMidpoint (cc. p (0.5, 0.5) -- set the horizontal direction of the progress bar to remain unchanged, and the vertical direction to left: setBarChangeRate (cc. p (1, 0) -- set to left: setPosition (cc. (p, 100, s. height/2) -- executes the action and completes the 100 progress value in 6 seconds left: runAction (cc. repeatForever: create (cc. progressTo: create (6,100) -- execute the action, first changes to the red color in 1 second, then changes to the green color in 1 second, and then changes to the Blue left: runAction (cc. repeatForever: create (cc. sequence: create (cc. tintTo: create (1,255, 0, 0), cc. tintTo: create (1, 0,255, 0), cc. tintTo: create (1, 0, 0,255) layer: addChild (left) -- Add Tag left: addChild (cc. label: createWithTTF ("Tint", "fonts/Marker Felt. ttf ", 20.0) -- create a progress animation Renderer and use the actress genie to render the local middle = cc. progressTimer: create (cc. sprite: create (s_pPathSister2) -- sets the progress animation middle: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- sets the starting position in the middle of middle: setMidpoint (cc. p (0.5, 0.5) -- set the horizontal direction of the progress bar to remain unchanged, and the vertical direction to change. middle: setBarChangeRate (cc. p (1, 1) -- set the display position to the middle of middle: setPosition (cc. p (s. width/2, s. height/2) -- execute the action, complete the 100 progress value in 6 seconds middle: runAction (cc. repeatForever: create (cc. progressTo: create (6,100) -- create a fade-in and fade-out animation local fade2 = cc. sequence: create (cc. fadeTo: create (1.0, 0), cc. fadeTo: create (1.0, 255) middle: runAction (cc. repeatForever: create (fade2) layer: addChild (middle) -- add the label middle: addChild (cc. label: createWithTTF ("Fade", "fonts/Marker Felt. ttf ", 20.0) -- create a progress animation Renderer and use the actress genie to render the local right = cc. progressTimer: create (cc. sprite: create (s_pPathSister2) -- set the progress animation right: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set the starting position in the center right: setMidPoint (cc. p (0.5, 0.5) -- set that the horizontal direction of the progress bar does not change, and the vertical direction changes right: setBarChangeRate (cc. p (1, 1) -- set the position on the right: setPosition (cc. p (s. width-100, s. height/2) -- execute the action and complete the 100 progress value in 6 seconds. right: runAction (cc. repeatForever: create (cc. progressTo: create (6,100) -- first changes to red in 1 second, then changes to green in 1 second, and then changes to blue right in the last 1 second: runAction (cc. repeatForever: create (cc. sequence: create (cc. tintTo: create (1, 255, 0), cc. tintTo: create (1, 0,255, 0), cc. tintTo: create (1, 255,) -- create the right: runAction (cc. repeatForever: create (cc. sequence: create (cc. fadeTo: create (1.0, 0), cc. fadeTo: create (1.0, 255) layer: addChild (right) -- add the label right: addChild (cc. label: createWithTTF ("Tint and Fade", "fonts/Marker Felt. ttf ", 20.0) -- sets the sub-tag Helper. subtitleLabel: setString ("ProgressTo Bar Mid") return layerend short SpriteProgressWithSpriteFrame -- Progress Animation: use the single-frame Sprite in the sequence frame to demonstrate short local function SpriteProgressWithSpriteFrame () -- create layer local layer = cc. layer: create () -- initialize the Layer Helper. initWithLayer (layer) local to = cc. progressTo: create (6,100) -- create the progress animation controller. the progress value in 6 seconds changes to 100 cc. spriteFrameCache: getInstance (): addSpriteFrames ("zwoptex/grossini. plist ") -- creates an animation timer and uses the grossini_dance_01.png image in the sequence frame for animation rendering. local left = cc. progressTimer: create (cc. sprite: createWithSpriteFrameName ("grossini_dance_01.png") -- sets the progress animation left: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- set the start position to left: setMidpoint (cc. p (0.5, 0.5) -- sets the horizontal change of the progress bar without changing the vertical direction left: setBarChangeRate (cc. p (1, 0) -- set left: setPosition (cc. (p, 100, s. height/2) -- executes the action and completes the 100 progress value in 6 seconds left: runAction (cc. repeatForever: create (cc. progressTo: create (6,100) layer: addChild (left) -- creates an animation timer and uses the grossini_dance_02.png image in the sequence frame for animation rendering. local middle = cc. progressTimer: create (cc. sprite: createWithSpriteFrameName ("grossini_dance_02.png") middle: setType (cc. PROGRESS_TIMER_TYPE_BAR) middle: setMidpoint (cc. p (0.5, 0.5) middle: setBarChangeRate (cc. p (1, 1) middle: setPosition (cc. p (s. width/2, s. height/2) middle: runAction (cc. repeatForever: create (cc. progressTo: create (6,100) layer: addChild (middle) -- creates a schedule animation producer and uses the grossini_dance_03.png image in the sequence frame for animation rendering. local right = cc. progressTimer: create (cc. sprite: createWithSpriteFrameName ("grossini_dance_03.png") right: setType (cc. PROGRESS_TIMER_TYPE_BAR) -- Setup for a bar starting from the bottom since the midpoint is 0 for the y right: setMidpoint (cc. p (0.5, 0.5) -- Setup for a vertical bar since the bar change rate is 0 for x meaning no horizontal change right: setBarChangeRate (cc. p (0, 1) right: setPosition (cc. p (s. width-100, s. height/2) right: runAction (cc. repeatForever: create (cc. progressTo: create (6,100) layer: addChild (right) Helper. subtitleLabel: setString ("Progress With Sprite Frame") return layerendfunction ProgressActionsTest () -- create a scenario: local scene = cc. scene: create () -- create a method table Helper. createFunctionTable = {SpriteProgressToRadial, failed, spriteprogressbarvarous, failed, success} -- add scene: addChild (failed () -- add return menu scene: addChild (CreateBackMenuItem ()) -- switch cc. director: getInstance (): replaceScene (scene) end

What is the role of the progress bar of the cocos2d-x, what is the need to load the progress bar, there are specific examples,

The progress bar is used in many places. First, you can view the game progress and the unit's blood volume and magic volume. If this attribute can be quantified, you can use the progress bar to display the progress, progress bars are often used in game development.
Of course, you can download network resources, loading progress of program initialization, and so on.
There are many examples of initialization Methods online,
CCProgressTo * p1 = CCProgressTo: actionWithDuration (2,80 );
CCProgressTimer * pt = CCProgressTimer: progressWithFile ("radial.png ");
Pt-> setType (kCCProgressTimerTypeRadialCW );
AddChild (pt );
Pt-> setPosition (ccp (size. width/2, size. height/2 ));
Pt-> runAction (CCRepeatForever: actionWithAction (p1 ));

How to combine cocos2d-x with Lua to use specific points

The cocos2d-x comes with the lua engine. Look at this. Although it is English, it is easy to understand.
Cocos2d-x NEW Lua Engine README
Main features
Support autorelease CCObject object.
Call Lua function from C ++ (local, global, closure), avoid memory leaks.
Add CCNode: setPosition (x, y), CCNode: getPosition () huge performance boost.
Remove needless class and functions from tolua ++. pkg files, improved performance.
CCMenuItem events handler.
CCNode onEnter/onExit events handler.
CCLayer touch & multi-touches events handler.
Check the two connections.
Www.cocos2d-x.org/..uments
Scripting and Translating between Programming ages