Adding Items Part 1

Now that we have the basics of how a window is laid out. Lets populate it with some simple graphics.

Before we can begin to add graphics we need to know what they are named, and how to get the name.

To do this:

1. First you will need to navigate to the directory "Sony/Vanguard/VGUIAssets/Shells/Default/Textures/"
   • Here you will find all the TGA files for the default interface, as well as the corresponding XML files for each TGA.
   • For this exercise we will be using graphics from "VgrdParts.tga" so lets open up the file "VgrdParts.xml"
2. First thing you will notice is that the header is different from that of a Window.xml file. There is no schema for this, the XML use here is only for masking the images inside the TGA, and telling the game where to find them.
3. Lets look at this snippet of the first image in the file.

   <SkinAssets name="Vgrd" displayName="Vanguard">

   <Animations>

   <AnimationInfo name="TitlebarTopLeft">

   <AnimationFrame tick="1000">

   <TextureName>VgrdParts.tga</TextureName>

   <Rect x="15" y="0" width="7" height="11" />

   <HotSpot>

   <Point x="0" y="0" />

   </HotSpot>

   <Offset>

   <Point x="0" y="0" />

   </Offset>

   </AnimationFrame>

   </AnimationInfo>

   Note that the <SkinAssets> tag has no closing tag yet. This comes after all of the image masks for this section.

4. There are 3 important parts to look at here in this exercise.
   1. The <SkinAssets name="Vgrd" displayName="Vanguard"> Note the name= variable. this will be come the first part of your images name when working in the window.xml (more on this later)
   2. The <AnimationInfo name= Variable is the second part of your images name when working in the window.xml.

      The complete name when in the window.xml for this above image would be "VgrdTitlebarTopLeft"

   3. The last thing you will want to take note of is the size of the image, denoted by width= and height=

Now that we know how to retrieve the names of our images, lets work with a couple of the class icons.

• For this I have chosen the Rogue, Cleric, and Sorcerer icons. below are the important parts we will need to work with, name and dimensions.

    Rogue Icon
    name="VgrdClassRogue"
    width="65" height="81"

    Cleric Icon
    name="VgrdClassCleric"
    width="65" height="81"

    Sorcerer Icon
    name="VgrdClassSorcerer"
    width="65" height="81"

Since these are all class icons the sizes are the same. Just to make it easier.

• Now lets open back up the Testing.xml file we saved earlier in this tutorial. It should look like this:

 <?xml version="1.0" standalone="yes"?>
  <XML id="SGOUIMarkupLanguage" version="0.1"
       xmlns="http://www.sigilgames.com/vanguard-ui-0.1"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.sigilgames.com/vanguard-ui-0.1 ../../../vanguard-ui.xsd">
   <VGUIWindow name="Testing">
        <Rect x="200" y="400" width="200" height="100"/>
        <Settings  visible="true"
                   border="frameall"
                   background="true"
                   movable="true">
        </Settings>
   </VGUIWindow>
 </XML>

1. We will begin by just adding in the first icon (rogue), in the upper left corner of the window.
   • To do this we will need to use a UseControl, UseControls contain objects within a window, there are many different UseControls available to use (more on this later).

     For now we will just be using the UseControl for a StaticWindow, as this is one of the most basic controls, it creates a window inside the window, which makes it perfect for containing images and text.

   • So lets begin: here is a snippet from the Default UI "VGUIPlayerStatus.xml"

     <UseControl type="StaticWindow">

     <StaticWindow pictureMode="true" textData="ClassGraphic">

     <Rect x="0" y="0" width="65" height="81"/>

     <GraphicName label="ClassGraphic" isBaseName="false">

     <Name>VgrdClassRogue</Name>

     </GraphicName>

     </StaticWindow>

     <Settings tooltip="Rogue"

     visible="false"

     notifyOnLeftClick="true"

     notifyOnRightClick="true"/>

     </UseControl>

     Lucky for us this is set up for is nicely to go in the top left corner already, but lets break it down slowly and see how it all works.

2. The first thing we see is the UseControl tag and its type. <UseControl tells the game engine that there is a control object that needs to be drawn on the window. The type attribute tells if what type of control to draw. (Full list of UseControls) In this case its a Static Window.

   The next couple of lines will define the settings and location for the Static Window we are telling the game engine to draw.

3. Now that the UseControl type is determained, you have to define the control. You start this with a <StaticWindow> tag, and add in its attributes.
   • The first attribute we see in this example is pictureMode="true" this will tell the engine if it has to load an image in the window or not.
   • The last attribute we see in this example is textData="ClassGraphic" Ths will set the displayed text, if the pictureMode is set to false. It also points to the GraphicName Label used a littler farther down.
   • Now that we have the Static windows attributes set, we need to decide where to put it. Thats what the <Rect> tag will take care of. Think of Rect as short for Rectangle Its attributes are for setting the start location and size for the Window. Same as how it was done for the window we are already made.

     The numbers for the (x,y) start locations, start in the upper left corner and go right for x and down for y. in the positive direction.

   So our static window will be located at the position (0,0) and extend to the right 65 pixels and down 81 pixels. (which is exactly the size of the image we are going to put inside it)

4. Now that we have StaticWindow set to the size and location we want, we need to tell it what picture to put inside.

   • The tag <GraphicName> is an element of the StaticWindow UseControl. It contains the information necessary for pointing to the right graphic.

     Its attributes are label, and isBaseName

     label is exactly that, the label for the image, this is the same as the textData attribute for the StaticWindow.

     isBaseName is used to tell wether or not there might be another file with the same base name, (the second part of the image name from earlier) if there isn't then you can set this to true and you won't have to use the long name, but its safer to just say false.

   • Now you declare the name of the image using the <Name> tag in this case it's already set for us as "VgrdClassRogue"
   • Once the name is set you can close the <GraphicName> tag.

   You can also close the <StaticWindow> tag as well since we aren't adding anything else to this window.

5. Now we finish up by configuring the UseControl Settings and closing out the rest of the tags.
   • <Settings> will like in our above example, cover the settings for the UseControl Object itself, in this case the Image that we are displaying. So lets look at some of the settings above and how they work, and decide what ones we need.
     1. tooltip="rogue" This sets the game tooltip for when the mouse is over the image.
     2. visible="false" As before sets the visibility of the objet. In this case its the StaticWindow containing the Image, instead of an entire window. we are going to set this one to "true" so we can see our results.
     3. notifyOnLeftClick="true" and notifyOnRightClick="true" are used for mouse events, some things they can preform are, targeting, opening windows, and menus. For our uses we are not going to use these. the default setting if not included is false.
   • Now that the settings are set we can close the UseControl tag.
6. Lets add this to our window with the settings we just discussed.
   • To Do this we enter them into the Testing.xml file after the </Settings> Close Tag.

Code:

 <?xml version="1.0" standalone="yes"?>
  <XML id="SGOUIMarkupLanguage" version="0.1"
       xmlns="http://www.sigilgames.com/vanguard-ui-0.1"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.sigilgames.com/vanguard-ui-0.1 ../../../vanguard-ui.xsd">
   <VGUIWindow name="Testing">
        <Rect x="200" y="400" width="200" height="100"/>
        <Settings  visible="true"
                   border="frameall"
                   background="true"
                   movable="true">
        </Settings>
	<StateWindow stateKey="Rogue">
		<UseControl	type="StaticWindow">
			<StaticWindow pictureMode="true" textData="ClassGraphic">
				<Rect x="0" y="0" width="65" height="81"/>
				<GraphicName	label="ClassGraphic" isBaseName="false">
					<Name>VgrdClassRogue</Name>
				</GraphicName>
			</StaticWindow>
			<Settings tooltip="Rogue"
				visible="true"/>
		</UseControl>
	</StateWindow> 
   </VGUIWindow>
 </XML>

• To add the other images to our picture we will just need to change the graphics names and the locations at which they start. Lets make them step down by 5 pixels and to the right in our window,
  1. First we need to find the start point for the 2nd image.

     To get the X setting take the X setting of the first image and and add to it the amount you want to move it (negative numbers move up, positive move down). so in this case, since we are only moving it over by the width of the prior image, 0+65=65 for the next image do the same except add the X setting of the 2nd image and its width.

     To get the Y setting take the Y Setting of the First image, and add to it the amount you want to move it (negative numbers move up, positive move down). In this case the amount we want to move it is 5 down. so 0+5 and 5+5.

  2. Now we can just add in the other 2 images the same as the first. to look like this:

Code:

 <?xml version="1.0" standalone="yes"?>
  <XML id="SGOUIMarkupLanguage" version="0.1"
       xmlns="http://www.sigilgames.com/vanguard-ui-0.1"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="http://www.sigilgames.com/vanguard-ui-0.1 ../../../vanguard-ui.xsd">
   <VGUIWindow name="Testing">
        <Rect x="200" y="400" width="200" height="100"/>
        <Settings  visible="true"
                   border="frameall"
                   background="true"
                   movable="true">
        </Settings>
		<UseControl	type="StaticWindow">
			<StaticWindow pictureMode="true" textData="ClassGraphic">
				<Rect x="0" y="0" width="65" height="81"/>
				<GraphicName	label="ClassGraphic" isBaseName="false">
					<Name>VgrdClassRogue</Name>
				</GraphicName>
			</StaticWindow>
			<Settings tooltip="Rogue"
				visible="true"/>
		</UseControl>
		<UseControl	type="StaticWindow">
			<StaticWindow pictureMode="true" textData="ClassGraphic">
				<Rect x="65" y="5" width="65" height="81"/>
				<GraphicName	label="ClassGraphic" isBaseName="false">
					<Name>VgrdClassCleric</Name>
				</GraphicName>
			</StaticWindow>
			<Settings tooltip="Cleric"
				visible="true"/>
		</UseControl>
		<UseControl	type="StaticWindow">
			<StaticWindow pictureMode="true" textData="ClassGraphic">
				<Rect x="130" y="10" width="65" height="81"/>
				<GraphicName	label="ClassGraphic" isBaseName="false">
					<Name>VgrdClassSorcerer</Name>
				</GraphicName>
			</StaticWindow>
			<Settings tooltip="Sorcerer"
				visible="true"/>
		</UseControl>
   </VGUIWindow>
 </XML>

• NOTE: I also changed the ToolTips to correspond to the images.

In Adding Items Part 2 we will work with adding status bars.