Guidelines to Modding: Hairstyles

Overview

Have you ever wanted to make a mod for Melody’s Escape but just didn’t know how? This guide can get you started on making your own hairstyles!

Finding the Mod Studio

The Mod Studio is an application added along with Melody’s Escape in update v0.7.4. This application allows people who purchase Melody’s Escape to modify and create color schemes, hairstyles, and skins for use in the game. This application is, by default, right next to Melody’s Escape in its folder. To find this folder, you may go through the following directories:

Since I have Windows 7, I’m not entirely certain if this is the same for most operating systems, but as long as you find the Steam folder, the rest of the path should be the same.

If you think you will be opening this application often (which is very likely), you will want to make a shortcut to place on your desktop. Right-click the application and under “Send to,” select “Desktop (create shortcut).” Again, I’m not familiar with OS’s other than Windows, so just do what you can to create a shortcut.

There is also a folder called “Mods.” This is the folder in which all of your created mods will appear. These mods appear as folders since it’s possible to package a color scheme, hairstyle, and skin all in one Workshop file. You will want to make a shortcut to this folder too; this is only important for uploading mods to the Workshop, so I’ll explain this in the next section.

Intro to the Mod Studio

Upon opening the Mod Studio, this is what you should see:

Depending on your monitor size, the preview screen might actually look different, like this:

The first image is taken on my 1920x1080p monitor, and the second is taken on my 1440x900p monitor. Since there’s just not enough space on the smaller monitor, the preview screen is cut off on the right side. This is admittedly unfortunate, but it only restricts view of the right-input color obstacle for the color scheme. If you have this problem, just stretch the window out to get a quick look.

Aside from that, this is the Mod Studio! Navigation is easy, as you just need to click the three tabs at the top left of the screen to go between “Skin,” “Hair Style,” and “Color Scheme.” There’s a tab called “Thumbnail,” but it doesn’t actually do anything except tell you how to add thumbnails to your mods for the Workshop. Adding a thumbnail is simple: just make an image that’s 360x360p and place it in a mod’s file. This is why it’s best to make a shortcut to the “Mods” folder. Since this guide is about making hairstyles, the rest of this guide will be spent in the “Hair Style” tab.

The Hair Style Tab

In a new unsaved project, the Hair Style tab looks like this:

The developer was nice enough to provide access to the default hairstyle, which is displayed. The right side shows the preview, and the left side holds the attributes. This preview pane has the “Front Hairs Definition” on the left and the “Back Hairs Definition” on the right. There are buttons above which can control all sorts of things; the buttons in red are for aesthetics and testing, and the buttons and info in blue are technical aspects.

Clicking on one of the buttons with a green play arrow will play one of Melody’s animations to show how her hair will react to the movement. This also changes the preview pane.

Even more animations can be found by selecting the dropdown arrow on the “Custom” slot. The custom animation is “Idle” by default. While in this pane, you can press the “Headphones” button on the left to remove Melody’s headphones. This does not make her headphones disappear in-game; it’s just for technical use. Press the “Edition Mode” button to return to the previous preview pane.

The important stuff is on the left: this is where all of the creation happens. Clicking on one of the items in the list will highlight it on both the list and the preview pane and will provide its technical information in the bottom-left corner. This technical stuff can be modified by clicking on it.

Every item in the list has attributes that can be manipulated. Most of what you will be modifying will be each of the “hairlocks” attached to each of the hair definitions. If you’re using a custom texture though, you’ll want to be familiar with every aspect.

Hair Attributes: Definitions

It’s important to note that the Front Hairs Definition and Back Hairs Definition items on the list are representative of their sprites and all hairlocks underneath them. For the rest of this guide, however, when I refer to either of these, I will be referring to them as their sprites as they appear on the preview pane.

The attributes for the Front Hairs Definition and Back Hairs Definition look like this:

• The Offset is the position of the hair with respect to Melody in an (X,Y) format.
  • It’s not like your standard cartesian plane where Right = +X and Up = +Y. Instead, the origin starts at the top-left corner of the texture so that Right = +X and Down = +Y. For this base texture, the Front Hair Definition is placed 222p right and 100p down, starting from the top-left corner of the preview pane. The Back Hair Definition starts from the top of the middle black line. These values cannot be negative. All hairlocks attached to the hair definition have placement values relative to the definition; moving the definition moves everything. PLEASE NOTE: It is not possible to change this attribute by dragging across the preview pane like with locks; you must input the coordinates manually.

• The Gravity is the vector at which the hair is constantly pulled, also written in an (X,Y) format.
  • The Front and Back Hairs Definitions are not directly affected by gravity because they do not move. However, these numbers set the default gravity values for all attached hairlocks. This value is also in the format of (X,Y), but instead of a point, it is a vector. This basically means it’s going in a direction. The vector still follows the same rules as the position:
    Right = +X and Down = +Y. This time, instead of being at the point (X,Y), the hair is pulled to the right X amount and down Y amount. This Front Hairs Definition Gravity value makes all locks of hair attached to it go down with a force of 1.75 units. The X value is zero, so it does not move to either side. Vectors are allowed to have negative values, so if X is negative, the hair moves left, and if Y is negative, the hair moves up.

• The Static Sprite Area is effectively what the hair looks like. This attribute basically takes an area of the texture and turns it into hair.
  • This attribute cannot be modified by clicking on it; the only way to change this is by clicking on this icon at the top:

    
    Upon pressing this button, you get a window that shows the hair texture. You can drag the blue box around the area you wish to be a lock or definition of hair. This window also provides placement information about the blue box in the top-right. Being immensely accurate with choosing a lock of hair isn’t necessary, but if you’re all about perfection (like me), these numbers are very useful.

Hair Attributes: Hairlocks

Hairlocks are the strands of hair that move around on Melody’s head. You can create or delete these by clicking on them and using the buttons at the top. When creating them, you have to be wary of which hair definition you selected, as the hairlock will be added to either the selected one or the Front Hair Definition by default. These locks cannot be dragged and dropped in the list, so the order in which you create them can be important. A new lock is always placed on top of all existing ones in the same definition. Hairlocks in the Front Hairs Definition are always in front of ones in the Back Hairs Definition.

• The Name is simply the name of the hairlock as it appears in the list.
• The Total Nodes value is the number of bendable nodes or, as I like to call them, “bones” in a hairlock. 20 is the highest number, and 2 is the lowest. Entering 2 makes it “static” or unable to move, like the hair definitions.
  • Feel free to toy with this value as you please. Good values for medium-length hairlocks are usually within 6-14, but check a wide range and use the preview pane animations to make sure you get what you want.
• The Direction Angle value is the angle at which the hairlock is rotated. This value is in degrees and can be negative.
  • Just like the (X,Y) format changes, these degree values are changed in the same way. It’s basically like the whole plane has been rotated -90 degrees MESSED UP from the get-go. All you need to know is that it rotates. This is very useful, so just tweak the numbers and figure it out as you go.

• The Impulse Factor is how much the hairlock reacts to movement.
  • This is a simple but fun attribute to play with. Whenever Melody moves, she causes “impulses” which affect the movement of her hair. An Impulse Factor of 1 means that the hair reacts normally. Lowering the factor reduces the strength of impulses, making the hair move slower (physics-wise, it gains mass). Increasing the factor increases the strength of impulses, making the hair move faster (less mass). Very interesting things can be done using this attribute.
• The Anchor Postion is the same as the Offset of the hair definition, except it is relative to the definition. Hairlocks can have these values changed by clicking and dragging on the preview pane.
• The Sprite Area is exactly the same as the Static Sprite Area of the hair definition.
• The Gravity Override value is the gravity for the hairlock. It is unique, as it can be left empty.
  • This is exactly the same as the Gravity value for the hair definition. Inputting a vector value (X,Y) will replace the hair definition Gravity with that vector.

Tips and Examples

At this point, you’re ready with the knowledge of how to make a hairstyle using the Mod Studio, but you might not know where to start. I’ll provide some things I’ve come across that work nicely for me as well as examples of my previous work.

• Wavy Stuff Looks Cool
  • One thing I’ve really liked about the physics of Melody’s hair is how it flows so naturally. I discovered pretty early on that making multiple identical hairlocks next to one another and making progressive minute changes to the Impulse Factor of each makes a neat wavy effect. I did that in my first gimmick upload, “Fireflies.”

    
    I made six hairlocks, starting in the very back with Hair 1 and ending with Hair 6 in the front. Hair 1 has an Impulse Factor of 0.64. From there, I increased the factor by 0.02 each time, with Hair 2 being 0.66, Hair 3 being 0.68, and so on until Hair 6 became 0.74. This causes a minor delay that increases along the line of hair, making a wavy motion. I did the same thing with one of my first hairstyles, “Bunny Hawk.”

• Sine, Cosine, and Gravity
  • I’m not an artist, so I mostly use the base hair texture to create new combinations. This means that I rotate a lot of things. Rotating the hairlocks can make a mess when they just fall with gravity and swing around, and it can get frustrating when I’m trying to rotate a hairlock into place and it just falls right out. I discovered a good (though overly complicated) method of using rotation and the Gravity Override attribute, which I used in my “Sawblade” hairstyle.

    
    If you look at the Gravity Override value for Spike 2, you can see that it’s a suspiciously accurate value. That’s because I used an excessive amount of mathematics. First, I set the hairlock to the correct Direction Angle I wanted. Next, I took that degree measure and found its sine and cosine ratios. Lastly, I multiplied those by a factor (in this case 5) and placed the sine value as the X and the cosine value as the Y. Of course, due to the funky (X,Y) stuff, I had to enter the opposite of the sine, but the numbers are the same. This made the hairlock stick straight when at rest but still keep its physics. This is great for when you want your hair to have a unique shape but don’t want it to be static. I did something similar with my “Lucid Dreamer” hairstyle, but I didn’t use math for that one. Ultimately, the math isn’t necessary; you can just guess a whole bunch of numbers until it looks right. I still prefer the long yet clean way of using the calculator.

• Ground Textures?!
  • This is something that I appear to have discovered before anyone else. If any sort of hair sprites move outside of the visible area (the dark blue spaces in the editor), then they become invisible. However, if these sprites move down far enough, past approximately 400 to 420 units in the Y direction, then they overlap the ground texture in-game, uncolored. Since the ground texture repeats itself as Melody runs, these sprites also repeat. I found this accidentally while testing my “Fireflies” hairstyle when one firefly wobbled really far out of the visible box. At the time, I figured I could do something interesting with it, but I waited until I was inspired to create the first hairstyle to use this idea. That ended up being “Boundaries,” my first upload to include a color scheme, hairstyle, and skin all in one. Shortly after that, I got ideas for two more uploads, one of those being “Burning Coals.”

    
    “Burning Coals” is a very good example of what can be done using this technical bug. The space in which a sprite can be visible on the ground in-game is about 100 to 120 pixels high. Placing the bottom of the sprite at the Y value of 520 is a perfect spot to make it appear as though the sprite is sitting on the ground. Of course, to be precise about that, you need to use the numbers, as you can’t see what you’re doing in the editor when the sprites are out of the box.

    
    “Burning Coals” uses many sprites of flame placed at 520 pixels down to make it appear as though the ground is on fire. In the texture itself, these flame sprites are upside down, but that’s for a good reason. Even when the sprites fall out of the visible box, they still react with impulses, as they are still considered hairlocks. By starting the hairlock sprite at the bottom and giving space at the top, the flame sprite moves as though it is rooted at the bottom and the fire flicks about. It isn’t as perfect as it could be, since a nice flow can’t be achieved with such a thick sprite within 120 pixels, but it still wobbles about, which is a nice touch.

    Conveniently enough, the area in which the ground texture repeats itself is the exact same length of the hair texture area. Making sure that the whole length of the hair texture at 520 pixels down is covered with sprites ensures that the in-game result is a clean repeat.

    Take caution though, as the base hair definition adds 100 pixels to the Y value, so if you have to make sure that the whole additive Y result for the hairlock is 520. In the case of “Burning Coals,” I did not move the hair definition, so that adds 100 pixels. Also, since the flame hairlock sprites are flipped 180 degrees, the measured origin point is at the bottom. Since I’m measuring from the bottom, I just have to make the Y value of its position 420, because adding 100 makes it 520, the optimal Y value. If the sprites were not measured from the bottom, then I would also have to take into account the height of the sprite. I did it this way with my “Boundaries” upload. If the hair definition is 100 pixels down, and the hairlock sprite itself is 100 pixels tall, then placing the hairlock at 320 pixels works fine. If you ever try this yourself, you just have to be careful about what your math is doing. Ultimately, you’re going to be opening and closing Melody’s Escape to constantly check if your sprites look okay, so if the numbers game isn’t for you, then you can just try moving the sprites around until they look nice.

    If nothing I said here makes sense, then feel free to go head and look at the two mentioned uploads. Looking at the work yourself can really help with understanding the process.

Afterword

This guide lacks a lot of more in-depth information about the creation of hairstyles, but that’s mostly because I “don’t want to poison others’ minds with my style or ideas, as I appreciate originality.”

Of course, there’s a difference between helping someone and giving them ideas. I would like to give as many tips as I can, so if there’s anything else you still have questions about, please let me know in the comments section below. I would love to help out or hear suggestions for how to make this guide more useful!