Silverlight game development tips: Role upgrade Special Effects

This time, we will use Projection to complete some interesting special effects commonly used in RPG games: Upgrade and transfer point special effects. We do not need to ask the special effect artist to make complex and brilliant special effects, instead, they only need to provide several key images or Design Styles. If you have the ability to teach them to use Blend for special effects, that would be great. Well, I will not talk about it, in Silverlight, the following effects can be easily achieved.

The shooting angle effect is not very suitable, but we can see it clearly. Now we will complete this effect for an upgraded special effect animation, as shown below.

Although Blend is easy to implement such Silverlight special effects, readers still need to understand the basic knowledge of Projection. The previous two articles have provided detailed examples, if you need to make up the course, read it again.

First, you need a project, and then create a control named Effect_Levelup. Now, prepare a role reference and place it at the following position. The reason is that you need to locate it at the origin:

For ease of operation, we recommend that you convert LayoutRoot into a Canvas control. Why do you want to place roles like this? You need to understand the Silverlight container concept. The position of the control is located in the upper left corner, this has the same relationship with the screen, so we can align future controls directly with the Center of the role ).

The following is the time to test the capabilities of art design. Our goal is as follows:

Don't be frightened by these things. In fact, it is not difficult to do it. Here we only use 3D Rotation of Projection, and others only use simple displacement.

We will first draw this circle:

This circle is only filled with a purple color, and then you can click set in the Effect attribute

Next we will copy this circle, but remove the blur effect and fill the color

For more information about color settings, see the right side. You may find that it is not the effect caused by fill colors, but Stroke. We suggest you try it.

Then let's draw a few more inner circles.

These inner rings can be painted as a seemingly flashing ring, and some makeup points can be made on them.

To decorate some beautiful luminous balls, you need to copy A Central Ring, fill them with A central gradient, and set the color value A to transparent. After several compound colors, you can get A "little bright spot ", the next step is to combine them to achieve the desired effect.

Now we can combine all the circles we have just drawn into a Grid:

The next step is to combine the combined Grid into a new Grid. Why do we do this, because we need to change the perspective feeling and prepare for rotation in the subsequent animation?

At this point, we can see that the gradient is not transparent. It is also obtained by filling the opaque Mask.

Add several optical columns to make the effect more remarkable:

You only need to use Ellipse. We can use a Path that is not too complex. In the end, we need to add a few rings to make this upgrade animation richer.

There is almost no difference between the methods for making these rings and the previous ones. Here we will explain the examples of 3D Rotation again.

For better operations, they are now merged into a container,

Next is the transfer event. I plan to explain it in detail in the second part. Here is an image of the completed version. Please refer to it.

This animation is not difficult to do. It is difficult to understand the relationship between these controls. Finally, we delete the reference map of the role, generate a project, and add the control to MainPage, check the effect.

We put the special effect at on the top left and use Canvas as the container, so the content will not be deformed.

Then we write some logic and code in Mainpage. Please note that I have named the Upgrade button btn_levelup in the middle and the special effect animation effect_Levelup, the storyboard animation name in the control for the upgrade effect is ANI_Show.

Code Snippet

1. Public partial class MainPage: UserControl
2. {
3. Public MainPage ()
4. {
5. InitializeComponent ();
6. Effect_Levelup.ANI_Show.Begin ();
7. Btn_levelup.Click + = new RoutedEventHandler (btn_levelup_Click );
8. }
9.  
10. Void btn_levelup_Click (object sender, RoutedEventArgs e)
11. {
12. Effect_Levelup.ANI_Show.Begin ();
13. }
14. }

This Code only triggers animation playback when you click it.

For details about the effect, refer to the direct example below. Let's talk about the special effect production of the transfer point tomorrow :)

Source code: Click to download directly

Recommended Silverlight game development blog: dark blue right hand