How to display Images with Triggers

[PitzerMike]

In this tutorial you'll learn how to properly use the CreateImage native to display images in Warcraft III.
Unfortunately this native is bugged and it can only show very special images correctly, that's why I'm writing my knowledge down.


Background

First let me tell you there are only a few images in the game that can be displayed correctly. So if you want to display
an existing icon you will usually have to modify it a bit and reimport it into your map to get it working.
One of the icons that work is found in UI\Console\Human\human-transport-slot.blp which I happened to use back then for a Minesweeper map I made.
After finding out that this image worked I took a closer look at what made it so special. After a few hours I finally found the solution that I'll explain now.


What to Do

For this tutorial let's suppose you have just made a 64 x 64 icon in Photoshop and you want to display it. Now here is what you'll have to do:

• Scale it down to X-2 x Y-2, so in our case that's 62 x 62. The reason for this is that we will need an invisible border of 1 pixel on each side.
• Create a new image with the original size of your image, in our case 64 x 64 with transparent background. Remember image sizes in Warcraft must be power of 2.
• Copy and paste your image into the new blank image. Now you should have a transparent border around your image.
• Now make sure you only got the RGB channels and no alpha channel in your image. Then save it as TGA and make sure you save it as 32 bit TGA although you didn't create an alpha channel. This is important to fool Wc3Viewer. This step is optional, it's probably not necessary, but I've never tried using a custom alpha channel - it might or might not work.
• The TGA can now be converted to BLP with the Wc3Viewer. Download it here if you don't have it yet.
• Import your image into your map. Use any path you like.
• When using the CreateImage native just make sure you're using the image type "indicator" (2). Then set the render always property of the image to true and use the ShowImage native to show it. I made the CreateImageEx function below to make it easier for you. The SizeX and SizeY parameters are used to scale the image, you could simply set them to 64 and 64 for a quick test.

JASS:

function CreateImageEx takes string S, real SizeX, real SizeY, real PosX, real PosY, real PosZ, boolean Show returns image
  local image i = CreateImage(S, SizeX, SizeY, 0, PosX - (SizeX / 2), PosY - (SizeY / 2), PosZ, 0, 0, 0, 2) // image type indicator
  call SetImageRenderAlways(i, true)
  call ShowImage(i, Show)
  return i
endfunction

Conclusion

The key is the transparent border around your image, otherwise it will show ugly black squares around your image when
displaying it in Warcraft III.

I'm also attaching the above-mentioned Minesweeper map in case anyone wants to see it in action. I used images to draw
the numbers in that map as you can see in the attached image.
Minesweeper Download



BTW, images are really fast and it's pretty cool that you can change their coloration at runtime.
Unfortunately the z (height) parameter doesn't work very well - the images get clipped wrong, so a height of 0 would
be appropriate in most cases.

[Chuckle_Brother]

Just a thought, but wouldn't it possibly just be easier to create a small square, flat model and have it with a wackload of animations, each with a different texture to it?

Either way, good tutorial, its strange that they would bug the Image Displays like this, and its always helpful to know little tidbits like this.

[Fulla]

Id recommend adding a few screenshots, makes a tutorial much better :-)

[PitzerMike]

Originally Posted by Chuckle_Brother

Just a thought, but wouldn't it possibly just be easier to create a small square, flat model and have it with a wackload of animations, each with a different texture to it?

Yes I think that's possible. But how do you display a certain animation for that model - you'd have to use units or at least destructables, right? Because for special effects you can't set a specific animation. Now that's where the images have their advantage, you don't need units, hence they don't eat CPU power when rendering them. I previously used units in my minesweeper map and as more fields got discovered it would soon get unplayable, with images on the other hand there's no noticeable slowdown.

@Fulla: I agree, I didn't have time to make a screenie before the weekend but now there's a screenshot of that minesweeper map attached.

[Blade.dk]

As I've said before, great tutorial.

[Preskooldude]

Slight question: Could you just create the new image to simply be 2 pixels bigger than the original picture, and skip the scale down by 2 pixels?

[Waldbaer]

No because then your picture does not fit the power of 2 size criteria, every BLP must have.

[goble-r1sk]

I was playing with displaying an image but had problems. Even after running through this tutorial, my odd glich is still occuring. My image is 128 by 128, no alpha channel, 32bbp, with a 1 pixel transparent border... when I display it looks like this in-game (display size = 128 by 128):

[Waldbaer]

Your picture does not have a transparent border. I don't know why, but for me there isn't any. Please try out the two pictures attached to this post and post your results!
"AceClubs2.blp" is just yours with a 1px transparent border and "AceClubsRound.blp" has rounded edges additionally - this will show us if alpha channel generally works correctly (although I cannot understand why it should not).

[goble-r1sk]

What program did you use to add the 'transparent' region?

What I discovered to be happening to me in photoschop cs2 was when I saved as 32 bit, pshop automatically added in a full alpha channel, and changed what had been displayed as 'transparent' to white. Possibly what is described in this tutorial is: instead of tricking the program into thinking there is an alpha channel there actually is one, automatically created by the program to block out the 'transparent' area upon save?
If I just custom-alpha out (which I'm used to doing) the 1 pixel border it works fine though : ) Thanks for the help.

[Szythe]

I'm having the exact same problem as goble-r1sk. Whenever I save a file in photoshop (im using 7.0) it changes all of the transparent areas into white areas. Is there any way to change the settings so that it doesn't do this?


EDIT:
after fooling around a while longer, I figured out that the process is slightly different with my version of photoshop. Instead of deleting the alpha map, you have to keep the alpha map. Make the image the full size (64x64 for example) and instead of making it transparent along the border, go to the alpha channel and fill in a 1-pixel border.

[Flame_Phoenix]

If I click on the icons, will something happen ? Or is this just an image ?

[TriggerHappy]

you need to use trackables , if you want it to detect where u clicked

[d07.RiV]

I'm not sure you even need the transparent border. You need an alpha channel for sure otherwise it will be all white. Btw I suggest using warcraft 3 viewer.

Also "image type indicator (2)" is not the only one that works. The other one is "image type ubersplat (4)" and its better in some cases because it is affected by fog and lighting, so if you want to add an image onto your terrain (e.g. some logo) you would use this type.

[TEC_Ghost]

I use images in my map and testing with Pyrogasm it seemed to not draw them for Macs, anyone confirm this bug?