Character Customization Idea

[Cyborg_Ean]

I have this idea for creating a character customization system.  The system would be implemented as follows.

1) Organize a base template sprite sheet with character components arranged in a composition for future compositing. Example:

Lets assume a full body template for a characters design is 125 by 125 consisting of  head, body, and leg components.  The head component of the character would use 25 pixels and would be isolated on separate parts of the sprite sheet that occupies the respective pixels while the rest of the 100/125 pixels are blank.  The same would be done for the body and leg components.

2) Bind the components together via some sort of linked list or maybe even graph based implementation.

I'm still learning about graphs and am thinking they're best for this system given compositing more complex sprite sheets will involve layers.  Any advised implementations or any kind of information on graphs associated with player creation systems is highly appreciated.  I think this is a great opportunity to practice graphs.

3) Next there will be an interface that allows the player to choose the color and textures of each of these components.  The player will confirm and submit their design when finished.

Now that the player has submitted their design, I'm a bit puzzled about the next step and have a few ideas on composing the data.

4a) Use Phaser api to turn the data into bitmaps? I don't know much about this implementation yet since I'm still learning how to utilize bitmaps and how Phaser handles bitmaps

4b) Composite the items on a canvas and store it in a uri using the canvas to url method.  I also lack experience with api but I definitely can see how it would work.

5) Ideally I'll save the data to a database and retrieve them via player credentials.

I'm not sure if I'm over complicating things or not so any feedback would be appreciated.  I use Phaser but any html5 based idea or solution should be fine.

[Nesh108]

Heya @Cyborg_Ean, I am also looking into character customization, so maybe we can bump ideas off each other!

Anyway, I read your implementation and, to me, it sounds a bit over engineered. Here is what I am thinking of doing:

1. Build sprites for each part with similar constraints or rules (this heavily depends on your character but for example, say that the hair needs to attach always at the same location).
2. Load the sprites for each part into an array.
3. Initially test with just 1 set and fix the position of each part (e.g. `makeCharacter(hair[0], face[0], hands[0], chest[0], legs[0])` )
4. Setup a system of buttons for switching the index of each part and then reload the character.
5. After the player confirmed, save the indices of the chosen parts and either:
  5.1: Merge into 1 sprite and work with that (this means that there is no complex skeleton and you have to rebuild the sprite whenever the player updates the character)
  5.2: Keep using the indices when showing the character (good for using a skeleton system which takes in consideration of each part)

What do you think?

 

[Arcanorum]

Sadly there isn't a straight forward way of generating a spritesheet or atlas from other images in Phaser without messing around with modifying bitmap datas and having to define your own atlas.

[piotr]

Anyone has been successful with any of those implementations and can post some code, please? 

[Luminous Wizard]

On 6/18/2017 at 2:56 AM, Arcanorum said:

Sadly there isn't a straight forward way of generating a spritesheet or atlas from other images in Phaser without messing around with modifying bitmap datas and having to define your own atlas.

This is probably the way to go, I'm not that familiar with Phaser, but I am currently using GameMaker and doing something quite similar when customizing a character.

 

We have base sprites, and separate sprites for each customization item, and based on what the user picks, there are multiple variables storing one for each state and these are just drawn on top of the base sprite as mentioned above.

[Janjua]

Were you ever able to pull this off?

 

[Cyborg_Ean]

@Nesh108 @Janjua @piobug @Luminous Wizard @Arcanorum

Hi! Sorry for the super late response! I had worked on this around the same I post this forum but discontinued not too long after.  I'll be doing it again but with Spine in mind.  It seems to me the way you model the customizable parts is by far the most important aspect of designing a system so I'll be building this again with assets created (or animated) with Spine. 

As far as the bit that I'd done, you can see an example and repository below, I'm certainly up to discuss more details if anyone is curious about anything.  This example mostly consists of a UI, but the data structures used to create the UI are synonymous with how the playable character would be constructed.

Example
Repository

[BrendaStokes]

Hello. I study 2D and 3D modeling and often work with Clickteam Fusion and Unreal Engine. I'm new to this, but I want to continue to develop in this area and eventually create something of my own. I also draw well and create characters according to my idea. I started working on my character. And I wanted to ask you: is the size of the character less than 125 by 125 allowed at your points?