next »

[thomasmahler]

Hey guys,

Just a general inquiry here - have any of you ever worked on a pixelArt game where you could customize your character? If so, how did you go about it?

It's relatively easy to let the player adjust which pixels of the character have which color. One thing that becomes much harder is to let the player get more and more new weapons, items, etc.

You could always do that the 'oldSchool' way where you simply repaint all the characters, every single set and adjust it to have this or that weapon now, but this becomes a huge pain in the arse if you'd allow player to mix certain items, like the player sprite wearing a hat and a sword vs. the player wearing a helmet and a sword.

I'm guessing there's no really smart / clever way to do this, but I thought we could brainstorm a little bit. Would love to hear some feedback on that topic!

[Richard Kain]

An easier, but more complex, way of handling this would be to construct the basic characters from more than one component. This would be especially necessary for weapons and accessories.

There is actually more than one approach you could take. You could separate out the interchangeable components in your source graphics, and then draw each various component into the same sprite. For that approach you would probably need a larger-than-average sprite to accommodate the various permutations. The other approach would be to construct your characters from multiple sprites.

[Moczan]

Yep, building from handful of pre-made graphics is the way to go. Pre-rendering all possible combinations is a serious overkill, each time you add new items you have to create more and more assets, so it will quickly overwhelm you.

[Armageddon]

There is a DS game called Drawn To Life where they lat you draw each piece of the character, the body, arm, legs, ect. And then they take the squares you drew in and animated them like you would animate a 3D model of flat planes. Pretty interesting but really restricts animation.

[thomasmahler]

Just thought I could post this here since I had quite a bit of fun tonight Referenced how some other people make their pixelart and took it from there.



Been working on a simple prototype of a 2d dwarf-based game some time ago (it's actually still online: http://www.warsoup.com/builds/sein/cavedwarfs.html) and always wondered what the best style for this could be and how the customization part could be properly done.

I'd probably set it all up in 3d where all the planes are rigged. You'd still have to paint stuff for every single asset, but at least you could separate things to save time. Like you could have an actionPose that one could use for all the swords in the game and then just have all the swords with their attackingAnims as separate files.

I'm no pixel artist, but I really enjoyed building those little chars. They're cute.

[baconman]

It starts with basic, naked figures; and then is layered with the other articles. The downside of this approach is that it makes player characters look and feel kind of generic/static, unless you use an assortment of figures, and even still, each set of assets would have to be adjusted to reflect the different model types.

[Fegon]

The wonderboy sprite was my firt thought as well. The robots in the first front mission game is also a good example. Think layers is my tip.

[In-Qu Games]

This may not be the best way, but I tried making a "naked" template character and simply would render layers of clothing onto it (that were made off the template so they sprites would fit together) and the clothes depended on what the player equipped.  The player could choose the skin tone of the template, but everything else was decided by equipment.

[VortexCortex]

Hmm, I'm new to this board, so I apologize if this is considered a necropost.  I didn't see a time threshold listed anywhere to indicate when you consider a topic necrotic... it was still on the first page so, I'm guessing it's fair game.

I was asked this very same question earlier today, so I guess I'll give my input here too in case anyone finds it useful.

have any of you ever worked on a pixelArt game where you could customize your character? If so, how did you go about it?

It's relatively easy to let the player adjust which pixels of the character have which color. One thing that becomes much harder is to let the player get more and more new weapons, items, etc.
...
I'm guessing there's no really smart / clever way to do this, but I thought we could brainstorm a little bit. Would love to hear some feedback on that topic!

I used Color Combine Operations.



Essentially, you make the regions that are to be recolor-able in gray-scale.  Separate each component of the item that's customizable -- you can have one "base" image that's not got customizable parts if you want too.

Now, as you render the sprite: Just multiply the correct user selected color with the component.

If you're writing the code manually, just take each channel value, scale it between One and Zero then multiply it by the user selected color and store the result.

Code:

result[x][y].r = ( input[x][y].r / 255.f ) * userSelected.r;   // Note the float
result[x][y].g = ( input[x][y].g / 255.f ) * userSelected.g;   // promotion in
result[x][y].b = ( input[x][y].b / 255.f ) * userSelecetd.b;   // the division.

(OpenGL and DirectX both have blend modes that can do this for you...)

To speed things up, you can "pre-combine" the sprites once per player/avatar instead of each frame.

The multiply operation can be used to get other effects, like "warm sunny" or "cool night" effects by using color ranges other than grayscale in the input.

There are various alternate strategies for combining the colors. Eg: Instead of separate component grayscale images, you can use a single base grayscale image, and use a mask to select which pixels receive which custom color.

Additionally, you can use the same technique with different base images to dynamically switch between "in the shade" or "washed out in the sun", or use different operations to do other effects: like a final addition pass to make things like faux specular highlights, or little glowing lights. (see also: lightmapping)

Here's a GIMP image using the multiply layer feature to help illustrate the effect.  Draw in the "head color" layer to play with the effect.

OK, I'm assuming most folk knew that much already, so now to address the increasing complexity issue in a "smart / clever way":  Regions that can be re-colored are designated as a class of color.

To simplify things you can have a set number of "custom color classes".

What worked for me was to have three classes of colors: Primary, Secondary, Detail.
Each type of sprite could have 3 unique colors.  So, a user could pick three colors for the head, and three different colors for a body, three other colors for the main weapon, etc.

When creating the assets I assigned different areas of the images to one of the three color classes.   This way, if the user selected a different gun, or different head, the colors would be applied automatically in their selected color motif.  The "primary" color of one head is used as the "primary" color on a different head.

For easy mode coloring players could pick a color class, and select a color from a swatch, to apply the color it to every component class at once.  However, if you wanted to get crazy about it, each item in the player's inventory could have it's own editable "color set" -- It's just 3 additional RGB values per item.

TL;DR: Color Classes.  One set of assets.  Tons of Custom Colors.  It doesn't get much better that that.