Game Gardens Forums - View Thread - How to Recolor images

Home | About | Account | Forums | Games

Guest | Login

| View Unanswered Threads

Forums » List all forums » Forum: Tutorials and Help » Thread: How to Recolor images

Thread Status: Normal
Forum Status: Locked
Total posts in this thread: 8

[Add To My Favorites] [Watch this Thread]

Author

This topic has been viewed 3691 times and has 7 replies

Kiv
Stranger

Joined: Jan 22, 2005
Posts: 9
Status: Offline

How to Recolor images

Hi, I am writing a stone-laying game based on Pente. The game works (yay!) but is pretty ugly at the moment. So, I want to allow players to be able to choose the color of their stones, ie from a dropdown menu in-game.

It looks like the recolorable resources in Puzzle Pirates (bludgeons, for example) are just PNGs with red, green, and magenta as placeholder colors for the player-chosen colors. I can produce images with the placeholder colors in them, but how do I get the Java code to do the substitution?

Any help would be greatly appreciated! ^_^

- Kiv of Viridian

[Apr 25, 2008 7:50:07 PM]

[Link]

aduros
Newbie

Joined: May 2, 2007
Posts: 32
Status: Offline

Re: How to Recolor images

Hi Kiv,

I had exactly the same thing in Scribble to color the crayons.

Check out the source for an implementation of that, in CrayonSprite.colorize() and the ScribbleBoardView constructor. As far I know, that's a sound way of doing it. Also, take a look at the ImageUtil.recolorImage() docs: http://www.threerings.net/code/nenya/docs/api/com/threerings/media/image/ImageUtil.html

I hope this helps, looking forward to seeing your game!

[Apr 27, 2008 10:58:22 AM]

[Link]

Kiv
Stranger

Joined: Jan 22, 2005
Posts: 9
Status: Offline

Re: How to Recolor images

Hi Aduros,

Thanks for the replying, that was very helpful! I figured out how to recolor my images right away by using the docs and your source, but then ran into another snag trying to slot it all into the framework.

Right now the images for the two players are stored in an array in my BoardView, and initialized using _ctx.loadImage() in the BoardView constructor.

But now I need to propagate changes in the images to the other client; does this mean I have to move the image array into the GameObject? I tried doing that but then I have no access to the ToyBoxContext needed to load the images. And I can't keep loading them in the BoardView constructor because the GameObject is null at that point.

P.S.: my first version of the game is uploaded now, under the name Five (didn't want to infringe on any trademarks).

[Apr 29, 2008 1:03:58 PM]

[Link]

tcarr
Advanced Member

Joined: Jun 3, 2004
Posts: 362
Status: Offline

Re: How to Recolor images

If you can make a message of some kind that would tell the other client(s) how to modify the image, then you don't need to actually pass the image to the game object, just the message. For example, if you were changing the tiles one at a time, then you would likely have a DSet in the GameObject that consisted of Tile objects, with each Tile object having a position code and a color code. You don't put the actual images into the GameObject, just an abstraction of them.

If your players are taking turns and you don't care about watchers, then you could get away with a single position code and color code being added to the game object. When those change, the other player updates that particular tile to the given color.

[Apr 29, 2008 9:39:24 PM]

[Link]

Kiv
Stranger

Joined: Jan 22, 2005
Posts: 9
Status: Offline

Re: How to Recolor images

Great, thanks tcarr!

Following your method makes a lot more sense, and it worked wonderfully. Everything is swimming along until the very end, when I have to pass parameters into the recolor method...

I have the RGB values that the user picked from the color picker dialog, and I converted those to HSB. My root color is red.

But I'm not sure what to specify for the dists and offsets arguments to recolorImage(). I tried using the same code as yours, but I end up getting the inverse of the color I chose; for example if I choose yellow they turn purple, or choosing green they turn blue.

Also, I'm confused about why in Scribble (the colorize() method), you subtracted one from the saturation and brightness. This makes them negative, which decreases those values in the original image?

Here is my code excerpt:


private void recolorPieceImages(float[] HSB) {
  HSB[1] -= 1;
  HSB[2] -= 1;
  float[] dists = {0.1f, 1, 1};
  _image[0] = ImageUtil.recolorImage(defaultImage, Color.RED, dists, HSB);

[May 2, 2008 7:29:12 PM]

[Link]

Kiv
Stranger

Joined: Jan 22, 2005
Posts: 9
Status: Offline

Re: How to Recolor images

Enh, I got frustrated and decided to just upload it with some canned preset colors instead. Thanks anyway, everyone ^_^

[May 3, 2008 8:46:20 AM]

[Link]

aduros
Newbie

Joined: May 2, 2007
Posts: 32
Status: Offline

Re: How to Recolor images

Don't give up yet, it sounds like you've almost got it working!

I have the RGB values that the user picked from the color picker dialog, and I converted those to HSB. My root color is red.

But I'm not sure what to specify for the dists and offsets arguments to recolorImage(). I tried using the same code as yours, but I end up getting the inverse of the color I chose; for example if I choose yellow they turn purple, or choosing green they turn blue.

How exactly are you getting your HSV values? It sounds kind of like your Green and Blue channels have been swapped.

Also, I'm confused about why in Scribble (the colorize() method), you subtracted one from the saturation and brightness. This makes them negative, which decreases those values in the original image?

Red (Your root color) has an S and V of 1.0, so to get from the root S/V to your target S/V you need to make your offset = target S/V - 1.

New S/V = Root S/V + offset
New S/V = Root S/V + (Target S/V - 1)
New S/V = 1 + (Target S/V - 1)
New S/V = Target S/V

(And red's H value is zero, so you don't need to mess with the offset for that channel)

Hope this helps,

[May 3, 2008 4:08:58 PM]

[Link]

Kiv
Stranger

Joined: Jan 22, 2005
Posts: 9
Status: Offline

Re: How to Recolor images

It sounds kind of like your Green and Blue channels have been swapped.

Wow, that is exactly what was wrong! What a silly typo in my code, don't I feel like an idiot now ^_^

With that fixed, it now works perfectly. Thanks again for your help!

[May 3, 2008 5:12:39 PM]

[Link]

[Show Printable Version of Thread]