Download (direct link):
is easily made with Photoshop. When creating to be larger than 128 units square in your map.
the image, size it according to how you are
The General tab of a layerâ€™s properties.
3. Switch to the Image tab. Select the Material check box and enter
gfx/guis/common/strogg/doorgui_bg in the Material field (see Figure 16-14).
4. Press OK to apply the changes.
The result looks like Figure 16-15.
You can now see a familiar shape that looks like something from the GUI currently in place in your map next to the doors. However, the size and the color need to be fixed.
298 Part IV: Going Beyond the Basics
The Image tab of the layerâ€™s properties.
When you first apply a material to your GUI, you have to move and size it for the use you have in mind.
To fix the size, click and drag the blue boxes that surround the image. If you want to move the image, click and drag anywhere within the selected image. You can tell which one is selected by the blue outline around it. The goal is to size the image so that it covers half of the window on the left side. If you want to be more precise, hereâ€™s an easy way to make it exactly half:
Chapter 16: Gaming with GUIs 299
1. Look over at the Properties window on the right side of the editor.
The first property, rect, defines the location and the size of the image.
The location is the first two numbers, and they should read 0,0, which means the left, top of the window. The size is the second two numbers, and they should read 100,100. The first is the width, and the second is the height. The unit of measurement is in pixels.
The size you want to end up with is 320,480. You want to enter 320,480 because the total size of the Desktop is 640 x 480. (You can confirm this size by clicking the Desktop and looking at the same Properties window.)
2. Double-click the four numbers next to rect and change the numbers so they read 0,0,320,480. Press Enter when youâ€™re done.
The result looks like Figure 16-16.
You can move and stretch the contents of your GUI layer any way that you desire.
Now that itâ€™s properly sized, you need to change the color. The image you are using was made special so that overlaying a color affects only parts of the image rather than the entire rectangle.
1. Open the properties for your blue_left layer by double-clicking it in the Navigator window. In the dialog box that appears, select the Image tab and look at the bottom of the tab.
Here you see a color selector for Matcolor. This is how you define the color that is overlaid on your image. Because this is going to be for a blue room, select a bright blue color.
300 Part IV: Going Beyond the Basics
Duplicate and flip the first layer to create a mirror image.
2. Click the color block to the right of Matcolor, and then in the color selector click your bright blue color of choice.
3. Press OK on the color selector and OK on the dialog box to apply the change.
Next, you need to add the other half of the image thatâ€™s already in place. Because the image you want to add is a mirror of what you already have, you can do this easily by making a duplicate of what you have and inverting the image.
1. In the Navigator window, right-click the blue_left layer. Choose Duplicate from the pop-up menu.
This creates an exact duplicate of the layer you already have.
2. Double-click this new layer to open the Item Properties dialog box for it. Click the General tab and rename the layer to blue_right.
3. Switch to the Image tab and change the X Scale number from 1 to -1.
This causes the image to flip on the X axis (horizontally).
4. Press OK to apply the changes.
What you end up with is the second half of your image over the top of your first, as you can see in Figure 16-17.
Chapter 16: Gaming with GUIs 301
Because the two images are overlapping, you need to move the new one to the right side of the screen.
5. Click inside the selected image and drag it over to the right side.
You can either line it up by sight or you can enter the rect values in the Properties window located on the right side of the editor. The numbers you want to enter are 320,0,320,480. The result looks just like Figure 16-18.
You can line up your images by sight or by entering values manually.
Now you should add a few more elements to make this interface more interesting to the player.
1. Add another layer by right-clicking the Desktop in the Navigator window and choosing NewOwindowDef.
2. Open the properties for this newly created layer by double-clicking it. Click the General tab and rename the layer to left_edge.
3. Click the Image tab and enter gfx/guis/common/strogg/doorgui_edge in the Material field. Change your Matcolor to blue, and then click OK to apply the changes to the layer.
The dialog box closes, and you wind up with what you see in Figure 16-19.
302 Part IV: Going Beyond the Basics
Continue to add more elements to make your GUI interesting.