1. We have added a Gift Upgrades feature that allows you to gift an account upgrade to another member, just in time for the holiday season. You can see the gift option when going to the Account Upgrades screen, or on any user profile screen.
    Dismiss Notice

DDS Texture (Image File) Creation and Usage for Beginners

Discussion in 'Civ5 - Modding Tutorials & Reference' started by whoward69, Apr 15, 2012.

  1. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    8,201
    Location:
    Near Portsmouth, UK
    DDS Texture (Image File) Creation and Usage for Beginners

    Originally posted as three threads on 2K-Games, step-by-step instructions on how to add the three most common types of image files (DDS Textures) to a mod


    Prerequisites

    1. Download and install Gimp 2 from http://www.gimp.org/downloads/ (you'll need the 32-bit version)
    2. Download and install the DDS plug-in from http://code.google.com/p/gimp-dds/downloads/list
    3. Get a copy of SamBC's icon templates from http://www.mediafire.com/?fcsfkkw58f7udy3 (see http://forums.civfanatics.com/showthread.php?t=389795)

    Adding Icons for Buildings

    The basics of adding the required icons to a building mod - using the Dojo as an example. Many thanks to jpbar81 for the icon graphic

    Creating the building icon files

    1. Grab a copy of the artwork, eg http://forums.2kgames.com/showthread.php?116670-MOD-Unique-Building-Dojo&p=1502580#post1502580, and save it
    2. Open the artwork in your favourite drawing package
    3. Resize it to 174 x 174 and save it as Dojo256.png
    4. Resize it to 88 x 88 and save it as Dojo128.png
    5. Resize it to 44 x 44 and save it as Dojo64.png
    6. Resize it to 31 x 31 and save it as Dojo45.png
    7. Close the original artwork
    8. Copy IconAtlas256.xcf to DojoAtlas256.xcf
    9. Copy IconAtlas128.xcf to DojoAtlas128.xcf
    10. Copy IconAtlas64.xcf to DojoAtlas64.xcf
    11. Copy IconAtlas45.xcf to DojoAtlas45.xcf
    12. Start Gimp
    13. Open DojoAtlas256.xcf
    14. Open Dojo256.png
    15. With Dojo256.png selected choose Edit -> Copy Visible
    16. In the Brushes palette, select the copied image
    17. Choose the DojoAtlas256.xcf image and "draw" the Dojo graphic into the top-left circular area - zoom to 200% (or more) to make this easier
    18. Save the DojoAtlas256.xcf file
    19. Select File -> Save As... and expand the Select File Type (By Extension) item
    20. Scroll down and select "DDS Image" (if there isn't this option check you installed the DDS plug-in correctly!)
    21. Click Save
    22. Click Export in the next dialog
    23. Leave Compression as None, Format as Default and Minimaps unchecked and then click OK (if not using the templates, or the image does not have an alpha/transparancy layer, you MUST select the RGBA8 format)
    24. Close DojoAtlas256.xcf and Dojo256.png files
    25. Repeat steps 13 through 24 for the other three pairs of files (128, 64 and 45)
    26. Exit Gimp

    Adding the icons to the mod

    1. Start ModBuddy and open the mod
    2. Add an ART folder to the project
    3. Right click on the ART folder and select Add -> Existing Item...
    4. Choose the DojoAtlas256.dds file and click Add
    5. Select the DojoAtlas256.dds file under the ART folder
    6. Scroll the Properties panel to the bottom and change "Import into VFS" to true
    7. Repeat steps 3 through 6 for the other three dds files (128, 64 and 45)
    8. In the mod xml data, under the <GameData> element add an <IconTextureAtlases> element
    9. Under the <IconTextureAtlases> add the following <Row> element

      Code:
      	<Row>
      		<Atlas>DOJO_ICON_ATLAS</Atlas>
      		<IconSize>256</IconSize>
      		<Filename>ART/DojoAtlas256.dds</Filename>
      		<IconsPerRow>1</IconsPerRow>
      		<IconsPerColumn>1</IconsPerColumn>
      	</Row>
    10. Add three more <Row> elements for the 128, 64 and 45 files
    11. In the <Row> element of the <Buildings> element that defines the Dojo, change the following two elements

      Code:
      		<IconAtlas>DOJO_ICON_ATLAS</IconAtlas>
      		<PortraitIndex>0</PortraitIndex>
    12. Open the mod properties page and add a Special Thanks to the graphic artist
    13. Save and rebuild the mod

    Testing the mods graphics

    1. Start Civ 5 and enable the mod
    2. Start a new modded game, with the starting Era such that the building can be built
    3. Found a city, enter the city build screen
    4. In the buildings list, check that the icon for the Dojo is correct - this is the 45 variant
    5. Select the Dojo, check the icon in the main panel (bottom left) - this is the 128 variant
    6. Open the Civilopedia, open Buildings and mouse over the Dojo. Check the hover-over icon is correct - this is the 64 variant
    7. Click on the Dojo and check the main icon is correct - this is the 256 variant
    8. Exit Civ 5

    Notes on the Icon Texture Atlases

    You can add more than one icon to the texture atlas files - just make sure you put all the related icons in the same relative place - all the Bull Ring icons in the third "hole" in the top row, all the Turkish Baths icons in the first "hole" of the second row, etc.

    If you add more than one icon, or don't use the top left "hole", you'll need to change the <IconsPerRow> and <IconsPerColumn> values. The <IconsPerRow> value determines how many icons are permitted (ie used) from each row - if you set this to 4, any icon beyond the fourth "hole" will be ignored. The <IconsPerColumn> values determines how many rows you can use - setting this to 3 will cause any icons in row 4 onwards to be ignored (so the maximum number of usable icons in the atlas is rows times columns, 12 in this example)

    The <PortraitIndex> value is determined by the icon position and the <IconsPerRow> value. The top-left "hole" is index 0, the hole to the right is 1, all the way along the row to an index with the value (IconsPerRow-1). The second row starts with an index value of IconsPerRow. A PortraitIndex of 1 can either be the second "hole" in from the left on the top row OR it can be the left most "hole" on the second row if IconsPerRow is set to 1 - take care!

    Adding icons for other items, eg units, promotions, improvements, etc, follows the same principles but may use different combinations of icon sizes.


    Adding Images (DDS Textures)

    A simple step-by-step guide for creating a DDS Texture from an existing image and adding it to a mod.

    Creating the image file

    1. Find your original image - png, jpeg, bmp, whatever
    2. Find the size that your image needs to be. The X and Y dimensions need to be a multiple of 4. The Wonder Splash screen has an <Image> size of 971x565 so we'll use 972x568 (better to be a little bigger than smaller)
    3. Using your favourite image manipulation program scale/crop the original to the required size
    4. Save the image as a PNG file

    Creating the DDS texture file
    1. Start GIMP
    2. Load the PNG file
    3. Select File -> Save As... and expand the Select File Type (By Extension) item
    4. Scroll down and select "DDS Image" (if there isn't this option check you installed the DDS plug-in correctly!)
    5. Click Save
    6. In the Save As DDS options panel, set Compression to "BC2/DXT3", leave "Generate Mipmap" unchecked and ignore the "Advanced Options" section
    7. Click OK to save the dds file - for my sample MtRushmore.dds file, the original png is 845Kb and the compressed dds is 539Kb (if we hadn't used compression it would be 2.1Mb!)

    Creating the Mod
    1. Start ModBuddy and create a new mod, eg "TestDDS"
    2. Uncheck "Affects Saved Games"
    3. Create an ART folder
    4. Add the dds file to the ART folder
    5. Set "Import into VFS" to true
    6. Create a UI folder
    7. Create a new XML item "TestDDS.xml" in the UI folder
    8. Set "Import into VFS" to true
    9. Set the content to

      Code:
      <?xml version="1.0" encoding="utf-8"?>
      <Context ID="TestDDS" >
        <Image Anchor="C,C" Size="972,568" ID="WonderSplash"/>
      </Context>
      
    10. Create a new LUA item "TestDDS.lua" in the UI folder
    11. Set "Import into VFS" to true
    12. Set the content to

      Code:
      function ShowHideHandler( bIsHide, bInitState )
        if (not bInitState) then
          Controls.WonderSplash:UnloadTexture()
      
          if (not bIsHide) then
            Controls.WonderSplash:SetTextureAndResize("MtRushmore.dds")
          end
        end
      end
      ContextPtr:SetShowHideHandler(ShowHideHandler)
      
      function Show() ContextPtr:SetHide(false) end
      function Hide() ContextPtr:SetHide(true) end
      
      Hide()
      
    13. Add an InGameUIAddin for UI/TestDDS.xml
    14. Build the mod

    Testing the Mod

    1. Start Civ V
    2. Enable the mod
    3. Start a new game
    4. Start FireTuner
    5. Select the Lua Console tab
    6. Change the context to TestDDS
    7. Execute "Show()" - all being well you should see your image in the centre of the screen


    Adding Graphics (DDS Textures)

    A simple step-by-step guide for creating a DDS Texture from an existing image for a button/icon (ie with a transparent background) and adding it to a mod.

    Creating the graphic file

    1. Using your favourite image manipulation program create your graphic, any areas to be transparent should ideally be white
    2. Save as a PNG (don't worry about setting transparency)

    Creating the DDS texture file

    1. Start GIMP
    2. Create a new image, the same size as the PNG, with the Color Space set to RGB (under Advanced Options), and click OK
    3. Copy and paste the png graphic into the new image
    4. In the "Layers, Channels, ..." window, right click the Floating Selection and select "Anchor Layer"
    5. From the Layer menu, select Transparency and then "Color to Alpha ..."
    6. If the areas to be transparent arn't white, click the colour bar between "From:" and "to alpha"
    7. Click OK
    8. Save the graphic as an xcf file (just in case you make a mistake and need to reload the file in GIMP)
    9. Select File -> Save As... and expand the Select File Type (By Extension) item
    10. Scroll down and select "DDS Image" (if there isn't this option check you installed the DDS plug-in correctly!)
    11. Click Save
    12. In the Save As DDS options panel, set Compression to "None", Format to "RGBA8", leave "Generate Mipmap" unchecked and ignore the "Advanced Options" section
    13. Click OK to save the dds file

    Creating the Mod

    1. Start ModBuddy and create a new mod, eg "TestDDS"
    2. Uncheck "Affects Saved Games"
    3. Create an ART folder
    4. Add the dds file to the ART folder
    5. Set "Import into VFS" to true
    6. Create a UI folder
    7. Create a new XML item "TestDDS.xml" in the UI folder
    8. Set "Import into VFS" to true
    9. Set the content to

      Code:
      <?xml version="1.0" encoding="utf-8"?>
      <Context ID="TestDDS" >
        <Image ID="IconFrame" Size="45,45" Anchor="C,C" Texture="45x45BaseFrame.dds" Hidden="0">
          <Image ID="Icon" Size="32,32" Anchor="C,C" Texture="BlueExclaim.dds"/>
        </Image>
      </Context>
      
    10. Create a new LUA item "TestDDS.lua" in the UI folder
    11. Set "Import into VFS" to true
    12. Set the content to

      Code:
      function Show() ContextPtr:SetHide(false) end
      function Hide() ContextPtr:SetHide(true) end
      
      Hide()
      
    13. Add an InGameUIAddin for UI/TestDDS.xml
    14. Build the mod

    Testing the Mod

    1. Start Civ V
    2. Enable the mod
    3. Start a new game
    4. Start FireTuner
    5. Select the Lua Console tab
    6. Change the context to TestDDS
    7. Execute "Show()" - all being well you should see your graphic in the centre of the button frame in the centre of the screen
     
    Nomad or What likes this.
  2. Pazyryk

    Pazyryk Chieftain

    Joined:
    Jun 13, 2008
    Messages:
    3,584
    Do you know if DXT1 works when you don't need transparency? The file size is smaller (by half, I think) but the image quality should be equal. So, if it works, this would be better for the large number of 2D images that I plan to add for popup screens. But I haven't tested to see if it works.

    OK, this is somewhat off topic. But I want a gong sound with my Show() function, just like the one you get with a new era. I looked through NewEraPopup.lua and wiki UI but haven't found any function for it. Do you know how to do that?
     
  3. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    8,201
    Location:
    Near Portsmouth, UK
    No I don't. These notes work, they may not produce the smallest files, but they will work.

    Once you have something that works you can make step-wise changes and see if it continues to work or breaks, at least then you know what you changed to break it.
     
  4. Pazyryk

    Pazyryk Chieftain

    Joined:
    Jun 13, 2008
    Messages:
    3,584
    You mean that I shouldn't change 20 things and then guess which one is crashing the game? That's how I always mod. ;)
     
  5. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    8,201
    Location:
    Near Portsmouth, UK
    Of course you still can!

    The problem with creating DDS files for Civ V is that there are lots of hints and rumours around - "you have to use RGB8A1 (or is it RGBA8) and BC3 compression only, but then you shouldn't use any compression and anyway it's DX3" etc - that you have to guess 20 things and try and work out which 5 are wrong.

    The idea of the tutorial was to go back to basics - use some other package you know to create/manipulate the images and then only use GIMP "as a conversion tool by clicking these buttons in this order"

    There are almost certainly better ways to do things once you have mastered GIMP, but this way you can create images for your mods without having to master GIMP (and judging from the number of posts on the various forums on the subject there seem to be a lot of people who just want to add graphics to their mods and not really worry about the conversion process)
     
  6. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    8,201
    Location:
    Near Portsmouth, UK
  7. jeffah3539

    jeffah3539 Leviathan

    Joined:
    Nov 13, 2007
    Messages:
    149
    Location:
    Jacksonville, FL
    Very good tutorial. I wish this had been up when I started learning to make .dds graphics. Considering how often people post looking for help with this it should come in handy.
     
  8. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    8,201
    Location:
    Near Portsmouth, UK
    A quick test (change DXT3 to DXT1 in the above instructions) gets the "Unable to load texture" error message (which seems to be coming from Windoze and not CivV) - so unless the process is different, the answer is ...

    Yes (I now know) and No (it doesn't work)
     
  9. Samuriman

    Samuriman Chieftain

    Joined:
    May 29, 2012
    Messages:
    32
    Location:
    Toronto
  10. aschulak

    aschulak Chieftain

    Joined:
    Dec 11, 2010
    Messages:
    92
    Went through the tutorial trying to add an icon for a new resource and no luck.

    For what version of Gimp is this tutorial written? Gimp 2.8 on my PC seems to be working differently than described here and I am wondering if my issues are related to this?

    Some more detail:

    If I follow the instructions directly, as soon as I export I get a dialog that says "DDS plug-in can't handle layer masks". I can Ignore, Export or Cancel.


    Hitting "Export" I get this error/warning:



    None of the combinations of things I can choose gives me something that works in Civ 5. I feel like there is a missing step once you've painted your PNG into the xcf file that makes it work properly, but I cannot figure it out.

    Thanks for any help!

    -Andrew
     
  11. aschulak

    aschulak Chieftain

    Joined:
    Dec 11, 2010
    Messages:
    92
    Finally got it to work, here are my notes for future modders:

    Gimp 2.8
    DDS plugin 32 bit http://code.google.com/p/gimp-dds/downloads/detail?name=gimp-dds-win32-2.1.0.zip

    Changes to "In Adding Icons for Buildings":

    17.5) Merge down the new layer by going to Layer in the toolbar and selecting Merge Down
    19) You cannot "Save As" to DDS in Gimp 2.8 so you should just go directly to "Export"

    Thanks!
     
  12. DonQuiche

    DonQuiche Chieftain

    Joined:
    May 23, 2011
    Messages:
    1,122
    Conratulations for this tutorial, Whoward. :)

    Now I think you should mention something: on old gpus (or because of bad drivers), textures dimensions need to be powers of two (the icons dimensions do not have to, thouh, you can just put a 45x45 icon in a 64x64 texture). This is not always a requirement (I think it's not for large textures) but it definitely is in other cases. The problem causes textures to not be drawn: no error message, no placeholder texture, it's just not drawn. This is why the vanilla textures have large transparent areas. I discovered that a few months ago with IGE when some users reported missing icons until I enlarged the textures dimensions (without shrinking the actual content).
     
  13. Pazyryk

    Pazyryk Chieftain

    Joined:
    Jun 13, 2008
    Messages:
    3,584
    Can you elaborate on this part: "which seems to be coming from Windoze and not CivV"?

    I'm using DX1 (saved from Gimp) just fine for load screen and popup images. It makes a huge difference to my mod size since I have very many 2D images. DX1 is about half the size of DX3, equal in quality but lacking an alpha layer (so obviously no suitable for icons or anything that uses alpha).

    Is there some kind of platform issue that is going to make this not work on some computers?
     
  14. Spearka

    Spearka Chieftain

    Joined:
    Aug 19, 2012
    Messages:
    59
    i tried doing these steps, but the pictures/icons won't load full stop!

    i did attempt to compress to BC2/DXT3 but still nothing

    i seriously don't know how to fix this, can someone pls tell me how to actually fix this?
     
  15. Nutty

    Nutty Chieftain

    Joined:
    Mar 9, 2011
    Messages:
    3,136
    Gender:
    Male
    Location:
    Orange County, California, U.S.A.
  16. john129pats

    john129pats Chieftain

    Joined:
    Feb 25, 2012
    Messages:
    73
    This was a lot to take in, but is it possible just to replace the current terrain textures and have the game read the new files instead of the default ones?
     
  17. Hjommd

    Hjommd Chieftain

    Joined:
    Oct 20, 2012
    Messages:
    12
    Location:
    Sweden
    Hello,

    I have a question some what related to the issues disscused above. I'm trying to make a Civilization and I figured out how to do XML-part of replacing the leader movie with a 2D image, from tutorials and working Civs I downloaded. Also with GIMP and the dds-plug in I have managed to create DDS-files for The Dawn of Man Screen and the map (the artfile called map512) that works in the game. When I did them with GIMP I didn't use any file compression or any other options for dds, just default, and the images worked anyway.

    But I just can't get the diplomay screen right (I'm aware of the right dimensions). I have tried both to use the BC2/DX3 option and not to use it, and neither works for me. In the game the diplomacy sreen is blank with the message "No scene is loaded fot this leader" in the top left corner.

    Just as somebody says above there is no option for "save as dds" in newer (?) versions of GIMP, you have to use the Export to (DDS) option. Someone above wrote that one should merge down the layer in the PNG before exporting it to dds, and I tried that but it's not possible for me, the Merge Down option is unselectable when I try.

    And when I study the folders of several modded civs with working 2D-leader diplomay screen and open those dds files in GIMP I can't see the image itself. There is just a broad white stripe in the left edge of the image and the greater part of the image is that grey alpha chess board transparency texture, if you know what I mean? Never the less, those images works in the game! I think there must be a hidden layer somewhere, but GIMPS calls the image "1 layer". I'm confused, to say the least.

    There is also a lot of confusion on what version of GIMP to use, does it matter? What version of the plug in?

    I have tried using a free file converter in stead of GIMP to convert a PNG to DDS but that just created a file that the converter said was a dds but the game didn't seem to agree...

    Can anybody give me an advice on this?

    Hjommd
     
  18. Spearka

    Spearka Chieftain

    Joined:
    Aug 19, 2012
    Messages:
    59
    extremely sure, i used GIMP as a replacement to a different dds export program (which i set VFS true on there) and the pictures are there on the built folder, but it won't load in-game!
     
  19. whoward69

    whoward69 DLL Minion

    Joined:
    May 30, 2011
    Messages:
    8,201
    Location:
    Near Portsmouth, UK
    If you do post what you've got, can you please start a new thread in the main forum and not hang it off this tutorial thread

    thanks
     
  20. Ekmek

    Ekmek on steam: ekmek_e

    Joined:
    Aug 7, 2002
    Messages:
    6,033
    Location:
    San Diego, California
    I've been using paintshoppro x5 with psp plug in and saving as DX1 and it works for textures.
     

Share This Page