I'm creating a 2D game in Unity that relies on combining colors. For instance, if the yellow sprite in in a position, and the player slides a magenta sprite partly over it, the area where the two intersect should become red. If someone then slides a cyan sprite, the cyan+yellow should be green, the cyan+magenta should be blue, and the cyan+red should be black.

I was planning to use box collider 2d and use a OverlapArea on TriggerStay2D, but that didn't work. I'm assuming in my code below that pointA is the upper left coordinate of the first sprite, and pointB is the upper left coordinate of the second sprite (though perhaps I'm wrong on that).

void OnTriggerStay2D(Collider2D collisionInfo)
    Debug.Log("I am still colliding");

    Vector2 pointA;
    Vector2 pointB;

    pointA = this.transform.position;
    pointB = collisionInfo.transform.position;

    Vector2 pointC = Physics2D.OverlapArea(pointA, pointB);


After reading the documentation, I think I'm not understanding what OverlapArea returns - it seems to return a Collision, but that doesn't make a whole lot of sense.

Any thoughts on this? Is there a better way than trying to find a pair of 2-Tuples that would bound the collision area and create a new sprite of the new color over that area?

  • \$\begingroup\$ I'm thinking maybe that a custom shader would do this, but I haven't been able to find any examples of this being done with a shader and I'm a complete and utter noob when it comes to ShaderLab. Anyone? \$\endgroup\$ – Jesse Williams Jul 18 '16 at 15:19
  • \$\begingroup\$ It's not clear to me what you're trying to do here. The method OverlapArea answers the question "Are there any colliders touching this rectangle of worldspace?" - but that doesn't seem to be what you're trying to use it for. If you just want a visual effect of colours combining, have you considered simply using multiplicative blending? \$\endgroup\$ – DMGregory Sep 9 '16 at 15:57

Physics2D.OverlapArea(pointA, pointB) just returns which collider is under the area covered by a rectangle with pointA and pointB as corners.

This will not be useful for what you are trying to achieve. You will need a shader that combines the colors being rended.

You could create a new material, and use the "Particles->Multiply", then use this new material on your SpriteRenderers (if you are using sprites).

With this shader the colors will blend like you described, but keep in mind that it will blend with the backgroun too, so the background should be white to keep the colors of the sprites "clean".

| improve this answer | |
  • 1
    \$\begingroup\$ The built-in "Particles -> Multiply" shader will handle the subtractive colour case (eg. overlapping cyan + yellow = green) \$\endgroup\$ – DMGregory Sep 11 '16 at 16:32
  • \$\begingroup\$ True. I'll update the answer! \$\endgroup\$ – Leo Sep 11 '16 at 16:41
  • \$\begingroup\$ Hmm, I'll have to try some tests with this. And maybe modify the shader a bit. So these would need to be triggers on both objects (because I don't want them to physically collide, but rather move through one another) and the intersection would be multiplicative by shader rules? \$\endgroup\$ – Jesse Williams Sep 13 '16 at 15:09
  • \$\begingroup\$ There's no default shader that would handle a primary color wheel combination accurately is there? Red plus yellow = orange \$\endgroup\$ – Jesse Williams Sep 13 '16 at 15:13
  • \$\begingroup\$ I'm afraid not. Shaders are kind of a mystic thing for me, so unfortunatelly I can't help you further. At least now you know you specifically need a shader to achieve this effect. Sorry I can't be of any help here. \$\endgroup\$ – Leo Sep 13 '16 at 15:46

You can use triggers to detect when a new intersection happens. Or could could calculate it manually.

Anyway, once you detect an intersection, you should determine manually which areas should have which colors. I mean, you should have two different data structures: the physical objects that the player manipulates, and the color fragments. Therefore, each physical object will be rendered by a combination of color fragments.

Suppose that two rectangles overlap each other in a cartesian way, so the overlap zone is a rectangle and each rectangle has an L-shaped non-overlapping zone. You would need two physical objects (one for each rectangle), and five color fragments (one for the overlapping tectangle, and two for each of the L-shaped zones).

Each time the physical objects move, you should recalculate the color fragments, according to their position in the scene.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.