C # development Wpf/silverlight animation and games series Tutorials (Game Tutorial): (43)

C # development Wpf/silverlight animation and games series Tutorials (Game Tutorial): (43) Making Game main Menu single-sided board and mouse key fast skill bar

Each MMORPG has a main menu, which is usually placed at the bottom of the window. Most of the characters in the game are set to operate from here. such as character attributes, objects (parcels), skills, tasks, teams, maps, family, Mempai, shopping malls, system settings, and so on, of course, also includes the shortcut custom menu bar, as well as the "Diablo" in the classic right and left key shortcut skills bar. These content in different games often will be based on their own characteristics slightly adjusted, but the overall similarity. In this section, I will also take the "Swordsman World" game main interface for example, to explain how in Silverlight in the production of a beautiful main menu single-sided board and mouse key shortcut skills bar.

First, we need to complete a frame material for the main interface:

In "Swordsman World", the panel from left to right is the keyboard shortcut menu, the mouse key shortcut menu and Game Main menu, then I start from the main menu on the right. You can see the parts of the interface that have been hollowed out to fill the corresponding menu buttons. If the simple only with a picture to fill, the exquisite degree of the game will be greatly reduced; We recall the Web page navigation menu bar, when the mouse entered it will be through CSS or JS transformation style, so as to highlight the effect of beautification. We can also use a similar scheme in the game, that is, when the mouse into the main menu button, the menu button picture from the original gray switch to bright, for example:

This is through the two pictures to switch to achieve the button to highlight the effect, but in the actual development, especially Silverlight based on the material from time to time to download the game, we need to minimize the amount of material resources and capacity, so I particularly recommend the use of transparent highlighting mask to achieve the highlight button, for example: