Indie-Resource.com

Good evening gentlemen of the I-R, I am in a small conundrum for my upcoming project and was wondering if any of your fine folks would share how you would tackle this obstacle.

I am creating a PHP based PBBG but would like to have a visual representation of each individual user characters with the option to change faces, hair color, clothing, etc. all the while communicating with the main database. I know 2D and 3D makes a completely difference and would dictate the direction I should go but I'm still unsure as to which would fit best and can be scaled easily with new items. I can make 2D sprites or even render out 3D characters in Blender if I have to so I'm not really limited in that area.

I'm overall just curious as to how you all would approach this subject. HTML5? Unity3D? Flash?

Just something fun to add on to the few static images and text we all love in our games.

Bonus points for anyone that can give example games doing something similar. Maybe I could ask the developer. lol

For a web game, 2D would be the most flexible. Just like in a traditional, animated 2D game, you can layer sprites on top of each other to provide almost infinite levels of customization. Of course, in a full 3D game, you do basically the same thing since you are layering hair, accessory and other item models on top of your base character as well as adjusting the texture for different clothing and effects. But since you would have to pre-render all 3D models into sprites to use them in a PBBG, this would either mean you would need serious limitations on customization, such as only allowing one item on the character to be customized, or prepare to have an absolutely massive amount of sprites with various combinations of items on them.

For example, say you allow players to select a headpiece. And say you only offer 8 of them (which is hardly even enough to be worth mentioning in an MMO). Not bad on its own, as that would just be 8 different sprites. But now say you can also customize their shirt, and there are 8 versions of that as well. You now need 64 different pre-rendered 3D sprites, since each hat must be paired with each shirt. Now add in 8 different pairs of pants and we are looking at 512 different pre-rendered 3D character sprites! Add in weapons, and you are now looking at a pretty impossible amount of work to make all the sprites, and 8 items for each slot is not typical for a PBBG. Instead we are usually looking at more like 100 or more!

Of course, it may be possible to try layering the pre-rendered 3D items on the characters just the same way you would do with the 2D art. However, it would be no doubt much harder to get a satisfactory look due to more detail being in the 3D models, more complexity in the animations dealing with actual spacial emulation, etc. The "flatness" of 2D characters lend themselves much better to the layering method.

As far as game examples, essentially any 2D game with hundreds of different items and customizations uses the layering technique. One specifically that uses it is Ragnarok Online. It is an odd example since the game world is 3D and the characters are 2D

Excellent insight Jack! Greatly appreciate it!

I'd like to go the 2D route more than likely but still am stumped with the best way to layer the sprites.

Just use divs stacked on each other. Make them relative to a surrounding div so that screen size does not affect the position of the inner divs.

To work on your layered items, you will most definitely need a pixel-art package that supports layers. Photoshop or GIMP would work. That way you can import in your base character, lock that layer, draw in the items, clothing, etc. into another layer, and then save the item layer as its own file. If you end up using pre-existing art assets, you can still use this same process, but instead of drawing items onto their own layer, you would just import them into their own layer and then do tiny scaling, translation, etc. adjustments to get them where and how you need them.