Drawing Canvas Cutouts

The Drawing Canvas right click>Insert new object> OTHER> Drawing canvas, offers the ability to not only draw, it also lets you paste, and erase. This makes it a great option for making masks, and other essential parts of a UI, or design. Composing a cut out, or mask does take a few steps and we'll cover that here.


To start add any images that will be underneath the mask.
Remember order matters, so in this case the particles goes over the Sprite.


After adding the Drawing canvas, make sure it covers the viewport of the project.
We want the 9Patch to be part of the cut out, so it goes on top of the DC.





Everything in the layout should look a bit like this.
















A look at the Z order bar.






Now for the events:
+ System: On start of layout
-> DrawingCanvas: Fill Vertical linear gradient (0, 0) to (LayoutWidth, LayoutHeight) with rgb(150, 0, 250) to rgb(150, 100, 0)
-> DrawingCanvas: Paste object 9patch with effects
-> System: Wait for previous actions to complete
-> 9patch: Destroy
-> DrawingCanvas: Add polygon point (Sprite.BBoxMidX, Sprite.BBoxTop)
-> DrawingCanvas: Add polygon point (Sprite.BBoxLeft, Sprite.BBoxMidY)
-> DrawingCanvas: Add polygon point (Sprite.BBoxMidX, Sprite.BBoxBottom)
-> DrawingCanvas: Add polygon point (Sprite.BBoxRight, Sprite.BBoxMidY)
-> DrawingCanvas: Draw polygon outline with rgb(0, 0, 0), thickness 30, cap Butt
-> DrawingCanvas: Fill ellipse at (Sprite.BBoxMidX, Sprite.BBoxTop) radius (14, 14) with rgba(0, 0, 0, 100) (Smooth edge)
-> DrawingCanvas: Fill ellipse at (Sprite.BBoxRight, Sprite.BBoxMidY) radius (14, 14) with rgba(0, 0, 0, 100) (Smooth edge)
-> DrawingCanvas: Fill ellipse at (Sprite.BBoxMidX, Sprite.BBoxBottom) radius (14, 14) with rgba(0, 0, 0, 100) (Smooth edge)
-> DrawingCanvas: Set drawing blend mode to Destination out
-> DrawingCanvas: Fill polygon with rgba(0, 0, 0, 100) (convex: False)
-> Particles: Fast-forward 30 seconds
First we fill in the Drawing canvas with a gradient.
Then we paste the 9Patch into it.
We need to wait for that to finish before we destroy the 9Patch.
Now we create a polygon at all the mid points of the Sprite to make the diamond.
After that we can draw an outline around it, and do a bit of chamfering of our corners with some ellipses.
Then the magic happens. We set the Drawing canvas's blend mode action to Destination out.
This makes everything you draw to it erase it instead.
Then just fill the polygon, and speed up the particles if you want.

Find the source: Here



Comments