Character Customization Idea

Recommended Posts

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.

Share this post

Link to post
Share on other sites

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

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?


Share this post

Link to post
Share on other sites
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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.