Silverlight game development tips: track follow Effect

We usually have a variety of particle effects in the game, one of which is the trajectory animation that follows the mouse, where the mouse passes through will produce some special effects, this method is often used among particles. This article uses a simple example to improve the particle system, which is more streamlined and more efficient.

If you are interested, you can read the previous

Silverlight C # Game Development: Brilliant particle effects-particle effects (2)

But this implementation method is simpler and more inclined to the art designer, because this programming will basically be implemented in Blend.

Before proceeding, you need to understand the MouseMove event, basic controls, and storyboards. This is the only way to make the following operations easier to understand, when you move the mouse over a place, the twinkling stars will appear.

First, create a project, and then create a user control UserControl. we name it FlashPoint. As the name suggests, this is a flickering point.

The creation method may be different, but we only need a LayoutRoot with no fill color, and then draw the image we want at the center on the top left. Of course, you can also use the image.

Now, you can create a storyboard animation, which allows you to orchestrate the animation based on your needs.

In the following example, implement a small box that appears flickering and then gradually disappear.

Select the target to be animated, add a key frame, and find the transformation attribute (Transform) of the target control, and set it to 0, 0, so that the animation is completely invisible at the beginning of playback.

Drag the timeline of the story board, add another key frame at the position of 1 second, and set the XY scale-down and transform on the key frame, the Set position is the place where the first key frame is located.

Now we can select the key frame. We can use the buffer (Easing) method that comes with Silverlight to make the flickering effect. Let's choose the Elastic Out method. You can play it and see how it feels :)

Now, set a new key frame at the position of 1.5 seconds, set the opacity to 0%, and play it again. You will see a small box that suddenly jumps out, and then the story board animation disappears.

Now, the basic particle control has been created. Now, open the MainPage control and set the background to gray or gradient color, because the small square above is white, change LayoutRoot from Grid to Canvas to facilitate location operations,

The following is the Coding time. Here I will get a few tips to increase the convenience of the program.

In the class structure of flash point. cs, adding a line of code is the starting animation of the storyboard, for example: Storyboard1.Begin ();

Now open VS or modify the. cs file in Blend, add the mouse moving event to MainPage. cs, or rewrite the OnMouseMove method. I will use the rewrite method :)

Code Snippet

1. Public partial class MainPage: UserControl
2. {
3. Public MainPage ()
4. {
5. InitializeComponent ();
6. }
7. Protected override void OnMouseMove (MouseEventArgs e)
8. {
9. Var pos = e. GetPosition (this );
10. Var point = new FlashPoint ();
11. LayoutRoot. Children. Add (point );
12. Canvas. SetLeft (point, pos. X );
13. Canvas. SetTop (point, pos. Y );
14. Base. OnMouseMove (e );
15. }
16. }

Now let's run it,

But there are still many problems. For example, there must be a lot of new objects, so how can we correctly remove the control objects? In my other article about the particle, the method used is the cyclic Operation of the timer, and then the traversal is reversed to remove the qualified ones. This is because the particle has a very uncertain factor, therefore, traversal is required, not to mention the trajectory computing logic. Although we are clear about the animation duration, we can use the timer to RemoveAt from the set, this time, we will use a simpler method to solve this problem. See the following code.

Code Snippet

1. {
2. Public FlashPoint ()
3. {
4. InitializeComponent ();
5.  
6. Storyboard1.Completed + = new EventHandler (storyboard+completed );
7. Storyboard1.Begin ();
8. }
9. Void storyboardcompleted (object sender, EventArgs e)
10. {
11. Storyboard1.Completed-= storyboardappscompleted;
12. Var parent = this. Parent as Panel;
13. If (parent! = Null)
14. Parent. Children. Remove (this );
15. }
16. }

This is the construction and Event code of the custom control FlashPoint. register the animation completion event in the constructor, and then implement our specific logic in the completed part, our purpose is to let the parent level remove us, so first we need to determine whether it is a standard Panel container. For Panel classes, see the official Silverlight documentation.

Download the source code of this project as follows: Click to download directly

Actual display effect:

Recommended Silverlight game development blog: dark blue right hand