1. Updated Resource Submission Rules: All model & skin resource submissions must now include an in-game screenshot. This is to help speed up the moderation process and to show how the model and/or texture looks like from the in-game camera.
    Dismiss Notice
  2. DID YOU KNOW - That you can unlock new rank icons by posting on the forums or winning contests? Click here to customize your rank or read our User Rank Policy to see a list of ranks that you can unlock. Have you won a contest and still haven't received your rank award? Then please contact the administration.
    Dismiss Notice
  3. Lead your forces to battle in the 15th Techtree Contest. The call is yours, commander!
    Dismiss Notice
  4. The reforging of the races is complete. Come see the 14th Techtree Contest Results.
    Dismiss Notice
  5. It's time to choose your horse in the race - the 32nd Modeling Contest Poll is up!
    Dismiss Notice
  6. Check out the Staff job openings thread.
    Dismiss Notice
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:
    28
    Resources:
    4
    Maps:
    3
    Tutorials:
    1
    Resources:
    4
    High Resolution Loading Screens

    1920 × 1080 // 3840 × 2160

    By: Mayday


    • Within this tutorial, you will find two different methods to import a high resolution loading screen.

    • The different methods range from lossless quality (.tga) to compression via DXT1 or DXT5 (.dds).

      • What's the difference between these?

        • .tga, also known as Targa, is a format supported by World Editor to show true color depth and visual quality. However, this can result in a high file-size import, nearing about 4 megabytes for a 1920x1080 image. // This method works on Classic Warcraft & Warcraft Reforged.

        • .dds, is a DirectDraw Surface format, which is used to store textures, and is a new feature allowed by Reforged. This method takes advantage of mip-maps and a compression tool, using either DXT1 or DXT5, which compress the image to a ratio of 6:1 and 4:1 respectively. These files result in minimal quality loss, but save a large portion of the import size. The end result nears only 1.3 megabytes - 2.7 megabytes for a 1920x1080 image. // This method works only on Warcraft Reforged.

    • Now that we know the different methods, you may choose which one is right for you.

    • The tools required for this conversion are typically included together, meaning the same tool can offer you a way to use either method.

      • Let's take a look at the different tools that are able to complete this task!

      • All screenshots shown throughout this tutorial will be done within GIMP.

    • Now that we have the tools required, let's begin by starting with the image we're going to use for our loading screen. For the purpose of this demonstration, I will be using an image created by the very talented Wareditor for one of my maps.
    [​IMG]

    • Once you have your image selected in the resolution you want, we're going to covert it based on the different methods listed above.
    Method 1 - .tga

    Step One - Convert the image to .tga.
    On GIMP, you'll want to select File -> Export as -> LoadingScreen.tga

    [​IMG]

    Step Two - Now that you have the LoadingScreen.tga, you'll also need the LoadingScreen.mdx, which you can download here.

    Step Three - Now all we need to do is import these into a map. You're going to to need to open Asset Manager/Import Manager, and import both of these files into your map. After they're imported, you'll want to change their file paths.

    war3mapImported\LoadingScreen.tga -> FullScreen.tga
    war3mapImported\LoadingScreen.mdx
    -> LoadingScreen.mdx

    [​IMG]


    Step Four - Now, we need to set our map to use this model in place of a generic loading screen. Under the Scenario Tab in the editor, select Loading Screen, and then under Loading Screen Graphic, select "Imported Model" and choose the LoadingScreen.mdx.

    [​IMG]

    Step Five - Now, you're going to save your map, test it, and laugh at how easy high resolution loading screens are to make. No image cutting, no blp compression, just a converted image and a 1kb model import.

    So what can we expect when we test our map? Excellent question. Here we can see how the image is displayed in-game.

    [​IMG]

    Working great! That concludes this method. If you like your finished product or have any questions, let me know below in the comments!

    Additional Note: Using empty fields in Reforged on the loading screen text (Title, Subtitle, Text) will result in the Map Description overlaying the loading screen. To remove this, simply put an empty (space) on each field to make nothing appear on top of your picture.
    Method 2 - .dds (DXT1)

    Step One - Convert the image to .dds.
    On GIMP, you'll want to select File -> Export as -> LoadingScreen.dds

    [​IMG]

    Step Two - Switch the settings to match what I have listed below.

    [​IMG]

    Step Three - Now that you have the LoadingScreen.dds, you'll also need the LoadingScreen.mdx, which you can download here.

    Step Four - Now all we need to do is import these into a map. You're going to to need to open Asset Manager, and import both of these files into your map. After they're imported, you'll want to change their file paths.

    war3mapImported\LoadingScreen.dds -> FullScreen.dds
    war3mapImported\LoadingScreen.mdx
    -> LoadingScreen.mdx

    [​IMG]

    Step Five - Now, we need to set our map to use this model in place of a generic loading screen. Under the Scenario Tab in the editor, select Loading Screen, and then under Loading Screen Graphic, select "Imported Model" and choose the LoadingScreen.mdx.

    [​IMG]

    Step Six - Now, you're going to save your map, test it and see your final result, as shown below.

    [​IMG]

    Working great! That concludes this method. If you like your finished product or have any questions, let me know below in the comments!

    Additional Note: Using empty fields in Reforged on the loading screen text (Title, Subtitle, Text) will result in the Map Description overlaying the loading screen. To remove this, simply put an empty (space) on each field to make nothing appear on top of your picture.
    Method 3 - .dds (DTX5)

    Step One - Convert the image to .dds.
    On GIMP, you'll want to select File -> Export as -> LoadingScreen.dds

    [​IMG]

    Step Two - Switch the settings to match what I have listed below.

    [​IMG]

    Step Three - Now that you have the LoadingScreen.dds, you'll also need the LoadingScreen.mdx, which you can download here.

    Step Four - Now all we need to do is import these into a map. You're going to to need to open Asset Manager, and import both of these files into your map. After they're imported, you'll want to change their file paths.

    war3mapImported\LoadingScreen.dds -> FullScreen.dds
    war3mapImported\LoadingScreen.mdx
    -> LoadingScreen.mdx

    [​IMG]

    Step Five - Now, we need to set our map to use this model in place of a generic loading screen. Under the Scenario Tab in the editor, select Loading Screen, and then under Loading Screen Graphic, select "Imported Model" and choose the LoadingScreen.mdx.

    [​IMG]

    Step Six - Now, you're going to save your map, test it and see your final result, as shown below.

    [​IMG]

    Working great! That concludes this method. If you like your finished product or have any questions, let me know below in the comments!

    Additional Note: Using empty fields in Reforged on the loading screen text (Title, Subtitle, Text) will result in the Map Description overlaying the loading screen. To remove this, simply put an empty (space) on each field to make nothing appear on top of your picture.

     

    Attached Files:

    Last edited: Feb 9, 2020
  2. Dr Super Good

    Dr Super Good

    Spell Reviewer

    Joined:
    Jan 18, 2005
    Messages:
    25,944
    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:
    174
    Resources:
    7
    Icons:
    5
    Maps:
    1
    Tutorials:
    1
    Resources:
    7
    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:
    1
    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:
    435
    Resources:
    3
    Maps:
    3
    Resources:
    3
    Good stuff & looks great! I look forward to using this.
     
  6. Serenity09

    Serenity09

    Joined:
    Mar 7, 2011
    Messages:
    99
    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:
    28
    Resources:
    4
    Maps:
    3
    Tutorials:
    1
    Resources:
    4
    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:
    25,944
    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:
    28
    Resources:
    4
    Maps:
    3
    Tutorials:
    1
    Resources:
    4
    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:
    25,944
    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:
    16
    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,426
    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:
    76
    Resources:
    0
    Resources:
    0
    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,298
    Resources:
    5
    Maps:
    2
    Spells:
    3
    Resources:
    5
    Excellent tutorial!
     
  16. Arathorn_ToXiK

    Arathorn_ToXiK

    Joined:
    Sep 8, 2017
    Messages:
    41
    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.