Color Chooser Plugin / Addon ?

  • Hi All,

    Is there a plugin for that out there? even non-official will do the job as long as it works.

    I would like to add a color gradient for the user to CLICK to apply the specific color to the canvas in real-time. for example:

    Thanks ahead!

    Tagged:

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • C2 plugin:

    construct.net/en/forum/extending-construct-2/addons-29/plugin-color-picker-79924

    (working download link in comments)

    Maybe you can find someone who can port it to C3.

  • C2 plugin:

    https://www.construct.net/en/forum/extending-construct-2/addons-29/plugin-color-picker-79924

    (working download link in comments)

    Maybe you can find someone who can port it to C3.

    Yeah... unfortunately it's not a built-in feature in C3 yet. :(

    I thought about alternatives way but they are very complex for me to do (not for my level), I thought about using the sliders with HSL but it's not what I look for, I want a simple picker / chooser.

    I'm now playing with the "ReplaceColor" effect for the first time, using a Sprite starting with a WHITE color as source, but again.. changing it using a slider is not what I want to do and making a picker is something I don't believe I understand exactly how to do base on color image, a true color-picker would be REALLY nice... but I guess there is no plan for useful features like this anytime soon.

  • And probably will never be. Your best shot is to port that addon.

    Another (long and complex) option is to make color picker yourself. On your screenshot you have two sprites: saturation+value and hue. By clicking them you can select H+S+V values for a color, and using some formulas convert them to RGB.

  • I just posted a request, hopefully someone will consider to do that one day.

    In the meanwhile, I'll just try to think of other (simple enough for my level) solutions to do. :)

  • Alon

    You can make what you want using the Drawing Canvas

    Try this:

    https://ufile.io/ki20dkr2

  • Alon

    You can make what you want using the Drawing Canvas

    Try this:

    https://ufile.io/ki20dkr2

    This is really cool noah :) thanks for sharing.

    I need to play with it and see if I can implement this to my project!

    I think I'll try to paste the "Selected Color" when exporting but I need to UN-Paste it after exporting somehow (so it won't stay on the background for good since my default will be an Empty Frame (transparent).

  • Alon

    You can make what you want using the Drawing Canvas

    Try this:

    https://ufile.io/ki20dkr2

    Yes, but there is one little problem:

    To avoid this, you need to use "DrawingCanvas.PixelScale".

    My version.

    drive.google.com/file/d/1YvNtZMYXznLBOW7MqD_LI7OtbGzbAr0H/view

  • Thanks for sharing rokstars322 :)

    I'll play around with your version soon!

  • I'm not sure if possible or how exactly but is it much more complicated to make gradient based on 2 selected colors? same concept of the above wheel examples by: noah and rokstars322

    I would like to make a sprite in the size of the layout so it will be possible to make a gradient from 2 colors for example from White to Black will make it smooth gradient in between.

    I did some tests with just canvas 2 color gradient but the result always looked weird (the gradient was like 5th of the screen instead of exactly half white and half black (gray in-between of course) more like in photoshop, it was so confusing to me that I didn't even try to think about the color wheel code example hehe :D

  • rokstars322

    Nice! Can you explain how pixelscale works and what it's for? I'm not familiar with it

  • Alon

    You can make gradients using the Advanced Random plugin

    Go down to the section in this tutorial called "Color Gradients"

    construct.net/en/tutorials/getting-started-with-the-advanced-random-plugin-30

  • As I understand, this color wheel only shows colors with 100% luminocity, you also need some slider control for luminocity/brightness.

    .

    Here is how to make HSV color picker:

    Clicking on the bottom sprite gives you Hue number (from 0 to 360), you need to measure the relative distance from the left of the sprite.

    Clicking on the top sprite gives you both Saturation and Value numbers (from 0 to 100).

    In the above example I got H=157, S=86, V=70

    After converting to RGB: R=25, G=179, B=120

    .

    There are two tricky things:

    1. After clicking the Hue sprite you need to read clicked pixel color and update the SV sprite with the same color. SV box actually consists of 3 sprites on top of each other. Solid white sprite at the bottom, with "Set color" effect. And two gradients on top of it, you can make them in Photoshop or Gimp - one horizontal gradient from transparent to white, and a vertical gradient from transparent to black.

    2. Converting HSV to RGB requires some math. You can find it in google.

    Or you can simply read RGB color of the clicked pixel the same way as in NOAH's example with Drawing Canvas.

  • rokstars322

    Nice! Can you explain how pixelscale works and what it's for? I'm not familiar with it

    Well, its about converting object's coordinates. See this (CO-ORDINATE SYSTEMS section).

    Added HSV slider, and something like HSV gradient.

    But there is one problem:

    I think it can be fixed, by generating a proper gradient image, but not sure how to do it.

    drive.google.com/file/d/1LxlzlMKD0SB7vCobkChgBH-7n1YANCyw/view

    P.S. Saved in latest beta, sorry :/

  • Because I have nothing else to do this nice spring Sunday evening, here is my version:

    dropbox.com/s/pe01tn06ac08cxk/PickerHSV.c3p

    .

    rokstars322 I see you are in this post, please re-download my file, I've updated it.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)