How can I create beveled edges like the one in the attachment using SpriteKit?
Would you not simply create an art asset with the appearance you want and then use that as image source for your sprite?
That’s won’t solve my problem as there are tons of combinations in my app, basically I have a set of squares and I need to draw a beveled outline like shown
You may need to come up with components, that when overlapped, give you the right appearance. If you created the large horizontal rectangle as a unit with a solid black border around it, and the two vertical rectangles as objects with partial black border that could work. The ends of the smaller rectangles would have to become partially transparent with no border and with the correct bevel. This would result in a series of images that can be intersected with (solid borders) and a series of objects that can intersect (partial borders) and partially transparent ends. I don’t know if these things would be animated toward each other (which would make things way harder if not impossible) or be constructed as units before being brought into view.
I was hoping there would be a special fill pattern that would do the job for me, what you are suggesting is good but hard to implement