Jump to content
  • Advertisement
Sign in to follow this  
Kaez

2D Component-based Character Graphics

This topic is 3670 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

Hey folks, first post ever so be gentle :) I'm trying to develop a 2D game similar to MapleStory in terms of the component-based equipment system and graphics (MapleStory is a platformer in case you're not familiar with it). To get some ideas, I've been playing around with MapleSim.com since it uses graphics and animation from the actual game. What I absolutely cannot figure out is how they render a character that could have 5 or more different types of equipment. At first I just assumed it was simple layering but then I realized that it's more complex than that. For example, a character holding a surfboard would need to have his body drawn, then his board drawn, then his arm (just the portion covering the board) would need to be drawn to show it holding the board under his arm. This means his body would actually have to be broken into 2 images since his main body and his arm would be drawn before and after the surfboard respectively. This all has to be done differently for each frame of every animation for every piece of equipment. Given that scenario, if there were 10 animations with 3 frames, it would require 10 x 3 x 2 images (not including the board) just to draw his body and the arm piece covering the surfboard. That's 60 images right there. When you consider there could be 5 or more pieces of equipment being worn by the character, the number quickly jumps to many thousands of combinations just for a few items. MapleStory has thousands of items meaning a ridiculous number of images would be required to create the "pieces" needed to render character equipment. Anyhow, I'm assuming there's some technique they use to accomplish this since obviously they don't have billions of tiny little images being pieced together...or maybe they do and I'm just not getting it. Even something like Ultima would have to do this. How the heck do they do it?!? I have searched for about a week now and haven't found anything that talks about component-based equipment graphics. Does anyone have any clue how they do it or any advice on how to create a renderer that could do that? Keep in mind, even though it's layered, certain "pieces" of certain layers may need to be rendered above or below another "piece" of a layer. Sorry for the long post but I find it very difficult to explain this. Thanks anyone who can help!!! K.

Share this post


Link to post
Share on other sites
Advertisement
When it comes to 2D sprites, there really isn't any other way than to draw every single possible frame. look at a game like diablo 2, there is actually an image for every possible weapon combination with ever possible armor combonation along with ever action possible.

You might be able to find a way to split the character up into different parts, and then just draw the kind of armor of the right parts, still you'll need to make the armor for every possible frame, and the more characters you have the more the amount of art multiplies.

Share this post


Link to post
Share on other sites
I was worried someone might say that. I just can't imagine the crazy number of possibilities when you have the ability to change eyes, hair, hat, glasses, etc, etc, etc.

I suppose I'll just need to be as smart as possible with rendering. I was thinking of making each piece of equipment aware of it's own "parts" for rendering. I figure I'd just need to assign a sort order value to each "piece" so the renderer knows what order to draw everything in.

That way I could ensure the arm piece for a clothing object would always draw overtop the arm piece of a body object. I'm beginning to think it might be faster to develop a 2D skeletal system than it would be to create even a small number of graphics for this thing LOL.

K.

Share this post


Link to post
Share on other sites
No, Diablo2 doesn't have pre-made sprites for every equipment combination. What it does have, though, is a ton of animation frames for every piece of equipment so it can pick a matching animation frame for legs + armor + arms + head + shield + sword etc and they all fit together when drawn on top of each other in the right order.

clicky

Share this post


Link to post
Share on other sites
Quote:
Original post by Kaez
I was worried someone might say that. I just can't imagine the crazy number of possibilities when you have the ability to change eyes, hair, hat, glasses, etc, etc, etc.

I suppose I'll just need to be as smart as possible with rendering. I was thinking of making each piece of equipment aware of it's own "parts" for rendering. I figure I'd just need to assign a sort order value to each "piece" so the renderer knows what order to draw everything in.

That way I could ensure the arm piece for a clothing object would always draw overtop the arm piece of a body object. I'm beginning to think it might be faster to develop a 2D skeletal system than it would be to create even a small number of graphics for this thing LOL.

K.


Well remember you don't have to change colors manually if you are going to have a bunch of characters with different color eyes, hair, etc.

You can just setup masks, and use those to determine the color, so the sprites don't have to be hand-drawn for all the different color possibilites.

Share this post


Link to post
Share on other sites
To me it looks like they maintain reference points for every frame, and items like hats or eyes or weapons get moved relatively to the reference points. This is done all the time in 3D games - where you attach one model to another model, placing it in the skeleton hierarcy of the parent model.

This explains, for example, that eyes have their own separate animation (blinking), yet when the character's head bobs in response to animation the character is currently playing, eyes stay in their place.

Share this post


Link to post
Share on other sites
I recently found this article on creating your own rides for RollerCoaster Tycoon. It's sort of similar to what you want to do. RCT used offsets for positioning seperate images over a parent image i.e. riders on the ride. Same thing as armour on a character maybe? Might be useful to you too :)

http://ae.rctspace.com/tutorial/ch02.htm

Share this post


Link to post
Share on other sites
Thanks guys, this is all very helpful info. When I started building my engine I actually was using offsets and rotations for each layer similar to a scene graph approach but for 2D. Then one day I realized that I'd actually have some layers where it's above and below another layer at the same time.

If you're curious, check out www.maplesim.com and click on the simulator. It's a flash application but it has an option to "explode" a layer into sub-layers. If you do it you'll see they actually break each layer into sub-layers (not every single one but for several of them). It's bloody crazy to think of all the tiny little images that need to be drawn just to show a character holding something under their arm for example, or to show a hat where part is drawn over the head and part is drawn behind the head at the same time.

Anyhow, I think I'll have to find something that doesn't require a crap-ton of images and 20 draw calls per frame.

Very interesting article BTW, thanks :)

Share this post


Link to post
Share on other sites
It kind of explains why studios shifted from 2D to 3D. Why create a billion seperate combinations of sprites when you can just make one model and render it on the fly.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!