Java-Gaming.org Hi !
Featured games (83)
games approved by the League of Dukes
Games in Showcase (538)
Games in Android Showcase (132)
games submitted by our members
Games in WIP (600)
games currently in development
News: Read the Java Gaming Resources, or peek at the official Java tutorials
 
    Home     Help   Search   Login   Register   
Pages: [1] 2
  ignore  |  Print  
  [Solved] Coloring a gray image  (Read 6460 times)
0 Members and 1 Guest are viewing this topic.
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Posted 2011-10-12 06:00:58 »

Not quite sure if his belongs here but I want to color an image which consits of gray value which always come from a palette of 16 gray colors. No I want to to color my gray image with a specific color for every grav color in the palette.

I know how to color a single image with a color, but how do I do this when i want to color different for different gray values. Like this:



I guess I with a Shader? But if, how needs the shader to look like?
Offline Roquen
« Reply #1 - Posted 2011-10-12 09:40:02 »

WRT Shaders.  Think about the following questions.  Does the memory requirement become too big if I prestore the various animation frames (most likely not) and/or am I going to need to transfer a crazy amount of data from CPU to GPU (again probably not)  And finally: Do I want to play with shaders for the learning experience.

Create a new palette (or explicit RGB images) by treating the grayscale value as luminance and use a "uniform color space" transform the create the new image.  So, if you have a target color in RGB, you convert that RGB value to some uniform colorspace.  Then for each pixel you set the luminance value to the grayscale value.  You take that and convert back to RGB.  Some examples include: YCbCr and YUV.
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #2 - Posted 2011-10-12 12:14:23 »

Okay, do be honest. I kinda don't understand a word Cheesy I should probalty get more expierence before doing stuff like that Smiley So for the current project I will take the normal color bin (game needs to be done in 3 months  Emo)
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline cylab

JGO Ninja


Medals: 55



« Reply #3 - Posted 2011-10-12 13:04:02 »

Make a copy of the gray scale image, get the pixels from the image, take one color component (red for example) and use that value as index to look up the color in the new color palette (essentially being an array of 256 colors, if you use 8 bit per color channel). Write the new color back to the pixel and you are done.

Mathias - I Know What [you] Did Last Summer!
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #4 - Posted 2011-10-12 13:16:03 »

Oh and how do i set this to the new image ? I'm using Slick2D btw so I'm a total noob (and college is sucking time like a hell Angry) (I learn best when seeing some example code, but I know that this is much to ask Sad)
Offline cylab

JGO Ninja


Medals: 55



« Reply #5 - Posted 2011-10-12 14:34:20 »

Never used slick, but according to the javadoc, you would do it by creating an ImageBuffer of the size of your Image and use a nested for loop to get the colors at all [x;y] coordinates. Then set the colored pixel using ImageBuffer.setRGBA(). In the end call ImageBuffer.getImage() to get the new colored image.

http://slick.cokeandcode.com/javadoc/org/newdawn/slick/Image.html
http://slick.cokeandcode.com/javadoc/org/newdawn/slick/ImageBuffer.html

Mathias - I Know What [you] Did Last Summer!
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #6 - Posted 2011-10-12 15:06:47 »

Ah so this is not "to heavy" ?  Smiley Seems like one of that KISS stuff. I will try it, thanks a lot! 
Offline sproingie

JGO Kernel


Medals: 202



« Reply #7 - Posted 2011-10-12 16:02:57 »

Writing out a new image is certainly "heavy" in that you're not going to want to do it inside your render loop.  The fast way to do it would be with a fragment shader you supply a "tint" value to.

1  
2  
3  
4  
uniform vec4 tint;
void main() {
    gl_fragColor += tint;
}


If you only want to tint the grey parts, then it's a simple matter to test whether r, g, and b are equal:

1  
2  
3  
4  
5  
uniform vec4 tint;
void main() {
    if (gl_fragColor.rg == gl_fragColor.gb)  
       gl_fragColor += tint;
}

Offline cylab

JGO Ninja


Medals: 55



« Reply #8 - Posted 2011-10-12 19:01:13 »

Writing out a new image is certainly "heavy" in that you're not going to want to do it inside your render loop.

Yes, it should be done beforehand. Just create as many different Images as you need before starting the game.

The fast way to do it would be with a fragment shader you supply a "tint" value to.

I think the OP doesn't want to tint, but replace grayscales with arbitrary colors.


Mathias - I Know What [you] Did Last Summer!
Offline Roquen
« Reply #9 - Posted 2011-10-12 19:31:04 »

My suggested solution and cylabs are nearly identical.  The difference is that cylab's operates in RGB space and mine in a uniform.  The difference between the two will not typically be huge.  So I'd go with cylab's easier one unless the differences are judged to be noticeable and worth addressing.  The way to tell would be to create two sets of images, one blue and one green and decide if the perceived brightness between the two is worth addressing.
Games published by our own members! Check 'em out!
Legends of Yore - The Casual Retro Roguelike
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #10 - Posted 2011-10-12 19:40:16 »

I want to do this at runtime, so I would have to load a lot of images because currently I just interpolate between pure white and my set color to get a color. But the ability to determine which gray color should be tinted would be great! But it seems I lack expirence in Shader so I will have to implement it with just tinting the whole image Smiley Maybe I have some time in the end of this semester to change that.

Edit:
I'm not even good at Shaders. I simply had no time to learn them (holiday issue: You plan to do something, but in the end you'r not doing ist Sad)
Offline sproingie

JGO Kernel


Medals: 202



« Reply #11 - Posted 2011-10-12 20:01:14 »

I've just learned shaders myself -- this one just happens to be a really simple shader.  I suspect whether you want to use a shader depends on what circumstances you want to tint your model: if you want to do the RPG tropes of turning an existing sprite blue because it's frozen, or green for poisoned, a shader might really be a good option.  If you're doing the Diablo route of using a different color of the same sprite for different monsters, you may as well just pre-generate them.
 
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #12 - Posted 2011-10-12 20:05:49 »

Nope thing is, I want the game to get "grayer" the further you get in the game (This has something to do with the story and stuff). So i guess Shaders are really cool here Cheesy
Offline sproingie

JGO Kernel


Medals: 202



« Reply #13 - Posted 2011-10-12 20:16:22 »

Yah a shader would be the appropriate way to do it.  As Roquen mentioned, you probably don't want to uniformly scale down the R,G, and B components, or you'll end up with red and blue sort of muddling into each other with green still visible.  Might be a bit matrixy, having an overall green tint, but not likely what you want.  Basically you want to bias the colors using the NTSC values before you scale them for brightness.  Little google-fu turned this up: http://www.eng.utah.edu/~cs5610/lectures/GLSL-ATI-Intro.pdf -- the very second example has a grayscale shader in it.

Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #14 - Posted 2011-10-12 21:16:58 »

Okay this all sounds pretty new to me, so I guess I can't sit around and wait for magic to make it work Smiley Are there any decent Shader Tutorials? (beside the pdf I'm reading right know Cheesy)
Offline Chromanoid

Junior Devvie


Medals: 3



« Reply #15 - Posted 2011-10-12 21:30:29 »

Since the amount of colors seems very limited, a simple handcrafted lookup texture should be enough.
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #16 - Posted 2011-10-12 21:46:50 »

Oh didn't I mentioned that the interpolation could nearly take every value between 0.0 and 1.0 ? And that this need to apply to all textures in game expecpt the menu Smiley

I will see if I can do this if I understand the difference between a vertex and a fragment Shader Cheesy
Offline Chromanoid

Junior Devvie


Medals: 3



« Reply #17 - Posted 2011-10-12 23:08:47 »

when you can normalize these 16 grayscale colors to values between 0 and 15, you can make 4096 palettes with one 256x256 texture. Let's say you provide one grayscale and one color palette per gfx asset. This means you can support 2048 16 color assets with one texture. All you have to do is to provide two palette indices, one blending factor and the palette texture istelf to the fragment shader. Then you can blend between two palettes... This would be useful if you need multiple palettes for the same asset. If this isn't nescessary, the fastest way with the highest amount of flexibility for the artist would be to just provide two textures - one with colors one without - then you can blend between both textures with a blend factor. If you just want to desaturate everything (provide a color image and make it grayscale) a simple desaturation color transform that is scaled by a blend factor would be enough (formula for luma/grayscale: Y=0.3*r+0.59*g+0.11*b, also see what Roquen wrote).
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #18 - Posted 2011-10-13 10:15:18 »

This sounds pretty cool and I even think to understand it a bit (not what rouqen said, might be because I'm german and not the best in english or something :'D). Still need to work out how Shaders work Smiley

Oh and I want to make a grayscale image get some color Smiley
Offline cylab

JGO Ninja


Medals: 55



« Reply #19 - Posted 2011-10-13 10:41:40 »

You may need to start here: http://slick.javaunlimited.net/viewtopic.php?t=3212

Mathias - I Know What [you] Did Last Summer!
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #20 - Posted 2011-10-13 10:52:43 »

I tought this was turned down Shocked Thanks anyway Smiley
Offline Chromanoid

Junior Devvie


Medals: 3



« Reply #21 - Posted 2011-10-13 11:00:01 »

Can you describe in what way you want to colorize the image? Do you want to programmatically assign predefined colors to specific gray colors (something you would do in Gimp/Photoshop by replacing color by color with the "fill-all-occurences-of-color-xy-Tool")?

Obwohl viele im Forum Java nicht unbedingt wohlgesonnen gegenüberstehen, findest du gerade bezüglich Shader-Programmierung auf http://zfx.info sehr kompetente deutschsprachige Hilfe Smiley. Auf englisch profitieren aber natürlich ggf. mehr Leute von deinen Problemstellungen Smiley.
Offline Roquen
« Reply #22 - Posted 2011-10-13 13:30:38 »

Here's cylab's solution in a shader..untested and in Cg rather than GLSL:

1  
2  
3  
4  
5  
6  
7  
8  
9  
10  
11  
float4 
main(float2            uv  : TEXCOORD,
     uniform sampler2D map : TEXUNIT0,
     uniform float3 refColor): COLOR
{
  float4 c = tex2D(map, uv);
 
  c.rgb *= refColor.rgb;

  return c;
}
Offline Roquen
« Reply #23 - Posted 2011-10-13 14:24:12 »

Actually, for the moment forget everything we've all said and see if the easiest solution is good enough.  Just render the grayscale texture, set the vertex colors to the target and set the combine mode to modulate.  If it's close, you can stick with that unless you have free time still available.
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #24 - Posted 2011-10-13 16:06:44 »

@Chromanoid
Let try it in german:
Was ich möchte ist das ich nur bestimmte Grauwerte färben kann. Ich hab ja eine Palette mit 16 Graustufen und alle Bilder werden damit gemacht, so das die RGB-Werte immer gleich sind. Wie im Bild von OP. Dort 2 von den Frauwerte mit anderne farben gezeichnet. Ich nahm jetzt an, dass man das mit Shader zu machen hat... Aber mein Erfahrung ist da wohl noch ziemlich gering. Bisher schaffe ich es nur mit dem FragmentShader eine Farbe mit einer anderen zu interpolieren (mit einem Ratio halt). Aber wie das direkt auf eine textur geht oder so... kA Sad Aber danke für den Link. Ich werde das auf jeden Fall versuchen wenn ich mal Zeit habe! Wenn ich Erfolg habe poste ich das natürlich auf englisch hier! Bis dahin muss ich wohl oder übel das nehmen was Slick mit bietet (ganzes Bild einfärben)!

@Roquen
Thanks a lot, but I'm don't even understand this code x_X For now I just do it as you said Smiley I set the vertex colors and have at least the whole texture colored Smiley
Offline Chromanoid

Junior Devvie


Medals: 3



« Reply #25 - Posted 2011-10-13 19:39:04 »

Ok. You have a fixed 16 colors palette with gray colors and want to replace these colors with specific other colors that are selected by you (I assume on a per sprite basis). What I don't understand is why you want to colorize in the pixelshader. Do you need automatic colorization? You will want to know how it looks like anyway, you might even try the coloring in an image editor before you put it in the game. Why you don't want to provide multiple versions of the sprite and just render the colorized over the gray one with a certain transparency?

Was ich nicht verstehe ist, warum du das ganze überhaupt so aufwendig lösen willst. Benötigst du soviele Grafiken, dass du nicht einfach jeden Sprite in Farbe und in Grauwerten anbieten kannst? Oder willst du eine automatische Einfärbung? Du wirst doch sowieso wissen wollen wie es dann am Ende aussieht und probierst das ganze dann vielleicht sogar vorher noch in einem Malprogramm aus, oder nicht? Du könntest doch einfach über den grauen Sprite den Farbigen mit einer gewissen Transparenz zeichnen. Je transparenter du den farbigen Sprite zeichnest desto grauer erscheint das ganze.
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #26 - Posted 2011-10-13 19:47:41 »

You know what? I'm SO stupid to not think of this -____- Of course it's a perfekt idea! Duh~ I used this so often back in the old days with the RPG-Maker. Thanks a lot, I think I can go with this idea just perfect and it's not even hard to implement.

So this one ist solved and made me addicted to shaders too (I just tested some stuff in ja Shader IDE, really impressing).
Offline Rejechted

Senior Devvie


Medals: 1
Projects: 1


Just a guy making some indie games :D


« Reply #27 - Posted 2011-10-17 18:21:24 »

Are you the person who made "Shades" for RPG maker XP?

Blog for our project (Codenamed Lead Crystal): http://silvergoblet.tumblr.com
Offline R.D.

Senior Devvie


Medals: 2
Projects: 1


"For the last time, Hats ARE Awesome"


« Reply #28 - Posted 2011-10-17 18:47:52 »

Haha no, I'm not the one Wink (I had to google that game Cheesy) I made some games for RPG Maker 2000 but I never touched the XP (don't like that engine much :/)
Offline Rejechted

Senior Devvie


Medals: 1
Projects: 1


Just a guy making some indie games :D


« Reply #29 - Posted 2011-10-18 17:09:30 »

I worked in 2000 for a loooooong time before XP came out, but I've always been a fan of the next big thing... once I realized how easy it was to do custom systems with ruby instead of through painstakingly making common events, the door just blew wide open for me.  If you can find an archived copy of Shades by ccoa somewhere, I recommend it, it's a very artistic game that your idea reminds me of.  Keep up the good work

Blog for our project (Codenamed Lead Crystal): http://silvergoblet.tumblr.com
Pages: [1] 2
  ignore  |  Print  
 
 
You cannot reply to this message, because it is very, very old.

 

Add your game by posting it in the WIP section,
or publish it in Showcase.

The first screenshot will be displayed as a thumbnail.

rwatson462 (29 views)
2014-12-15 09:26:44

Mr.CodeIt (20 views)
2014-12-14 19:50:38

BurntPizza (40 views)
2014-12-09 22:41:13

BurntPizza (76 views)
2014-12-08 04:46:31

JscottyBieshaar (37 views)
2014-12-05 12:39:02

SHC (50 views)
2014-12-03 16:27:13

CopyableCougar4 (47 views)
2014-11-29 21:32:03

toopeicgaming1999 (114 views)
2014-11-26 15:22:04

toopeicgaming1999 (102 views)
2014-11-26 15:20:36

toopeicgaming1999 (30 views)
2014-11-26 15:20:08
Resources for WIP games
by kpars
2014-12-18 10:26:14

Understanding relations between setOrigin, setScale and setPosition in libGdx
by mbabuskov
2014-10-09 22:35:00

Definite guide to supporting multiple device resolutions on Android (2014)
by mbabuskov
2014-10-02 22:36:02

List of Learning Resources
by Longor1996
2014-08-16 10:40:00

List of Learning Resources
by SilverTiger
2014-08-05 19:33:27

Resources for WIP games
by CogWheelz
2014-08-01 16:20:17

Resources for WIP games
by CogWheelz
2014-08-01 16:19:50

List of Learning Resources
by SilverTiger
2014-07-31 16:29:50
java-gaming.org is not responsible for the content posted by its members, including references to external websites, and other references that may or may not have a relation with our primarily gaming and game production oriented community. inquiries and complaints can be sent via email to the info‑account of the company managing the website of java‑gaming.org
Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines | Managed by Enhanced Four Valid XHTML 1.0! Valid CSS!