Color grading: a how-to guide

Release and discuss things you've made, including mods.
User avatar
kharnov
Granger
Posts: 1851
Joined: Tue Mar 06, 2012 10:54 pm UTC
Clan: GT
Location: New York City

Color grading: a how-to guide

Postby kharnov » Mon Mar 25, 2013 6:13 pm UTC

Hi.

We've added color grading to the codebase yesterday. If you compile from source regularly, you should already have it. If not, either do so or wait until the next release. In either case, here is a short, simple guide on how to play around with the feature, in as few steps as possible.

What you need:

  • The code. Obviously, compile it if you haven't already.
  • A screenshot. It should preferably be of the area you want to work with.
  • The neutral color grade. You should have this in main/gfx in your source directory.
  • An image editing program. I use GIMP, but it doesn't matter what you use.

Here is the screenshot I am using for the purposes of this tutorial. It's of the alien spawning view on Parpax, and it has a nice variety of colors to work with:

[CENTER]Image[/CENTER]

Load the screenshot into GIMP. In the Colors menu, select Curves. You will get a window popping up with a histogram and a diagonal line running through it. Feel free to play around with the channel settings, because you can easily reset them. You have a choice of Value, Red, Green, and Blue. The value channel will brighten or darken the image, while the color channels will add or subtract that color, depending on whether you're going above or below the diagonal line.

In the example below, I've made it slightly brighter, and I've added to the red and blue channels while taking away some green. It probably looks a bit garish, and I'm sure that Viech will kill me for butchering Parpax, but this is simply to demonstrate an example.

[CENTER]Image[/CENTER]

Once you've saved your settings, load up the neutral color grade. By default, it is neutral.webp in your main/gfx directory in the source folder. It doesn't necessarily have to be webp, as you can use any image format recognized by the engine. I use png, for instance. In any case, apply your settings to the color grade, as shown:

[CENTER]Image[/CENTER]

Now, save your edited color grade with a memorable name. In my case, I am an extremely boring individual and decided to call it test1.png. You can call it whatever you want. Place it in a location where Unvanquished will recognize it. In my case, what I did was create a grading.pk3dir in my data directory, and inside of it, I made a gfx folder that I put my color grades into. It doesn't matter what you name the pk3dir, but make sure that there is a gfx folder inside of it that you place the color grades into. Once it's there, load Unvanquished and type the following command, substituting my example for whatever you named your color grade:

/testcgrade gfx/test1.png

If all went well, you'll be seeing your color grade applied to the entire map. Congratulations! You are now testing a significant renderer feature. Make sure to give us ample feedback in the appropriate forum sections. We will also be adding more features to color grading shortly. For the meantime, here are screenshots of Parpax with the color grade I just used in this tutorial. Feel free to post your own experiments in this thread as well.

[CENTER]Image
Image[/CENTER]
User avatar
ViruS
Granger
Posts: 1019
Joined: Sun Mar 11, 2012 4:24 am UTC
Location: Antartica - West Australian Post shore
Contact:

Re: Color grading: a how-to guide

Postby ViruS » Tue Mar 26, 2013 9:06 am UTC

"you'll be seeing your colour grade applied to the entire map"
That is so amazing just from a mere screenshot edit...

So basically in short, take a screenshot, "colour grade" it, then put it in the /gfx directory of a new pk3.
Open Unv and do
]/testcgrade gfx/<imgname.prefix>
and it should work right?

I wonder how you guys did this though... I'd think you would have to go through a whole load of tiring steps and processes to achieve this.
I also wonder if it works on GL renderer, i doubt it though. My client is a bit buggy since even on pure servers, turrets don't shoot straight and aren't detected by radars, and the old trem model seems to exist... not sure what's happening on my computer...
(md5 checking doesn't seem to detect anything wrong except a parpax-a1 pk3)
ImageImage[color="#000000"]You[/color][color="#FF0000"][[/color][color="#A9A9A9"]Tube[/color]Image
User avatar
velociostrich
Dragoon
Posts: 318
Joined: Thu Mar 08, 2012 6:24 pm UTC

Re: Color grading: a how-to guide

Postby velociostrich » Tue Mar 26, 2013 1:41 pm UTC

ViruS wrote:"you'll be seeing your colour grade applied to the entire map"
That is so amazing just from a mere screenshot edit...

So basically in short, take a screenshot, "colour grade" it, then put it in the /gfx directory of a new pk3.
Open Unv and do
]/testcgrade gfx/<imgname.prefix>
and it should work right?


No. Please re-read.

I also wonder if it works on GL renderer, i doubt it though.


Both renderers use OpenGL. If you mean the "vanilla" renderer (which should really be called the "legacy" renderer, imo), then yes, it won't work as it doesn't have or support GLSL shaders (intentionally).
User avatar
Viech
Project Head
Posts: 2139
Joined: Fri Aug 03, 2012 11:50 pm UTC
Location: Berlin

Re: Color grading: a how-to guide

Postby Viech » Tue Mar 26, 2013 3:20 pm UTC

ViruS wrote:turrets don't shoot straight and aren't detected by radars, and the old trem model seems to exist...

Try seting cg_highPoly*Models to 1.
Responsible for: Arch Linux package & torrent distribution, Parpax (map), Chameleon (map texture editor), Sloth (material file generator), gameplay design & programming, artistic direction
User avatar
ViruS
Granger
Posts: 1019
Joined: Sun Mar 11, 2012 4:24 am UTC
Location: Antartica - West Australian Post shore
Contact:

Re: Color grading: a how-to guide

Postby ViruS » Wed Mar 27, 2013 12:31 pm UTC

Viech wrote:Try seting cg_highPoly*Models to 1.

It's the shotty that has the old trem model only (the luci, lasgun, mdriver and rifle uses the new models) and the mgunturret is using the new model.
ImageImage[color="#000000"]You[/color][color="#FF0000"][[/color][color="#A9A9A9"]Tube[/color]Image

Return to “Community Development”

Who is online

Users browsing this forum: No registered users and 2 guests