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.

AppGameKit Classic Chat / Keeping the white white on set spritecolor

Author
Message
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 3rd Apr 2013 20:32
Hi
Anybody know of a method to keep the white pure white when you change a spritecolor. Right now I'm using two sprites. One with black and greys and one with whites (the highlights) and draw them together.

This obviously doubles the amount of sprites and creates a lot more drawing work.

Any suggestions would be sweet.
Ancient Lady
Valued Member
20
Years of Service
User Offline
Joined: 17th Mar 2004
Location: Anchorage, Alaska, USA
Posted: 3rd Apr 2013 21:07
I don't think you can. The SetSpriteColor affects all pixels in a sprite.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 3rd Apr 2013 21:27
SetSpriteColor 255,255,255,255 = original color from image
128,128,128,255 half original image color
0,0,0,255 black but visible
its more a multiplier like
r=r1/255 * r2
g=g1/255 * g2
b=b1/255 * b2
a=a1/255 * a2
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 3rd Apr 2013 21:59
I found a workaround by using setImageTransparentcolor - almost.

If i reserve the first two spriteId's for drawing I could do something like this:


The only thing I need to do now is that since my original transparent color has changed I have to calculate it's new color.
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 4th Apr 2013 00:55 Edited at: 4th Apr 2013 01:11
Ha! I did it.
Instead of using an image with a pink color as a representation for the transparency I saved the image as png with transparency. That was all. This is the result.

Before my workaround with only setSpritecolor(1,243,213,109,255)
This:

becomes this:


With my workaround:


I get This:


The conclusion is that if you have a .png image with transparency already set the setimagetransparentcolor command will ADD another transparency. Good to know. For me anyway.

Saves me a lot of time.
Ancient Lady
Valued Member
20
Years of Service
User Offline
Joined: 17th Mar 2004
Location: Anchorage, Alaska, USA
Posted: 4th Apr 2013 01:03
Cool! Nice example of using the backbuffer to create things.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master
lilpissywilly
AGK Developer
13
Years of Service
User Offline
Joined: 10th Sep 2010
Location: Office Chair
Posted: 4th Apr 2013 01:05
But you still need two sprites? Nice to know you can have two transparencies

My hovercraft is full of eels
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 4th Apr 2013 01:16 Edited at: 4th Apr 2013 01:33
Yes. But ONLY two - in AGK. When I set up the level.

And I don't need to draw two different versions when I create them (in photoshop or other) as before.

Edit: As a reference to what I'm trying to accomplish: In "prelude of the chambered" - a Ludum Dare game by Markus "Notch" Person - he used grayscaled textures and only recolored them in runtime. It's a very effective way of reusing textures. The only problem with setSpriteColor is that it also fades the whites. This is alright, but I want to keep that POP of the white even if I recolor them.

The game can be played here:
https://s3.amazonaws.com/ld48/index.html
Markus
Valued Member
20
Years of Service
User Offline
Joined: 10th Apr 2004
Location: Germany
Posted: 4th Apr 2013 01:38
yet i know what you mean and want...
that was my problem too with the highlight point because
i want use a color scheme.
i make the images grey and recolor it at runtime and then no white.
xCept
21
Years of Service
User Offline
Joined: 15th Dec 2002
Location:
Posted: 4th Apr 2013 05:58
That's a clever solution. Memblocks could also accomplish this feat but would require more coding and would be less efficient than this method. After tinting the sprite you'd have to get the image as you do here, then convert it to a memblock and swap color 'x' with color 'y' (e.g., restore white), then convert it back to an image.
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 4th Apr 2013 13:04 Edited at: 4th Apr 2013 13:06
xCept:
This method will not be used in the main game loop of course - only on setup. I believe it's to slow for on the fly changes. as the manual says: setImageTransparentcolor should not be called every frame.

But just for testing speed - do you have an example of the memblock version of this?

Being able to change individual greys to whatever you want could be useful - even if I guess my workaround could be used for that too.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Apr 2013 14:11
I'm whipping up an example now


this.mess = abs(sin(times#))
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 4th Apr 2013 14:58
Fantastical You are too kind. Can't wait.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Apr 2013 14:59 Edited at: 4th Apr 2013 15:52
I have a function to colorise using two methods, one that is additive and one more like the current setSpriteColor method. Now I'm just filtering white out.


this.mess = abs(sin(times#))

Attachments

Login to view attachments
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Apr 2013 15:46 Edited at: 4th Apr 2013 15:53
Here it is. It will colorise an image and create a new image that has been colorised.



Blend modes are:
1-Standard (like setSpriteColor)
2-Additive (colours get brighter)
3-Standard preserving white (this only preserves pure white pixels)
4-Additive preserving black (this only preserves pure black)

It takes around 0.6 seconds to convert a 512x512 image on my laptop.

This might not be the best solution but it's pretty easy to play with



This is the original image edited using this function for the above images:



this.mess = abs(sin(times#))

Attachments

Login to view attachments
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 4th Apr 2013 15:55
Shame that it only preserves the solid white, so you may have problems if your sprites are more shaded.

Something I've done recently is actually use more sprites but fade between them, to give control over lighting. Like, if you have a base colour sprite that you recolour in code, and 3 highlight sprites, with lighting from the top, top left, and left. Then you can alpha colour these highlight sprites depending on where the light source is to give a sorta bump mapped effect. I used this on my menu icons and had the sprites sway left and right, looks pretty cool when it's all put together. Check out Bubble & Squeak in the apple store if you want to see, there is a free version.

I know that's another 3 sprites you'd have to draw - but doing things like that can really raise the bar with 2D games.. like imagine a Bejewelled game with gems that have a proper light source - or a top down pool game with spot lights. There's a lot you can do if you can put in the extra pixel work. I have to say, just laying out the 4 sprites and layering on the highlights wasn't the worst job - it can be quite relaxing to do stuff like that I think, esp if you have a good graphics tablet and a decent amount of patience.

I got a fever, and the only prescription, is more memes.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Apr 2013 16:04
Quote: "Shame that it only preserves the solid white, so you may have problems if your sprites are more shaded."

I know but I spent enough time on it already I might well improve it at some point as it might be useful and I'm trying to learn about image manipulation using memblocks anyway as I'm very new to it (the main reason I made this). I'll obviously share any updates.

Quote: "Something I've done recently is actually use more sprites but fade between them, to give control over lighting. Like, if you have a base colour sprite that you recolour in code, and 3 highlight sprites, with lighting from the top, top left, and left. Then you can alpha colour these highlight sprites depending on where the light source is to give a sorta bump mapped effect. I used this on my menu icons and had the sprites sway left and right, looks pretty cool when it's all put together."

It's a great effect VanB, something I was thinking of doing for an idea I'm working on. I want to have a silhouette character that can be lit in this way if he is near a light source. I think it could look really cool.


this.mess = abs(sin(times#))
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 4th Apr 2013 16:57
Thanks a lot Baxslash. I'm digging into it. This is great help.
Van B
Moderator
21
Years of Service
User Offline
Joined: 8th Oct 2002
Location: Sunnyvale
Posted: 4th Apr 2013 17:04
Ahh, like Limbo, but with light sources affecting the character. Would look pretty cool like that. Of course the other cool thing about doing it that way, is you can colour the lighting sprites as well, like imagine dull blue at the top left, and bright orange at the right - like a camp fire in front of the player and moonlight above. Would take a lot of pixel pushing, but definitely worth it.

I got a fever, and the only prescription, is more memes.
baxslash
Valued Member
Bronze Codemaster
17
Years of Service
User Offline
Joined: 26th Dec 2006
Location: Duffield
Posted: 4th Apr 2013 17:07
Exactly, the image I have in my head is a character standing in front of his burning home with the glow from the fire reflecting off him. I'm also imagining him in a flowing box2D based cloak which also reflects the light somehow with a staff / spear

I just have to figure out an efficient method for it all...


this.mess = abs(sin(times#))
xCept
21
Years of Service
User Offline
Joined: 15th Dec 2002
Location:
Posted: 4th Apr 2013 19:48
I think that if AppGameKit would improve its support for shaders we could do remarkable things with lighting and shadows in a 2D game. Such as: http://code.google.com/p/box2dlights/

Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 5th Apr 2013 15:39 Edited at: 5th Apr 2013 15:41
Baxslash: I've been comparing the speed of the two methods. And we are only talking some milliseconds in difference.

But I discovered something strange when doing this.
I used Your test1.png and I couldn't add another transparency to it as I did with my original ball.png. I drawed another ball in photoshop with transparency and the same happened to that. It seems I have in someway created a magic .png wich you can add an extra transparency to.

Screenshot:


The 3 png images:
My original:

My new:

Your test1.png:


Code:



What is going on here?

(included is my original ball.png)

Attachments

Login to view attachments
Timshark
16
Years of Service
User Offline
Joined: 30th Jun 2007
Location: Oslo, Norway
Posted: 6th Apr 2013 23:52
I can't thank Baxslash enough for his memblock function. It is instantly usable and also a great learning of how to use memblocks. Thank you.

Still curious about this mysterious .png transparency.
Anyone else?

Login to post a reply

Server time is: 2024-05-07 00:38:49
Your offset time is: 2024-05-07 00:38:49