Infinite Character Customisation – Generating Random Costume Colours In Unity
One big issue that came up in our recent 4-player testing sessions was that it became difficult to distinguish which character was yours once the game play began to get hectic, if several people all chose to play the same character.
I’d already planned to implement a choice of several colour schemes for each character which could be switched between at the character select screen, however I decided to take this one step further and implement random costume colours at the touch of a single button, allowing players to mash Y until they come up with a colour scheme that catches their eye. This choice of colour carries over into the rest of the game, including the post game lobby and final game stats screen.
So here’s a quick writeup for how I did it, using Photoshop (or your choice of graphics editor), and Unity 5.
To start with, I split each character sheet into two, creating one showing only the characters skin, hair and any other elements which I wanted to retain their original colour, and a second sheet for the character’s clothes. I then fully desaturated the clothing layer, to give the colour shifting a greater effect.
This is a fairly arduous process, but can be sped up by using the following Magic Wand settings in Photoshop to quickly select all pixels of a single colour across an entire sheet:
Once each character sheet was divided, imported into Unity and sliced up to match the originals, I added a child object named clothesSprite to each character prefab to contain the clothing sprite, and edited the animations for each character to include changing this new sprite in time with the original character animations.
Now that this was complete, the game functioned and looked exactly how it did before, however I could now freely change the colour of the ‘clothesSprite’ Sprite Renderer component whilst only affecting the clothing colour. The next step was to add in a simple bit of scripting to generate a new random colour every time the player pressed a button during character selection (in this case it’s the Y button).
The code is fairly straightforward, it generates a random value for each of the three colour channels, creates a new colour with these chosen values and stores it, and finally applies the new colour to the image renderer. One thing to note is that while the in-editor range for each channel is 0 to 255, in script the value is normalised, and so you have to use a range of 0.0 to 1.0. By expanding the range you can generate more dramatic colour changes, however I found in our case a range of 0.3 to 1.0 was the sweet spot.
Once the game progresses from character selection to the main loop, the colours for each character are stored in a global array, which is accessed upon the initial execution of the game loop to apply each player’s chosen colour to their character. This process is repeated at both the post-game lobby, and the final game over score screen.
And here’s the final result! Each character slot (apart from the first one) initiates by generating a random colour to start, so even when players join in with character already chosen by somebody else, they’re visually distinguishable, and they can then generate a new colour until they settle on something they’re happy with.
By Harry Ryder