Advertisement

Item sprite creation

Started by May 13, 2011 09:15 PM
3 comments, last by Kryzon 13 years, 8 months ago
I've recently been working on some assets for a game I will be developing in the future, and in that library of assets are sprites and items. I'm at a loss as to how to draw the items, and then implement them into the player sprites. Here's my question: Which of the following methods of displaying an item on a character would be best/most efficient to use?

A. Say I have one player sprite, in the left pose, right pose, jumping pose, walking left pose, and walking right pose. I take each individual sprite image, and draw that specific item on top of the sprite, and then save that as a new file each time. Then when a player equips the item, the game will change the current player sprite set to the sprite set with the item drawn on it.

B. Find a way to superimpose the item in a certain position on TOP of whatever player sprite is displayed. (I don't know how to do this, if this WOULD be a good way, please let me know how)

C. Some totally other way. (I'm new to this, so don't hesitate to contribute any information you think would be worthwhile.)

Thanks!
You use a third-party image manipulation tool such as Image Magick to automatically flatten the layers of transparent pngs (1 layer per item, 1 for the base) whenever the player finishes changing equipment around. Save the flattened new sprite as a temp file and use it for the player until the next time they change equipment. However if there are only a small number of items equippable per sprite (1-3) you can animate the image sprite over top of and synchronized with the character sprite.

I want to help design a "sandpark" MMO. Optional interactive story with quests and deeply characterized NPCs, plus sandbox elements like player-craftable housing and lots of other crafting. If you are starting a design of this type, please PM me. I also love pet-breeding games.

Advertisement

You use a third-party image manipulation tool such as Image Magick to automatically flatten the layers of transparent pngs (1 layer per item, 1 for the base) whenever the player finishes changing equipment around. Save the flattened new sprite as a temp file and use it for the player until the next time they change equipment. However if there are only a small number of items equippable per sprite (1-3) you can animate the image sprite over top of and synchronized with the character sprite.



Thank you for that, although, I cannot presume to completely comprehend what you said. While I am fairly experienced in technological matters, quite a bit of that went over my head. I apologize for not immediately understanding, but do you think it would be possible to lay that out in "laymans terms", so to speak?

I didn't quite understand: flattening the .pngs, and saving the temp file.

Well, do you know what layers are in a graphics program like photoshop or gimp? Each layer in one of those is basically equivalent to a transparent png (plus some extra junk like masks but that's irrelevant here). If you have two layers in a graphics program, or two transparent png files, you can "flatten" them into a single layer/file. This is done with some math - whenever a pixel on the upper layer is opaque, that pixel is retained in the flattened image. Whenever a pixel on the upper layer is transparent it is discarded and the one from the lower layer is retained instead. It gets a bit complicated if there is translucency. It is a "solved problem" in graphics programming and has been for years. You could probably look up how it's done if you wanted to re-implement it, but it makes more sense to use one of several utilities that are already available to do this.

Basically, you have a transparent png file with the character sprite running around naked, and you have another transparent png file of the same size with one piece of clothing or equipment in all poses. Then you squish them into a new sprite file which has the character running around clothed. You can do this with any arbitrary number of items, you just have to know what order they should go in from top to bottom (this is usually indicated by giving each item an id number, and items stack with highest number on top, lowest on the bottom (lowest would be the character sprite or a custom background or layer of hair/wings/tail that goes beneath the character). In a more complex system you can have items made out of multiple layers, like a hairstyle can be made out of part that goes behind the head and part that goes in front of the head.

A temp file is just a file you intend to overwrite later. If you're thinking in terms of a game which will be available in a hard format like cd/dvd/cartridge a temp file is one which is not contained on the media, instead it is generated after the player starts the game and stored either in a save file or in RAM while the game is running.

I want to help design a "sandpark" MMO. Optional interactive story with quests and deeply characterized NPCs, plus sandbox elements like player-craftable housing and lots of other crafting. If you are starting a design of this type, please PM me. I also love pet-breeding games.

The way you choose depends on the visual style of the sprites you're using.

Are they big, flat and\or vectorized, or are they  highly textured, pixelated and complex-looking like the ones from SNES RPG games?

Basically, it'll come to two ways:

  • Have an animated item graphic that you animate in position, rotation and scale in relation to the current frame your character has. This fits best with vectorized graphics. Note there are two different properties here: the actual graphic that is displayed and its pivot, its "axis" or whatever is used to handle this as a sprite in your game engine. If you can manage to animate this sprite's pivot and its graphic at the same time, you can overlay this sprite with your character and make it look like he's holding it even though they are separate.
  • Paint the items and all variations in the character's animation-strips. In my opinion, it looks the best, and you can resort to special optimizations that are hard to implement but pay off in the long-term. Refer to that "SNES RPG sprite sheet" I posted above, as this method fits better with this style of pixel-art graphics. You can see that certain frames only have the arms of the character because they are the only parts that move. If you can manage to have this sort of layered-sprite-building then you can have an animated item be overlayed (and in sync with the animation) into your character and make it look like he's really holding it. This works even if your character's body is fully animated (say, a very expressive running animation): you paint the entire character holding the item, then cut away the item's pixels and paste them into a different animation-strip. The item will certainly look strange since it's a bunch of pixels scattered around the frame since it's missing a body holding it, but when this is overlayed back on top of the character while in-game, it'll get the original visual back and both sprites will look like they belong together, as one.

    You'll need to test a lot the workflow until you get the hang of either methods.

This topic is closed to new replies.

Advertisement