UIBezierPath Lesson: How to draw Cuphead on layers
I have a lot of custom shape layers and bezier paths on my last projects. I want to share my experience in custom shapes drawing. The knowledge about Core Animation has some interesting problems. As for me, the main problem here is rare in custom shapes using. So only sometimes you need to draw something custom, and you don’t have, such experience in that, because it isn’t a core knowledge of iOS developer. Don’t get me wrong. I am talking developers with 1–2 years of experience and I think that I know why. A developer like I said above has a list of must-have skills and Core Animation not a part of them. That’s why some developers have knowledge gaps in custom shapes drawing.
BezierPath has a lot of ways to draw elements of shape. We will talk only about used here. In this post, we will use the most used ways to draw custom shapes. I think it can be a good start for developers who have problems and misunderstandings about shapes drawing. We will draw a cuphead like in the screen below.
Theoretical Part
- Parts of BezierPath: Line, QuadCurve, Curve, UIBezier ready to use predefined shapes (rectangles, ovals, circles, the arc of circles, rounded rectangles.
- How to create shapes from bezier paths.
The coordinate system in CAlayers
The coordinate system inside the layer is a little bit different from the Cartesian coordinate system. In the layer coordinate system, you don’t have a negative value, and all shapes will draw from the left-top corner. You can see an empty coordinate system below. It will have a gray background for better understanding.
Bezier Lines
For the drawing line, you need to set the first point with the method move (x: 200, y: 200). After that, you can add the second point with function addLine (x: 380, y: 380). You can easily add as many lines as you need. In my example below I added 2 lines.
Bezier QuadCurve
If you want to draw a curve with 1 control point you can easily do it with addQuadCurve method.
Bezier Curve
If you want to draw a curve with 2 control points you can do it with addCurve method. With 2 control points, you can easily build difficult paths with any form as you need.
Ready-to-use predefined Bezier paths.
UIBezierPath class has predefined inits which can create ovals, circles rectangles, etc.
Shapes Part
Let’s talk a little bit about the shape part. UIBezierPath creation isn’t enough. You need to put a path inside CAShapeLayer. You can customize (lineWidth, fillColor, strokeColor) your CAShapeLayer. UIBezierPath can’t be customized because it is just a curve.
Realization
The theoretical part you can easily find anywhere on the internet. But it is not clear how to create some complex parts. We can draw lines, curves, rectangles, circles, ovals and that’s why I want to show how to draw a complex shape with all these elements. I choose a cuphead icon for this. Now we will draw the image from this post preview.
Start
Here you can find the ready project. I created a CupheadView.swift file, and all shapes will be here.
Full Code
In the setup method, you can see a full list of all shapes.
Head Shape
The head shape has only 1 QuadCurve and 1 Curve.
Mouth Shape
Mouth shape has 2 main parts — parent shape and tongue shape. The parent path has only 2 curves and black fill color. The tongue has 3 parts — 2 curves and 1 QuadCurve. The tongue is also filled but in red color.
Eyes and Nose Shape
Each eye has a parent shape and eye shape. Eye shape contains only 1 Curve shape. Eye Shape has 1 QuadCurve and 2 Curve shapes and filled to black. The nose is a UIBezier oval predefined element. It has a stroke and filling.
Drinking Tube and Ear Shapes
The drinking tube is the most difficult part here. It has 4 elements inside. Each element has its own curves and lines
Conclusions
The BezierPath drawing only looks like a difficult thing. But even with technics from this post, you can easily create a complex icon look like above. You just need to see the simple curves, lines, and shapes inside the complex shapes that you need.
I have other posts about shapes drawing, layers, custom progress bars, etc. You can check it here:
