Dismiss Notice
60,000 passwords have been reset on July 8, 2019. If you cannot login, read this.

High Resolution Loading Screens

Discussion in '2D Art Tutorials' started by Mayday, Feb 7, 2020.

  1. Mayday

    Mayday

    Joined:
    May 1, 2018
    Messages:
    59
    Resources:
    6
    Maps:
    3
    Tutorials:
    3
    Resources:
    6
    [​IMG]
    • In this tutorial, you'll find how to get a HD Loading Screen.
    • There's two methods available. ".dds" & ".tga"
    • The one you choose is based on the Warcraft 3 version you have.
    • Users on the Latest Patch can choose between either, although using a ".dds" import is superior as it uses a lower file size and is more performance friendly.
    • Users using a Classic Warcraft Patch do not have ".dds" support enabled, and therefore will need to use ".tga"
    • Let's take a look at some of the tools you can use to complete this task. You'll need a decent photo editor, such as:
    • Note: Your version of Photoshop may not support ".dds" and you'll need to install the Nvidia Texture Tools Plug-in. Both GIMP and Paint.net support ".dds" natively and no plug-in is required.
    • Now that we have the tools required, we're going to need to find or create an image to use as our Loading Screen.
    • This is where you'll need to pick a resolution size. Realistically, a 1920×1080 image is ideal due to its high quality and low file size. You may, however, use much higher resolution images, although it is not recommended unless it's a single player game.
    • "But wait, what's the maximum?" - I've tested up to 7680×4320 with success.
    • Now that we've chosen our size and image, it's time to make it compatible for the game to read it.
    • This is where you'll choose between ".dds" and ".tga" depending on the version of the game you're using.
    • From here on, all examples will be using an image from my own map and GIMP as the tool.
    [​IMG]
    • Here we have a 1920×1080 image to use, with some empty space on the bottom so the loading bar doesn't intrude.
    • If you own Reforged, but play on SD graphics only, do not worry, ".dds" is still supported. It's what all the in-game files use, and it's what you should use too.
    • REFORGED (1.32+) USERS: Now we're going to use our tool to convert the image to ".dds"
    • Open the image in your tool of choice, double check the sizing of the image, and save the file as "Fullscreen.dds"
    • "Why 'Fullscreen.dds'?" - It's the path I've set for the texture on the model I created. You'll be able to download the model at the end of the tutorial.
    • Once you've saved the file, it will ask you what special settings you wish to use. We're going to use the settings I provide for you here:
    [​IMG]
    • Now we have the image for the Loading Screen. Hang tight while I show Classic users how to do theirs.
    • CLASSIC (1.00-1.31.1) USERS: Now we're going to use our tool to convert the image to ".tga"
    • Open the image in your tool of choice, double check the sizing of the image, and save the file as "Fullscreen.tga"
    • "Why 'Fullscreen.tga'?" - It's the path I've set for the texture on the model I created. You'll be able to download the model at the end of the tutorial.
    • "But wait, what if I want to use '.blp'?" - You'll never see me support the use of ".blp" in any of my guides, but you can use ".blp" just as you can use ".tga"
    • Once you've saved the file, it will ask you what special settings you wish to use. We're going to use the settings I provide for you here:
    [​IMG]
    • Now we have the image for the Loading Screen.
    • Next, we're going to look at how to actually use this image in-game for your map.
    • Import your converted image file through Asset Manager/Import Manager under the correct path.
    • Download and import LoadingScreen.mdx with the path "LoadingScreen.mdx"
    [​IMG]
    • In World Editor, select Scenario -> Map Loading Screen
    • Under Loading Screen Graphic, select your imported "LoadingScreen.mdx"
    • Note: If you want no default map text to appear on your loading screen, simply input a "space" on each line of the three description boxes.
    • Now, it's time to test out our new image.
    • Simply test your map and check out your awesome new loading screen!
    [​IMG]
     

    Attached Files:

    Last edited: Oct 18, 2020
  2. Dr Super Good

    Dr Super Good

    Spell Reviewer

    Joined:
    Jan 18, 2005
    Messages:
    26,134
    Resources:
    3
    Maps:
    1
    Spells:
    2
    Resources:
    3
    One can also obtain HD loading screens using the classic loading screen models and new higher resolution textures. One just has to make sure that the textures are enlarged for all components of the loading screen equally and probably by powers of 2.

    For example I made a 2,048x1,536 loading screen that way. This gets stretched to whatever aspect ratio the display is. Since it is DDS, the textures are compressed with DXT5.
     
  3. Moonman

    Moonman

    Joined:
    Sep 8, 2008
    Messages:
    304
    Resources:
    9
    Maps:
    3
    Reforged HD Icons:
    5
    Tutorials:
    1
    Resources:
    9
    Wonderful +rep
    Compared to the old ¨cutting your image into a million pieces¨ for it just not to work at the end.. this is p e r f e c t !

    Blessings upon thee!
     
  4. Poduchen

    Poduchen

    Joined:
    Apr 27, 2019
    Messages:
    4
    Resources:
    0
    Resources:
    0
    Hey, this surely may come in handy for me.

    Thanks for posting this tutorial!
     
  5. Saken

    Saken

    Joined:
    Jan 19, 2008
    Messages:
    436
    Resources:
    3
    Maps:
    3
    Resources:
    3
    Good stuff & looks great! I look forward to using this.
     
  6. Serenity09

    Serenity09

    Joined:
    Mar 7, 2011
    Messages:
    114
    Resources:
    1
    Maps:
    1
    Resources:
    1
    nice tutorial, this was exactly what i was looking for!

    is there any reason to first export the image as "LoadingScreen.tga" before renaming to "FullScreen.tga"?
     
  7. Mayday

    Mayday

    Joined:
    May 1, 2018
    Messages:
    59
    Resources:
    6
    Maps:
    3
    Tutorials:
    3
    Resources:
    6
    A slight oversight by my part, i was looking at the start of the guide to keep all names similar to each other, and focus only on the converting to .tga part. The model I use is looking for a "FullScreen.tga" however, so it is required to change the path to such for it to work.

    edit: Sorry, to answer your question, no, there is not a reason to export it under a different name. You may export it as "FullScreen.tga" and it will operate the same as I have shown throughout the guide.
     
    Last edited: Feb 7, 2020
  8. Daniel Kopp

    Daniel Kopp

    Joined:
    Nov 16, 2019
    Messages:
    12
    Resources:
    0
    Resources:
    0
    This is awesome, trying it out right now!
    +rep
     
  9. Dr Super Good

    Dr Super Good

    Spell Reviewer

    Joined:
    Jan 18, 2005
    Messages:
    26,134
    Resources:
    3
    Maps:
    1
    Spells:
    2
    Resources:
    3
    Use of .tga is utterly pointless. One can edit the loading screen model to use the texture file "FullScreen.blp" and then import a .dds file to FullScreen.dds and it will work.

    Attached is a map showing this.
     

    Attached Files:

  10. Mayday

    Mayday

    Joined:
    May 1, 2018
    Messages:
    59
    Resources:
    6
    Maps:
    3
    Tutorials:
    3
    Resources:
    6
    Thanks to help from Dr Super Good, this tutorial has been updated to support three types of imports, all ranging in quality/file size to fit your needs for your map.
     
  11. Dr Super Good

    Dr Super Good

    Spell Reviewer

    Joined:
    Jan 18, 2005
    Messages:
    26,134
    Resources:
    3
    Maps:
    1
    Spells:
    2
    Resources:
    3
    DXT1 only supports alpha masking. If a complex loading screen model is used that relies on alpha blending then one has to use DXT5 since that supports alpha gradients. DXT1 is otherwise recommended since it achieves a compression factor of 6:1 as opposed to 4:1 from DXT5.
     
  12. Zoson

    Zoson

    Joined:
    Apr 30, 2017
    Messages:
    17
    Resources:
    0
    Resources:
    0
    Worthy of being called one of the now eight wonders of the world.
     
  13. PurgeandFire

    PurgeandFire

    Code Moderator

    Joined:
    Nov 11, 2006
    Messages:
    7,429
    Resources:
    18
    Icons:
    1
    Spells:
    4
    Tutorials:
    9
    JASS:
    4
    Resources:
    18
    Awesome stuff. Thanks for being so detailed with the steps for each file type! Approved.
     
  14. LazZ

    LazZ

    Joined:
    Nov 4, 2019
    Messages:
    106
    Resources:
    2
    Maps:
    2
    Resources:
    2
    For anyone curious, the latest patch (1.32.3) doesn't stretch/squish custom loading screens anymore depending on the aspect ratio of the client (e.g. 1920x1080 squished to a 4:3 format).
     
  15. maddeem

    maddeem

    Joined:
    Jan 1, 2011
    Messages:
    1,324
    Resources:
    6
    Icons:
    1
    Maps:
    2
    Spells:
    3
    Resources:
    6
    Excellent tutorial!
     
  16. Arathorn

    Arathorn

    Joined:
    Sep 8, 2017
    Messages:
    58
    Resources:
    1
    Maps:
    1
    Resources:
    1
    I was using War3ModelEditor to create my loading screen before Reforged. It worked great and was very simple but Reforged totally missed it up.
    So I found this tutorial which is very clear, complete and show simple ways to do it.

    I still have an advice to make the tutorial better : make the sentences bigger in the method 1/2/3 parts because it is possible to not see them between all those big images : )

    Thanks again for the tutorial Mayday and for the nice request you made me.
     
  17. Unholy0ne

    Unholy0ne

    Joined:
    Jun 3, 2019
    Messages:
    19
    Resources:
    1
    Maps:
    1
    Resources:
    1
    Thanks for the tutorial, Mayday.

    I've implemented a loading screen as such but use loading screen text from the world edit.
    It moves that text to the bottom left instead of the usual mid right, is that configurable or do I have to edit the image for proper text position?
    Also, I'm using a 21:9 Monitor, is that supported for custom loading screens yet?

    Here's a screenshot for reference: Screenshot
     
  18. Mayday

    Mayday

    Joined:
    May 1, 2018
    Messages:
    59
    Resources:
    6
    Maps:
    3
    Tutorials:
    3
    Resources:
    6
    Hey UnholyOne, the pic is looking great! Unfortunately, you're not able to move the text around on the loading screen, but you are able to write the text in on the image with a image editor (gimp, photoshop, paint.net)

    In order to hide the text located there, you need to apply a single space bar on each line.

    For 21:9 monitors, you may use an image that is scaled accordingly. For example, 2560×1080 will cover your entire screen, while retaining the same quality as a 1080p image. You can of course use higher, if that is your intent. I've tested up to 7,680 x 4,320 for loading screens. You can probably go even higher, but the file size on that image was 50 megabytes, not ideal for something that doesn't effect gameplay.
     
  19. Unholy0ne

    Unholy0ne

    Joined:
    Jun 3, 2019
    Messages:
    19
    Resources:
    1
    Maps:
    1
    Resources:
    1
    I thought as much and went ahead with it since my last post, see Screenshot
    I left it completly empty, which worked as well.
    I tested this and didn't get it to work, the result looks like this for me: Screenshot.
    The image is exactly 2560x1080 (stretched for test purposes) but the loading screen constrains it to 16:9.
     
  20. Dr Super Good

    Dr Super Good

    Spell Reviewer

    Joined:
    Jan 18, 2005
    Messages:
    26,134
    Resources:
    3
    Maps:
    1
    Spells:
    2
    Resources:
    3
    16:9 is kept for visual consistency between clients. This is because simply stretching a loading screen might not always be a suitable behaviour. Especially if complicated artwork is used, it would suffer from distortion which might ruin the appearance and go against the author's intentions with the piece.

    What is needed is StarCraft II style loading screen scaling controls which allow the author to specify the scaling mode of the loading screen image. This gives flexibility by allowing fixed ratio scaling for pieces that require it and full screen stretch scaling for those that do not. Of course many map authors failed to use this correctly but still.