Modifying Receptors or Keys in Mania - ajcdev/ManiaSkinningGuide GitHub Wiki

As you know, making receptors or keys in mania is REALLY ANNOYING. Why? Because it's either stretched or squished in the gameplay. You know, something like this?

The size of the receptor I'm using is 320px x 300px, the same as the note's size too!

Now you probably think that it's probably hard to adjust this, but nope it isn't at all. So, let me show you how I'm gonna make it look like this:

DISCLAIMER

The assets that I use for the notes and receptors all have the same size and are perfect in shape and pixel. These steps are still applicable to those noteskins which are already modified. However, I recommend using a perfect size of receptors and then modify them later as they maintain better quality than the modified ones.

Step 1: Preparation and Set-up

Use the newly made receptors for the game (I will be using a modified pl0x arrow receptor in this one and use 4k.) and set them in your skin.ini directory. For me, I made a new folder in the skin folder and rename it to Mania and put all mania elements inside there. Here's my Mania folder and what I have set in my skin.ini:

Mania Folder:

Skin.ini:

After setting this up, do not forget to edit the value JudgementLine and KeysUnderNotes to 1. This is very important as it will tell us where's the hitposition placed in game. You can use whatever hitposition you like, however I will be using HitPosition: 468 in this one.

Step 2: Modifying the Size of Receptors

Go back into the game and refresh the skin by pressing CTRL + ALT + SHIFT + S. Go to settings first and set your score meter type to None especially if your hitposition is like around 450 and above.

After doing this, let's go test the elements in game. Simply put Autoplay on and check any map on which key set you're modifying. I will be using 4k in this one.

Now, you see that the new elements in game are, as not as what you think it'll become just by putting them in the skin folder and setting them up. That's not how it works in osu!mania sadly, but no worries! It's simple to fix this kind of stuff.

First, let's screenshot the gameplay first and open it. You may leave the autoplay after making a screenshot.

Second, let's use an image editing software. (I will be using Adobe Photoshop in this one. For those who don't have Photoshop, I recommend using Photopea, paint.net, or GIMP)

Then we drag the gameplay image in Photoshop to view it.

Now what do we do next? Let's use the Rectangle Tool to measure the note size and receptor size.

As you can see above, the note size is 99px x 99px.

As for the receptors, its size is 99px x 300px.

Now we've got our measurements, let's go to third, which is to modify the size of the receptors. Open all the receptors you use in Photoshop. In my case, I only have to open one and then I can adjust other receptors later.

Note: I used a color fill layer because the key image has 50% opacity so I can see better.

Right click the receptor layer, and convert it to smart object:

The reason why we have to convert it to smart object is because we can keep its quality if we squish or stretch the image.

Next, as we have seen that the note's height in game is 99, we will change the height of our receptor here from 300 to 99.

After doing this, remove the color fill layer and save the file and refresh the skin in game. (You can do the same with the other receptors for arrows, but it's better to do one receptor first and then modify the other arrow receptors later if it suits well.)

Don't forget to edit the key-down or the pressed key element to be modified too.

Here's the result:

As you can see, the receptor is now the exactly the same size as the note. Now we do the same with the other receptors, and voila! (Don't forget to convert them to Smart Object first before modifying them!)

We are done with modifying the receptor size! However, the hitposition is really far from it, and that means we'll have to move the receptors in the canvas too. Let's move to step 3.

Step 3: Moving the Receptor position.

This is my method of moving the receptors to the hitposition. To be honest, I think this method is kinda scuffed, but it works so it ain't that scuffed :P

Let's open the previous image in Photoshop and zoom in to the receptors and hitposition:

Then, let's use Rectangle Tool, we'll use it to measure the space between the receptors and the hitposition given by the JudgementLine in the skin.ini.

Now, you see that the space between the receptors and hitposition is 81 pixels, that means we'll adjust the position of the receptors elements by 81 pixels downwards. Let's go back to our receptor elements again.

What we do next is that, we check the Y position of the element in the Properties Panel, which is this:

The Y position value is 101. Since the gap is 81 the last time we measured it, we'll add that value to our Y position, which results to 182. (Don't forget to do the same with the key-down element!)

After doing this, save the file. Refresh the skin in game and check out the result.

Let's check it in Photoshop too if it's the right position.

It actually is! Now let's do the same with the other receptors, and refresh the skin in game.

Here's the result:

Now that we are done, we can now set our JudgementLine and KeysUnderNotes to 0 and now you can enjoy having a proper receptor skin in game.

If you have any questions, you can message me in my Twitter or Discord. It's in my README file. As always, have fun playing the game!