0
\$\begingroup\$

I would like some know how can someone make an animation like this, in Monogame specifically.Since i am completely clueless on how to go around this i how should i go about this ? I hate asking questions this general, but since i don't know how to do that, adding any more to the question wouldn't really help. Even the general concept behind this is highly appreciated.

http://i.stack.imgur.com/zcVCp.gif

\$\endgroup\$
2
\$\begingroup\$

This animation is likely a bunch of different colored sprites moving or fading in to follow the path of the trail. Look up particle systems. They let you control many sprites/objects at once easily with a set of rules to define their movement.

For this example, you can start with a white circle moving in pre-defined path. Using trigonometric functions is a good way to easily make some curved paths, and you can use bezier curves or splines, although they are more complex to define mathematically. You can also just make it follow the mouse cursor.

Either way you choose, once you have the moving circle, you make a list of sprites to store them in different sizes and colors depending on their order in the structure. You pass on the location to the other sprites in the list the on each frame to create a motion lag, which makes the trail.

This tutorial does a great job at showing how to make particles with this kind of behavior in XNA (MonoGame follows almost the same syntax).

\$\endgroup\$
3
  • \$\begingroup\$ wouldn't that mean that i would have to use the draw() method a lot ? I've heard that this is inefficient \$\endgroup\$
    – dimitris93
    Jan 9 '15 at 16:00
  • \$\begingroup\$ however this tutorial is exactly what i was looking for, i will study it in detail soon and use it in my game i'm making. thank you very very much :) \$\endgroup\$
    – dimitris93
    Jan 9 '15 at 16:11
  • \$\begingroup\$ By default the Spritebatch defers rendering so all sprites are rendered in as few calls as possible. It can support up to 2048 sprites (XNA 4 implementation) before it is forced to start a new batch. If you use the same texture with the same sprites, you won't need to optimize a lot. \$\endgroup\$
    – ChrisC
    Jan 12 '15 at 20:38
1
\$\begingroup\$

What you are looking for is called ribbon trail. While a particle trail does the job as well there are a few problems with using particles:

  • missing particles at high speed
  • gpu overdraw
  • effect limited to particle settings

However if this effect fits your game better then here is a good tutorial: World of Goo Cursor

This porblems were the reason i implemented a 2d ribbon trail in my self made xna like ios/opengl es 2 framework. here is a gist of the objective-c code (syntax is different, functions are more or less the same): Ribbon Trail

My implementation is not perfect and i can list you my known issues:

  • The end of the trail is ontop of the beginning (fix: reserve vertices)
  • There is a buged triangle at the start of the trail (had no time to work on it since ages)

but this should give you a good idea how to get this effect (trail + round particle on top to make it smooth or generated verticed attached to the trail to make it round)

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.