[All Games] Marvel Mods Aesthetics Tutorial

[BaconWizard17]

MARVEL  MODS  AESTHETICS  TUTORIAL
SECTION 1: INTRO

By BaconWizard17 and Outsider
Logo by Outsider

Table of Contents
Main Content

• Introduction
• PNG-8 Offsets
• DXT1/DXT3 Offsets
• Extracting with MUAPS2Skinner
• Extracting with SkinnerUI
• Skin and Mannequin Editing
• Conversation Portrait and Character Select Portrait Editing
• Icon Editing
• Loading Screen Editing
• Compiling with MUAPS2Skinner
• Compiling with SkinnerUI
• Exporting Visual Assets with 3DS Max

Supplemental Content

• Supplement 1 - Skin Editing Techniques

What is Covered in This Tutorial
      This tutorial covers how to retexture existing aesthetics/visual assets for X-Men Legends, X-Men Legends II, and Ultimate Alliance. This includes skins (and assets derived from them, such as mannequins and 3D heads), conversations portraits, character select portraits, loading screens, and icons. The tutorial describes the entire retexturing process, broken into steps. Each section will link to subsequent sections that are used by it.


Which File Does What

• Skins: The visual files of the characters. They are harder to retexture due to them being 3D
• 3D Heads: Also called UI heads, 3D HUDs, and the like. They are used only in X-Men Legends and X-Men Legends II. They are the floating heads that indicate which character you’re controlling in gameplay. They have the same editing process as skins.
• Mannequins: They are the models that show up in the character selection screen for Ultimate Alliance. They have the same editing process as skins.
• Conversation Portraits: Also called HUDs. They are the portraits that show up in all games to indicate who's talking in a conversation. In Ultimate Alliance, they show which character is being controlled
• Character Select Portraits: They are the portraits that show up in the character selection screen of X-Men Legends and X-Men Legends II.
• Loading Screens: The screens that show in the transitions between levels, when the game is loading
• Power Icons: Sometimes just called icons. They show which powers your character has available/is using

Where to Go Next

If you're making Conversation Portraits, Character Select Portraits, Loading Screens, or Power Icons, visit this thread to download the proper template files you need for your asset and game version. If you're using these templates, there's no need to find the offsets, as the offsets have already been found for you. Proceed to Section 4: Extracting with MUAPS2Skinner or Section 5: Extracting with SkinnerUI, depending on your choice of program. You can use either, except that MUA1 Power Icons must be done with SkinnerUI.

You can find many offsets for Skins in this thread. If offsets for your skin have been found, you can jump straight to Section 4: Extracting with MUAPS2Skinner or Section 5: Extracting with SkinnerUI, depending on your choice of program. You can use either program.

If the asset you're using doesn't have known offsets (this includes many Skins and Mannequins), visit Section 2: PNG-8 offsets for PS2 assets (or custom models with PNG-8 textures), or visit Section 3: DXT1/DXT3 offsets for XBOX/Wii/MUA1 PC/XML2 PC assets (or custom models with DXT1/DXT3 textures)

• XML2 PC assets are the only default assets that use DXT3 textures. The XBOX, Wii, Gamecube, and MUA1 PC versions use DXT1 textures for their assets
• Most of the custom models in the common model release board use PNG-8 Textures
• Most of the custom models in the MUA1 Mod Releases and Conversions board use DXT1 textures, and a small percentage use DXT3 textures

If you don't want to bother with the skinner programs and hex editing, you can alternatively export some assets with 3ds Max (this includes Conversation Portraits, Character Select Portraits, Loading Screens, and XML1/XML2 Power Icons). Visit Section 12: Exporting assets with 3ds Max if this is your chosen path


Compatibility Issues

      For some people, TextureFinder, SkinnerUI, and/or MUAPS2Skinner won't work properly on Windows 10 (it varies, so check for yourself). If this is the case for you, you'll need to install the Marvel Mods VM on the Virtual Box Software. This will allow you to run a Windows XP PC within your Windows 10 PC. TextureFinder, SkinnerUI, and MUAPS2Skinner all come pre-installed on it, so you'll be able to fix compatibility issues by using the programs on there. If you use this, it's best to set up a shared folder, which allows you to share files between the VM and your PC.

[BaconWizard17]

MARVEL  MODS  AESTHETICS  TUTORIAL
SECTION 2: PNG-8 OFFSETS

By BaconWizard17 and Outsider
Logo by Outsider

Introduction
      PNG-8 textures, also known as PS2 textures, are a common texture format found in X-Men Legends, X-Men Legends II, and Ultimate Alliance. PNG-8 means that it's a PNG texture exported with 256 color indexing. The PS2 name comes from the fact that this texture format was used on all the PS2 versions of all 3 games. These textures are also used on many custom models. It's preferred to call them PNG-8 textures to avoid confusion
      In order to edit a model with a PS2 texture, you must find the texture's offset. This allows you to extract the texture, edit it, and compile it back.
      Note: if an image is too small, click to expand it


Finding Offsets
      In order to find the offsets, you'll need both versions of TextureFinder (v1.32 and v2.1). You can download them here.
      Note: some antivirus programs will target these programs and try to delete them if you run them. Set them on your exception list to avoid this
      To begin, open up both TextureFinder programs. I like to put 1.32 on the left, and 2.1 on the right, since that's the order you need them

      Beginning with TextureFinder v1.32, load the file you want to use by clicking "---no SOURCE file loaded---". Click "---Load File", find your model, and click "Open". This will be used to find the palette offset

      You'll notice that the texture starts out looking a bit funny. To fix this, you'll need to set it to the right mode. In the middle panel, choose the "8bits (256 col)" option. A window will pop up. Depending on the file, you may need to also change the "Source Page Width" to make it the correct size. Default skins are 256 wide, other files will vary

      Next, change the palette bit format from 24 to 32

      Then, you’re going to want to press the right upwards arrow by the text that says “trim, line, page.” Clicking the right upwards arrow will increase your page number. Do so until you encounter a gradient (a soft transition of colors). This gradient will generally be either red, blue, or green, but sometimes you can encounter it in the skin’s colors. In our case, it’s green.
      Note: If you're not able to find any kind of gradient at all, it is likely that your skin is not in PNG-8 format, and is actually in DXT1/DXT3 format. Visit Section 3: DXT1 and DXT3 Offsets instead.

      Now, you want to use the middle pair of arrows to adjust the line offset. Move the gradient until it is across the top of the window.
Lastly, you want to use the left pair of arrows to adjust the offset number by number. Move it until the first three squares are black, white, and black, and the texture in the preview window shows the right colors.
      Note: Only default, unchanged assets seem to have black, white, and black as the first 3 blocks. If the asset has been retextured, or it's a custom model, then this isn't always the case

      Leave TextureFinder 1.32 and its palette window open. You’ll need that number later. The next step is to find the texture offset, which is done in TextureFinder 2.1. Load the skin in the same way you loaded it in TextureFinder 1.32. Change the format to 332=8 to get the texture to look better. Also, change the width as needed.

      Next, you need to find the texture offset. Scroll down until you see the texture. Usually, you can't scroll all the way down to it. Then, you'll need to line the top of the texture up with the top of the window. You can click the arrows or type a value. I usually start with 4000.

      In this case, 4000 brings the texture to the top of the window, but this won't always happen. Try other values until you get close. After this, you'll want to bring the top left edge of the texture to the top left edge of the window. Often, you can see a clear break in the texture, which is what you want to line up with the edge. In this case, you can see it about 2/3 of the way over. You can left click the offset arrow to move it 1 pixel at a time, or right click it to move 16 pixels at a time.

      Now you can write your offset. This is the format to follow for MUAPS2Skinner:

filename.igb ps2 width height "palette offset + 1" texture offset .

      And this is the format for SkinnerUI:

filename.igb,ps2,width,height,"palette offset",texture offset.

      The palette offset can be found in TextureFinder v1.32, in the small window (circled in red). The texture offset can be found in TextureFinder v2.1, under "offset" (circled in green).
      Note: Make sure to add 1 to the palette offset if you're using MUAPS2Skinner. Don't add 1 for SkinnerUI

      Here are the offsets for the Cyclops skin in the example in both formats:

MUAPS2Skinner: 0101.igb ps2 256 256 35651 146739 .
SkinnerUI: 0101.igb,ps2,256,256,35650,146739.

      Now that you've found your offset, you can move on to Section 4: Extracting with MUAPS2Skinner, or Section 5: Extracting with SkinnerUI


Summary

• PNG-8 Textures can be found on default assets from the PS2 and many custom models
• PNG-8 Offsets must be found using both versions of TextureFinder
• PNG-8 Offsets are a combination of a palette offset and a texture offset.
• PNG-8 Textures can be extracted with MUAPS2Skinner and SkinnerUI

[Outsider]

MARVEL  MODS  AESTHETICS  TUTORIAL
SECTION 3: DXT1 & DXT3 OFFSETS

By BaconWizard17 and Outsider
Logo by Outsider

Introduction
      DXT1 & DXT3 textures are those found in the PC skins of Marvel: Ultimate Alliance (MUA). They are highly detailed and are also found on custom models that were converted only for MUA. In order to edit a PC model with a DXT1 or DXT3 texture, you must find the texture's offset. This allows you to extract the texture, edit it, and compile it back. Though the results can prove quite tricky at times.
      Note: You can tell if your model uses DXT1 or DXT3 textures based on the appearance in the preview window once you've found the offset. If the texture looks jagged or improperly proportioned, then you have the wrong mode selected. DXT5 textures can be found with this same method (with the only difference being the mode you use), but they are extremely rare, since they're mostly used for normal maps rather than the diffuse texture.


Finding DXT1 Offsets
      To find the offsets, you'll need TextureFinder v2.1. You can download that program here: http://www.mediafire.com/?9wgvy7mr2xhxykq
      Note: Some antivirus programs will target that program and try to delete it on the spot. Set them on your exception list to avoid this.
      Now open the program to get started, then follow the directions below. For this lesson, I will use the skin #3801 -- the primary costume of Spider-Woman.



STEP 1:
      Load the skin that you want to find the offsets for (in this case, 3801). Click DXT1 at the Quad Formats section on the lower right. Then at the lower left, change the width to 256, then checkmark the Pixel Flipping section. Notice that the shift says 0, as does the offset above. This is because you are starting at the beginning of the skin's hex information.

STEP 2:
      Begin scrolling down through the skin using the slider to the right of the display. Look for something that looks like it could be the skin's texture. It will look kinda like a group of colorful islands surrounded by an ocean of black. When you see something like that, stop scrolling. Notice that in the pic below, I stopped at 622,080, which is what the offset now says.

STEP 3:
      Wherever you stopped at, look at the offset number (622,080 in this case.) Type in that same number in the shift section and press Enter. This will push the section you found up to the top of the display. So now, move the slider back up to the top to view it again.

STEP 4:
      Now you have to fix up the display to make out the correct texture image. Press the left or right arrow buttons at the shift section until the correct colors of the skin appears. The offset and shift numbers will change as you're doing that. Notice in the pic below that Spider-Woman's colors have appeared. But take a look closely at the top left of the display... see those green boxes? That's a no-no. The image must be cleared of any debris. Pressing the shift arrows will gradually remove them one by one. Usually every eight presses, the correct colors of the skin appears. Do that until the "debris" is gone.

STEP 5:
      Whatever the offset number changed to when you found the correct colors and free of debris, type that number into the shift section and press Enter to move that to the top of the display. In this case, the correct debris-free colors appear at offset 622,175. But wait... as you can see, the display is still not correct. The next step will fix that.

STEP 6:
      Change the width to something else and press Enter. Usually, the width is 128, 256, 512, 1024, or in rare cases 2048. In the picture below, you can see that I changed the width to 512, and now the image is correct. We can clearly see Spider-Woman's costume, confirming that this is the correct offset.

      Now you can write your offset.
      For MUAPS2Skinner, the format is: skin#.igb dxt1 width# height# offset# .
      For SkinnerUI, the format is: skin#.igb,-DXT1,width#,height#,offset#.
      NOTE 1: For most offsets, the height and width are the same, as the image takes a square shape.
      NOTE 2: The negative sign before the DXT1 is at the SkinnerUI offset because we check-marked the Pixel Flipping, making the image of RGB color. The negative skin will not work for MUAPS2Skinner, however, so that's why the negative sign isn't on that offset. Pixel-flipping is only necessary for DXT1/DXT3 skins for MUA1 PC, and isn't necessary for DXT1/DXT3 skins made for XML2 or consoles
      NOTE 3: Most custom models won't have smaller versions of the textures, and doesn't have mipmaps, so editing them is easier.

      In this case, the offset is 3801.igb dxt1 512 512 622175 . for MUAPS2Skinner, or 3801.igb,-DXT1,512,512,622175. for SkinnerUI.

      The offset can stay like this if you're satisfied, but let's keep going. In this case, the offset for width 512 was found. But, I still want to find the offset for width 256. On to the next step.


STEP 7:
      Change the width to another number (in this case, 256), and keep scrolling until you find the texture again in a different size. In the picture below, you can see that I have found the display for width 256, located at offset 1,440,863. However, again there is debris seen at the top...

STEP 8:
      Type in the new offset number into the shift section and press Enter to move that to the top of the display. Then press the left or right arrows at the shift section to fix the display, clearing out the debris. In this case, the correct debris-free image appears at offset 1,441,007, so this is the correct offset.

      Now you can edit your offsets for The width#, height#, and offset# parts of the formats can repeat for other numbers found for the same skin.
      The MUAPS2Skinner format is: skin#.igb dxt1 width# height# offset# width# height# offset# .
      The SkinnerUI format is: skin#.igb,-DXT1,width#,height#,offset#,width#,height#,offset#.

      In this case, the offset is now 3801.igb dxt1 512 512 622175 256 256 1441007 . for MUAPS2Skinner, or 3801.igb,-DXT1,512,512,622175,256,256,1441007. for SkinnerUI.



Finding DXT3 Offsets
      The process for finding DXT3 offsets is exactly the same as DXT1. Begin by clicking DXT3 in the Quad Formats section. I'll just show the process in pictures, so you can see. However, because I'm using 3801 -- a DXT1 skin, it's going to appear ill-proportioned in DXT3.

      The format for DXT3 offsets are the same as DXT1.
      For MUAPS2Skinner, the format is: skin#.igb dxt3 width# height# offset# width# height# offset# .
      For SkinnerUI, the format is: skin#.igb,-DXT3,width#,height#,offset#,width#,height#,offset#.



      Just for reference, note that the PC skins (DXT1, DXT3) are very different from the PS2 skins (PNG8) that were covered in the previous chapter. View the pic below.

      As you can see, the PC skin is not as bright, but is more detailed, with the hands being the major difference. However, as a trade-off, they are much harder to hex-edit. More on that in a future chapter.


      Now that you found the offsets, you can move on to Section 4: Extracting with MUAPS2Skinner or Section 5: Extracting with SkinnerUI.


Summary

• DXT1 & DXT3 offsets can be found using TextureFinder v2.1.
• Offsets are found by uploading the skin, then searching through it until you find something that resembles the texture.
• Use width and shift arrows to correct the display of the texture and clear it of debris.
• DXT1 & DXT3 Textures can be extracted and edited with either MUAPS2Skinner or SkinnerUI.

[BaconWizard17]

MARVEL  MODS  AESTHETICS  TUTORIAL
SECTION 4: EXTRACTING WITH MUAPS2SKINNER

By BaconWizard17 and Outsider
Logo by Outsider

Introduction
      MUAPS2Skinner is one of the programs that can be used to compile and decompile textures. It’s my preferred program, since it’s easier to use and seems to have fewer compatibility issues. The name is a bit misleading, as it can handle all texture formats.


Necessary Programs
            The first thing you’ll need to do is install the program itself. You can find it here. When you unpack it, it will contain 2 folders (MUAPS2 Skins and Original DDS), a series of blank .dds files, an exe called NRskinnerSE_MUA.exe (which MUAPS2Skinner itself), and a .cfg file. One other thing you will need to get is GIMP. If you have any version earlier than 2.10.10, you will need the GIMP DDS Plugin. Versions 2.10.10 and later have DDS support built in. I also recommend getting the additional blank .dds files from here.

Folder structure

      The first thing that you’ll need to do is identify if the blank .dds file for your texture exists in the MUAPS2Skinner files. All of the blank .dds files in MUAPS2Skinner are named after the texture size and the format, as WidthHeightFormat.dds. So for example:

• 512256.dds would be a 512 x 256 PNG8 blank file
• 512256dxt1.dds would be a 512 x 256 DXT1 blank file
• 512256dxt3.dds would be a 512 x 256 DXT3 blank file
• 512256dxt5.dds would be a 512 x 256 DXT5 blank file

      You’ll notice that the width of the texture comes first, then the height, and then the format. PNG8 format is the only one that doesn’t have the format name at the end of it.
      If a blank .dds for your texture exists, then you can skip ahead to “Adding the Offset.” If MUAPS2Skinner does not have a blank .dds for your file, then you’ll need to create one.


Creating the Blank .dds file
      To create your blank dds file, launch GIMP. Create a new file in the size of your texture, and make sure it’s all white.
      If your blank .dds file is going to be for a DXT1/DXT3/DXT5 texture, go to File>Export, and export it with the proper name (WidthHeightFormat.dds, using the width, height, and format of your texture). When the export dialog dialog comes up, select your format as the compression (BC1 / DXT1 for DXT1, BC2 / DXT3 for DXT3, or BC3 / DXT5 for DXT5), set Mimpamps to “Generate Mipmaps,” and then hit “OK.”

      If your blank .dds file is going to be for a PNG8 texture, go to Image>Mode and select Indexed. Change the maximum number of colors to 256, and then hit Convert. Then go to File>Export and export your texture with the proper name (WidthHeight.dds, using the width and height of your texture). When the export dialog comes up, just hit “OK.” Don’t set any compression or mipmaps.

      When you’ve exported your blank .dds file, put it in your MUAPS2Skinner folder


Adding the Offset
      Now, you can open up MUAPS2.cfg in the MUAPS2Skinner folder. This is where you can add in the offset you found in section 2 or section 3. The MUA PS2 skin offsets are in there already, but the order doesn’t matter too much. When I add in new offsets that aren’t MUA PS2 Skins, I just put them above Pyro.igb. Be careful though, because the cfg will only read the first of a certain file name. So if you have 2 0301.igb entries in your cfg, it’ll only read the first one. Back when I did a lot of skinning, I would make multiple copies of MUAPS2Skinner in different folders with different cfg files for different model types.

      In the above cfg, I added the offsets found in section 2 and section 3. Be sure to save your cfg before closing it.


Extracting the Texture
      The first thing you need to before extracting the texture is put your .igb file in your MUAPS2Skinner folder. To extract the texture from the file, open up NRskinnerSE_MUA.exe. You’ll get a command prompt window. On the first prompt, type 1 and then enter (since you’re creating a dds). On the second prompt, type the name of your igb file (with the igb extension) and press enter. On the third prompt, type the name of your igb file, but put .dds as the extension, and press enter one more time.
      If you get a message that says “Decompiled name.igb to to name.dds,” then you did it correctly! If you get any other message, check that your offset is in the cfg file and that you typed everything correctly. If you did, then you could have a compatibility issue, and you’ll need to install the program on a virtual machine, which is explained in Section 1.

Opening the Texture
      Now, you can open up your texture in GIMP to make sure it looks okay! When you import a file, a dialog box may pop up. Just press OK on that. Make sure that your file looks okay, that everything is in place, and that it resembles what you saw in TextureFinder. If you have any issues, you may need to check your offset and try again.
      If your texture is a DXT1, DXT3, or DXT5 texture from MUA1 PC, you’ll need to do an RGB-BGR swap to get the colors to be correct. To do this, go to Colors>Components>Channel Mixer. Set the red in red channel to 0, blue in red channel to 1, blue in blue channel to 0, and red in blue channel to 1.

      Now that you have your texture extracted, you can edit it! For skins, mannequins, and 3D heads, go to Section 6: Skin and Mannequin Editing. For portraits, go to Section 7: Conversation Portrait and Character Select Portrait Editing. For power icons, go to Section 8: Icon Editing. For loading screens, go to Section 9: Loading Screen Editing.


Summary

• Despite the name, MUAPS2Skinner can extract textures of any format
• In order to extract with MUAPS2Skinner, you’ll need a blank .dds file in the format and size of your texture
• If MUAPS2Skinner won’t extract your texture, you could have compatibility issues and will need to install a virtual machine
• If your texture doesn’t look right when you export it, you may need to adjust your offset or make sure you entered it correctly
• If you have a DXT1, DXT3, or DXT5 texture from MUA1 PC, you’ll need to conduct an RGB-BGR swap

[Outsider]

MARVEL  MODS  AESTHETICS  TUTORIAL
SECTION 5: EXTRACTING WITH SKINNERUI

By BaconWizard17 and Outsider
Logo by Outsider

Introduction
      SkinnerUI is one of the programs that modders use to edit various items for their mods. While most modders such like myself use this program mainly for HUDs, icons, and loading screens, it can also be used for skins.


Required Programs
      The very first thing to do is to acquire two programs: One of them is GIMP, which is an excellent photoshop program. I personally use 2.6 with the DDS plugin, but GIMP programs at 2.10.10 can read .dds with the need for a plugin.
      The other is the SkinnerUI program itself. You can download that program here. Don't worry about the lack of a preview. Press the download button.
      Note: It is a .7z file, so you'll need 7-Zip to open it. Once you have that installed, right click the file, go to 7-Zip, then open archive. The password is "marvelmods" to open the file. What you'll then see is displayed in the picture below. Enter the setup exe to get started. I would recommend not installing that program in Program Files, as sometimes it's faulty, and may require you to run it as administrator or similar nonsense. I would place the folders in wherever you do your modding work.

      Once you have the SkinnerUI program installed, go ahead and open the skinnerui folder. You'll see the contents below.

      This program will have offsets for various items from MUA already entered. But in this lesson, we'll extract texture from a skin. Remember back in Section 3, we found the offsets for Spider-Woman's primary costume 3801? Well, now we are going to take those same offsets, and add them to SkinnerUI. To recap, the offsets were: 3801.igb,-DXT1,512,512,622175,256,256,1441007. This is the DXT1 offset with the size at 256 x 256.



STEP 1:
      At the skinnerui folder, go into the "bin" folder. You'll see something called "muaskinner.cfg." Open that file via Notepad by right-clicking it, click Open With, and choose Notepad. It is safe to always pick Notepad for .cfg files. (NOTE: You'll also see a "muaskinner.orig.cfg." Don't worry about that one.) When you open muaskinner.cfg via Notepad, you will see a list of offsets for various MUA items.

STEP 2:
      Scroll to the bottom of that list, and add any new offsets you've found. In this case, we'll place Spider-Woman's 3801 costume offset in here. I usually like to place any new offsets second-to-last. Then save.

STEP 3:
      Now go back to the main skinnerui folder, and notice the SkinnerUI exe (the one with the red icon). Don't open it yet. Go to your Marvel Ultimate Alliance folder, go to "actors" and copy the skin that you want. In this case, it's 3801. Paste it elsewhere, like your desktop for example. Now open SkinnerUI. This is what you'll see when you click on "File."

      There's a few options there. CFG Edit is where you can add textures that you found. I haven't done it this way, but you can enter them this way if you wish to. CFG View is where you can view the muaskinner.cfg view you saw earlier. You will see there that the offsets that we placed for Spider-Woman is there. This is yet another way to enter new offsets -- probably the fastest way. Exit is obviously to exit the program. (SPECIAL NOTE: When you want to exit any of the sub-menus of this program, don't hit X. Hit Accept or Cancel. Hitting X will make the program think that you're still working, and it'll be stuck on the screen.) And Skinner? That's what you'll click on now, and this is what you'll see when you do.

STEP 4:
      Now click on the "Loadb IGB" button (nevermind the incorrect spelling). Locate the skin that you copied and pasted earlier, click on it and press Open. In this case, we placed 3801 on the desktop. If you placed the offsets in that CFG file, and they were correct, then the image of the skin's texture will be displayed as it does here.

STEP 5:
      Now simply click "Export" and save it wherever you do your modding work. The program will export the skin's texture as both a .bmp file and .dds file that is BGR (flipped colors) instead of RGB.

      And you're done! You've successfully extracted your texture from your wanted skin. Now you can move on to editing it. For skins, mannequins, and 3D heads, go to Section 6: Skin and Mannequin Editing. For portraits (HUDs), go to Section 7: Conversation Portrait and Character Select Portrait Editing. For power icons, go to Section 8: Icon Editing. For loading screens, go to Section 9: Loading Screen Editing.



Summary

• Offsets found can be entered into muaskinner.cfg in a couple of ways.
• Do not click X to exit any of the sub-menus, or it will get stuck. Click Accept or Cancel.
• Once the offsets (DXT1 or DXT3) are saved, the program will recognize them if they are correct.
• When the texture is exported, you are now free to edit them.