whoward69
DLL Minion
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
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
Adding the icons to the mod
Testing the mods graphics
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
Creating the DDS texture file
Creating the Mod
Testing the Mod
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
Creating the DDS texture file
Creating the Mod
Testing the Mod
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
- Adding Icons for Buildings - covers generating image files for the various sized icons required for buildings (and other objects, eg units, promotions, techs, etc)
- Adding Images (DDS Textures) - covers generating image files for various "splashes", eg Wonders, Leaders, Policy backdrops, Scenarios, etc
- Adding Graphics (DDS Textures) - covers generating image files with a transparent area, eg for buttons, icons, etc
Prerequisites
- Download and install Gimp 2 from http://www.gimp.org/downloads/ (you'll need the 32-bit version)
- Download and install the DDS plug-in from http://code.google.com/p/gimp-dds/downloads/list
- 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
- Grab a copy of the artwork, eg http://forums.2kgames.com/showthread.php?116670-MOD-Unique-Building-Dojo&p=1502580#post1502580, and save it
- Open the artwork in your favourite drawing package
- Resize it to 174 x 174 and save it as Dojo256.png
- Resize it to 88 x 88 and save it as Dojo128.png
- Resize it to 44 x 44 and save it as Dojo64.png
- Resize it to 31 x 31 and save it as Dojo45.png
- Close the original artwork
- Copy IconAtlas256.xcf to DojoAtlas256.xcf
- Copy IconAtlas128.xcf to DojoAtlas128.xcf
- Copy IconAtlas64.xcf to DojoAtlas64.xcf
- Copy IconAtlas45.xcf to DojoAtlas45.xcf
- Start Gimp
- Open DojoAtlas256.xcf
- Open Dojo256.png
- With Dojo256.png selected choose Edit -> Copy Visible
- In the Brushes palette, select the copied image
- 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
- Save the DojoAtlas256.xcf file
- Select File -> Save As... and expand the Select File Type (By Extension) item
- Scroll down and select "DDS Image" (if there isn't this option check you installed the DDS plug-in correctly!)
- Click Save
- Click Export in the next dialog
- 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)
- Close DojoAtlas256.xcf and Dojo256.png files
- Repeat steps 13 through 24 for the other three pairs of files (128, 64 and 45)
- Exit Gimp
Adding the icons to the mod
- Start ModBuddy and open the mod
- Add an ART folder to the project
- Right click on the ART folder and select Add -> Existing Item...
- Choose the DojoAtlas256.dds file and click Add
- Select the DojoAtlas256.dds file under the ART folder
- Scroll the Properties panel to the bottom and change "Import into VFS" to true
- Repeat steps 3 through 6 for the other three dds files (128, 64 and 45)
- In the mod xml data, under the <GameData> element add an <IconTextureAtlases> element
- 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>
- Add three more <Row> elements for the 128, 64 and 45 files
- 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>
- Open the mod properties page and add a Special Thanks to the graphic artist
- Save and rebuild the mod
Testing the mods graphics
- Start Civ 5 and enable the mod
- Start a new modded game, with the starting Era such that the building can be built
- Found a city, enter the city build screen
- In the buildings list, check that the icon for the Dojo is correct - this is the 45 variant
- Select the Dojo, check the icon in the main panel (bottom left) - this is the 128 variant
- Open the Civilopedia, open Buildings and mouse over the Dojo. Check the hover-over icon is correct - this is the 64 variant
- Click on the Dojo and check the main icon is correct - this is the 256 variant
- 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
- Find your original image - png, jpeg, bmp, whatever
- 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)
- Using your favourite image manipulation program scale/crop the original to the required size
- Save the image as a PNG file
Creating the DDS texture file
- Start GIMP
- Load the PNG file
- Select File -> Save As... and expand the Select File Type (By Extension) item
- Scroll down and select "DDS Image" (if there isn't this option check you installed the DDS plug-in correctly!)
- Click Save
- In the Save As DDS options panel, set Compression to "BC2/DXT3", leave "Generate Mipmap" unchecked and ignore the "Advanced Options" section
- 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
- Start ModBuddy and create a new mod, eg "TestDDS"
- Uncheck "Affects Saved Games"
- Create an ART folder
- Add the dds file to the ART folder
- Set "Import into VFS" to true
- Create a UI folder
- Create a new XML item "TestDDS.xml" in the UI folder
- Set "Import into VFS" to true
- 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>
- Create a new LUA item "TestDDS.lua" in the UI folder
- Set "Import into VFS" to true
- 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()
- Add an InGameUIAddin for UI/TestDDS.xml
- Build the mod
Testing the Mod
- Start Civ V
- Enable the mod
- Start a new game
- Start FireTuner
- Select the Lua Console tab
- Change the context to TestDDS
- 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
- Using your favourite image manipulation program create your graphic, any areas to be transparent should ideally be white
- Save as a PNG (don't worry about setting transparency)
Creating the DDS texture file
- Start GIMP
- Create a new image, the same size as the PNG, with the Color Space set to RGB (under Advanced Options), and click OK
- Copy and paste the png graphic into the new image
- In the "Layers, Channels, ..." window, right click the Floating Selection and select "Anchor Layer"
- From the Layer menu, select Transparency and then "Color to Alpha ..."
- If the areas to be transparent arn't white, click the colour bar between "From:" and "to alpha"
- Click OK
- Save the graphic as an xcf file (just in case you make a mistake and need to reload the file in GIMP)
- Select File -> Save As... and expand the Select File Type (By Extension) item
- Scroll down and select "DDS Image" (if there isn't this option check you installed the DDS plug-in correctly!)
- Click Save
- In the Save As DDS options panel, set Compression to "None", Format to "RGBA8", leave "Generate Mipmap" unchecked and ignore the "Advanced Options" section
- Click OK to save the dds file
Creating the Mod
- Start ModBuddy and create a new mod, eg "TestDDS"
- Uncheck "Affects Saved Games"
- Create an ART folder
- Add the dds file to the ART folder
- Set "Import into VFS" to true
- Create a UI folder
- Create a new XML item "TestDDS.xml" in the UI folder
- Set "Import into VFS" to true
- 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>
- Create a new LUA item "TestDDS.lua" in the UI folder
- Set "Import into VFS" to true
- Set the content to
Code:function Show() ContextPtr:SetHide(false) end function Hide() ContextPtr:SetHide(true) end Hide()
- Add an InGameUIAddin for UI/TestDDS.xml
- Build the mod
Testing the Mod
- Start Civ V
- Enable the mod
- Start a new game
- Start FireTuner
- Select the Lua Console tab
- Change the context to TestDDS
- Execute "Show()" - all being well you should see your graphic in the centre of the button frame in the centre of the screen