I am making a Game in HTML5. In one part of it, I want the users to be able to customize the avatar they get by default.
For sample, let me share a screenshot from Zombie Lane on Facebook (now this game may not be in HTML5 but that’s not the point):
My question is as to how do I include the images in the HTML5 page and in which format?
Whenever a clothing is different shirt is selected, the change is applied immediately. Is it a whole new photo that we see, or is the photo changed somehow by programming? How is it done?
1
As you’ve already guessed, this can be done in several ways. There is no reason why this couldn’t be done with a single image for every possible combination, however, it quickly becomes very impractical to do it this way. More likely the individual components are thrown on top of the person in the correct location to make it look like the person is wearing that component.
If action poses are used throughout the game, then you must create an image for each action pose for each type of component. In other words, if in the game the character can be seen aiming a gun, you’d have to have a “white shirt relaxed” image as well as a “white shirt aiming gun pose” image.
Another approach is to physically render the component. By this I mean, using some sort of algorithm to calculate how the component is rendered. This could be a svg whose fill gets replaced by an image pattern according to how the user personalized the character. This is more flexible in that you don’t need to add a new image for each pose when adding a new personalization. You can simply add the new pattern and only the fill changes.
If you’re performing actual 2d/3d rendering, you can go even farther and do without the poses. You’d have a model that you’d transform into new positions smoothly, which allows for the most potential for animation, but it also requires the most amount of work.