Shulou(Shulou.com)06/02 Report--

Cocos2d-x how to achieve trailing fade effect MotionStreak, aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

[nagging]

In the process of the implementation of the game, we sometimes need to achieve the trailing effect on the trajectory of a game object, which is like dragging the tail like an airplane, which makes our game feel good visually.

For example: knife light, bullet trajectory, meteor scratches and so on.

Cocos2d-x provides a built-in way to implement the trailing fade effect: MotionStreak.

Stole some pictures, heh.

Of course, to make a cool trailing effect, it needs to be combined with particle special effects Particle.

The following is accompanied by an aesthetic trailing effect (MotionStreak + particle special effect) to increase everyone's passion for learning.

Although I don't know how to make love, I think when you finish learning MotionStreak, you will definitely get the following love.

[thank you]

Http://blog.csdn.net/honghaier/article/details/8600896 (in-depth analysis of source code principle)

Http://cn.cocos2d-x.org/tutorial/show?id=2225 ("Fruit Ninja" scratching knife light)

Http://blog.csdn.net/dionysos_lai/article/details/39083031 (meteor trailing effect)

[MotionStreak]

1. Principle

The trailing effect of MotionStreak is actually based on the fact that segments of stripes are dynamically generated within the corresponding distance, and then gradually hidden.

You can specify the speed of blanking fade (time seconds), the minimum distance of a stripe minSeg, as well as the width of the stripe thickness (stroke), stripe color value (color), and the corresponding texture image object.

Principle: MotionStreak in the process of moving (when the setPosition position changes), will dynamically generate a section of bands, and then these segments in the life cycle fade seconds, gradually fade (slowly become transparent), thus forming a trailing effect.

As shown below:

PS: because the stripes are connected one by one to form a trail, if the stripe is too thick (stroke is too large), there may be a "disjoint" effect visually, just like the picture above. Therefore, in practical use, the size setting of stroke should be reasonable.

2. Creation method

There are two ways to create a MotionStreak:

> one is to use image resource files as textures.

> the other is created by texture image Texture2D.

The description of each parameter has been explained in the principle.

/ * two ways to create a MotionStreak * * / / fade: trailing fade time (seconds) / / minSeg: the minimum fragment length (the size of the faded clip). The minimum distance between the connected vertices of a trailing strip. / / stroke: the width of the faded stripe. / / color: fragment color value. / / path: the file name of the texture image. / / texture: the object pointer to the texture image. Static MotionStreak* create (float fade, float minSeg, float stroke, const Color3B& color, const std::string& path); static MotionStreak* create (float fade, float minSeg, float stroke, const Color3B& color, Texture2D* texture); / / use examples auto motionstreak = MotionStreak::create (1.0f, 1.0f, 10.0f, Color3B (255,0,0), "streak.png"); / /

3. Correlation function

In order to achieve the trailing fade effect, MotionStreak also overloaded some functions of the Node class, such as update, draw, setPosition and so on.

Every time the MotionStreak changes its position (setPosition), a trail is formed. In update, new vertices (stripe segments) are generated according to the location information, and the previously generated stripe segments fade or disappear.

/ / * * related function * tintWithColor: sets the vertex color value. * reset: delete all stripes and reset them. * setFastMode: set the quick mode. * setStartingPositionInitialized: you don't need to know or use it. * * / / the color value void tintWithColor (const Color3B& colors) used by the stripe segment; / / reset to delete all stripe segments void reset () / / whether the setting is fast mode, the default is true / / when it is fast mode, the new vertices are added more quickly, but the new vertices have a smaller exact value / / PS: practice test, please forgive the ignorance of the dish, if the dish really can not see the difference. no, no, no. Inline bool isFastMode () const {return _ fastMode;} inline void setFastMode (bool bFastMode) {_ fastMode = bFastMode } / / set it to false when the MotionStreak is created (meaning it has not been moved after creation) / / once the Position is changed (that is, after moving), it will be set to true (indicating that the trailing effect starts, and then the movement will have a trailing effect) / / PS: generally, it is not set manually, so you do not need to know about this function. Inline bool isStartingPositionInitialized () const {return _ startingPositionInitialized;} inline void setStartingPositionInitialized (bool bStartingPositionInitialized) {_ startingPositionInitialized = bStartingPositionInitialized;} / /

4. Support Action action

MotionStreak inherits from the Node class. And since it will pull a trail once it moves (the position Position has changed), it can also form a trailing effect by performing Action actions such as MoveTo/MoveBy or JumpTo/JumpBy.

5. Use steps

(1) create a MotionStreak. MotionStreak::create ().

(2) add MotionStreak to the scene. This- > addChild ().

(3) set the position MotionStreak- > setPosition (), or perform the mobile Action action.

(4) once the position is changed, a trailing effect will be formed.

[code practice]

1. "Fruit Ninja" scratching knife light effect (MotionStreak + particle special effect)

For code implementation, please see: http://cn.cocos2d-x.org/tutorial/show?id=2225

The knife light effect produced by gesture strokes is to use the touch movement event to change the position of the MotionStreak to form a trail.

2. "Meteor scratch effect" (Sprite move + MotionStreak + Particle effect)

For code implementation, please see: http://blog.csdn.net/dionysos_lai/article/details/39083031

The tail of a meteor is constantly changing the position of the MotionStreak in the schedule/update to form a tail.

Next, let me introduce another "cool" example of a simple implementation of MotionStreak.

3. Realize the trailing effect by touching the event.

The picture resource is stolen from the Meteor scratch effect.

[PIC_XX.png]

[steak.png]

Expected results:

> Touch starts touchBegan, and the position of the meteor is set to the touch point.

> Touch Mobile touchMoved, the meteor moves with the touch point, while the MotionStreak follows the meteor to form a trailing effect.

Create two different specifications of MotionStreak and see how it works.

> set minSeg = 50, stroke = 30, color = WHITE, and texture to steak.png.

> set minSeg = 1, stroke = 10, color = RED, and texture to steak.png.

Add the following variables and functions to HelloWorld.h.

/ / class HelloWorld: public cocos2d::Layer {public: static cocos2d::Scene* createScene (); virtual bool init (); CREATE_FUNC (HelloWorld); / / Touch event callback function bool onTouchBegan (Touch* pTouch, Event* pEvent); void onTouchMoved (Touch* pTouch, Event* pEvent); private: Sprite* star; / / Meteor Elf MotionStreak* streak; / / trailing}; / /

3.2. in init () of HelloWorld.cpp, create a meteor wizard, MotionStreak trailing, and add touch listening events.

/ / bool HelloWorld::init () {if (! Layer::init () return false; / / Meteor Elf Sprtie star = Sprite::create ("PIC_XX.png"); star- > setPosition (100,100); this- > addChild (star); / / Meteor trailing MotionStreak streak = MotionStreak::create (0.5f, 50,30, Color3B::WHITE, "steak.png") / / streak = MotionStreak::create (0.5f, 1,10, Color3B::RED, "steak.png"); streak- > setPosition (star- > getPosition ()); / / set the location of the trailing streak this- > addChild (streak); / / register single touch auto dispatcher = this- > getEventDispatcher (); auto listener = EventListenerTouchOneByOne::create (); listener- > onTouchBegan = CC_CALLBACK_2 (HelloWorld::onTouchBegan, this) / / Touch listener- > onTouchMoved = CC_CALLBACK_2 (HelloWorld::onTouchMoved, this); / / Touch Mobile dispatcher- > addEventListenerWithSceneGraphPriority (listener, this); return true;} / /

3.3. Realize the touch event

> Touch start touchBegan: the meteor position is set to the touch point.

> Touch Mobile touchMoved: the meteor moves, and the streak follows the meteor to form a trailing effect.

/ Touch start: set the location of star and streak bool HelloWorld::onTouchBegan (Touch* pTouch, Event* pEvent) {/ / get the touchpoint location Vec2 pos = pTouch- > getLocation (); / / set location star- > setPosition (pos); streak- > setPosition (star- > getPosition ()); / / delete all active stripe segments streak- > reset (); return true } / / Touch Mobile: move star and streak location void HelloWorld::onTouchMoved (Touch* pTouch, Event* pEvent) {/ / Touch shift Vec2 delta = pTouch- > getDelta (); / / set location star- > setPosition (star- > getPosition () + delta); streak- > setPosition (star- > getPosition ());} / /

3.4. Running result

(1) set minSeg = 50, stroke = 30, color = WHITE, and texture to steak.png.

(2) set minSeg = 1, stroke = 10, color = RED, and texture to steak.png.

(3) about the streak- > reset () function.

Careful little friend, must have found me in the above two GIF pictures at the beginning, the mouse clicked everywhere several times.

Why would I do this "useless" operation? Because what I'm going to talk about is why I'm messing up.

I wrote this sentence in onTouchBegan: streak- > reset ().

If you get rid of that sentence. So every time the touch starts, the meteor moves directly to the touch point, and the streak changes its position, and the following phenomenon occurs: no touch and drag, just a mouse click, and trailing scratches.

The purpose of streak- > reset () is to clear all active stripe segments.

3.5. Analysis and summary

> if the minSeq and stroke settings are larger, that is, each stripe is longer or wider, you will see the obvious "section by section" effect visually.

> if the trailing effect is not combined with particle effects, it will be as monotonous as the example above.

> MotionStreak will have a trailing effect as long as it changes its position. Whether it is setPosition, or perform an action (MoveTo, JumpTo).

> the reset () function clears all existing fading stripes, which is called reset.

This is the answer to the question about how to achieve the trailing effect of MotionStreak in cocos2d-x. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.