Color Chooser Plugin / Addon ?

Post reply
0 favourites
From the Asset Store
DATA+ (Addon Pack)
$22.50 USD
Data+ is the best Data Management solution for Construct 3. It contains 4 Addons (Plugin & Behavior).
Overboy's avatar
Overboy

  • dop2000 i was trying to create this gradient with built-in canvas function, but no success xD

    I got this:

    Also:

  • rokstars322 You need to apply two gradients one after another.

    Yeah, I wasn't sure why pasting object didn't work immediately, so I simply added 0.1 wait. Your version is cleaner :)

  • This post became VERY interesting thanks to all your different approaches and solutions! :)

    Sorry for this long post, I hope that some of you may find this interesting:

    Since I'm not a programmer, but I am a professional animator (my day job) and have years of experience with post production, my simple-brain wanted to try the same way I use when I work on a post production stage for a video.

    It's called "color grading" and it can get much more complex than what I tried here, but I think this will make my original goal (2 points gradient covers the layout) a bit more interesting with my approach joins to the party.

    .

    Basically in video post production we start with a simple "canvas" to do a color grading over specific group of layers by adding an adjustment layer on top and placing the needed effects over it (so you can dynamically change it at any time during production) and THIS is what I tried to SHOW on this file, based on the first file by noah since it was the most simple for me to look at.

    .

    I call this "FAKE GRADIENT" because it is probably NOT how an actual programmer will do this, also I'm not interested using the SPRITE Gradient way on a FULL canvas, because it will add extra space "size" to the saved file project for the user, also since it's already built-in and can be used with the Drawing Canvas with more Dynamic way to manipulate it using true-colors instead of a sprite.

    .

    As you can see, on the MIDDLE this is what I FAILED to achieve, covering the FULL area with gradient.

    on the RIGHT is I show how it SHOULD look like but I played with the numbers on the Drawing Canvas Gradient and couldn't get to the same result...

    I wonder if anyone can have a look and make the MIDDLE drawing canvas to look more like the RIGHT one because I believe that I can't get the covering numbers right...

    The final goal is to cover FULL LAYOUT SIZE with the canvas + gradient and not just a tiny cube which makes the quality looks smooth and amazing... color grading with less than 32bit true color covers a full screen may look REALLY BAD that's why I mention this.

    Play around with the color wheel, and look at the Middle and the Right examples to see what I mean:

    DOWNLOAD - Color Grading Project

    I'm curious to see this "Fake" way works on the drawing canvas without a SPRITE gradient!

    please feel free to share your versions :)

  • Alon

    rgba(Red, Green, Blue, Alpha)

    uses values for chanels and alpha from 0 to 100, NOT 255.

    rgba255(Red, Green, Blue, Alpha)

    uses values for chanels and alpha from 0 to 255.

    Its not looking like you would expect, BUT much better already:

  • Thanks rokstars322 I had a feeling I did something wrong with the numbers, oops! :)

    I need to remember that it's 100 max instead of 255 like in true 24bit/32bit colors for post production video and digital graphic software.

    You're right it does look weird... it doesn't fill the area correct from start to end like it should:

    Hard for me to describe but it looks like it's unbalanced, the 50% middle point seems like it's WIDER or stretched in a way instead of well balanced from black to white:

    Ashley is there a way to get a more accurate Black to White gradient in C3 using the Drawing Canvas Object?

  • Try this:

    Clear canvas with rgba(100, 100, 100, 100)

    Fill vertical gradient with rgba(0, 0, 0, 0) to rgba(0, 0, 0, 100)

  • I believe that the last (4th) number is for the Alpha channel which I don't want it to be under it's 100% (none transparent) since I need the alpha channel available as an extra parameter that I will actually tweak later on.

    I wonder if it's possible at all with the canvas object, because for now the gradient looks unbalanced as I showed in the examples above...

  • I agree, Drawing Canvas doesn't produce uniform gradients..

    You can always draw it yourself, line by line (Using DrawingCanvas Draw Line action). It will look like this:

  • Note that Drawing Canvas gradients are gamma-correct, but sprite gradients are not. (In other words Drawing Canvas does gradients the right way, and sprite/everything else uses the wrong way.) So it is expected that if you compare Drawing Canvas to Sprite, you will see different results - the difference between gamma-correct and gamma-incorrect.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Note that Drawing Canvas gradients are gamma-correct, but sprite gradients are not. (In other words Drawing Canvas does gradients the right way, and sprite/everything else uses the wrong way.) So it is expected that if you compare Drawing Canvas to Sprite, you will see different results - the difference between gamma-correct and gamma-incorrect.

    But why did you decide to make CORRECT results AND INCORRECT at the same time? It is inconsistent, I think. Maybe add project property to let user decide which option he wants to use? Like "Gamma-correct" (including Sprites) and "Gamma-incorrect" (including DrawingCanvas).

  • The gamma-correct gradient may be mathematically correct, but it looks wrong compared to gradients produced by other tools (like Photoshop, Corel Draw, Gimp etc.) The grey area in the middle is too large. It would be nice to have a option to choose gradient method.

    Also, what is the "sprite gradient" everybody is talking about in this thread?

  • The gamma-correct gradient may be mathematically correct, but it looks wrong compared to gradients produced by other tools (like Photoshop, Corel Draw, Gimp etc.) The grey area in the middle is too large. It would be nice to have a option to choose gradient method.

    I couldn't describe it better... I'm years in the video/graphics/post industry and I can easily tell it looks wrong with all the respect to the way it actually works behind-the-scenes.

    It shouldn't be the default way for most users, especially artists who came from digital graphics to C3.

    Also, what is the "sprite gradient" everybody is talking about in this thread?

    I'm not sure, but maybe like in my example which is pure simple B/W gradient made in Photoshop compare to the one that created in C3 using the drawing canvas object.

  • Also, what is the "sprite gradient" everybody is talking about in this thread?

    I guess its Sprite blend mode/effects related.

  • Gamma correct is actually the right way to do it, taking in to account the sRGB color space of common displays. However for legacy and performance reasons the rest of the runtime just does gamma-incorrect linear gradients. Properly-designed art software really ought to be using gamma-correct gradients. See this blog post about gamma for more background and theory.

  • Ashley

    See this blog post about gamma for more background and theory.

    Ok, for text and 3D I agree that gamma-correct colors looks better and it worth implementing, but for 2d gradients... Well, I would prefer to use the option that is used, for example, in Photoshop or any other software that I use to create/edit images. And if that softaware uses gamma-correct values, than ok, but if not, maybe let me force C3 to use gamma-incorrect colors? Like i said:

    Maybe add project property to let user decide which option he wants to use?

    And by default let it be like it is right now. What do you think?

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)