Can I modify a sprite image's color?

Author

Message

Greenwich

9

Years of Service

User Offline

Joined: 10th Dec 2014

Location:

Posted: 29th Jan 2015 21:11 Edited at: 29th Jan 2015 21:14

Link

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:

+ Code Snippet

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

ResetTimer()

Boomer = CreateSprite(LoadImage("boom.png"))
SetSpriteSize(Boomer,50,50)
SetSpritePosition(Boomer,200,200)

Do
    For i=0 to 255
        SetSpriteColorBlue(Boomer,i)
        Sync()
    Next i
    If Timer()>15 Then Exit
Loop
End

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

+ Code Snippet

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

ResetTimer()

Boomer = CreateSprite(LoadImage("boom.png"))
SetSpriteSize(Boomer,50,50)
SetSpritePosition(Boomer,200,200)

id=CreateSprite(0)
SetSpriteSize(id,50,50)
SetSpritePosition(id,200,200)
SetSpriteColor(id,0,0,0,255)
SetSpriteColorAlpha(id,128)

Do
    For i=0 to 255
        SetSpriteColorBlue(id,i)
		SetSpriteColorAlpha(id,128)
        Sync()
    Next i
    If Timer()>15 Then Exit
Loop
End

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

+ Code Snippet

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

ResetTimer()

id=CreateSprite(0)
SetSpriteSize(id,256,256)
SetSpritePosition(id,200,200)
SetSpriteColor(id,0,0,0,255)
SetSpriteColorAlpha(id,255)

BoomerUnderlay = CreateSprite(LoadImage("boom_negative.png"))
SetSpriteSize(BoomerUnderlay,256,256)
SetSpritePosition(BoomerUnderlay,200,200)

Boomer = CreateSprite(LoadImage("boom.png"))
SetSpriteSize(Boomer,256,256)
SetSpritePosition(Boomer,200,200)

Do
    For i=0 to 255
	SetSpriteColorAlpha(Boomer,255-i)
        SetSpriteColorBlue(id,i)
        Sync()
    Next i
    If Timer()>15 Then Exit
Loop
End

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

Back to top

Profile PM

Greenwich

9

Years of Service

User Offline

Joined: 10th Dec 2014

Location:

Posted: 29th Jan 2015 21:15 Edited at: 29th Jan 2015 21:15

Link

Here's the second image file for the last code snippet (attached)

It's mean time. *averages*

Attachments

Login to view attachments

Back to top

Profile PM

BatVink

Moderator

21

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

Link

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.

+ Code Snippet

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

ResetTimer()

Boomer1 = CreateSprite(LoadImage("boom.png"))
Boomer2 = CreateSprite(LoadImage("boomgrey.png"))
//SetSpriteSize(Boomer,50,50)
SetSpritePosition(Boomer1,200,200)
SetSpritePosition(Boomer2,500,200)

Do
    For i=0 to 255
        SetSpriteColorBlue(Boomer1,i)
        SetSpriteColorBlue(Boomer2,i)
        print(str(i))
        Sync()
    Next i
    If Timer()>15 Then Exit
Loop
End

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.

+ Code Snippet

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

ResetTimer()

Boomer1 = CreateSprite(LoadImage("boom.png"))
Boomer2 = CreateSprite(LoadImage("boomgrey.png"))
//SetSpriteSize(Boomer,50,50)
SetSpritePosition(Boomer1,200,200)
SetSpritePosition(Boomer2,500,200)

SetSpriteColorBlue(Boomer1,255)



Do
    For i=0 to 255
        SetSpriteColorBlue(Boomer2,i)
		SetSpriteColorGreen(Boomer1,255 - (i/1.5))
        SetSpriteColorRed(Boomer1,255 -i)
        SetSpriteColorRed(Boomer2,255 - i)
        print(str(i))
        Sync()
    Next i
    If Timer()>15 Then Exit
Loop
End

Quidquid latine dictum sit, altum sonatur

Attachments

Login to view attachments

Back to top

Profile PM Email

krid

9

Years of Service

User Offline

Joined: 2nd Dec 2014

Location: Almaty / Kazakhstan

Posted: 7th Feb 2015 13:13

Link

@BatVink, is there any command to _replace_ sprite color to a different one?

Back to top

Profile PM

Van B

Moderator

22

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 10th Feb 2015 10:50

Link

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...

Back to top

Profile PM Email

paulrobson

10

Years of Service

User Offline

Joined: 22nd Nov 2014

Location: Norfolk, England

Posted: 10th Feb 2015 12:36

Link

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.

Back to top

Profile PM Email

Van B

Moderator

22

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 10th Feb 2015 16:06

Link

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...

Back to top

Profile PM Email

Greenwich

9

Years of Service

User Offline

Joined: 10th Dec 2014

Location:

Posted: 11th Feb 2015 04:39

Link

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.

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

Boomer = CreateSprite(LoadImage("boom.png"))
SetSpriteSize(Boomer,128,128)
SetSpritePosition(Boomer,128,128)

RedOverlayImage = LoadImage("red_square.png")
GreenOverlayImage = LoadImage("green_square.png")
BlueOverlayImage = LoadImage("blue_square.png")

SetImageMask(RedOverlayImage, Boomer, 4, 4, 0, 0)
SetImageMask(GreenOverlayImage, Boomer, 4, 4, 0, 0)
SetImageMask(BlueOverlayImage, Boomer, 4, 4, 0, 0)

cutoutred=CreateSprite(RedOverlayImage)
SetSpriteSize(cutoutred,GetSpriteWidth(Boomer),GetSpriteHeight(Boomer))
SetSpritePosition(cutoutred,GetSpriteX(Boomer),GetSpriteY(Boomer))
SetSpriteColorAlpha(cutoutred, 0)

cutoutgreen=CreateSprite(GreenOverlayImage)
SetSpriteSize(cutoutgreen,GetSpriteWidth(Boomer),GetSpriteHeight(Boomer))
SetSpritePosition(cutoutgreen,GetSpriteX(Boomer),GetSpriteY(Boomer))
SetSpriteColorAlpha(cutoutgreen, 0)

cutoutblue=CreateSprite(BlueOverlayImage)
SetSpriteSize(cutoutblue,GetSpriteWidth(Boomer),GetSpriteHeight(Boomer))
SetSpritePosition(cutoutblue,GetSpriteX(Boomer),GetSpriteY(Boomer))
SetSpriteColorAlpha(cutoutblue, 0)

ResetTimer()

pace = 3

Do
	Print("Use Q, W to colorshift red. " + Str(GetSpriteColorAlpha(cutoutred))) 
	Print("Use A, S to colorshift green. " + Str(GetSpriteColorAlpha(cutoutgreen))) 
	Print("Use Z, X to colorshift blue. " + Str(GetSpriteColorAlpha(cutoutblue)))
	Print("Use [, ] to change the pace of the colorshift. " + Str(pace))
	r = 0
	if GetRawKeyState(81) = 1 then r = -1 // decrease red
	if GetRawKeyState(87) = 1 then r = 1 // increase red
	if GetRawKeyState(65) = 1 then r = -2 // decrease green
	if GetRawKeyState(83) = 1 then r = 2 // increase green
	if GetRawKeyState(90) = 1 then r = -3 // decrease blue
	if GetRawKeyState(88) = 1 then r = 3 // increase blue
	if GetRawKeyState(219) = 1 and pace > 1 then pace = pace - 1
	if GetRawKeyState(221) = 1 and pace < 16 then pace = pace + 1
	// increase colorshift:
	if r = 1 and GetSpriteColorAlpha(cutoutred) < 255 - pace then SetSpriteColorAlpha(cutoutred, GetSpriteColorAlpha(cutoutred) + pace)
	if r = 2 and GetSpriteColorAlpha(cutoutgreen) < 255 - pace then SetSpriteColorAlpha(cutoutgreen, GetSpriteColorAlpha(cutoutgreen) + pace)
	if r = 3 and GetSpriteColorAlpha(cutoutblue) < 255 - pace then SetSpriteColorAlpha(cutoutblue, GetSpriteColorAlpha(cutoutblue) + pace)
	// decrease colorshift:
	if r = -1 and GetSpriteColorAlpha(cutoutred) >= pace then SetSpriteColorAlpha(cutoutred, GetSpriteColorAlpha(cutoutred) - pace)
	if r = -2 and GetSpriteColorAlpha(cutoutgreen) >= pace then SetSpriteColorAlpha(cutoutgreen, GetSpriteColorAlpha(cutoutgreen) - pace)
	if r = -3 and GetSpriteColorAlpha(cutoutblue) >= pace then SetSpriteColorAlpha(cutoutblue, GetSpriteColorAlpha(cutoutblue) - pace)
	Sync()
    If Timer()>15 Then Exit
Loop
End

+ Code Snippet

SetWindowTitle( "Example Set Sprite Color" )
SetWindowSize( 1024, 768, 0 )
SetVirtualResolution( 1024, 768 )
SetOrientationAllowed( 1, 1, 1, 1 )

Boomer = CreateSprite(LoadImage("boom.png"))
SetSpriteSize(Boomer,128,128)
SetSpritePosition(Boomer,128,128)

RedOverlayImage = LoadImage("red_square.png")
GreenOverlayImage = LoadImage("green_square.png")
BlueOverlayImage = LoadImage("blue_square.png")

SetImageMask(RedOverlayImage, Boomer, 4, 4, 0, 0)
SetImageMask(GreenOverlayImage, Boomer, 4, 4, 0, 0)
SetImageMask(BlueOverlayImage, Boomer, 4, 4, 0, 0)

cutoutred=CreateSprite(RedOverlayImage)
SetSpriteSize(cutoutred,GetSpriteWidth(Boomer),GetSpriteHeight(Boomer))
SetSpritePosition(cutoutred,GetSpriteX(Boomer),GetSpriteY(Boomer))
SetSpriteColorAlpha(cutoutred, 0)

cutoutgreen=CreateSprite(GreenOverlayImage)
SetSpriteSize(cutoutgreen,GetSpriteWidth(Boomer),GetSpriteHeight(Boomer))
SetSpritePosition(cutoutgreen,GetSpriteX(Boomer),GetSpriteY(Boomer))
SetSpriteColorAlpha(cutoutgreen, 0)

cutoutblue=CreateSprite(BlueOverlayImage)
SetSpriteSize(cutoutblue,GetSpriteWidth(Boomer),GetSpriteHeight(Boomer))
SetSpritePosition(cutoutblue,GetSpriteX(Boomer),GetSpriteY(Boomer))
SetSpriteColorAlpha(cutoutblue, 0)

ResetTimer()

pace = 3

Do
	Print("Use Q, W to colorshift red. " + Str(GetSpriteColorAlpha(cutoutred))) 
	Print("Use A, S to colorshift green. " + Str(GetSpriteColorAlpha(cutoutgreen))) 
	Print("Use Z, X to colorshift blue. " + Str(GetSpriteColorAlpha(cutoutblue)))
	Print("Use [, ] to change the pace of the colorshift. " + Str(pace))
	r = 0
	if GetRawKeyState(81) = 1 then r = -1 // decrease red
	if GetRawKeyState(87) = 1 then r = 1 // increase red
	if GetRawKeyState(65) = 1 then r = -2 // decrease green
	if GetRawKeyState(83) = 1 then r = 2 // increase green
	if GetRawKeyState(90) = 1 then r = -3 // decrease blue
	if GetRawKeyState(88) = 1 then r = 3 // increase blue
	if GetRawKeyState(219) = 1 and pace > 1 then pace = pace - 1
	if GetRawKeyState(221) = 1 and pace < 16 then pace = pace + 1
	// increase colorshift:
	if r = 1 and GetSpriteColorAlpha(cutoutred) < 255 - pace then SetSpriteColorAlpha(cutoutred, GetSpriteColorAlpha(cutoutred) + pace)
	if r = 2 and GetSpriteColorAlpha(cutoutgreen) < 255 - pace then SetSpriteColorAlpha(cutoutgreen, GetSpriteColorAlpha(cutoutgreen) + pace)
	if r = 3 and GetSpriteColorAlpha(cutoutblue) < 255 - pace then SetSpriteColorAlpha(cutoutblue, GetSpriteColorAlpha(cutoutblue) + pace)
	// decrease colorshift:
	if r = -1 and GetSpriteColorAlpha(cutoutred) >= pace then SetSpriteColorAlpha(cutoutred, GetSpriteColorAlpha(cutoutred) - pace)
	if r = -2 and GetSpriteColorAlpha(cutoutgreen) >= pace then SetSpriteColorAlpha(cutoutgreen, GetSpriteColorAlpha(cutoutgreen) - pace)
	if r = -3 and GetSpriteColorAlpha(cutoutblue) >= pace then SetSpriteColorAlpha(cutoutblue, GetSpriteColorAlpha(cutoutblue) - pace)
	Sync()
    If Timer()>15 Then Exit
Loop
End

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.

Sorry your browser is not supported!

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

Attachments

Attachments

Attachments

Attachments