Helpfull Classes for game menu and game interface:
Graphic and text buttons, links, icons, menu windows...
Oncoming update features:
Icons/image scroll windows.
Loading and Progress bars
|Objectives of the library XNA INTERFACE ELEMENTS:
|1. Ease of use with less code as possible
2. Speed of implementation of various elements.
3. Complete customization of graphics.
4. Execution speed.
5. Easy integration with any type of game.
The primary objective of this library as well as simplify and speed up the construction of an interface.
Has as its objective the easy as point of use with less code as possible while remaining completely customizable.
For now (version 2.0 October 27 2009) there are 4 class:
Button Class: A simple but very helpfull class to create graphic and text buttons/links.
Icon class: A class to create draggable and double click sensible icons.
Menu class: A class for buttons/links list menu.
Windows class: A graphic customizable class for scrollable text and image.
Rar file containing XML comments. Copy that in the same dll directory.
Comments in english and italian lenguage.
Sorry for any translation errors, i'm italian :)
|Oncoming update features:
|Icons/image scroll windows
|Windows brands (To create windows of different shapes (circular, etc. ..))
|Loading and Progress bars
|Input text area
Info about Window (text examples) class
Use this class is really simple and very quick, just select the image of window background and send the text.
Then also set the sensitive areas to the millimeter, as the bar to drag, the areas for the arrows and many other options such as transparent windows and other features.
Example of Text Window class:
With a 2D graphic program, like photoshop, draw your window and the little button to scroll in the scrollbar.
You can initialize and set most features of the window, for example:
window1 = new Game_Window(GraphicsDevice, "window1.png", "scroll1.png", font, new Vector2(400, 300));
window1.text = "Ei fu. Siccome immobile...."; //Text in the window
window1.is_dragable = true; //If is dragable
window1.scroll_speed = 15; //Text scoll speed (default:5)
window1.arrow_square = 10; //Arrows square side length
//......many other options
In the Draw metod you can draw all windows you have initialized with only this line:
//Draw all windows you have initialized with only this row
And, if you want, can change the alpha of all window on beckground
//Optional - Change window alpha on beckground
Where the parameter "100" is the windows alpha on beckground.
If you want, with this line:
window1.see_sensible_area = true; //See mouse sensible rectangle area (slows performance)
you can draw also the sensible area to setting at best.
The window image:
The scroll button:
The full code to initialize this window:
////////////Initialize the window2//////////
window2 = new Game_Window(GraphicsDevice, "window3.png", "scroll2.png", font, new Vector2(100, 400));
window2.text = "This dice will allow you to choose your own unit in shuffle mode. If the number 6 comes out you will have the opportunity to send two units on the same
goal. Singling units with this nut you can not select the champion of your castle. You can select this element only if you are out of your castle. ";
window2.text_color = new Color(230, 200, 200, 240);
window2.is_dragable = true;
window2.see_sensible_area = true; //If you want see the sensible areas
window2.scroll_speed = 3; //Text scoll speed (default:5)
window2.Y_txt_from_top_border = 40; //Text position (pixel) from top of window
window2.drag_area_Height = 40;
window2.win_right_border = 14;
window2.win_bottom_border = -2;
window2.close_square__active = false; //If the window has the close area square
window2.arrow_square = 10; //Arrows square side length
window2.is_open = true; //Initial state
The result with "see sensible area" active:
If you want you can use two Element_buttons to open/close this window or close all windows:
//If click puls1 open the window2
window2.is_open = true; //Open this window
window2.to_front = true; //Post to front this window
//If click puls2 colose all windows
is a simple static class.
Example of a window with image:
To use a window that contains an image, we will use the same class used for text: Element_Window.
We design our window:
Choose the image content and initialized the window:
////////////Initialize the window3 (no text but image)//////////
window3 = new Element_Window(GraphicsDevice, "window4.png", "scroll1.png", font, new Vector2(280, 300)); //Initialize the window
window3.imm_content = myImage; // <<<< Select your image
// window3.imm_fit_to_window = true; // True if want fit your image to window
window3.this_window_cursor_active = true; //If the changing of cursors is active for this window
window3.Title_Apply("Image in a window", font); //Window tile
window3.title_color = new Color(255, 180, 150); //Tile color
window3.title_from_left = window3.Center_title();//Align title to center
window3.is_dragable = true;//If the window is dragable
window3.drag_area_Height = 20; //Pixels drag area Height from top of the window
window3.Y_content_from_top_border = 24; //Content position (pixel) from top of window
window3.X_content_from_left_border = 6;//Content position (pixel) from left of window
window3.Y_content_from_bottom_border = 5;//Content position (pixel) from bottom of window
window3.X_content_from_right_border = 5;//Content position (pixel) from right of window
Just then do not use "window3.text_content" and use window3.imm_content = myImage , where myImage is a simple Texture2D, for example:
// Image to send to window3
myImage = Texture2D.FromFile (GraphicsDevice, "MyImage2.jpg");
Wishing we could use an image that functions as a mask, working on the transparency of the image such as:
With the usual line in Draw of our project, we design the window:
//Draw all windows you have with only this row
The usefulness of this class is summarized in the beautiful interface specification type Morrowind