Tutorial Using mask.png to hide hair on helmets/hats

Discussion in 'Starbound Modding' started by Ebelle, Dec 28, 2013.

  1. Ebelle

    Ebelle Void-Bound Voyager

    This tutorial is focused on tweaking how much hair is visible with custom helmets on.

    Since I couldn't find any real information on the proper implementation of mask.png, I figured I would write up a brief tutorial on how to hide just the right amount of hair when your custom helmet is being worn.

    First of all, you should probably have your own custom helmet item. Getting to that point is not within the scope of this tutorial, however, there are some wonderful guides on here about how to make armor, such as Ghoul 159's Armor Tutorial.

    I will also be using Photoshop and Notepad++ for this tutorial. If you do not have Photoshop, the same rules probably apply in other programs such as Paint.NET, GIMP and even perhaps Paint, however, I am unsure. Notepad++ is free, but I don't believe that it works on Linux. I have heard that TextEdit on Macs works, however, I don't know for certain. Windows Notepad will ravish the formatting, so I do not recommend it.

    The images I am using are from a mod which I am currently making.

    Without further ado, here is the tutorial.


    Step 1: We are going to open up our head.png file within our custom armor folder. It will look something like the following:

    img1.jpg

    Please note that I have rulers turned on. This will be important in the next step. If you do not have rulers on and you are using Photoshop, you can enable them by clicking on View>Rulers, or by pressing Ctrl+R on a PC.



    Step 2: We are now going to draw a box around our helmet so that we can paste it into our mask.png file to use as a guide. This box will need to be 43x43px and perfectly aligned. We can do this very easily.

    You need to drag a ruler from the left side of the screen towards the center. You can do this by holding down left click on the ruler bar and dragging to the right. You want to place the ruler at exactly 43 pixels from the left side. This will be dead center in standard cases. You may need to zoom in to see the measurements better.

    img2.jpg

    Note: You can snap the ruler to the grid to move it pixel by pixel by holding shift while dragging.




    Step 3: Now we are going to do the same thing, by pulling a ruler down from the top. This ruler will go down to 43 pixels on the left side.

    img3.jpg




    Step 4: Now, we are going to make our selection. We need to grab the Rectangular Marquee tool, and drag a square selection around the area which is encompassed by the rulers. It will look like the following when it is selected. Everything within the red should be selected!

    img4.jpg




    Step 5: Now, we are going to add a simple 1 pixel white line around the edge of our selection before pasting it into our mask.png file. Simply use the pencil tool set to 1 pixel width and draw a line around the edge. You may use a bigger line if you would like. I am using 3px so that it is easier to see for this tutorial.

    img5.jpg

    Note: Do not deselect, as the selection will prevent issues with alignment.


    Step 6: If you do not yet have a mask.png file, you should make one. It is a simple 43px wide by 43px high file with a transparent background. If you do not know how to do this, keep reading. If you already know how, skip this paragraph. Press File>New, and in the dialogue box, under Width, type 43 and change the drop down menu next to it to pixels. Do the same for the Height. Make sure that the resolution is at 72, and change the Contents drop down to Transparent. Click OK. Now click File>Save As, and call it mask, and change the file type dropdown to .PNG.

    If you already have a mask.png file, check to be sure that it is 43x43. You can do this by opening it and clicking on Image>Image Size. If it is not 43px by 43px change it to be so. Click OK.

    We will begin working on a blank mask.png. If you already have content in your mask.png file, I suggest using the Eraser tool to erase it.

    Now go back to your head.png file where we made the selection and the white lines. Be sure that it is still selected, and click Edit>Copy. Now switch over to mask.png, and click Edit>Paste. Your helmet should pop up in that file. Now be sure that the white edges are all visible. This ensures that the image is aligned properly. It should look similar to the following. Feel free to deselect the image when you are done.

    img6.jpg


    Step 7: Now we are going to erase the white edges, because they do not need to be there. Use the eraser tool to erase them. Once that is done we are going to create the actual 'mask', which is a fancy way of telling Starbound what to hide and what to show of your character's hair and whatnot.

    Basically, transparent areas are areas where hair should be hidden, and areas which we will color with pure white will allow hair to show through. In my case, I want hair to show under the hood if the player has such hair. So I will want to draw white inside of the helmet like the screenshot below. You may color yours how you please.

    img7.jpg

    This may take a little bit of tweaking after you get it into your game for testing. Just try to get it as close as you can. It's not too big of a deal if you don't get it perfect the first time.



    Step 8: Now, we just have to clean it up and test it. Erase the helmet from the mask.png image, so that the image is composed of ONLY white and transparent, like so:

    img8.jpg

    Now save your file. Be sure that the mask.png file is in the same folder as your head.png file and the other armor image files. Your folder structure should look something like this:

    img9.jpg



    Step 9: Now, we are going to make one final check. We will make sure that the mask file is being used. Open up your *.head file. Mine is kitty.head. Look for a part in the file that might say something like:

    "mask" : "mask.png",

    If you do not have that, then you need to add it right after the "maleFrames" and "femaleFrames" part like so:

    img10.jpg

    Be sure not to exclude any commas or quotes!



    Step 11: Now we are ready to test it out. Go into the game and grab your item. I made a character with plenty of hair all over the place.



    img11.jpg

    Now pop on the helmet, and see how it worked out.

    img12.jpg

    If it isn't quite right the first time, it's no big deal. Just go back in and change it up until it's just the way you like it.



    I hope this helps somebody. Perhaps there are different ways to do it, but I could not find a template or tutorial or even an in depth explanation anywhere.

    Feel free to post feedback or any changes which you feel may be necessary. Comments and criticism are very welcome.

    Edit Dec 28: Fixed a strange formatting issue.
     
    The | Suit, Mio, Nightmares and 5 others like this.
  2. zortbg

    zortbg Cosmic Narwhal

    Thanks for the tutorial! Great work!!! Keep it up!
     
  3. dnlkng

    dnlkng Void-Bound Voyager

    Thanks!
     
  4. Void Chimera

    Void Chimera Void-Bound Voyager

    This Tutorial helped me alot with My mask making ideas. In fact thanks to this I currently have made Glasses, Helmets, and Now I'm making a creepy pasta Mod that features masks and items from assorted horror stories and games, Like the face of SCP 173 or Slenderman's blank white face.
     
  5. CPU119

    CPU119 Space Spelunker


    Tutorial how to make the mask thing gone? I am trying to make custom glasses out of an existing files since i have no experience in programming and when i wear the helmet it makes my character's hair dissapear and i am not really sure how to disable it, help is appriceated!
     

Share This Page