OpenGL Color Effects

[mrToad]

Hello, first I apologize if this belongs in a different forum, feel free to move it.

Using openGL in freebasic I am able to adjust RGB values before drawing a texture, using glColor4ub. This is fine but the trouble is when I would like to maintain the brightness of the image but simply tint it more blue or red for example. Using this function the image is darkened when reducing the values from 255. I poked around but couldn't find a function in GL for it, and I don't know how to write one. The application would be to brighten an image beyond normal and also tint it a color.

This brings me to one potential solution for the brightening part that I could not get working fully, using glow. When setting this state, the drawn texture continues to brighten each frame until it is totally white. I don't know how to control the level of glow so that it doesn't multiply when drawing over itself. This would look really nice if it could be done.

Lastly I have seen an effect in several drawing software (such as Aseprite) that allows you to change drawing mode for a layer to something called Overlay. This is wonderful if you create a blurry white circle and change to this mode - it becomes a light source that brightens pixels behind it rather than being white any longer. I would also love to be able to apply this to drawn textures in GL, but don't know where to start.

Any help is much appreciated!

[paul doe]

Hi, mrToad

Could you post some code, so we have something to work with? It will help immensely to be able to work in the same code. If it's too large, see if you can only post the relevant part (or some other snippet that illustrates it).

Regards,
Paul

[mrToad]

Thanks for your reply Paul. I apologize about lack of code, I am on the road today. Actually it's very simple code so far... I'll type up the general idea. This of course doesn't include the texture binding and getting uv coords to draw and all that.

Set color with
glColor4ub(r,g,b,a) where those values can reduce levels of rgba with which sprite is drawn.

Next, draw sprite (part of texture) to screen. It will now draw with adjusted rgba values set before. So sprite color will change along with brightness.

glColor4ub(255,255,255,255) to set drawing back to normal.

This function allows only to reduce values so the sprite darkens in those values. I was hoping to find something that brightens the sprite.

I can post more later. Thank you.

[paul doe]

You're welcome =) The simpler the better, actually. It will help isolate the code you need.

Thanks for your reply Paul. I apologize about lack of code, I am on the road today. Actually it's very simple code so far... I'll type up the general idea. This of course doesn't include the texture binding and getting uv coords to draw and all that.

Ok, no prob. Post it when you're ready. In the meantime, I'll prepare a simple snippet to show you how to do this:

Lastly I have seen an effect in several drawing software (such as Aseprite) that allows you to change drawing mode for a layer to something called Overlay. This is wonderful if you create a blurry white circle and change to this mode - it becomes a light source that brightens pixels behind it rather than being white any longer. I would also love to be able to apply this to drawn textures in GL, but don't know where to start.

Do you know how to implement blur?

[mrToad]

Thanks, no I don't know how to blur a Sprite before drawing, or how to blur anything. I was probably going to just use a blurry white circle on a sprite sheet and then find someway to change how it is drawn to the screen to that like Overlay.

My knowledge of openGL is somewhat limited to just binding textures and drawing sections of them (sprites) using a quad and stretching and rotating, adjusting alpha, things like that. Also how to draw primitives, basic shapes, etc. but now I am looking at how to do some special effects to these, especially brightening a sprite, adjusting the tint, and that light effect I mentioned.

I will be home in an hour or so and hopefully can clarify myself if needed.

I do appreciate your replies.

[mrToad]

Playing around here, it seems like I might be on the right track as far as brightening a sprite. But I cannot seem to control the level of brightness, and the image also becomes partly transparent, like a ghost, as you see on the duplicate character.

Code: Select all

glEnable(GL_BLEND)
glEnable(GL_ALPHA_TEST)			
glBlendFunc(GL_ONE, GL_ONE)

'' And for drawing the other sprites you see, I use:

glEnable(GL_BLEND)
glEnable(GL_ALPHA_TEST)			
glBlendFunc(GL_SRC_ALPHA,GL_ONE_MINUS_SRC_ALPHA)

[paul doe]

Thanks, no I don't know how to blur a Sprite before drawing, or how to blur anything. I was probably going to just use a blurry white circle on a sprite sheet and then find someway to change how it is drawn to the screen to that like Overlay.

That's ok. Now I see you're using the fixed-function pipeline of OpenGL. It has been AGES since I last used that, so let me some time to refresh my memory of it =)

My knowledge of openGL is somewhat limited to just binding textures and drawing sections of them (sprites) using a quad and stretching and rotating, adjusting alpha, things like that. Also how to draw primitives, basic shapes, etc. but now I am looking at how to do some special effects to these, especially brightening a sprite, adjusting the tint, and that light effect I mentioned.

Yeah, that's all you need for 2D stuff. It is a shame that you don't use shaders, for with them you can do all kinds of cool effects with minimal effort (at the cost of a slightly more awkward way of handle simple stuff such as drawing a quad).
You may want to take a look at this (I assume you have at least OGL 4.0):
https://www.khronos.org/registry/OpenGL ... Func.xhtml

There you can see all the blending modes with which you can set with glBlendFunc(). Try some other combinations of blending modes to see how it alters the drawing of the sprite.
I was busy today and could not prepare the snippet I promised, but take a look at this also:
https://docs.gimp.org/2.8/en/gimp-conce ... modes.html

The link shows how the layer blending modes of GIMP are computed. They're very easy to follow, but feel free to ask if you don't understand something =D
Hopefully, tonight I can finally write that snippet and show you how you can compute the layer blending modes. I will use FBGFX (the FB built-in library), but the concepts also apply to OpenGL.
My, your game looks awesome! Reminds me so much of Monkey Island. It is some kind of graphic adventure, I guess? Or a JRPG? ;)

I do appreciate your replies.

No problem =D Your project looks promising! Looking forward to see some more ;)

[mrToad]

That was a very encouraging compliment Paul, thank you! It's been a lot of fun lately because the project is rolling. I have another thread for it so just peak into the Projects forum once in awhile, called Alvarian Tales. (Although I am guilty of not releasing a demo yet.) This is an adventure RPG, with focus on character development, such as a good story should have. Monkey Island is a beautiful game. I've always hoped to do something similar, but this would be multi-path, perhaps two or three paths, with RPG elements making for some fun battles. I'm tabooing grinding, repetitive graphics, and other things that I've always felt games would do better without. (Nothing wrong with some good tile-based games and a moderate amount of grinding, but I just set a particular standard for this project.)

Now if you could let me know what is fixed-function pipeline OpenGL? Sounds like perhaps a simplified approach? All I can say is I have so much time invested in everything from music to story development to hand-drawn art and animation, that I cannot imagine myself getting too deep into OpenGL as long as it does what I need. But I'm always open to considering my options.

No pressure for the code snippet but at your convenience that would be wonderful. Now I will check out your links.

[paul doe]

That was a very encouraging compliment Paul, thank you! It's been a lot of fun lately because the project is rolling. I have another thread for it so just peak into the Projects forum once in awhile, called Alvarian Tales. (Although I am guilty of not releasing a demo yet.) This is an adventure RPG, with focus on character development, such as a good story should have. Monkey Island is a beautiful game. I've always hoped to do something similar, but this would be multi-path, perhaps two or three paths, with RPG elements making for some fun battles. I'm tabooing grinding, repetitive graphics, and other things that I've always felt games would do better without. (Nothing wrong with some good tile-based games and a moderate amount of grinding, but I just set a particular standard for this project.)

Oh right, Alvarian Tales! I knew it looked familiar =D Love the hand-drawn graphics!
I also don't like grinding too much. I immensely enjoyed Chrono Cross back in the PS1 era. It has an unique battle system, if you're looking for ideas, and you can always play it with emulators, for researching purposes of course XD

Also, another very interesting place to look into is:
http://www.squidi.net/three/
Contains a treasure trove of ideas that you can use, totally free of charge ;)

Seems like today I'm having a lapsus haha. Forgot something very important:
viewtopic.php?f=14&t=24909

That is a 2D OpenGL graphics library for FB. Take a look at it (the post contains the links to download it; even comes with the source code), you may find something interesting. Unless, of course, you're already using it ;) It also has the added benefit that Joshy (D.J. Peters) is actively maintaining it, and you can ask him whatever you wish in that thread.

Another pretty easy to use library is this:
viewtopic.php?f=8&t=16222&p=229216&hilit=gl2d#p229216
But, unfortunately, it's not maintained anymore.

Now if you could let me know what is fixed-function pipeline OpenGL? Sounds like perhaps a simplified approach? All I can say is I have so much time invested in everything from music to story development to hand-drawn art and animation, that I cannot imagine myself getting too deep into OpenGL as long as it does what I need. But I'm always open to considering my options.

Yes, of course. Here:
https://gamedevelopment.tutsplus.com/ar ... -cms-21469

It's a very basic overview of what the fixed function pipeline and the programable pipelines are. Long story short: anything that looks like this:

Code: Select all

glBegin( GL_WHATEVER )
	/'
		Specify vertices, normals, texture coords, etc
	'/
glEnd()

Is part of the old fixed function pipeline. The transition is not easy, but not too hard either. The harder part of if is that you need to supply all the math stuff that OpenGL did for you in the past. Not everything, alas, but things like vectors and matrices and the operations for them. Once you encapsulate the ugly parts (such as compiling and linking of shader programs) and get everything going, it's usage is not that much more different of the old stuff. You will have to learn, however, how to write a shader program in GLSL, the GL Shading Language (looks very much like C). All this sounds incredibly difficult, I know, but it's not really that hard, and if you're doing strictly 2D stuff, the math isn't even that daunting, and you can do insanely cool stuff with it, including all you want to do and much more.

For a good beginner's tutorial on the programable pipeline, see:
http://www.opengl-tutorial.org/beginner ... -triangle/

It's in C++, but if you can't follow it, I will post some code that will help you get started. I'm afraid that I'll have to ask you some questions, to be able to provide more useful advice:

• Do you use a library for doing the rendering, or you're doing the rendering yourself? (I'm suspecting it's the latter)
• Do you have any knowledge of OOP (Object Oriented Programming) in FreeBasic?
• Do you know another programming language, besides FB?

A text wall and lots of questions. Great XD

[mrToad]

I don't know why I never saw Chrono Cross. I love the art. Definitely will at least pull some inspiration from the graphics if not get an emulator to check out the battle system. Thanks for sharing! I am testing out two ideas for that. Currently working on time-limited turn-based, so there's still a little pressure but you have time to think and strategize. Each character/creature uses move points and action points. But I'll also be testing out real-time battle to see if it feels better suited.

I've seen squidi.net in passing but on a closer look there sure is a lot there, thank you.

By the way, I figured out brightening of the sprite. If you draw it twice, the second time with the same method as shown before, just right on top, and adjust the rgb values, you can tint and brighten at same time. It's perfect for walking out into the sun and brightening the character. Now I am trying to figure out Overlay and how to desaturate.

No problem about the questions, it's nice to be back on this board. I can't believe how time flies.

Do you use a library for doing the rendering, or you're doing the rendering yourself? (I'm suspecting it's the latter)

I'm working with the GL2D by Richard Lope, although I've modified it just a little. I've always been grateful for it, and it seems to provide enough power. I feel a lot of what is possible is up to the imagination, even if tools are limited. I'm able to do everything from glowing particles to flashes of lightening, probably even fire effects, although I haven't tired fire yet. As you can see the game has a small res and pixel style so the demands are probably not so high, so between my art and a little help from GL I feel pretty excited. But being curious I will have to look into shaders as well. Perhaps if I see some of the practical potential it offers. I hope what I am doing now will not be less compatible?

Do you have any knowledge of OOP (Object Oriented Programming) in FreeBasic?

I have built a semi-OOP engine, I guess you would call it. Everything is an object of some type, whether background or character. I don't use inheritance, haven't looked into that for FB, but all I can say is it works, really well. It's tailored just for this project and lets me write scripts that do just about anything. It was a huge learning experience, so I'm glad to do something myself, even if someone already has. It's mental exercise that pays off in a lot other things in the project and in life.

Do you know another programming language, besides FB?

I haven't worked with anything as much as FB (or QB way back). I've played with C, C++, Pascal, Cold Fusion and PHP for the web, and I used to work a lot in Visual Basic. Although I believe logic is its own language and can be expressed in many different ways, I only really feel at home with FB. It's been almost 20 years of coding (on and off). Not near as much as some of you around here, of course, but having it under my belt sure helps with this project.

Well I'm off to help some friends do some outdoor work, thank goodness the weather has been good. Let me know any thoughts and feel free to ask questions. This thread is morphing into stuff that should be in my other thread, but what can you do!? :)

[paul doe]

I hadn't forgotten you, my friend. The little snippet I'm preparing is coming along fine =D

I don't know why I never saw Chrono Cross. I love the art. Definitely will at least pull some inspiration from the graphics if not get an emulator to check out the battle system.

By all means, do so. It has it all: gorgeous graphics, a mind-blowing storyline, and a very well designed battle system that doesn't get in the way of the narrative. A must have jewel. I actually own it, bought it back in the day =D.

By the way, I figured out brightening of the sprite. If you draw it twice, the second time with the same method as shown before, just right on top, and adjust the rgb values, you can tint and brighten at same time. It's perfect for walking out into the sun and brightening the character. Now I am trying to figure out Overlay and how to desaturate.

I'm glad. That's called additive blending, by the way. Had a look at the thread to see if rel implemented pixel-by-pixel access. No luck it seems. You'll need to access the image/texture on a pixel by pixel basis to do all the stuff that you want. Hence, my suggestion to use pixel shaders.

Perhaps if I see some of the practical potential it offers. I hope what I am doing now will not be less compatible?

Want to see it's practical potential? Look at any current-gen games. They're all rendered with pixel shaders. So I'd say that they are pretty powerful, no? =D
It's not that it will not be compatible. All the pixel shader functionality (OpenGL > 1.2) is accessed via extensions. You see, OpenGL is not an open graphics library, it's an open specification, the hardware vendor (be it NVidia, ATI, Intel or what have you) is responsible to implement the functionality. And although it's deprecated, it still works fine, only it's very limited.

I have built a semi-OOP engine, I guess you would call it. Everything is an object of some type, whether background or character. I don't use inheritance, haven't looked into that for FB, but all I can say is it works, really well. It's tailored just for this project and lets me write scripts that do just about anything. It was a huge learning experience, so I'm glad to do something myself, even if someone already has. It's mental exercise that pays off in a lot other things in the project and in life.

Yeah, I know what you mean. FreeBasic flexibility in that sense is one of its cooler features. See here, if you want a primer on FB inheritance =D
Is amazing how coding a game can teach you wildly different skills, no?

I haven't worked with anything as much as FB (or QB way back). I've played with C, C++, Pascal, Cold Fusion and PHP for the web, and I used to work a lot in Visual Basic. Although I believe logic is its own language and can be expressed in many different ways, I only really feel at home with FB. It's been almost 20 years of coding (on and off). Not near as much as some of you around here, of course, but having it under my belt sure helps with this project.

That's perfect! And yeah, I know how you feel. I also enjoy coding in FB, and all that experience of yours will prove very handy ;)

This thread is morphing into stuff that should be in my other thread, but what can you do!? :)

We can continue the discussion there, if you like. I don't mind at all. The code I'm preparing will be posted here, of course, as it's relevant to this thread.

Well, I'm off to finish your stuff XD

[mrToad]

That's called additive blending, by the way.

Ah, of course, I just didn't know that's what I was doing until you said that!

Had a look at the thread to see if rel implemented pixel-by-pixel access. No luck it seems. You'll need to access the image/texture on a pixel by pixel basis to do all the stuff that you want. Hence, my suggestion to use pixel shaders. Want to see it's practical potential? Look at any current-gen games. They're all rendered with pixel shaders. So I'd say that they are pretty powerful, no? =D

Yea I used his formal name, but we all know good ol' Rel, although either him or I has been under a rock for too long. Pixel shaders - Now I do see a use for this. Couldn't it be wired into the current library I'm using somehow? If not, I might have shaders on my to-do list. But besides that advantage, this game is pulling for more depth than just surface wow-factor. Obviously games can look better and better, and looking sweet is important. But once I reach a comfortable level of graphics and effects I am satisfied and will continue going deep - characters, story, gameplay.

It's not that it will not be compatible. [...] although it's deprecated, it still works fine

Good. That makes sense and I just wanted to be sure that, with how fast technology changes, my rendering won't be broke in a short while.

We can continue the discussion there, if you like.

I'm thinking I'll quote some things you said and reply over there, as I may like to continue the general discussion with you and anyone else who may be interested: Helpful Linky to Project Thread

[paul doe]

By the way, I figured out brightening of the sprite. If you draw it twice, the second time with the same method as shown before, just right on top, and adjust the rgb values, you can tint and brighten at same time. It's perfect for walking out into the sun and brightening the character. Now I am trying to figure out Overlay and how to desaturate.

Say, as I was coding the little demo for you, this got me thinking. Do you know how to work in other color spaces, such as HLS or HSV? This will help you to do all the effects you want, and then some more. Do you want me to add HSV support to the demo, so you can see how to convert to/from RGB? This will of course take me a little more time, but not that much. Your call =D

It's not that it will not be compatible. [...] although it's deprecated, it still works fine

Good. That makes sense and I just wanted to be sure that, with how fast technology changes, my rendering won't be broke in a short while.

Do have in mind, however, that the graphics card vendor is not required to provide support for it (which means, that on some graphic cards, the FFP simply don't work at all), so be aware of this fact.

... Couldn't it be wired into the current library I'm using somehow?...

Yes, it can. We can abstract all the low level stuff to the same calling convention that rel's GL2D uses. That, however, will limit its design, as you can probably imagine.

I'm thinking I'll quote some things you said and reply over there, as I may like to continue the general discussion with you and anyone else who may be interested:

Yes, of course I'll love that. There's much to talk about, as this is a broad topic. You'll see me there, then =D

See you soon
Paul

[mrToad]

Say, as I was coding the little demo for you, this got me thinking. Do you know how to work in other color spaces, such as HLS or HSV?

Well this is an unexpected amount of help. (Sneaking into the credits section, eh?) ;) I thank you. I am thinking HSL would be useful for sure. But am I going to have to drop the whole library if I want to start using these shaders?

... Couldn't it be wired into the current library I'm using somehow?...

Yes, it can. We can abstract all the low level stuff to the same calling convention that rel's GL2D uses. That, however, will limit its design, as you can probably imagine.

And coupled with potential non-support on some cards, you do have me thinking.

Again I really appreciate it. Just hope that if I get going in this new direction I will be able to handle the GL code, and without a lot of time trying to redo what I'm already doing. I'm willing to work with less power if it means saving me from a project halt as I try to get above the surface of GL far over my head. There's too much to do as it is. I love coding but I'm at least 50% artist so my talents are wider but divided in strength perhaps.

[paul doe]

Hi, pal. Been busy lately so your stuff is taking me longer than I expected. Let me address some of your concerns:

Say, as I was coding the little demo for you, this got me thinking. Do you know how to work in other color spaces, such as HLS or HSV?

Well this is an unexpected amount of help. (Sneaking into the credits section, eh?) ;) I thank you. I am thinking HSL would be useful for sure. But am I going to have to drop the whole library if I want to start using these shaders?

You bet ;)
Having to drop the library or not depends on how you can integrate the existing pipeline with the new. You'll have to study the GL2D code to see how Rel blasts pixels to the screen. IIRC, he simply draws a quad with some UV's, as there is a Texture Packer, written by the man himself, to pack the sprites and be able to batch the texture calls, as glBindTexture() is a relatively expensive operation. I don't quite remember, now.

Again I really appreciate it. Just hope that if I get going in this new direction I will be able to handle the GL code, and without a lot of time trying to redo what I'm already doing. I'm willing to work with less power if it means saving me from a project halt as I try to get above the surface of GL far over my head. There's too much to do as it is. I love coding but I'm at least 50% artist so my talents are wider but divided in strength perhaps.

You're welcome. The GL code is a little more complex, but only at first (as with almost anything new, no?). That's something you'll have to decide for yourself, of course. On a side note, how are you storing your assets? In the aforementioned format (texture packed), or do you pack them at load time and keep them segregated in memory?
I ask this because to be able to handle all the effects you're looking for (I'm currently coding the 21 blend modes found in GIMP) you need to access the color data at the component level. The little snippet is currently using FBGFX's native format (a FB.IMAGE buffer), but if you can find a way to blit them to a GL texture, you can use the code with almost no changes. As it currently stands, it works like a PUT command (supports clipping and blitting to a buffer).
Unfortunately, as you will soon see, it's not as simple as you may have thought. I'll lend the code and you see if it makes sense or not.

See you later,
Paul