Difference between revisions of "Adding New Icons"

From Divinity Engine Wiki
Jump to: navigation, search
m
(Updated guide since the Texture Atlas Editor now works as expected, saving two sections of steps (packing and converting).)
Line 1: Line 1:
 
Adding new icons requires a bit of preparation, but once the initial setup is complete, adding additional icons is quick and easy.
 
Adding new icons requires a bit of preparation, but once the initial setup is complete, adding additional icons is quick and easy.
  
== Preparing the Texture File ==
+
== Preparing Your Icon Images ==
# Pack a collection of images (64x64) into a single image file using power of 2 constraints (512x512, 1024x1024, etc.). Make sure to have the images sorted by name. Also, keep the location of these images handy, as you'll need the individual images later.
+
# Save your individual icons in a size and format supported by the Texture Atlas Editor.
# Convert the image to DDS, with alpha and BC3 compression.
+
** Support sizes are 16x16, 32x32, 64x64, 128x128, 256x256.
# Create a directory for your texture inside your mod's directory (inside the data directory). Example: ''"Data/Public/MyModName_GUID/Assets/Textures"''.
+
** Supported formats are .png, .tga, and .dds.
 +
# Place your images in a directory you'll have easy access to later.
 
# In the Resource Manager, create a package to add your texture to later.
 
# In the Resource Manager, create a package to add your texture to later.
# Wait before you move your texture file in, as to avoid a current bug.
 
  
 
== Preparing the Texture Atlas file: ==
 
== Preparing the Texture Atlas file: ==
Line 12: Line 12:
 
# Click File -> New.
 
# Click File -> New.
 
# Select ''"Public/MyModName_GUID/GUI"'' as the location for your .lsx file (create the GUI folder if it doesn't exist).
 
# Select ''"Public/MyModName_GUID/GUI"'' as the location for your .lsx file (create the GUI folder if it doesn't exist).
# Name the texture file the same as your texture from before, and save it in the same location we prepared (i.e. ''"Data/Public/MyModName_GUID/Assets/Textures"'').
+
# Select a name for your texture file, and select an ideal location inside your mod's Assets folder (i.e. ''"Data/Public/MyModName_GUID/Assets/Textures"'').
 
# Select the size of the individual icons and the size of the image.
 
# Select the size of the individual icons and the size of the image.
 
# Select the package you created previously, then click Save.
 
# Select the package you created previously, then click Save.
# This is where we hit a bug - The Texture Atlas Editor appears have tried to create the DDS texture file we specified, but nothing is actually created (see the error in the message log).
+
# The Texture Atlas Editor should create a blank texture (.dds) file at the path specified previously.
# To workaround the error, move your actual texture file in to the directory we specified (''"Data/Public/MyModName_GUID/Assets/Textures"'').
 
# Reload your .lsx atlas file in the Texture Atlas Editor. Your texture should now be visible, and the "Add Entries" button should no longer be greyed out.
 
  
 
== Adding Atlas Entries: ==
 
== Adding Atlas Entries: ==
 
# Click Edit -> Add Entries.
 
# Click Edit -> Add Entries.
# Navigate to where your collection images reside (the ones you packed into the texture file).
+
# Navigate to where you placed your individual icon images.
# Select all the icons you packed and add them. If you packed your texture right (alphabetically), all of the new atlas entries should match up with the image.
+
# Select your icons add them. All of the new icon entries should be automatically added to your texture file.
 
# Save.
 
# Save.
  
 
== Notes: ==
 
== Notes: ==
 
* This same process can be used to add custom portraits.
 
* This same process can be used to add custom portraits.
===Software Used In This Tutorial===
+
 
* [https://www.codeandweb.com/texturepacker TexturePacker] for packaging the icons. Here's my settings: [https://i.imgur.com/64aGPPr.png TexturePacker Settings]
+
== Optional: ==
 +
Texture files can be manually packed and created. Possible software for doing that is:
 +
* [https://www.codeandweb.com/texturepacker TexturePacker] for packaging the icons. Example settings: [https://i.imgur.com/64aGPPr.png TexturePacker Settings]
 
* [https://github.com/castano/nvidia-texture-tools/releases nvidia-texture-tools] to convert the packed texture to DDS format. This is a command-line tool.  
 
* [https://github.com/castano/nvidia-texture-tools/releases nvidia-texture-tools] to convert the packed texture to DDS format. This is a command-line tool.  
 
===Optional===
 
 
* For Photoshop users, Nvidia has a plugin to work with the DDS format: [https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop NVIDIA Texture Tools for Adobe Photoshop]
 
* For Photoshop users, Nvidia has a plugin to work with the DDS format: [https://developer.nvidia.com/nvidia-texture-tools-adobe-photoshop NVIDIA Texture Tools for Adobe Photoshop]

Revision as of 19:59, 11 October 2017

Adding new icons requires a bit of preparation, but once the initial setup is complete, adding additional icons is quick and easy.

Preparing Your Icon Images

  1. Save your individual icons in a size and format supported by the Texture Atlas Editor.
    • Support sizes are 16x16, 32x32, 64x64, 128x128, 256x256.
    • Supported formats are .png, .tga, and .dds.
  1. Place your images in a directory you'll have easy access to later.
  2. In the Resource Manager, create a package to add your texture to later.

Preparing the Texture Atlas file:

  1. Open the Texture Atlas Editor.
  2. Click File -> New.
  3. Select "Public/MyModName_GUID/GUI" as the location for your .lsx file (create the GUI folder if it doesn't exist).
  4. Select a name for your texture file, and select an ideal location inside your mod's Assets folder (i.e. "Data/Public/MyModName_GUID/Assets/Textures").
  5. Select the size of the individual icons and the size of the image.
  6. Select the package you created previously, then click Save.
  7. The Texture Atlas Editor should create a blank texture (.dds) file at the path specified previously.

Adding Atlas Entries:

  1. Click Edit -> Add Entries.
  2. Navigate to where you placed your individual icon images.
  3. Select your icons add them. All of the new icon entries should be automatically added to your texture file.
  4. Save.

Notes:

  • This same process can be used to add custom portraits.

Optional:

Texture files can be manually packed and created. Possible software for doing that is: