How to: Display Images in-game

[Andrewgosu]

Have you ever tried to display images in Warcraft, but, failed miserably?

Of course you have.

Anyway, fear no more!


Follow these easy steps and learn how to display an image of your liking in any Wacraft map!

Requirements

- Photo editing program
- TGA to BLP converter
- Warcraft and World Editor (RoC compatible)
- A little bit patience and time

I'll be using Photo Shop 7 and Wc3 Image Extractor II.

So, lets get started.


Step 1 - Preparing the image for Warcraft

Choose a image of your liking - I have chosen this nice James Bond one.

Now, you have two choices:

- crop, scale the image to a power of 2, (e.g) 512x512 px, 256x512 px etc.
- make a new canvas already being a size of power of 2 and copy&paste your image there.

I'll resort to the latter option - I will create a 512x512 px canvas and copy&paste my 300x400 px image there.

After that's done, make a selection around the image and open channels.

Add an alpha channel and erase the selected part. That should leave you a pink/red like space around the image.

Or, if you used the first method and scaled your image to right proportions, you should see no red parts.

Save the image in 32-bit TGA.


Open the image in a TGA to BLP converter program, Wc3 Image Extractor II, in my case, and convert into .blp.

You have finished preparing the image. Proceed to step 2.


Step 2 - Displaying the image in Warcraft

Right, you got your image ready. It's time to display it.

Open World Editor, and, Import Manager (F12 or "Modulo->Import Manager") and import the previously prepared image to your map.

Now comes the important part, so pay close attention.

The GUI "Create Image" function is "buggy", but I won't go into greater depths. Use the following function, instead:

function CreateImageEx takes string imagePath, real size, real x, real y, real z, boolean showImage returns image
    local image i = CreateImage(imagePath, size, size, 0, x - (size / 2), y - (size / 2), z, 0, 0, 0, 2)
    call SetImageRenderAlways(i, true)
    call ShowImage(i, showImage)
    return i
endfunction

Or, for GUI'ers, a "point" version one (requires the one above, too):

function CreateImageExLoc takes string imagePath, real size, location whichLocation, real z, boolean showImage returns image
    return CreateImageEx(imagePath, size, GetLocationX(whichLocation), GetLocationY(whichLocation), z, showImage)
endfunction

So, copy paste these 2 scripts into your maps header and use a custom script/JASS to display the images.

​

You're all done!

To recap:

- the image must be a power of 2 sized.
- the image must have an alpha layer.
- Use the "CreateImageEx" function to display the image.

Got some of my inspiration from this thread, credits.

Feedback is appreciated.

 

[~GaLs~]

woah....nicely made tutorial...+repo :O

edit:
But you might need to explain more on these lines:

- crop, scale the image to a power of 2, (e.g) 512x512 px, 256x512 px etc.
- make a new canvas already being a size of power of 2 and copy&paste your image there.

I'll resort to the latter option - I will create a 512x512 px canvas and copy&paste my 300x400 px image there.

i dont know what canvas is...

 

[Andrewgosu]

Canvas, basically, when you create a new file you create new, empty, canvas.

Power of two: the number two multiplied by itself a certain number of times.

 

[ReVolver]

I like this tutorial instead

http://www.wc3jass.com/viewtopic.php?t=2433

but yours is ok <3

 

[Andrewgosu]

PitzerMike got it wrong. He adds a transparent layer to the image, which is 1 px wider and taller than the image itself.

An alpha layer should be added, instead, and it doesn't have to be bigger than the image, or something.

 

[Black Hawk]

Whoa!, this is great Andrewgosu. you can make this awesome ground tile like wood floors. +REP to you.

 

[Sim]

You must include a prefix so we know what is the submission. If it is a spell, include the [Spell] prefix ([Spellpack] for more than 1 spell). If it is a system, the [System] prefix applies. For code snippets, the prefix is [Snippet], and for tutorials: [Tutorial].

Added the prefix already, though.

This is a cool little tutorial, I believe we have nothing like that in the section at that point.

Plus, it helps greatly as displaying an image is buggy using the GUI functions.

Approved!

 

[Andrewgosu]

I always forgot to add those prefixes. Bugger.

Sorry for that (in advance, too).

 

[trigger_newb]

err this guide is really good but,
you realize that people with the ability to do this, (some) make inappropriate maps, such as maps that shows

Spoiler

porn pics

no offense though...

 

[Andrewgosu]

Well, I am not to judge that. Mappers should have their dignity.

 

[SerraAvenger]

thanks a thousand times!

 

[Uberplayer]

You could improve this in few ways.

First of all, editing the image. The image doesn't have to be power of 2, I am currently using 53x54 images for Space Shooter. (In-Game, however, I am creating the in size 81x81). And when creating the image, just create 1px alpha edge for the image, and make sure it's enabled when you save.

Then, it'd be awesome if that CreateImageEx function used width and height instead of size parameter.

Nice anyway. Without this tutorial I'd be completely unable to create images at all .

EDIT//: Forget what I said about the image sizes. If you want everyone to be able to play your map, make all images power of 2. It was like for 50% my map crashes, and for others it worked fine. Resizing images to power of 2 fixed it.