Loadingscreens De-Mystified

[panTera]

Ok, I've been working with Photoshop for years now and here's some things I know about the use of Alpha channels. From what I've seen from most custom loadingscreens is that a lot of people just add a new alpha layer and don't (know how to) use it. Editing graphic images can be quite comprehensive stuff and it's impossible to explain it from A to Z here in the forum. I'll try to get as straight to the point as possible.

I'm assuming you know how to edit the size of your picture and you're a bit used to working with (good) paint programs.

Before I try to explain the use of Alpha's in TGA's (see next post below), I'll try to explain how you can make your loadingscreen the same way they (2015) did. It seems like all they did with the loading pics was just duplicate one of the 3 (RGB) channels of the TGA and then use that new channel as Alpha. No manual selections at all.

To do the same with your own image:

1. Take a screenshot of your map (press F12). Screen resolution doesn't really matter, when the image is brought back to 512x512 it will be 1Mb in size.
   (Or just use any other image you have in mind).
2. Right, open it in a paint program that can handle Layers and Channels (Photoshop, PaintShopPro etc.),
3. Make it the right size (see the note*) and edit the image if necessary with effects or filters.
4. Now for the Alpha part: go to the Channels window where you'll see the 4 channels (the 'composite RGB', 'Red', 'Green', and 'Blue'). Now click on one of the Red, Green or Blue Channels and choose (right click) "Duplicate Channel" (nevermind about a name and just click OK). (fig.1 & fig.2)

fig.1

fig.2
This new channel automatically becomes your Alpha selection. (see fig.5)

That's all. Save the image and give it a name. (fig.3 & fig.4) Note: your image must be saved as a 32bit TGA, otherwise the Alpha channel isn't stored with it.
fig.3

fig.4

Check. The next time you open your TGA the channel is named Alpha 1.
fig.5

____________The shader for a TGA image:__________________________________________________________________

Code: Select all

map(bsp)name
{
nomipmaps
nopicmip
cull none
force32bit
surfaceparm nolightmap
{
map $whiteimage
}
{
clampMap textures/mohmenu/dmloading/yourimagename.tga
blendfunc gl_one_minus_src_alpha gl_src_alpha
}
}

Only use a TGA plus Alpha channel if you want your loadingscreen to have the same pale white look as the originals.


____________The shader for a JPG image:__________________________________________________________________

Code: Select all

map(bsp)name
{
nomipmaps
nopicmip
cull none
surfaceparm nolightmap
{
clampMap textures/mohmenu/dmloading/yourimagename.tga // even though it's a jpg just use a .tga extension here
}
}

If you just want to use an image without any changes then save it as a JPG. (Remember that a JPG can't stores Alpha channels). When saving choose a high or maximum quality of 9 or 10. Any higher and it will only increase in size.

______________________________________________________________________________
(note*) This is how to resize your image with Photoshop:

I had my video resolution set to 1280x1024 so this will be the size of my screenshot.

In Photoshop: go to "Image-> image size" and be sure to uncheck the "constrain proportions"-box. Change both the width and height from 1280 and 1024 to 512 pixels. The image now looks out of proportion. Don't worry, you might have noticed that the loadingscreens get a little stretched horizontally. So, in-game it will now stretch back to it's original shape.

It's usually a good idea to edit the image after such a big change in size. (e.g. use sharpenfilter).
______________________________________________________________________________

I think this is about all the mapper needs to know when he wants to use a TGA or JPG loading image in MoH. Again, if you don't want to use an Alpha channel to get the "blend with white" effect, then use a JPG loading image. On-screen you will hardly notice the difference and it's about 6 times smaller in size.

(If you want to know more about these color channels and what they mean then read the next post.)

[panTera]

The following describes a few things about Alpha channels and how they were used in the original loadingscreens.

The use of Alpha channels (in "short"):
Regular RGB images have four default channels: one for each of the red, green, and blue colors plus a composite channel used for editing the image. You can create a layer mask to control how different areas within a layer or layer set are hidden and revealed. Which is the case with the masked textures (treelines, fences etc.). By making changes to the layer mask (your new Alpha channel), you can apply a variety of special effects to the layer without actually affecting the pixels on that layer. When you select part of an image (e.g. all the blue colors) that part will be the working area, the area that is not selected is "masked" or protected from editing (in this case the shader controls what happens to the selected area).

Note: there's a "white.tga" in the pak1.pk3 and this line is in the shaders: "map $whiteimage":
This causes the parts of the image that are selected and stored in the Alpha channel to blend with the "white.tga". For instance when you duplicate the Blue channel so it becomes an Alpha channel, every part of the image that contains blue color will be the working area and will therefore be affected by the blending white. The rest of the colors are more or less protected.

When you use a JPG image, there's no Alpha channel present. If no selection is stored in the Alpha channel (because there is none), the selection nor the protecting mask can be found hence everything is just affected by the white color -> Your JPG appears as a white image. Therefore you have to remove the "map $whiteimage" line from the shader when using a JPG.

The next part is how to test the effect in Photoshop:
(This is just for testing. You don't need to do all this stuff to make an Alpha channel of course)

In the loadingscreen of Mohdm1 it looks like if they masked (almost) everything but the sky-parts as the sky looks white when you load the map. But most likely they selected the Green channel and turned it into an new Alpha. If you have a paint program that can work with Layers and Channels and you want to get an idea of how it works, extract a couple of dmloading TGA's from the pak1.pk3 (e.g. "Mohdm1.tga" and "Mohdm2.tga").

First, in Photoshop (or PSP) set your background color to white. This will sort of act like the "map $whiteimage". Now open the "Mohdm1.tga" and just choose Select->load selection and click OK. (This is the selection they made and is stored in the image). Now delete (backspace) the loaded selection and you'll have a good indication of how it will look in-game.

Same story for the Mohdm2.tga; they probably duplicated the Blue channel and saved that one as an new Alpha. (I know this because when you one by one select & load each channel, the selection of the Blue colors matched the selection of their Alpha channel). Now do the same as above and you'll see that soft white overlay that you see when loading this map.

To make the Alpha channel that is used for Mohdm1 yourself, open the "Mohdm1.tga" and just delete the "Alpha 1" from the Channels window so you'll only see the 4 channels (RGB, R, G, and B). Now click on the Green channel and choose (right click) "Duplicate Channel" (nevermind about a name and just click OK). No need to name it Alpha 1. This new channel automatically becomes your Alpha selection and protects the red and blue colors in the image. That's all.

(to see if your channel behaves the same way as the original, again go to the Select-menu and "load selection", have the RGB channel selected and delete (backspace) the loaded selection. Or save it under a different name (don't forget the 32bit) and test it with your own map of course).

So....

There's really no need for us to muck about with (big sized) TGA's, Alpha channels and masks just to make a nice looking loading screen. The original loading screens with the soft white overlay do look nice, but I can imagine you don't want your image to look almost exactly like the ones of the original maps. If so, it's better to use a nice pre-edited JPG with the colors and effects you want, instead of a larger TGA with an incorrect, not working Alpha channel.

I don't have all the answers and I'm not saying all the above is correct, but I spend a lot of time editing images and as far as I can tell this is the way they have made their loadingscreens. Hope this clears things up a little.

laters,
Pan.

[Innkeeper]

Really great information!! One suggestion, if you want your loading screen picture to have the same ratio as your screen shot, set the resolution of the game a multiple of the displayed size in the loading screen. The display resolution of the loading screen is 640 x 480. For example, I use the entire screen for the map image in the snow tutorial, no background or corner stickies or white border. So I took a screen shot with the game at 1024 x 768. a multiple of 2 to the 640 x 480 display size. Then I resized it to 512 x 512. Of course it looks distorted but will appear correct when displayed. Now I suggest you make a second image for the scoreboard because it is displayed square. Reduce your original screen shot to 512 high preserving the aspect ratio. Then crop the image to 512 wide. You will lose part of the image but it won?t look distorted in the scoreboard. Save it with another name, like ?yourmapname2.jpg?, along with your other screen shot. Add a shader for it in the same file as your loading screen shader. Then in your map?s script file reference the second picture for the scoreboard pic.

setcvar "g_scoreboardpic" "yourmapname2"

Spearhead does a lot cleaner job with loading screens, jpegs all the way. The .urc file is processed in order, so make sure if you want the sepia look, that it comes after your screen shot shader. Personally I don?t care for it because it is too intense. It is better to get that effect by manipulating the image in Photo Shop.

[small_sumo]

Wow I've been wanting to see something like this for ages. Thanks so much.

[Innkeeper]

Actually if you are using a simple picture for your loadingscreen without an alpha channel, you don't need a shader file at all. You can call the picture itself.

Code: Select all

resource
Label
{
  name "Default"
  rect 0 0 640 480
  fgcolor 1.00 1.00 1.00 1.00
  bgcolor 0.50 0.50 0.50 0.00
  borderstyle NONE
  shader "textures/mohmenu/loadscreens/test_rain.jpg"
}

[panTera]

Thanks guys. I hope this info is clear enough to be a tutorial.

Btw, making a seperate and smaller picture for the scoreboard is also a good idea. Would be nice to add that information to the rest of the tut.

(Oh yeah, instead of cropping the image you could also just make a new document of 512x512, and then paste the bigger image so you can position it the way you want. I think it's pretty cool that you don't need a shader file for the smaller picture. Alright, now we're getting somewhere).

[EvilEdge]

one question.

what code goes in .urc and what code goes in .shader


thanks

[panTera]

I explained the .shader part in my first post in this thread, but okay.

This goes in the .urc file (just replace the orange 'yourmap(bsp)name' parts with your own map name):

menu "dm/yourmap(bsp)name" 640 481 NONE 0
bgcolor 0 0 0 1
borderstyle NONE
bgfill 0 0 0 1
fullscreen 1
//vidmode 3
//fadein 0.5
virtualres 1
postinclude ui/loadingbar.txt

resource
Label
{
name "Default"
rect 0 248 256 256
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "paper"
}
resource
Label
{
name "Default"
rect 248 248 256 256
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "paper"
}
resource
Label
{
name "Default"
rect 496 248 256 256
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "paper"
}
resource
Label
{
name "Default"
rect 496 0 256 256
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "paper"
}
resource
Label
{
name "Default"
rect 248 0 256 256
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "paper"
}
resource
Label
{
name "Default"
rect 0 0 256 256
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "paper"
}
resource
Label
{
name "Default"
rect 0 0 640 480
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "shadow"
}
resource
Label
{
name "Default"
rect 0 0 640 480
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.50 0.50 0.50 0.00
borderstyle "NONE"
shader "wrinkles"
}
resource
Label
{
name "Default"
rect 80 32 480 368
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "white"
}
resource
Label
{
name "Default"
rect 80 32 480 368
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "sepiaoverlay"
}
resource
Label
{
name "Default"
rect 96 48 448 336
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "yourmap(bsp)name"
}
resource
Label
{
name "Default"
rect 76 28 64 64
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "ul_corner"
}
resource
Label
{
name "Default"
rect 500 28 64 64
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "ur_corner"
}
resource
Label
{
name "Default"
rect 500 340 64 64
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "lr_corner"
}
resource
Label
{
name "Default"
rect 76 340 64 64
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "ll_corner"
}
resource
Label
{
title "This line of text is displayed under your picture"
name "Default"
rect 72 408 496 32
fgcolor 1.00 1.00 1.00 1.00
bgcolor 0.00 0.00 0.00 0.00
borderstyle "RAISED"
font facfont-20

}
end.



This goes in the .shader when using a Jpg-picture:

yourmap(bsp)name
{
nomipmaps
nopicmip
cull none
surfaceparm nolightmap
{
clampMap textures/mohmenu/dmloading/yourpicture.jpg
}
}

[EvilEdge]

ok how big is the loading pic supossed to be? im using a jpg image and all i get is black and grey where the pis is supposed to be. Also how do u put in a scoreboard pic or is that just for obj? thanks alot

[Slyk]

Most places tell you to use 512x512 if it is a .tga file, I'm guessing that you could use 640x480 if it's a .jpg, but I could be wrong..... try resizing it and see what you get. The game resizes the .tga to fit the screen, not sure what happens with a full-screen .jpg.....assuming the .jpg script loads full screen, that is.

[Innkeeper]

I have used a targa file as large as 681 x 1115 with success. The jpegs I have used full screen were 512 x 512, but 640 x 480 work as well.

[EvilEdge]

Ok i have the 512 x 512 targa file but the picture part of the loading screen is Black with a bit af white onthe edges. How do i fix this?

[Innkeeper]

If it is black, it is probably because the image is not called correctly. This could be the call to the shader is not correct or the shader itself is not correct. Try calling the image directly in your .urc file to see if the image shows up.

Code: Select all

resource
Label
{
   name "Default"
   rect 0 0 640 480 // <= or the position and size that it is to be displayed
   fgcolor 1.00 1.00 1.00 1.00
   bgcolor 0.50 0.50 0.50 0.00
   shader "textures/mohmenu/dmloading/yourimagefile.jpg"
}

If it shows up, it is a shader problem.

To add it to the score board use this line in your map's script.

Code: Select all

  setcvar "g_scoreboardpic" "textures/mohmenu/dmloading/yourimagefile.jpg"

[EvilEdge]

ok i got it to show up when i put that in the urc file but it is full screen. Here is my shader:

Code: Select all

TheUnseen 
{ 
nomipmaps 
nopicmip 
cull none 
surfaceparm nolightmap 
{ 
clampMap textures/mohmenu/dmloading/TheUnseen.jpg 
} 
}

pleese help.. thanks

[Innkeeper]

If you used the "rect" parameters that I posted, yes it would go full screen as they were "0 0 640 480". To have the image displayed like the MOHAA loading screens it would be "96 48 448 336".

Your shader looks to be correct. If it is in the "scripts" folder and the call in the .urc file looks like this, it should work.

Code: Select all

resource
Label
{
name "Default"
rect 96 48 448 336
fgcolor 1.00 1.00 1.00 1.00
bgcolor 1.00 1.00 1.00 0.00
borderstyle "NONE"
shader "TheUnseen"
}