Silverlight Game development tips: Blood strips and progress strips

The display of the blood bar in the game is very common, visually see the character life state, and look at other people's life state, the blood bar is not only applied in the interface, the player himself and the life of the monster display will be in real time in the game scene, good blood strips effect can be a lot of games, this time we will simply make a few blood strips.

It was gratifying to see the garden as Silverlight became more and more prosperous, because it was still lonely last year for the Silverlight technology, and now with so many brothers in the fight, there is nothing to be mistaken about Silverlight, except for the euphoria and ecstasy.

There are many ways to make a blood bar, which is usually made into a separate control, so conveniently placed anywhere, and if it goes deeper, the general bar may contain the following attributes: Maximum, current value, status, and so on, and I'm going to talk about the basics, and more extended applications can be modified on this basis.

Now open the mainpage and draw a rectange on it:

Then copy it and make up the grid:

There are two rectangles up and down, and we use the upper rectangle as the padding for the blood bar, and the bottom side:

Select the top of the fill is red, we know that any control is wide and high display width, so to use these two properties, you can achieve the effect.

But we have to consider the margin problem, so the horizontal alignment for the test left, if the blood bar is up and down can set up the alignment of the range.

Now only need to control the top of the rectangle Width property can produce increased or reduced blood bar effect, in the background code control or binding properties can also, but this is an unknown maximum number of values, so we need the parent container ActualWidth property to get, the specific algorithm is not difficult: Width = ActualWidth * Percent;percent is calculated by the blood bar, if it is designed as a stand-alone control, you can take the MAXHP and other attributes to participate in the operation of the percentage.

If you want more interesting effects, you can fill in the picture, and here is the simple operation of the image brush when you select a rectangle.

In the beginning of the picture, you can see that I have prepared a few demos, because the time is not done so delicate, a good UI designer to help, can achieve a very good interface experience.

Interested students can download the source code directly to study, itself is not complex, with blend open can be previewed and modified, have analogy ability of capable, must think of blood bar and progress bar form very consistent, so just want to simple changes can be used when the progress bar, but need to pay attention to the UI thread before and after the problem.

This project source code downloads the address as follows: Click to download directly