Making A Color Picker Swatch Work

Unity Engine
1

Used to be I could use a quad and attach a MeshCollider and ray cast to get the pixel underneath my mouse pointer.

var hit : RaycastHit;
var ray = UICamera.ScreenPointToRay (Input.mousePosition);
if (Physics.Raycast (ray, hit, 100)) {
   if (hit.transform.name == "ColorPickerGradient") {
       var cPkr = hit.transform;
       var grdTxtr : Texture2D = cPkr.GetComponent.<Renderer>().material.mainTexture as Texture2D;
       var currentColor = grdTxtr.GetPixelBilinear(hit.textureCoord.x, hit.textureCoord.y);
     }
}

Can’t see the quad show up in uGUI and can’t add a mesh collider to a Sprite or RawImage component. What sort of back somersaults and voodoo do I have to do to make a simple pointer over image and get the pixel color color picker??

2

guessing a little… but

implement Redirecting to latest version of com.unity.ugui interface function on the image, use the Redirecting to latest version of com.unity.ugui to grab the pixel from the image

3

I think I almost got it. First use a RawImage and set the texture to Advanced and Read/Write enabled. The on the RawImage add pointer down and drag functions from the EvenTrigger component pointing back to the color picker function. It gives me readout in the console when I Debug.Log() the coords but was using mouse input coords. The colors were wrong and were all near white. I think it should be pointer position but am having a little trouble there. The following compiles with no error but when I press on the gradient I get a null reference exception on the pointerData.position line. What is the trick in .js to get this data working…specifically the pointerData which I think may be the bugaboo I am running up against. This used to be a breeze and wrote 50+ color pickers prior.

function PickLayerColor () {
    var clrPkr = colorPickerGrad.texture as Texture2D;
    var pointerData : EventSystems.PointerEventData;
    var pPos = pointerData.position;
    var relX = pPos.x - colorPickerGrad.transform.position.x;
    var relY = pPos.y - colorPickerGrad.transform.position.y;
    var pkrColor = clrPkr.GetPixel(relX, relY);
}
4

have a look at the bottom two functions on Unity - Scripting API: RectTransformUtility

5

Those look to be the ticket. I scanned every other class and jumped through innumerable hoops to get the above and got enough printed to the console to assure me I was headed in the right direction… Then I made RGB sliders instead:) I will make myself a prefab whilst I do coffee and test. Thanks for the tips pal:)

6

no worries, been playing with dragHandlers in world space so getting the position information correct has been my hoops of late :slight_smile:

7

The below spits out the color. You have to set the texture of the RawImage to Read/Write in the importer and set the RectTransform Pivot to x = 0 and y = 0

var colorPickerGrad : UI.RawImage;

function PickLayerColor () {
    var clrPkr = colorPickerGrad.texture as Texture2D;//gets the texture2D
    var clrPkrRect = colorPickerGrad.rectTransform;//gets the RectTransform reference
    var mPos : Vector2 = Input.mousePosition;//get the mouse position
    var pv : Vector2;//provide an output to send the data to
    var pPos = RectTransformUtility.ScreenPointToLocalPointInRectangle(clrPkrRect, mPos, UICamera, pv);//pointer position
    //covert coords to int for GetPixel
    var relX = Mathf.RoundToInt(pv.x);
    var relY = Mathf.RoundToInt(pv.y);
    //keep within rect limits
    if (relX < 0) {
        relX = 0;
    } else if (relX > clrPkrRect.rect.width) {
        relX = clrPkrRect.rect.width;
    }
    if (relY < 0) {
        relY = 0;
    } else if (relY > clrPkrRect.rect.height) {
        relY = clrPkrRect.rect.height;
    }
    //gets the pixel color
    var pkrColor = clrPkr.GetPixel(relX, relY);
}