Loading Screen Tutorial
...that covers it all
by SFilip...that covers it all
Yes, I know that we already have one, but in my opinion it doesn't cover everything it's supposed to. That's why i decided to write my own from which you can learn how to create & use:
-A basic, "low quality" loading screen
-A high quality loading screen
-A loading screen that shows the loading progress for all players
-A loading screen in ROC
IrfanView is required for all of the below. I chose it because its free, powerful and easy to use. You can get it from its official site.
A basic, "low quality" loading screen
Requires:IrfanView
Warcraft 3 Viewer
LoadingScreen.mdx
The picture you want to use
First of all find a good picture for your loading screen. Its size doesn't really matter, but its recommended that its height equals to 3/4 of its width (800x600, 1024x768). Also its height or width musn't be smaller than 512 since this is the size we will resize it to. Now you need to resize it. Open the image in IrfanView and go to Image -> Resize/Resample. Make sure Preserve aspect ratio is unchecked and select Resize (faster) on the right. Now make sure Set new size and pixels below is checked and type 512 in both Width and Height boxes (picture 1. Then click on OK and your picture is now resized. Note: your picture will look weird because of its size, but ignore it, it will revert to normal once you import it. Save your file by pressing S or going to File -> Save As. Make sure that the file is TGA and close IrfanView.
Next step is to convert the file to BLP. Open up Warcraft 3 Viewer and press Ctrl+V. Now simply find your TGA and save it somewhere as BLP. Once you find a location the viewer will ask you about the Quality of Compression. This is very important since it might greatly reduce your file's size so choose a number between 50 and 75 (you can make it higher, but the difference is minor and it takes plenty of size). The Viewer might report that your file is not 32bit and offer to add an alpha channel to it...just click on Yes if it does and close it.
The final step: adding the loading screen to your map. Open the world editor, load your map and press F12 to open up the Import Manager. Now press Ctrl+I, locate the LoadingScreen.mdx file and import it. The path of mdx files is not important so we don't need to change it. Now press Ctrl+I again and import your BLP file. The path is important here so double click on the newly imported BLP on the list, check Use custom path and type "FullScreen.blp" in the box. Now save your map, close the import manager and go to Scenario -> Map Loading Screen in the main window. Check Use Imported File and select war3Imported\LoadingScreen.mdx from the list.
Now test your map. If you did everything correctly, you will see your new loading screen.
A high quality loading screen
Requires:IrfanView
Warcraft 3 Viewer
LoadingScreen2.mdx (not to be confused with LoadingScreen.mdx above)
The picture you want to use (1024x768)
A mini FAQ, its important that you understand what this really is and when to use it:
Q: What's the difference between low quality and high quality loading screens?
A: The so called high quality loading screen uses 4 textures instead of one which, combined, form a 1024x768 picture. The difference is both in quality and file-size - this one will take about 3 times the size of the low-quality one so I only recommend this for campaigns.
Q: Is this the way used in DotA - Allstars?
A: Yes it is. It is the thing increasing the size of DotA for about 1MB.
Q: Should I use this rather than "low quality" one?
A: By all means no, unless you are ready to waste 1MB of your map's space which is never a good idea (although the bnet limit is 4mb, people wont allow others to download your map if its larger than 1.5MB or so...this might drastically reduce its popularity so reconsider: is it really worth it)?
Ok now let us begin. The procedure is similar to the "low quality" above find a good 1024x768 picture and open IrfanView.
This time, however, instead of resizing you need to crop the image intro 4 parts: top left (512x512), top right (512x512), bottom left (512x256), bottom right (512x256). In order to do this, you need to play with selection. Start by making a rectangle somewhere at the middle (you can move it later) and, by checking the window title, make sure its size is 512x512 (512x512 for the 2 top images, 512x256 for bottom). Once you do so, right click on the selection you just made and drag it to the top left corner so that the title shows something like "<filename> - IrfanView (Selection: 0, 0; 512 x 512; 1.000)" (as you can see 0, 0 is important here) - picture 3. Now go to Edit -> Crop selection and save the file as TGA. This is the first out of four parts so lets continue - open the main picture again and do the same thing 3 more times with proper sizes and positions ("0, 0" for the top left, "512, 0" for top right, "0, 512" for bottom left and "512, 512" for bottom right). Take note that one pixel less/more than it should might result in your whole loading screen not showing so be careful. Once you finally finish close IrfanView and open WE (no need to convert the textures to BLP this time since the new MDX requires TGA files).
Open the Import Manager by pressing F12 and import both the MDX and all four TGAs. Now you need to change the path for each TGA. They should be LoadingScreenTR.tga for the top right one, LoadingScreenTL.tga for the top left, LoadingScreenBR.tga for the bottom right and LoadingScreenBL.tga for the bottom left. Now save your map, close the Import Manager and go to Scenario -> Map Loading Screen in the main editor window. Check Use Imported File and select war3Imported\LoadingScreen.mdx from the list.
All done. Test your map and see if it works...if something goes wrong your picture will most likely come up black. If this happens check the texture sizes and paths in the Import Manager since this is most the most common problem with loading screens.
A loading screen that shows the loading progress for all players
Requires:IrfanView
Warcraft 3 Viewer
The picture you want to use
A lot of people asked for something like this so here's finally a tutorial that explains it. Basically its all about replacing the original melee loading screen textures from the MPQ with your own, the similar way we do it when skinning models. Also take note that this loading screen must contain your minimap image so you should pick a good picture that will fit correctly with it (usually people put most of this loading screen in one color - white for example to match their minimap image background).
The process itself is similar to the above high quality screen since this one is also a 1024x768 picture split intro 4 parts with the same sizes like above.
Once again pick your picture and open IrfanView. You need to crop the picture again using selections intro four parts: . For more info about this, please read the above high quality tutorial since its mainly the same thing. Also take note that the minimap and the loading bars for every player are taking a special position so you might want to edit your picture a bit. To see the original 4 pictures simply open Warcraft 3 Viewer, go to File -> Open MPQ, locate war3.mpq in your warcraft directory and check BLP in the Treeview window on the right. Now find the path UI\Glues\Loading\Multiplayer and check out the textures in it. Every race has its own right-side pictures, but they all share the 2 left - Loading-BotLeft.blp and Loading-TopLeft.blp. Once you've created and saved all 4 parts close IrfanView.
Now open WE, press F12 to open the Import Manager and import all 4 parts. Now change their paths this way:
UI\Glues\Loading\Multiplayer\Loading-BotLeft.blp - for your bottom left picture
UI\Glues\Loading\Multiplayer\Loading-TopLeft.blp - for your top left picture
UI\Glues\Loading\Multiplayer\Loading-Random-BotRight.blp - for your bottom right picture
UI\Glues\Loading\Multiplayer\Loading-Random-TopRight.blp - for your top right picture
Note: if your map only uses one race, then you should change "Random" in the above 2 filenames to that race's name (Human, Orc, NightElf or Undead - for example Loading-Orc-BotRight.blp). If your map is melee or has its races pickable, then continue reading on how to fix that.
To make your game use only one loading screen for all races, do this:
-Open Warcraft 3 Viewer.
-Open war3.mpq if you haven't already.
-On the right Treeview window choose MDX and find UI\Glues\Loading\Multiplayer and right click on Load-Multiplayer-Random.mdx and then on Extract MDX. Remember where you saved it and close the Viewer.
-Open WE and press F12 to open the Import Manager once again. Now import the newly exported MDX in it 4 times and start changing paths (since they are all the same, the order isn't important, but make sure they all have a different path):
UI\Glues\Loading\Multiplayer\Load-Multiplayer-Human.mdx
UI\Glues\Loading\Multiplayer\Load-Multiplayer-Orc.mdx
UI\Glues\Loading\Multiplayer\Load-Multiplayer-NightElf.mdx
UI\Glues\Loading\Multiplayer\Load-Multiplayer-Undead.mdx
This will replace the default loading file MDX for each race thus making it use the same textures as Random. Now just save your map and test it.
A loading screen in ROC
Requires:WinMPQ
IrfanView
Warcraft 3 Viewer
The picture you want to use
Yes, it is possible to have a custom Loading Screen even if you don't have TFT. It has proven that you can do this by simply using a built-in loading screen model skinned the same way we did above in the melee loading screen part. However since this texture uses a 1024x768 image, it will take plenty of your map's size so it's probably not worth it. Also, we need to use some MPQ software to import since ROC editor hasn't got an import manager. It is therefore recommended to do this part once the map is complete as the editor will delete your imports when you save the map.
First open your map in the editor and go to Scenario -> Map Loading Screen. Click on Use Campaign Screen and select Generic in the list (picture 6), then press OK.
Now do the same thing you would do to create a high quality loading screen as explained above - find a 1024x768 picture and split it intro 4 parts (top parts must be 512x512 and bottom must be 512x256). Convert the images to BLP (also explained above) and make sure you name them this way:
Generic-Loading-BotLeft.blp - the bottom left part
Generic-Loading-BotRight.blp - the bottom right part
Generic-Loading-TopRight.blp - the top right part
Generic-Loading-TopLeft.blp - the top left part
Now open up WinMPQ and load your map in it. Then click on Add and find your first BLP. When WinMPQ asks for a path, enter "UI\Glues\Loading\Load-Generic\" (without the ""). Do this for all four BLPs and once you are done exit WinMPQ and try your map. If you did everything correctly you should see your picture now.
Note that not everything above is tested, however before writing this tutorial i managed to do all of it. In other words there might be some mistakes/typos, but apart from that everything should work correctly. If you, by any chance have problems with something this tutorial covers, please post here and let me know so that i can fix the error and/or point you to the solution. Also note that the ROC loading screen is tested with TFT installed, but I believe this isn't so important since I've seen this done before.
Oh and I am open for suggestions so feel free to post them if you have any.
You might also want to check out N00byStance's tutorial about animated loading screens.
Credits to SD_Ryoko for his LoadingScreen.mdx file.
