• [2018/06/22]
    By using our forums, and our in-game services, you agree to be bound by our Privacy Policy found here:
    skullgirlsmobile.com/privacy

Custom Sprites for the Palette Editor

Krazete

Active Member
Joined
Nov 23, 2018
Messages
72
Reaction score
200
Points
33
Age
27
I figured out a method of making palette files (sprites readable by the Palette Editor) from normal sprites a while ago, around the time Annie was announced. It's about time I make use of that process.

The Palette File Pipeline
sgmpalette (1) (1).png
1. Choose a raw image (raw.png).
2. From the raw image, create the linework layer (line.png). Use the brush tool or the magic wand tool with anti-aliasing turned on. Only the alpha channel matters here, so make sure that's clean.
3. From the raw image, create the base color layer (base.png). Hard edges are required. Use the pencil tool and turn off anti-aliasing and feathering for other tools.
4. From the base color layer, create the color area layer (area.png). Hard edges are required. Encode color IDs in the red channel. The green, blue, and alpha channels can be any value.
5. Run create_sprite.py and upload the result to the SGM Palette Editor. Or, if you're not me, submit the above layers (raw.png, line.png, base.png, and area.png) in a reply to this post and let me do this step.

Here's are some sample files of sprites I've converted: Google Drive Folder

Step 4 requires a bit of coordination since all sprites of a single character would need the same color areas and the same color IDs.
For existing characters, you can go to the Palette Editor to see official color areas and click those areas to see official color IDs in the sidebar.
5.2.0 update: Apparently, the official color IDs are liable to change. So I guess it's not important to stay consistent with them in your submissions.
See this reply for more help with step 4.

An example submission is in the first comment on this post.
 

Attachments

  • colorareas.png
    colorareas.png
    155.7 KB · Views: 144
Last edited:

Krazete

Active Member
Joined
Nov 23, 2018
Messages
72
Reaction score
200
Points
33
Age
27
Character: Umbrella
Layers:
raw.pngline.pngbase.pngarea.png
Color Areas/IDs:
10 hat top
11 hat brim
20 hair
30 face
31 blush
32 eye white
33 eye pupil
35 hand
36 leg
40 raincoat button
41 raincoat drawstring
42 raincoat drawstring cordlock
50 raincoat body
51 raincoat upper arm
52 raincoat lower arm
53 raincoat collar
60 boot top
61 boot bottom
80 hungern mouth
81 hungern teeth
90 hungern bone
91 hungern ligament
100 hungern body color 1
101 hungern body color 2
110 ice cream cone
111 ice cream bottom scoop
112 ice cream top scoop
 
Last edited:

Krazete

Active Member
Joined
Nov 23, 2018
Messages
72
Reaction score
200
Points
33
Age
27
Character: Molly
Layers:
raw.pngline.pngbase.pngarea.png
Color Areas/IDs:
10 hat top
11 hat bottom
12 hat circle
50 headset band
51 headset earpiece
52 headset mic arm
53 headset mic piece
54 headset mic
55 headset earpiece cover
70 face
71 neck
72 hands
73 glasses right
74 fingers
75 upper leg
76 lower leg
77 glasses left
80 neckerchief
81 collar
82 shoulder
83 arm
84 cuff
88 boobs
89 button
90 waist
91 hips
100 hair main
101 hair strand
102 hair back
 
Last edited:

Filiawithpainwheel

New Member
Joined
Jun 9, 2021
Messages
4
Reaction score
5
Points
3
Age
21
I have a question since I made a color pallette for umbrella and Molly. How can I submit my card?
 

Krazete

Active Member
Joined
Nov 23, 2018
Messages
72
Reaction score
200
Points
33
Age
27
it's so much more difficult creating a palette sprite from a low-quality screenshot
Character: Black Dahlia
Layers:
 

Attachments

  • area.png
    area.png
    22.8 KB · Views: 11
  • base.png
    base.png
    20.5 KB · Views: 13
  • raw.png
    raw.png
    993.5 KB · Views: 16
  • line.png
    line.png
    341.9 KB · Views: 18

averii.X

New Member
Joined
Sep 9, 2021
Messages
4
Reaction score
10
Points
3
Age
20
I did line art and shading for this sprite if you'd like to add it, I don't know if you'd like me to color it or not since I'm not necesarily familiar with how all the color ids work-
11_peacock_1p.png
 

Attachments

  • paint-intro-peacock-sprite-line.png
    paint-intro-peacock-sprite-line.png
    88.5 KB · Views: 17
  • paint-intro-peacock-sprite-light.png
    paint-intro-peacock-sprite-light.png
    11.6 KB · Views: 10
  • paint-intro-peacock-sprite-shade-1.png
    paint-intro-peacock-sprite-shade-1.png
    69.5 KB · Views: 10
  • paint-intro-peacock-sprite-shade-2.png
    paint-intro-peacock-sprite-shade-2.png
    45.8 KB · Views: 12
Last edited:

Krazete

Active Member
Joined
Nov 23, 2018
Messages
72
Reaction score
200
Points
33
Age
27
I did line art and shading for this sprite if you'd like to add it, I don't know if you'd like me to color it or not since I'm not necesarily familiar with how all the color ids work-

Interesting submission. You're allowed to submit Highlights and Shadows instead of a single Base Colors layer, although my create_sprite.py script will process that differently. I wonder how it'll turn out.

However, a Color IDs layer is still necessary. I'll try to explain how to make it.

You need to use the Palette Editor as a reference. When you click an area on a sprite, the sidebar will show you the corresponding color ID (the circled number on the left).
Screen Shot 2022-06-07 at 1.23.19 AM.png
In this example, the main hat part has a color ID of 2.

In your custom sprite, you have to match these color areas via the red channel.
Screen Shot 2022-06-07 at 1.11.33 AM (2) 2.png
So in your Color IDs layer, the main hat part should be colored something like (2,0,0) or (2,255,255) or (2,155,89) or (2,33,44). The main hat part must have R=2; G and B can be any number.

You'll need to do this for all color areas in your custom sprite.

Also remember to turn off feathering and antialiasing and any other source of blur. Color IDs require precise numbers, so hard/crisp edges are necessary.
New Project (1).png
 
  • Like
Reactions: Pit Frango