Gui editor explained

From WiCWiki

Jump to: navigation, search

Contents

Features

There are 5 different features on your graphical menu. Each button with a special feature.

Image:features.jpg

Edit: This is where you can move and set your properties for each widget on your different screens.

Test: Activates the current screen and allows you to preview your MouseOver on buttons and sliders etc.

Grid: This sets the grid you have decided in option to your workspace.

Snap: Makes all widgets snap to the different grids that you have put on your workspace

Options: Where you change resolution, background, grid size and other stuff. More details in step2.


Options

NOTE: The functions in the options tab has been changed since this was written, it now looks diffrent and will chrash if you try to select a background image with the "..." button, its a known bug, and it will probably be fixed at some point or another (Hopefully :) )

Image:options.jpg


Working Directory:

Be sure to set your working directory to you world in conflict folder.

(example: “c:\program\sierra entertainment\world in conflict\”)


Editor Window:

Allows you to set a background image or select a background color of your editor.

This is also where you set your resolution on your workspace.


Grid & Snap:

This is where you set your grid size and sets if you want widgets to snap to your grid.


GUI-editor

After opening a gui file (example: “c:\program\sierra entertainment\world in conflict\guis\gui_ingame_slim.xml”) you will notice that your editor will start to fill up with stuff.

Image:editor.jpg


Screen:

This is your different gui-screens that your gui-file contains.


Project:

Shows which widgets are on the current selected screen.


Properties:

After selecting a widget this is where you edit your widgets properties. There are different properties for all widgets.


Workspace:

Will show all widgets making you able to place them exactly as you want.


Prefabs

If you go to window in your menu and then select prefab editor you will get a new screen which allows you to add or delete prefabs.



Prefabs:

This list contains all the prefabs you have for all your GUI-screens, so be careful on which you delete. What you might not use in gui_ingame_slim.xml could be used in gui_frontend.xml etc.


If you select a prefab either from image map or from your prefab-list you will see properties for it in your bottom left corner.



Example – How you create a prefab.



To create a prefab – Step 1:

Create a new prefab by pressing Image:add.jpg and write a name. In this example we write “Background”. Every name is case-sensitive so be sure you spell it right.


After this step is done you will be able to see your new prefab in your prefab-list.



To create a prefab – Step 2:

Select the prefab you created (“Background”) and you will see that on your image map you will see a green selection, that’s your prefab. You are now able to drag and re-size it directly on your image map. Place it over a graphic spot on your image map you want to use as background. And to edit more as x and y position look at the property list that is shown in your bottom left corner. There are 2 different kinds of selections, there is outer and inner.


Green selection - Outer: Sets the size of your image.


Turquoise selection - Inner: Sets the stretching area on your prefab. This is perfect when having a smaller picture you want to be able to use as background (see example pictures).

Image:background.jpg


example:

The turquoise selection here will be the stretching area when making it larger than what it is in your image map, making the area outside the inner selection keeping its proportion.


Widgets

There is a lot of different types of widgets. All between just showing a prefab from your image map and widgets that’s connected to code that adjust volume etc.


The following example will show you how to add a widget that will be used as a simple background to a gui screen. This is where we need the prefab we created earlier (“Background”).


Example – How to add a widget:

Select your “GameEnd” screen. As you can see it already has a lot of widgets. The important thing here is the hierarchy. What you see on top of your list “myPlate_Background” is the widget that is in the very back of your screen.

To add a widget to your selected screen you right click “GameEnd” in projects and select “add widget”. As you can see there is a lot of different widgets. And since we are only adding a background image all we need is a Plate. So select plate and set your widget name to “myPlate_FullscreenBackground” and press OK.

Now you’ve added a widget to the “GameEnd” screen. Select it under projects and u will see a green marker on your workspace. Now you can move it and drag to where you want it. Now we’re going to set the prefab we created earlier to our new widget. To do this you select your “myPlate_FullscreenBackground” and look at properties after “myPrefab”. Press (image) and you will see a list with all the prefabs you got in your image map. Select “Background” and your widget will now get graphics.

But as you can see it’s above everything so we have to move it back in the hierarchy. Be sure that you’ve selected the correct widget and move it up the list so it will be placed behind “myPlate_Background” in your project list.

Now it’s in the very back of the screen. Now we need to set it’s properties so it is as big as our workspace. Change myHeight to 768 and myWidth to 1024. This will be the pixel size of your widget. Next thing to change is our myXPos and myYPos. Change them both to “0” and your widget is now covering your whole workspace and its in the very end of your screen.

Now we save and export our gui file. When this is done , the next time we play a multiplayer game there will be a background behind your GameEnd window that will be shown after a complete match in World in Conflict.

Note: There are different types of properties for each widget. Some with MouseOver, Scrollbars, Video, Sliders just as example what you can do. Now have fun and play and make your own gui as you see fit.

Personal tools
User Created Content