Armor Graphics Tutorial

[AssumedPseudonym]

A N   A B S O L U T E   B E G I N N E R ’ S   G U I D E   T O   A R M O R   G R A P H I C S
(by an absolute beginner)

 This tutorial is for customizing armor graphics. I have absolutely zero knowledge in any graphics program other than GIMP, so that’s what I’m using. Most of it should translate into other art programs, though, I would expect. This tutorial will assume that you have at least basic working knowledge of the program you’re using, and that you know how to set UNIDs for graphic resources (which, if you’re making your own ship, you should). This is also the first tutorial I’ve ever written — for anything — so bear with me.

 First, the main part of the ship’s code you need to look at for this tutorial is the <ArmorDisplay> section, so let’s look at, say, the Sapphire’s:

Code: Select all

  <ArmorDisplay>
    <ShipImage imageID="&rsArmorHUDShip_Sapphire;" imageWidth="136" imageHeight="136"/>

    <ArmorSection name="forward"
      imageID="&rsZubrinArmor;" 
      imageX="0" imageY="0" imageWidth="52" imageHeight="29"
      destX="42" destY="15" hpX="55" hpY="14"
      nameY="8" nameBreakWidth="200" nameDestX="0" nameDestY="10" />

    <ArmorSection name="starboard"
      imageID="&rsZubrinArmor;" 
      imageX="52" imageY="0" imageWidth="22" imageHeight="59"
      destX="92" destY="45" hpX="95" hpY="60"
      nameY="30" nameBreakWidth="360" nameDestX="12" nameDestY="0" />

    <ArmorSection name="port"
      imageID="&rsZubrinArmor;" 
      imageX="142" imageY="0" imageWidth="22" imageHeight="59"
      destX="22" destY="45" hpX="15" hpY="60"
      nameY="52" nameBreakWidth="200" nameDestX="0" nameDestY="8" />

    <ArmorSection name="aft"
      imageID="&rsZubrinArmor;" 
      imageX="74" imageY="0" imageWidth="68" imageHeight="14"
      destX="34" destY="103" hpX="55" hpY="105"
      nameY="74" nameBreakWidth="360" nameDestX="12" nameDestY="0" />
  </ArmorDisplay>

 It may seem rather daunting to someone who doesn’t know what they’re looking at. Until you have your graphics created — part of which I’ll cover in this tutorial — you won’t need to worry about it, though. Don’t worry, I’ll explain the assorted fields in the tags as they come up, which won’t be until the end. I will also be providing graphics for examples, borrowing from one of my own modded ships. Feel free to open them up in GIMP, it may make some of this easier to understand.

 The first thing you need to do for this tutorial is render the ship. You could theoretically render it at any orientation you wanted, but usually you’ll want to use its first sprite facing, the one with it pointed straight upward. Either render it at or resize it to 72x72, or thereabouts. If you’d rather use a silhouette, outline, or some other representation for the ship, that works just as well. For now, use BMP or some other uncompressed format.
 Next, launch GIMP and open the image file. Select all and copy. With that done, create a new image, sized to 136x136. Either create it filled with black or flood fill it to black after creating it. Paste the ship image into this new file. It should automatically center. If it doesn’t, undo, select all, and paste again. Click somewhere outside the image to anchor the pasted layer, and you should have something like this:

 Press CTRL+L to bring up the Layers toolbox and create a new layer. It should default to being a transparent layer, but if not, it won’t matter much. Flood fill this layer to a color you want to overlay the ship graphic. The vanilla game uses blue, but I’ll be using green for this example. In the Layers toolbox, lower the opacity of the layer until you can see the ship clearly; this should typically somewhere between 25% and 50%. I’m going with 50% for this example:

 Click on the circle selection tool. Click on the very top left corner and drag down to the very bottom right. You should wind up having selected a circle touching the edges of the image. Click on the “expand from center” tick box in the tool options and adjust the size in the tool options to 84x84. Tweak the individual numbers as necessary to completely cover the ship without going too far out from its edges. Invert the selection and press delete:

 Export this image as MyShipHUD.jpg or something to that effect. Make a copy of the file for good measure, just to make sure you have a backup in case you accidentally overwrite it (which I’ve done once or twice). You will be using this file as the graphic resource for your HUD. Go ahead and set up its UNID and make its <ShipImage> tag based on that. The imageWidth and imageHeight will still both be 136.
 The next step is to design your armor graphics. I advise you to uncheck the “expand from center” tick box on the selection tool before you progress any further, though. Exactly what you make it look like is entirely up to you. The easiest way to do this would be on a new layer of the image you’ve been working on. The standard is four, but you can do as many or as few as you want. In this example, I use three:

 At this point, you need to make an image for your armor segment displays. Usually, 640x480 will be plenty big enough. Flood fill the image to black if it isn’t already. Copy each armor segment individually from the HUD image you’ve been working from and paste them into the new image, the first flush to the top left corner, the next to the top and the previous segment’s rightmost edge, and so forth:

 Each segment needs a total of five variants to show increasing levels of damage. Again, how you want to depict this is entirely up to you. Once you’ve created the necessary graphics, align them to the bottom edge of the the corresponding armor segment, aranged from top to bottom in order of least damaged to most damaged:

 Crop this image down to fit just the armor segments using zealous crop, or if you don’t trust that (and I often don’t), select black by color with the threshold set at 0, invert the selection, and crop to selection:

 Export this image as MyShipArmor.bmp or something to that effect. You will be using this file as the graphic resource for your armor. Go ahead and set up its UNID.
 Go back to the HUD image with the armor layered over it. Make a 26x14 box where you want the HP box to go for each segment:

 All you need to do now is take measurements and record the results. I’m only going to walk through the forward segment for the ship I’m using in the example, but the general process is the same no matter how many segments there are. One important thing to remember, though: If you use the pre-1.2 style <Armor> settings where you individually describe each segment, usually it’s simplest to define each <ArmorSegment> in the same order. For 1.2, where the ship’s armor definitions are compressed into one line, the definitions begin at the top and progress counter-clockwise.
 First, name the segment. This can be anything you want, really, but “forward,” “starboard,” “port,” and “aft” are the standards.
 Set the imageID to whatever you used for the UNID name.

 Before I progress any further, it’s time to share an easy trick to use for figuring out all of the graphics coordinates. The coordinate (0,0) is the top left corner of an image in both GIMP and Transcendence, which simplifies matters. In GIMP with the rectangle select tool active, hover over the left-most pixel of an armor segment or HP box to get the X coordinate, and the top-most pixel to get its Y coordinate. To get the size of an armor graphic for imageWidth and imageHeight, use the rectangle selection tool, fit the selection snug against the armor graphic, and check the tool options for the size. Both of those tricks are a lot quicker (and less prone to error) than either counting pixels or trial-and-error guesswork.

 The imageX field refers to how many pixels from the left edge on the armor image the graphic is. For the forward segment in this example, that would be 0.
 The imageX field refers to how many pixels from the top edge on the armor image the graphic is. For the forward segment in this example, that would also be 0.
 The imageWidth field refers to how many pixels wide the armor graphic is for that segment. For the forward segment in this example, that would be 84.
 The imageHeight field refers to how many pixels high the armor graphic is for that segment. For the forward segment in this example, that would be 25.
 The destX field refers to how many pixels the upper left corner of the armor graphic should be placed from the left edge of the HUD graphic. For the forward segment in this example, that would be 26.
 The destY field refers to how many pixels the upper left corner of the armor graphic should be placed from the top edge of the HUD graphic. For the forward segment in this example, that would be 19.
 The hpX field refers to how many pixels the upper left corner of the HP box should be placed from the left edge of the HUD graphic. For the forward segment in this example, that would be 55.
 The hpY field refers to how many pixels the upper left corner of the HP box should be placed from the top edge of the HUD graphic. For the forward segment in this example, that would be 5.
 The nameY field refers to how many pixels the segment’s label should be printed from the top of edge of the HUD graphic. For the forward segment in this example, that would be 7.
 The nameBreakWidth refers to how many pixels from the left edge of the label the line from the label to the HP box should turn vertical. For the forward segment in this example, that would be 200.
 The nameDestX refers to how many pixels from the left edge of the HP box the line from the label should attach. For the forward segment in this example, that would be 0, meaning the line attaches on the left edge of the box.
 The nameDestY refers to how many pixels from the top edge of the HP box the line from the label should attach. For the forward segment in this example, that would be 7.

 Repeat these steps for each armor segment, and you’re done. Hopefully this is clear and easy to understand. If not, feel free to PM me with questions and I’ll help as much as I can.