Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

Newcomers AppGameKit Corner / Can I modify a sprite image's color?

Author
Message
Greenwich
4
Years of Service
User Offline
Joined: 10th Dec 2014
Location:
Posted: 29th Jan 2015 21:11 Edited at: 29th Jan 2015 21:14
I'm having trouble making an image "slightly bluer" or "slightly less blue" without ruining its alpha transparency.

Basically I need a sprite that changes color over time and eventually fades away. The sprite does not take up the entire square; it's a typical run-of-the-mill PNG 'outside the sprite shape is painted with the alpha transparent color' image.

For the sake of demonstrating my code, I'm including a generic explosion graphic, but the sprites I intend to eventually use this code on are a lot more complicated.

Direct/naive attempt:


Overlay code (mostly from Tone Dialer's SetSpriteColor example)


Also tried to use an image negative -- got the sprite to change color, but now its negative is opaque


That method could work if there was some way to "take the pixel by pixel alpha transparency settings from image A, and apply them to image B."

It's mean time. *averages*

Attachments

Login to view attachments
Greenwich
4
Years of Service
User Offline
Joined: 10th Dec 2014
Location:
Posted: 29th Jan 2015 21:15 Edited at: 29th Jan 2015 21:15
Here's the second image file for the last code snippet (attached)

It's mean time. *averages*

Attachments

Login to view attachments
BatVink
Moderator
16
Years of Service
User Offline
Joined: 4th Apr 2003
Location: Gods own County, UK
Posted: 30th Jan 2015 13:19 Edited at: 30th Jan 2015 13:20
I think the problem is an understanding of how RGB colours work.

Using your simple example, try this modified code, with the extra image attached in your media folder. It's a greyscale version of your original, and you'll see that it happily changes colour.



To make yellow into blue, you'll have to reduce the red and increase the blue. Increasing the blue only on your image will simply make it a paler shade of yellow.

Now run this example where your original boom turns blue. You'll see that I had to do some finetuning of all 3 channels to get it to turn.



Quidquid latine dictum sit, altum sonatur

Attachments

Login to view attachments
krid
4
Years of Service
User Offline
Joined: 2nd Dec 2014
Location: Almaty / Kazakhstan
Posted: 7th Feb 2015 13:13
@BatVink, is there any command to _replace_ sprite color to a different one?
Van B
Moderator
16
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 10th Feb 2015 10:50
There are a few options...

You could make a memblock from the image, and then scan through it, looking for a specifc RGBA value and replacing it. I've done this recently with a pixelation effect, as when you GET an image, often the alpha transparent parts show up as green - so I just set anything that is alpha transparent to black with the memblock right after converting from the grabbed image. This doesn't allow for smoothness though, only solid colours unless you do a bit of clever colour range checking instead.

You could use white sprites - any sprite should be regarded as being coloured with pure white, RGB(255,255,255) - that is what you see if you don't set a colour - in fact when setting a sprite colour, you can only ever decrease a colour element. So if your sprite is pure white, it can be set to any RGB colour, but if it uses colour, it can be very difficult to calculate an exact colour. So any sprite that needs to be coloured should be pure white, or at least as white as you can make it.

One other option would be to use a custom shader. Like, give a sprite 2 images, 1 standard detail texture and 1 colour texture (pure white) - then the colour 'layer' can be set to the RGB setting and the detail can be left untainted. This might be a good option for say, a sports game where each team has a set colour, but also details like body parts which shouldn't be coloured. So the shader would use the pixel from each texture but only apply the colour to 1 layer. I think this would give the most control, as other visual aspects like lighting can be considered and the shader itself would be fairly straightforward. Memblock changes can be slow, and direct sprite colouring can be difficult or even impossible to get exact - I'd probably go for a shader technique myself.

I am the one who knocks...
paulrobson
4
Years of Service
User Offline
Joined: 22nd Nov 2014
Location: Norfolk, England
Posted: 10th Feb 2015 12:36
You could also make your sports player from a stack of sprites - one for each part that needs colouring, and one for the rest (means you can't use physics). I wrote some code like this once where there was a stack of 4 or 5 graphics for each player and you could manipulate them to give it a perspective look, it worked quite well. (think Kick off or sensible soccer look).

The best way to do RGB manipulation is to tinker with it, tbh.
Van B
Moderator
16
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 10th Feb 2015 16:06
Yeah, I did something similar in AGKv1 a while ago - just a little top down football game test, but I used 6 sprites - seperate sprites for the head, body, and each hand and foot, then animated it with code. I used physics collision on the body and disabled it on the other limbs. Worked out pretty cool, a bit like sensible soccer meets Rayman or something. That is one good method if your no good at 2D animation, because you can get fluent, dynamic movements with code instead. For example I leave one foot on the ground when running, so it kinda sticks there and acts as a pivot, it looks great with inertia, especially when you sharply turn a corner and the little feet have to try and keep up. I will finish that football game someday!

I guess that method makes it easy to have different skin tones as well as shirt colours, as each limb can be coloured however is needed.

I am the one who knocks...
Greenwich
4
Years of Service
User Offline
Joined: 10th Dec 2014
Location:
Posted: 11th Feb 2015 04:39
Oops, I see I never hopped back in here to say thank you -- why didn't I think to start with a grayscale image?

Ultimately, though, I figured out that I wanted something slightly different. In the interest of sharing useful stuff, here's a working demo of the solution I implemented. I like it because I don't need to have a second version of the sprite, and I can apply the same effect to any sprite... but I do get the feeling that I'd be able to create a much simpler solution if I understood what a 'shader' is. (Currently reading up on that.)

The only things necessary are a solid color square block image for each color you want to overlay. I used red/green/blue here for the demo but used custom colors for my implementation. (In fact, I used more complicated pictures, like a tye-dye image.)

This is basically a SetImageMask() example.



Hope somebody has some fun messing around with this. At some point I might clean it up a little and then submit it to the AGK Help for SetImageMask(). If anyone wants to do that, please do.

It's mean time. *averages*

Attachments

Login to view attachments

Login to post a reply

Server time is: 2019-06-16 04:35:51
Your offset time is: 2019-06-16 04:35:51