Project Description
Helpfull Classes for game menu and game interface:
Graphic and text buttons, links, icons, menu windows...

Oncoming update features:
Icons/image scroll windows.
Viewport windows.
Loading and Progress bars
and more...

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. ..))
Viewport windows
Skin window
Loading and Progress bars
Input text area
Slide bars
Scene/menu management

and more...

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.


Other sample:

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
            if (puls1.DrawAndChek(true)){
                window2.is_open = true;   //Open this window
                window2.to_front = true;  //Post to front this window

            //If click puls2 colose all windows
            if (puls2.DrawAndChek(true))

Windows_struct 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

Last edited Nov 4, 2009 at 9:52 PM by WILEz, version 59