Changing sprite colours for customization

Hello, I was wondering if there is an easy way to let the user define individual colours for different parts of the character in a terraria sort of way (Never actually played terraria but I've heard about it). I know I could just use a few preset colours for each different part and just have them stay together in game. Is there a way to keep my sprite in one image and change colours based on the different colours of the sprite? More importantly, is there a way to change the colour of a part using given modification values input by the user (In any colour format (so long as it works))?

Hi

I'm pretty new to this, but I also would like this feature in my game.

I made a practice game where all you do is pick character stuff, it's a work in progress. I've gotten to the first two hair styles.

dropbox.com/s/b5ucci68qtv2pp1/titlescreenpickhairmove.capx

I ended up making several animations for each item frame 1 is red, frame 2 is blue, etc and putting "select" buttons next to it and having the button scroll through the frames.

I think it's possible to set it up with the color choices as sprites, and then change the sprite effect hue to match the color.

For ex, you have a grid with 8 blocks, each one is a color sprite. When the user clicks sprite1, let's call it blue, the action would be hair -> set hue -> blue.

I'm going to try it that way, I'll let you know how it works out.

Please also share if you find something easier, colorizing them one by one and having the player scroll through is tedious to say the least.

Figured out a solution for this, it may not be perfect but it's the best I've come up with so far. Simply split the sprite down to the separate parts you want the colour control over then apply the AdjustHSL effect to all of them. Then you can affect the properties of the effect from the event sheets.

Example

Yeah doing it via WebGL is not great.

I think there is a convoluted path to do what you want via

base64 injection

but I have not done it myself (but wanted to)

tlarkworthy: what's the functional difference between this and loading from URL?

There are 2 reasons for using base64 string to load images in web apps.

1.

When a browser fetches an image from a URL, it does so asynchronously. A browser can have upto 6 asynchronous requests pending at the same time. So if you have 20 images (or .js dependancies) in a document, the last 14 will block until the first request is complete in a queue.

So people who *really* care about speed will encode the image data as a base 64 encoded string. This is about 30% larger than an image file, but it has the advantage of being able to be embedded within the HTML document, so no independent, potentially blocking, asynchronous request has to be issued.

So that't the mainstream reason why people use base64 strings with images.

2.

Because the browser can load an image from a string, it also provides the opportunity to programmatic generate the string and alter it. So you could write some JS that loads an image, changes the colors, serialises to base64 string, then inject into a sprite via a base64.

If you have lots of images derived from one base image, you can save a ton of bandwidth rather than encoding every color and making the user fetch every hue of image from an URL. (an images are the biggest bandwidth hog in web)

I have no clue whether this is a feasible strategy within construct 2 though, I am talking from experience writing normal web apps.