- Home /
Outline Overlapping Game Objects
Hi there,
I'm after an outline effect on quads, that when two quads overlap the outline only shows up outside both of them. Not a toon style outline, just a single pixel line going around the outside of the 2d geometry. I'm hoping somewhere here has utilised a similar effect.
Any and all help is appreciated.
EDIT: The quads will also be resized, sometimes proportionally sometimes not.
EDIT 2: It is for an iOS project. I am the worst, information wise.
I'd go for a shader that draws a outline. You can use and tweak this one to fit your needs:
Ah this looks like a good start, however modifying the shader to suit my needs is beyond my ability. It also appears to be quite a complex shader, forgive my ignorance but is it packed with functionality that I won't utilise? (The project is on iOS.)
Answer by Owen-Reynolds · Mar 18, 2014 at 02:56 PM
If it's a square-edged outline, should be able to, essentially, put a slightly larger black square behind every quad. That way, when quads touch, each covers up the adjacent border of the other.
The problem is, real borders almost always have a tiny bit of rounding on the corners (when the border is 2+ pixels with a tad of transparency on the outer ring.) That gives a slight dip in the new end-to-end combined border, where the old corners meet. And a darker dot where the transparencies reinforce in the overlap. But a fully opaque square border should be fine.
Ah, that's a good solution for quads. Sadly my question had a little less info than it should have, I want the ability to stretch the quads to whatever shapes I like. I can obviously manually resize each border as I resize, but the problem is with dynamically sizing objects.
So, the problem is the border becomes too thick or thin as the objects grows/shrinks?
Just more math. Say the quad is 4 wide and you want a 0.1 border -- back-border is 4.2 wide. Set child back-border local scale to 4.2/4=1.05. Say the quad shrinks to 0.5 wide. Same 0.1 borders gives 0.7 for the back part. localScale should be 0.7/0.5=1.4.
Of course, you could keep square+border as separate objects. Less math (background scale is always X+0.2) but more things to move around.
Yeah I was looking for an in-editor solution to see the effect, but doing the resize with code on awake solves the issue as well. Thanks very much!