Use xNa to achieve current effect on Windows Phone 7

Note:When I write a blog post in my blog, I also select some websites that are translated into English and published in English. I often use the network name elecpiano or my English name Jason Lee. TheArticleI will write and publish them myself. You are welcome to read this article.
Http://xnaelectriceffect.codeplex.com/
Http://www.windowsphonegeek.com/articles/Electric-Effect-on-Windows-Phone-7-using-XNA
Http://www.symbio.com/techblog? P = 461
 

 

Recently, I am working on a elimination game, which requires a strong current to cross the screen. First, I thought of using particle systems. But after countless parameter adjustments, I found that particle systems are not suitable for current and lightning effects.

 

Cause analysis:
Whether it is a complex or simple particle system, the core idea is to create effects such as flame, smoke, and explosion by constantly releasing the scattered and radiant little highlights of emit. The biggest difference between the current and lightning effect and the former is that the moving trajectory of the former particle is radial, while the distribution and movement of the latter is linear (so-called linear, post-Stationery ).
If you want to intuitively feel the current motion track, you can search for keywords such as "Plasma" or "plasma ball" on the Internet, or even download related mobile apps to try it out.

It is the current effect of xNa on Windows Phone 7:

Welcome to downloadExampleCode.

 

Design Concept:
I think the current motion model can be abstracted:
Each current is composed of a series of small highlights. These highlights are distributed along a specific curve at any time. Select several feature points in the curve, and then move the positions of these feature points continuously to simulate the creep of a current.

See the following figure:

A blue line connects the start and end of a current. Five red dots are the selected feature points.

Try to imagine that at a certain time point, these five points are located in any position within the scope of their respective activities. Then, the effect is shown in:

The red line represents the actual small highlight distribution curve. Of course, using a straight line to connect two feature points is the simplest practice, but it seems somewhat less realistic. We can use different curve calculation methods to improve this. Is to use Catmull RomAlgorithmTo improve the effect:

Note: The Catmull Rom method is self-contained in the vector2 class of xNa. For more information about the Catmull Rom algorithm, see related articles on the Internet.

 

Further improvement:

In fact, these characteristic points do not move infinitely, but should move within a specific range. See:

The blue translucent circular area is the moving range of each feature point. Each small highlight starts from the origin and moves outward at a random speed in a random direction. When the boundary of the radius is reached, it returns to the origin, move in another direction. In this way, you can create a more realistic current effect (see some plasma ball animations on the Internet. After the current is bent to a certain extent, it will start crawling again ).

 

Flashing effect:
Current creep has been achieved, but it is not enough. Observe the plasma ball effect again, and you will find that the current is flickering during the crawling process. The flickering effect can be achieved by constantly modifying the transparency of each small highlight.
But! Human eyes are too sharp. Any mechanical change will make us feel very pretentious. Therefore, we need to randomly change the materials of small highlights. Material changes must follow the principle of "similar". You can simply change the color and size. Otherwise, the changes will be "messy.

 

Unexpected gains:
Because each feature point moves independently, it is inevitable that at a certain time point, some feature points are closer to each other, while other feature points are farther away from each other. This uneven distribution changes the light and shade distribution of current: the more concentrated the small highlights, the brighter the visual effect. What's more interesting is that these changes in brightness and shade are also moving freely in the process of constant electric currents, further satisfying the eyes that like to pursue freshness.

 

Code structure introduction:
In the sample code, the jasoneffeciceffect Project is a reusable Windows Phone 7 library. Where:
1. electriceffect is a class that represents a current effect. It can contain multiple electricflow objects (as the name suggests, representing a current ).
2. Each electricflow object contains several electricnode objects (the feature points mentioned above ).
3. The electriceffecttype enumeration variable is used to specify the curve calculation methods between feature points, including line, beiser, and catmullrom ?). Different curves can make you feel different, sharp, or straight.
4. The density attribute of the effeciceffect class defines the density of the distribution of small highlights between feature points and feature points.
5. The lifespan attribute of electricflow is used to define how often the small highlight material will be changed.

For more information about how to quickly generate a current effect, see the initelectriceffect () method in the gamepage. XAML. CS file in the jasonelectriceffectdemo project.

 

This article has less code and more text for analysis. Thank you for reading the last one.

Welcome to downloadSample CodeAnd share ideas for improvement and expansion.