The purpose of this guide is to aid authors in creating images that are compatible with the World of Warcraft client and help them optimize their images for use in add-ons.
Prerequisites
This guide assumes at least some experience with editing images and image editors. There are various tools one can use for editing images but in this case, I have a few recommendations:
XnView - For opening and viewing BLP files. XnView not only supports BLPs but also includes an image browser and is one of the best at exporting BLPs to PNGs while preserving transparency.
Photoshop - One of the best (and most expensive) image editors available. I use this for saving my images in the TGA format.
The GIMP - An extremely powerful and free image editor.
Image Formats
If you've ever installed the Interface Add-On Kit or extracted one of World of Warcraft's MPQ files, you will have noticed that most of the images have a .blp extension. Unfortunately, very few image editors support BLP files and then only through plug-ins. Luckily, the World of Warcraft client supports both BLP and TGA files natively.
Working With TGA Files
TGA files are your basic RGB raster image. The advantage to the TGA format is the support of a fourth channel (the others being Red, Blue and Green), the "Alpha" channel.
An alpha channel is a "channel" (like a layer) that uses various shades of gray to control the transparency of a given pixel. Pure white is 100% opaque and pure black is 100% transparent. The result is the ability to use partial, or "alpha" transparency in the image.
Take into consideration the following images:
In the first example, you see just a black square. This is the actual content of the image. In the second example you see a fading circle of white to black. This is the alpha channel. In the third example, you see the effect that the alpha channel has on the image itself. If your browser supports PNG images, the fourth image is an example of how the image would actually look in-game.
TGA Limitations
Before we move on to creating our image, we need to keep in mind that when it comes to TGA files, the WoW client has a few rules that must be followed in order for the image to be valid. Those rules are:
The height and width of the image must be a power a 2. (Ex: 16x16, 64x64, 128x256)
The height and width of the image can be no larger than 1024 pixels.
The image itself must be an uncompressed, 32-bit (24-bit+Alpha @ 72dpi) TGA file.
Open your favorite image editor. For this guide, I'll be using Photoshop, however, you can use whatever you have available. Just keep in mind that some steps may be different depending on the editor that you're using.
Note: I'll try to be specific about certain settings and post a sample image where applicable, but I'm not going to go into detail about how to do specific tasks for each editor.
Start by creating a new, 64x64 pixel image. Fill the background with white. (Note: We're using white for the sake of visibility)
Create a new layer above the background. On the new layer, place some content. This can be just some generic shape you're using while following along with this guide. For the sake of this guide, I'm going to go with an orange paw print (a preset shape available in PS).
Now we need to create an alpha channel based on our content layer. Gain the selection of the content. If you're using Photoshop, simply control-click the layer to get your selection. With the selection active, create an alpha channel. If done correctly, you should now have a white "copy" of your selection in the alpha channel. If the alpha channel is all black, you'll need to get the full selection of your content and fill it with white. You now have your alpha channel. (Note: Your image can only have one alpha channel.)
At this point, you'll want to change the color of your background to black, unless your content is black. You might also want to flatten the image depending on the editor that you're using.
Note: I'm going to add some effects to my image, including a drop shadow just to display the transparency capabilities of the alpha channel. Here's how my image would look in-game: (Requires a PNG-compatible browser)
Saving the image in a format compatible with the WoW client is as easy as making sure the export options are set correctly. The following is a screen shot of Photoshop's Targa export options (accessed via "Save As" then select "Targa (..)" as the file type and then click "Save"). The options should be set exactly as follows, otherwise the image won't work.
Note: I'll tweak the last two sections at a later point. I just wanted to get the basics in so that people could use it. I know it needs some work. :p
Also, WoW can use RLE-compressed TGA files since client version 2.1 I believe. (I have tested RLE-compressed TGA files only on the Windows client.)
While the files are decompressed in main memory, sent to the video card uncompressed, and remain uncompressed in the video card's texture buffers, RLE compressing your TGA files can save significant bandwidth for the sites hosting your addons or artwork. :)
Edit: Since most addon sites re-compress all an addon's files in a ZIP archive anyway, RLE compression is unlikely to save them much bandwidth. At best, it will save you and your users some disk space, and save you a small amount of time when uploading the files.
I tried using GIMP, it was easier. You just draw with a transparent background, save as TGA, and the program automatically fixes the alpha channel and correct 32 bit mode.
The images show fine for me. They're even posted as attachments to the posts they belong to (and that's the url used to display them in the post itself).
I'm not really sure what you mean. Every modern image editor (GIMP, Photoshop, etc.) defaults to including an alpha channel on every layer of every image, with the only exception being if you're working with the original single layer from a JPG image or some other format that doesn't support transparency. If that's the case, just Ctrl+A to select all, Ctrl+C to copy, and Ctrl+V to paste the image onto a new layer, and feel free to delete the original layer. (If you just duplicate the whole layer you probably won't get an alpha channel for it.) If you need more help, you're going to have to be more specific.
I'm having quite some hard time using my own images in an Addon I'm making for the first time, and I have follow the steps above to create my own tga files as well as using known wow compatible third-party tga files.
However, my addon only loads a green background when I try to set such images as the background for a frame.
And did you try this?
bgFile = "Interface\\AddOns\\AddonName\\Resources\\paw.tga"
Really though, if you're asking questions about your code, you need to show us your code. Not something you typed up extra. (Because I sincerely hope you're not creating a global called mainFrame...)
This guide assumes at least some experience with editing images and image editors. There are various tools one can use for editing images but in this case, I have a few recommendations:
XnView - For opening and viewing BLP files. XnView not only supports BLPs but also includes an image browser and is one of the best at exporting BLPs to PNGs while preserving transparency.
Photoshop - One of the best (and most expensive) image editors available. I use this for saving my images in the TGA format.
The GIMP - An extremely powerful and free image editor.
If you've ever installed the Interface Add-On Kit or extracted one of World of Warcraft's MPQ files, you will have noticed that most of the images have a .blp extension. Unfortunately, very few image editors support BLP files and then only through plug-ins. Luckily, the World of Warcraft client supports both BLP and TGA files natively.
TGA files are your basic RGB raster image. The advantage to the TGA format is the support of a fourth channel (the others being Red, Blue and Green), the "Alpha" channel.
An alpha channel is a "channel" (like a layer) that uses various shades of gray to control the transparency of a given pixel. Pure white is 100% opaque and pure black is 100% transparent. The result is the ability to use partial, or "alpha" transparency in the image.
Take into consideration the following images:
In the first example, you see just a black square. This is the actual content of the image. In the second example you see a fading circle of white to black. This is the alpha channel. In the third example, you see the effect that the alpha channel has on the image itself. If your browser supports PNG images, the fourth image is an example of how the image would actually look in-game.
TGA Limitations
Before we move on to creating our image, we need to keep in mind that when it comes to TGA files, the WoW client has a few rules that must be followed in order for the image to be valid. Those rules are:
Open your favorite image editor. For this guide, I'll be using Photoshop, however, you can use whatever you have available. Just keep in mind that some steps may be different depending on the editor that you're using.
Note: I'll try to be specific about certain settings and post a sample image where applicable, but I'm not going to go into detail about how to do specific tasks for each editor.
Start by creating a new, 64x64 pixel image. Fill the background with white. (Note: We're using white for the sake of visibility)
Create a new layer above the background. On the new layer, place some content. This can be just some generic shape you're using while following along with this guide. For the sake of this guide, I'm going to go with an orange paw print (a preset shape available in PS).
Now we need to create an alpha channel based on our content layer. Gain the selection of the content. If you're using Photoshop, simply control-click the layer to get your selection. With the selection active, create an alpha channel. If done correctly, you should now have a white "copy" of your selection in the alpha channel. If the alpha channel is all black, you'll need to get the full selection of your content and fill it with white. You now have your alpha channel. (Note: Your image can only have one alpha channel.)
At this point, you'll want to change the color of your background to black, unless your content is black. You might also want to flatten the image depending on the editor that you're using.
Note: I'm going to add some effects to my image, including a drop shadow just to display the transparency capabilities of the alpha channel. Here's how my image would look in-game: (Requires a PNG-compatible browser)
Saving the image in a format compatible with the WoW client is as easy as making sure the export options are set correctly. The following is a screen shot of Photoshop's Targa export options (accessed via "Save As" then select "Targa (..)" as the file type and then click "Save"). The options should be set exactly as follows, otherwise the image won't work.
Note: I'll tweak the last two sections at a later point. I just wanted to get the basics in so that people could use it. I know it needs some work. :p
i think the size limit is 256 by 512 as well or did that change in 3.0?
While the files are decompressed in main memory, sent to the video card uncompressed, and remain uncompressed in the video card's texture buffers, RLE compressing your TGA files can save significant bandwidth for the sites hosting your addons or artwork. :)
Edit: Since most addon sites re-compress all an addon's files in a ZIP archive anyway, RLE compression is unlikely to save them much bandwidth. At best, it will save you and your users some disk space, and save you a small amount of time when uploading the files.
I'm having quite some hard time using my own images in an Addon I'm making for the first time, and I have follow the steps above to create my own tga files as well as using known wow compatible third-party tga files.
However, my addon only loads a green background when I try to set such images as the background for a frame.
LUA:
mainFrame = CreateFrame("Frame", "mainFrame", UIParent);
mainFrame:SetSize(64, 64);
mainFrame:SetPoint("CENTER");
mainFrame:SetBackdrop( {
bgFile = "Interface/AddOns/AddonName/Resources/paw.tga",
insets = { left = 0, right = 0, top = 0, bottom = 0 }
});
If any one of you at all can tip me in on how to fix this issue I would be very grateful.
Cheers.
bgFile = "Interface\\AddOns\\AddonName\\Resources\\paw.tga"
Really though, if you're asking questions about your code, you need to show us your code. Not something you typed up extra. (Because I sincerely hope you're not creating a global called mainFrame...)
/edit: also, did you completely exit WoW?
Thanks,
El
https://drive.google.com/file/d/0B-YRA0k6zCjPNi1zNW5vclcyR1k/view?usp=sharing