[ CLASS CP1 ] ~ Characters: Custom Palettes

[RobotMonkeyHead]

space.

[RobotMonkeyHead]

LEVEL  

STAGE 1   [spoiler=----------( Stage 1]
   In L1 S1 we talked about how a sprite is a picture file, rectangular in shape, which is basically a grid of pixels.  The X axis on that grid is horizontal, the Y axis is vertical, and any x,y location marks a single pixel which is a single color. 0,0 is the upper left most pixel, and Width, Height is the lower right most pixel.  Each sprite also comes with it's own Palette, which is a list of 256 colors that it uses to fill in each of the pixels.  When a sprite is Indexed, that's what it means.  It has a color palette of 256 colors attached.    

   

- STAGE 1 COMPLETE -
[/spoiler]

[glow=limegreen,2,300]O>[/glow]   STAGE 2:  Applying a Palette
[spoiler=----------( Stage 2]
   After loading in a bunch of sprites to your blank Fighter Factory file, you might have noticed that in the right panel, the palettes are starting to add up.  If the right panel is displaying a list of numbers [picture] then click the organizer button [picture] to switch to the palette display.  There's a scroll bar you can use to look through them.  

   When each sprite is loaded, FF loads its palette separately.  They remain attached, but you can view the palettes separately in the right panel. [picture]   As the sprite is being loaded, FF checks all the existing palettes to see if the sprites exact palette already exists.  If it does, rather than loading a duplicate of the sprites palette right along with it, it just attaches the sprite to the already existing version of it's palette.  In other words it applies the existing palette to the sprite.

   This is how loading all of a characters sprites will still cause there to only be 1 palette.  That's assuming all of the sprites have the same palette to begin with, of course.  For more info on working with lots of sprites and their palettes, visit the Gimp Mission, or the Photoshop Mission.

[spoiler=----------( Key Points & Resources]
___/ KEY POINTS
 •  In the sprites tab, use the organizer button to switch between the sprites list and the palette display.
 • Loading a sprite with the same palette as an existing sprite will cause FF to apply the existing palette.

___/ RESOURCES
•
[/spoiler]
- STAGE 2 COMPLETE -
[/spoiler]

[glow=limegreen,2,300]O>[/glow]   STAGE 3:  Modifying a Palette
[spoiler=----------( Stage 3]
   Once you have a bunch of sprites and a bunch of palettes, there are a few things you can do.  For starters you can apply any palette to any sprite, which will look like shit most of the time for reasons you can probably guess.  Another thing you can do is mess with an existing palette.  Modifying a palette can be done 3 ways.  First, you can do it in whatever drawing program your using to work with your sprites before you load them in to Fighter Factory.  This, of course will vary per program.  Personally, I use GIMP and am completely satisfied with it.  

   Second, you can modify the palette in the sprites tab [picture] in Fighter Factory.  To do this, go into the sprites tab, and click the organizer button [picture] if the palettes are not already displayed in the right column.  Simply double click on any color and use the default palette editor to adjust it.  When you're finished, if you want to save that palette as a file, simply click the "save the palette as a file" button [picture] and give it a name.  

  Saving a palette as a file allows you to allow you to use it as one of the characters 12 in game palettes.  To do that you just drop it into the characters folder, and edit their .def file to include it.  See the character Mission Lv X St Y for more details on that process.  Saving a palette as a file also allows you to share it on a forum.  To learn more about that see the ___ Mission at Lvl X Stg Y.

   The third way to modify a palette is using Fighter Factory's Advanced Palette Editor, by clicking this button. [picture] From here down will be modified eventually because as of now I have no clue whatsoever how that thing works.  If you want to mess with it, as of now, your guess is as good as mine.  I do know it offers a handy gradient tool, which we'll get to in a minute. :)  

[spoiler=----------( Key Points & Resources]
___/ KEY POINTS
 • Palettes can be modified, in a separate program, in the sprites tab, or in the Advanced Palette Editor.
 • Saving a palette as a file allows you use it as one of a characters 12 in game palettes.

___/ RESOURCES
•
[/spoiler]
- STAGE 3 COMPLETE -
[/spoiler]
[glow=limegreen,2,300]         - End of Level -[/glow]

[RobotMonkeyHead]

------
ADVANCED PALETTE EDITOR HOW TO pt 1

There are 4 buttons between the them which look like this. [pic]  In the left palette, select any colors you want to move by clicking on them (shift-click to select a range, ctrl-click to select multiple).  Then on the right side palette, select the destination spaces you want to move them to.  Once you have the selections you want on both sides, click the "Send Selection Colors" button. [pic]  Simply mirror the process to send colors back.  You can also send empty boxes from the right to replace the colors on the left you've already sent, and visa versa.  Remember to make sure the background transparency color ends up in the first box in the left palette.

   Once you've got the palette organized how you want it,

------
ADVANCED PALETTE EDITOR HOW TO pt 2
Here's a quick overview.  

   There are 2 palette displays.  The left one is the actual palette, the right one is purely for organizational purposes.  Start by selecting the color(s) you want to edit by clicking on them (shift-click for range select, ctrl-click for multiple individual select).  You can also select them using the eye dropper tool [pic].  Use that to click on the actual image, and it will select the colors of the pixels you click on.  Once the colors are selected you can adjust them multiple ways.  

   For starters, you can use the Hue / Saturation sliders or the RGB sliders.  Click the X to reset them or check to apply the changes.  You could also use the Mask button to temporarily turn all of those colors to a single color, which you can select by pressing the Mask's Color button.  You can also swap the values of RGB color channels, say the red & blue in all the selected colors by selecting the channels you want to change and pressing the arrow button just above the eye dropper. [pic]

-----
TRANSPARENT COLORS WITH ALPHA 255

   It is possible to make a color with an Alpha value of 255 transparent, however.  This is done within an animation, or in the coding itself.  So let's say you have a large red circle with an Alpha value of 255 that's been made transparent by an animation, and it's moving across a middle grey back ground.  The animation / coding itself will tell us on a scale of 0 - 255 how visible the background behind the circle should be, and on another scale of 0 - 255 how visible the circle itself should be.  For now lets assume they're both set at 255, or 100%
   
   To figure out what color the pixels inside the red circle should be, Mugen will add 100% of the background's red channel to 100% of the red circle's red channel.  The total is 128 + 255 = 383.  Because 383 is more than 255, Mugen just sets the red channel at 255.  It then does the same thing with the Green and Blue channels.  So the resulting color has a RGBA value of: 255, 128, 128, 255.  Sort of a pinkish color.  

 

-----------------
COLOR SEPARATION

MAYBE THIS SHOULD BE ITS OWN MISSION?
MAKE STAGE 1 ABOUT COLORS AND MOVE THE OTHER STAGES DOWN?

   Let's say you have a Blanka character and his hair and shorts both use the same oranges on the color palette.  Let's also say you'd like to be able to change the color of his hair without changing the color of his shorts.  This is where the process of Color Separation comes into play. Here you need to separate the shorts from the hair.

   For starters this means that you're going to need to add some colors to the palette.  However many shades of orange the hair uses, that's how many new colors you're going to need to add.  For simplicities sake we'll assume both the hair and the shorts use all the available orange colors, and there are 6 shades of orange.  That means 6 new colors need to be added for the hair.

   Start by going into the sprites tab [picture], go to one of the characters sprites, and pop open the Advanced Palette Editor by clicking this button [picture].  You'll see the palette which looks something like this: [picture].  Click one of the empty black boxes, hold shift and click another empty box that's 5 boxes away.  This should highlight 6 boxes.  Now click on the gradient tool which looks like this [picture].  It'll ask you to input a start color and an end color.  It doesn't really matter what you choose, but try to pick something distinct from the existing colors just to make it easier to see what you're doing.  Once you've got the new color gradient added in, save the palette by clicking this button. [picture]
    
   Now go to the first of the characters sprite.  Don't worry about the portraits, or sparks or effects or anything for this part, just the actual character sprites.  Once your on the first sprite, open up the image editor by clicking this button: [picture].  Select the color swap brush by clicking on this [picture].  Now in fill the first column with the original orange color gradient and the second column with the new color gradient you added. [picture].  You can change the size of the brush using the slider bar [picture].

  From here what you're going to be doing is basically drawing with the brush over the hair to change all the orange to the new color you added.  As soon as you're finished, save the sprite and move to the next sprite.  You're going to have to do this for all of the characters sprites, so learning the shortcut keys for "save" and "next / previous sprite" is probably a
good idea.  
   
   Remember to save often, but that's basically the process.  You can imagine how far this could be taken if you really wanted to.  There are some links below that explain it differently or in more detail.

[spoiler=----------( Key Points & Resources]
___/ KEY POINTS
 •  The first step to color separation is adding in as many colors as the area you want to separate has.
 • Adding a gradient can be done using the Advanced Palette editors gradient tool.
 • Use the color swap brush in the image editor sprite by sprite with shortcut keys for quickest results.

___/ RESOURCES
 • Color Separation Tutorial by ___
[/spoiler]
- STAGE 3 COMPLETE -
[/spoiler]