Difference between revisions of "Adding New Icons"

From Divinity Engine Wiki
Jump to: navigation, search
m
(Preparing Your Icon Images)
 
(13 intermediate revisions by 4 users not shown)
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.
# In the Resource Manager, create a package to add your texture to later.
+
# Place your images in a directory you'll have easy access to later.
# Wait before you move your texture file in, as to avoid a current bug.
+
# In the Resource Manager, create a package to add your texture atlas/icons to later (click the Add Package button, next to the Add and Remove Folder buttons, in the upper-left of the Resource Editor and name it however you like).
 +
[[File:IconGuide_ResourceManager_01.png|thumb|Using the resource manager.]]
  
 
== Preparing the Texture Atlas file: ==
 
== Preparing the Texture Atlas file: ==
Line 12: Line 13:
 
# 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"'').
+
# Create a name for your texture file (something like ModName_Icons.dds), 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 (for skills: 64x64) 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.
+
# Go to Edit -> Add Entries, or simply click the 'Add Entries' button (next to the Remove Entries X button) in the upper-left of the Texture Atlas Editor.
# Navigate to where your collection images reside (the ones you packed into the texture file).
+
# Navigate to where you placed your individual icon images (anywhere on your computer).
# 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 icon and add it (repeat as needed). All of the new icon entries should be automatically added to your texture file.
 
# Save.
 
# Save.
 +
[[File:IconGuide_AddingEntries_01.png|thumb|Multiple atlas entries may be added at once.]]
 +
== Notes: ==
 +
* This same process can be used to add custom portraits (recommended size: 80px wide by 100px tall).
 +
* The icon names you use are the entry names in your texture atlas sheet. Within the texture atlas editor, you can right click on an entry and select "Copy name to clipboard" to make the process easier.
 +
* Skills and statuses are assigned icons in the stats editor (there's a column specifically for the icon name). Root templates can also be assigned an icon.
  
== Notes: ==
+
== Optional: ==
* This same process can be used to add custom portraits.
+
Texture files can be manually packed and created. Possible software for doing that is:
===Software Used In This Tutorial===
+
* [https://www.codeandweb.com/texturepacker TexturePacker] for packaging the icons. Example settings: [https://i.imgur.com/64aGPPr.png TexturePacker Settings]
* [https://www.codeandweb.com/texturepacker TexturePacker] for packaging the icons. Here's my 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]

Latest revision as of 02:53, 8 March 2018

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.
    1. Support sizes are 16x16, 32x32, 64x64, 128x128, 256x256.
    2. Supported formats are .png, .tga, and .dds.
  2. Place your images in a directory you'll have easy access to later.
  3. In the Resource Manager, create a package to add your texture atlas/icons to later (click the Add Package button, next to the Add and Remove Folder buttons, in the upper-left of the Resource Editor and name it however you like).
Using the resource manager.

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. Create a name for your texture file (something like ModName_Icons.dds), 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 (for skills: 64x64) 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. Go to Edit -> Add Entries, or simply click the 'Add Entries' button (next to the Remove Entries X button) in the upper-left of the Texture Atlas Editor.
  2. Navigate to where you placed your individual icon images (anywhere on your computer).
  3. Select your icon and add it (repeat as needed). All of the new icon entries should be automatically added to your texture file.
  4. Save.
Multiple atlas entries may be added at once.

Notes:

  • This same process can be used to add custom portraits (recommended size: 80px wide by 100px tall).
  • The icon names you use are the entry names in your texture atlas sheet. Within the texture atlas editor, you can right click on an entry and select "Copy name to clipboard" to make the process easier.
  • Skills and statuses are assigned icons in the stats editor (there's a column specifically for the icon name). Root templates can also be assigned an icon.

Optional:

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