0
\$\begingroup\$

I am developing a text/image based rpg game with javascript.I have questions about how to handle wearable items on character.

Lets say that there are many(naked no item) character types(images)and there are many items.When a player equips a sword and a helmet,do i have to make images of all item combinations with all base character types import them into the game then check all of them with if elses then display correct picture on screen ? or is there any other way

\$\endgroup\$
0
3
\$\begingroup\$

When you make separate spritesheets for every possible combination, the number of art assets you need to create increases exponentially with the numbers of items in your game. This will soon becomes impossible to do.

The usual technique applied here is called paperdolling.

You create separate spritesheets for the "naked" character, one for each armor, each weapon and each headgear. These spritesheets only contain the mentioned object. All other pixels are transparent. Then at runtime when you draw all the sprites of the character one after another to create the composite character sprite.

This, of course, means that you can only share spritesheets between characters as long as they use the same animations.

As a performance optimization you can use a technique called "sprite batching". Create a new off-screen canvas for each character, blit all the spritesheets of that character onto it, and use that canvas as a source image for drawing the character in your render loop. That way drawing a character only requires one drawImage call and not an additional one for each piece of equipment.

\$\endgroup\$

Not the answer you're looking for? Browse other questions tagged or ask your own question.