Cutstuff Forum

Mega Man 8-bit Deathmatch => Tutorial Collection => Topic started by: Pegg on June 10, 2017, 01:44:11 AM

Title: [TUTORIAL] Creating a customized skin
Post by: Pegg on June 10, 2017, 01:44:11 AM
(https://cdn.discordapp.com/attachments/268054737469964289/322876395296522240/skintutorial.png)

(NOTE: This thread was created so that people stopped using the old outdated skin tutorial from 2010.)

So, you think you're cool enough to make your very own custom skin? Well hold on there, buddy, because it's a bit harder than you may think.

INGREDIENTS:


Section 1: Setup

Alright, first things first. We need to make the sprites, which is easier said than done.

There are a lot of specifics for skins, so here's what you'll need to know.


Colors

8BDM uses certain colors on skins in order to make sure when you pick up weapons, your skin switches to that color. The default colors are specific shades of blue and cyan, which is why in player setup all of the skins are this color.

(https://cdn.discordapp.com/attachments/268054737469964289/322859788906135552/image.png) #0078FC, or color 198 in the 8BDM palette.
(https://cdn.discordapp.com/attachments/268054737469964289/322859843897524226/image.png) #00F8FC, or color 192 in the 8BDM palette.

There are also 2 other colors, black and white.

(https://cdn.discordapp.com/attachments/268054737469964289/322859944393048085/image.png) #000000, or color 0 in the 8BDM palette.
(https://cdn.discordapp.com/attachments/268054737469964289/322859978752786432/image.png) #FFFFFF, or color 4 in the 8BDM palette.

These are important to know, because 8BDM is very picky with it's colors. An off color could mean that it wont translate correctly and it won't work in-game.

Now that we know the colors, we can actually start making the sprites now.

Spriting

Open your image editing software and create a new image.

I've created a template here so that it may be easier to understand what exactly you're doing.

(https://cdn.discordapp.com/attachments/268054737469964289/322870393608077322/image.png)

Now, before you do anything, please note that you do NOT have to make your skin within the template. You can organize them however you want, and I'd encourage you to do so.

Back on track, you may be confused by a few things in this image, which I'll explain here.

Below each classification (Walk 1, FrontRight, etc.) is a set of numbers or letters in brackets. These are used for naming conventions when compiling your skin. Before we get into that though, we first need to make the sprites. You will need to make an equivalent for every image in the template shown above.


This is the part where you go and make the sprites. I can't really give an 'art' tutorial, but I can however give a few tips.



Section 2: Compiling your skin

Assuming you have your rotations complete, it's time to compile them into a .pk3 file.

First, you have to take every individual frame and put them into separate PNGs. This can be very time consuming, but there's a tool that can help you do this in seconds (http://www.alferdspritesheetunpacker.forkandbeard.co.uk/forkandBeard/apps/AlferdSpritesheetUnpacker/Download.aspx).

After you have all of your frames in separate image files, you have to name them correctly. This is where the letters and numbers from the template come in.

Here's how it works: The first 4 characters of the filename define what set of sprites it is. The last 2-4 define the specific rotation of the frame.

For example, here's the base skin's front frame.

(https://cdn.discordapp.com/attachments/268054737469964289/322880773201985539/PLY1A1.png)
PLY1A1

PLY1 is the set of sprites, A is the frame (idle) and 1 is the rotation number (front), hence why it's called PLY1A1. It's pretty easy to understand once you get the hang of it. The other frames follow similar formats.

Frame letters:

A = Idle frame (https://cdn.discordapp.com/attachments/268054737469964289/322880773201985539/PLY1A1.png)

B, C, D, E = Walking frames (https://cdn.discordapp.com/attachments/268054737469964289/322880963786964993/PLY1B1.png)(https://cdn.discordapp.com/attachments/268054737469964289/322880803740712972/PLY1C1.png)(https://cdn.discordapp.com/attachments/268054737469964289/322880819402244097/PLY1D1.png)(https://cdn.discordapp.com/attachments/268054737469964289/322880803740712972/PLY1C1.png)

F, G = Firing frames (https://cdn.discordapp.com/attachments/268054737469964289/322880855972249600/PLY1F1.png)(https://cdn.discordapp.com/attachments/268054737469964289/322880855972249600/PLY1F1.png)

H = Pain frame (https://cdn.discordapp.com/attachments/268054737469964289/322880872862711811/PLY1H1.png)

Rotation numbers:

x1 = Front (https://cdn.discordapp.com/attachments/268054737469964289/322880773201985539/PLY1A1.png)

x5 = Back (https://cdn.discordapp.com/attachments/268054737469964289/322888093050994695/PLY1A5.png)

x6x4 = BackRight (https://cdn.discordapp.com/attachments/268054737469964289/322888104321089538/PLY1A6A4.png)

x7x3 = Side (https://cdn.discordapp.com/attachments/268054737469964289/322888148868923393/PLY1A7A3.png)

x8x2 = FrontRight (https://cdn.discordapp.com/attachments/268054737469964289/322888165566185482/PLY1A8A2.png)


Please note that "x" in this situation refers to any of the the frame letters.

Now that you have your frames in separate images, you now have to compile them into a .pk3 file

Putting your skin into SLADE

Open up SLADE3, assuming that you downloaded it earlier, and create a new (https://cdn.discordapp.com/attachments/268054737469964289/322890023567360000/image.png) zip archive.

Create a (https://cdn.discordapp.com/attachments/268054737469964289/322890060292947970/image.png) new folder and call it 'sprites', then (https://cdn.discordapp.com/attachments/268054737469964289/322890457573228545/image.png) import all of your image files into the sprites folder.

And now, presenting the most tedious part of the process: toying around with offsets. Go into your sprites folder and click the first frame, which should be the front idle frame. It'll look something like this:
(https://cdn.discordapp.com/attachments/268054737469964289/322891223549476864/image.png)

Click that tiny little (https://cdn.discordapp.com/attachments/268054737469964289/322891983431663617/image.png) button at the bottom, and a window like this should pop up.

(https://cdn.discordapp.com/attachments/268054737469964289/322892210825854988/image.png)

Click the dropdown menu and select "Monster (GL-friendly)", which should set the offsets for you automatically. Make sure to click the save icon up at the top under "Entry Contents", and then do the exact same thing for all the other frames.

Finally, we need to create a SKININFO file. What's a SKININFO file? I don't know. I hear it's magical, though.


In all seriousness, a SKININFO file is what you use to define the skin so Zandronum knows what it is. Exit out of the sprites folder if you haven't already. This is where it gets tricky. Create a new entry and name it SKININFO. Click it and on the right there should be a button that says "View as text". Click that, and paste the following code into the textbox:

Code: [Select]
{
name = " "
sprite =
class = Megaman
dsnoway = LAND
dsoof = LAND
dspldeth = MEGADEAT
dspdiehi = MEGADEAT
dsplpain = MEGAPAIN
dstaunt = dsnone
gender = other
}

The missing spaces can be filled with:

name = What you want your skin to appear as on the Player Setup tab
sprite = The first 4 digits of your skin frames (Ex. PLY1)


You can customize it a bit with sounds, so if your character is heavy you can change LAND to FATLAND. You can also change the pain sounds from MEGAPAIN to MM2PAIN, MM3PAIN, or MM4PAIN.

Now, click Save As and save your file as a .pk3 file in your skins folder (which can be found in the same place you installed 8BDM).

Section 3: Testing and FAQ

If you saved your skin in your skins folder, you're all ready to go. Just check out your frames in Roll's mirror, be sure to test out different weapons.

FAQ:

Q: I got an error about missing frames! How can I fix this?
A: Go check and make sure you have equivalent frames for each frame on the template in your pk3. If you don't, make one and put it in.

Q: I got an error about bad characters!
A: It means you named your file incorrectly. Go compare your filenames to the ones shown earlier to make sure they're named correctly.

Q: My skin doesn't change color with weapons!
A: That means you used the incorrect colors, and you'll have to recolor and recompile the whole thing. Yeah, it's not fun.

Q: My skin faces the wrong way!
A: You're gonna have to reverse the frames that are facing the wrong way and recompile them.

Q: My skin moves around a lot while animating!
A: You did the offsets wrong.

Q: why do i need eggs
A: you need egg to shot web

Q: Can other people see my skin?
A: Only if they have it in their skin folders too.

Section 4: Optional things and Conclusion

Skins can have more than 5 rotations, too. You can add 3 extra frames for a total of 8 rotations. They're additional FrontRight, Side, and BackRight frames. The codes for these are x2, x3, and x4 respectively.

You can also add custom sound effects and a taunt to your skin, but I'm pretty sure there's a tutorial for that somewhere, so I wont go into that here.


Anyways, I hope that this tutorial was more helpful than the older one, and I hope that it can guide newer players to make better skins because of it.

dont do megaman edits kiddos
they're bad
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Bilete1828 on January 16, 2018, 06:49:51 PM
pls help meh
this is an bad questiion but pls


what is the size (Xpixels x Xpixels
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Korby on January 16, 2018, 10:33:23 PM
The size of each individual frame can be whatever you want it to be.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: MattNoack on February 13, 2018, 06:23:03 PM
Thanks! I've been wanting to try making my own skin!

I do have a question though, would it be possible to have only one part of the whole skin change color when switching weapons?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Korby on February 14, 2018, 12:30:22 AM
Yes. Only things that are colored blue or cyan will change colors, so if only one portion of the skin is that color, then it'll be the only thing that swaps.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Trainer Ed on March 14, 2018, 12:47:45 AM
I need some help with my (? Well, I modified another...) skin. I pretty much followed these instructions, but when completed, my skin is invisible! Can you help me?

Skin download: https://drive.google.com/file/d/1F0zPRem_R62aXj1cRpeETERL95Cvgw5k/view?usp=sharing (https://drive.google.com/file/d/1F0zPRem_R62aXj1cRpeETERL95Cvgw5k/view?usp=sharing)

Thank you.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Korby on March 14, 2018, 04:32:45 PM
Your sprites are offset wrong.
Refer to this part of the tutorial.

(https://i.imgur.com/CaUbdIX.png)

You also have multiple xxxxA1 lumps in your file. Make sure to delete unwanted duplicates.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Trainer Ed on March 18, 2018, 11:51:40 PM
Thank You! That's twice you've helped me...
Title: Re: [TUTORIAL] Creating a customized skin
Post by: alexparr on March 20, 2018, 11:37:32 PM
Now we just need an updated tutorial on how to make maps...
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Rozark on March 21, 2018, 07:51:11 AM
Now we just need an updated tutorial on how to make maps...
*cough*
http://cutstuff.net/forum/index.php?topic=9763.msg318454#msg318454
Title: Re: [TUTORIAL] Creating a customized skin
Post by: alexparr on August 11, 2018, 11:42:08 PM
*cough*
http://cutstuff.net/forum/index.php?topic=9763.msg318454#msg318454
Oh.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Ruzma on September 04, 2018, 10:45:55 AM
Should I let Slade install things on my computer? Ans should I buy Paint.net? I don't trust the Internet to provide me safe downloadable stuff...
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Sir Anon0mos on September 04, 2018, 07:08:42 PM
Should I let Slade install things on my computer? Ans should I buy Paint.net? I don't trust the Internet to provide me safe downloadable stuff...
What specific things is Slade trying to install?

As for paint.net, there are other free spriting software that work just as well (I use GraphicsGale for example).
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Dj Scout aka Curt.5 on October 28, 2018, 06:01:41 PM
Uh, whenever i try to choose a sprite from the sheet it keeps choosing more than one, and whenever i try to put it as once sometimes its just a line and nothing there? what am i doing wrong? :shock:
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Rokim21 on October 28, 2018, 09:34:04 PM
What if I want to have two differents back/side and side frames?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Piano the Mettaur on January 27, 2019, 01:58:30 AM
Is there a faster way to name the files?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Pegg on January 30, 2019, 07:54:13 AM
Is there a faster way to name the files?

Unless there exists an external program to do it for you, no. Usually renaming is the most tedious part of the process.

What if I want to have two differents back/side and side frames?
I should have explained this better in the main post, but here's how this works:

A frame called PLY1A8A2 is the A frame of the sprite "family" PLY1, but the numbers make it interesting. The numbers signify which angle it should be displayed at. The reason most skins have frames with two numbers in them is that putting an additional one tells the engine to render that frame for (in this case) angle 2, and mirror it for angle 8. This is true for other rotations as well, such as 6/4 and 7/3. If you want a full 8-way rotation, you'd need frames A1, A2, A3, A4, A5, A6, A7, and A8 all defined. If you wanted different side frames and back/side frames, you'd need A3, A4, A6, and A7.

I've been meaning to update the main post for a while with this corrected information, but I haven't gotten the time to do that yet. Maybe I should do that soon, haha
Title: Re: [TUTORIAL] Creating a customized skin
Post by: QuickSlash on February 10, 2019, 10:28:27 PM
what do I do when the sprite frame is missing rotation?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Korby on February 11, 2019, 08:36:04 PM
Look over your filenames and make sure none of them are incorrectly spelled.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Blue Electric Charizard on April 06, 2019, 06:27:26 PM
Hello. I have an issue with my skin: apparently, frame A is 'missing rotations', and MM8BDM won't run due to it. If my skin wasn't set up correctly, please tell me why. Thank you.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Korby on April 07, 2019, 02:15:01 AM
There's a good chance that you messed up when naming the files. Can you post a screenshot of the wad in SLADE/SlumpED?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Rossiter on April 13, 2019, 06:36:58 PM
My skin works when I follow this tutorial, but the sounds aren't playing. I'm not sure where I went wrong?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Korby on April 15, 2019, 07:44:58 PM
Make sure that you spelled the filenames correctly in the skininfo and that none of the filenames are longer than 8 characters long.
Title: Re: [TUTORIAL] Creating a customized skin
Post by: thomasawesome55 on May 17, 2019, 05:00:46 AM
So when I activate the game, each time it gives me this error message when the game starts up.
"Invalid data encountered for texture Kawaii Blizzard Man.pk3:sprites/skininfo"
I guess something is wrong with the SKININFO file. Here's what I have in it.
{
name = "KBM"
sprite = BLZG
class = Megaman
dsnoway = FATLAND
dsoof = FATLAND
dspldeth = MEGADEAT
dspdiehi = MEGADEAT
dsplpain = MM4PAIN
dstaunt = dsnone
gender = other
}
What's wrong with this?
Title: Re: [TUTORIAL] Creating a customized skin
Post by: Zdagger67 on May 17, 2019, 08:38:06 AM
So when I activate the game, each time it gives me this error message when the game starts up.
"Invalid data encountered for texture Kawaii Blizzard Man.pk3:sprites/skininfo"
I guess something is wrong with the SKININFO file. Here's what I have in it.
{
name = "KBM"
sprite = BLZG
class = Megaman
dsnoway = FATLAND
dsoof = FATLAND
dspldeth = MEGADEAT
dspdiehi = MEGADEAT
dsplpain = MM4PAIN
dstaunt = dsnone
gender = other
}
What's wrong with this?

That sprite text needed 4 digit not 3 digit