Core Graphics Tutorial: Patterns

Changing the Pattern’s Color and Direction

Now’s a great time to set up code to control and test the pattern color and direction.

Add the following methods in PatternView after the property definitions:

init(fillColor: [CGFloat], direction: PatternDirection = .top) {
  self.fillColor = fillColor
  self.direction = direction
  super.init(frame: CGRect.zero)
}
  
required init?(coder aDecoder: NSCoder) {
  super.init(coder: aDecoder)
}

This sets up an initializer that takes in a fill color and a pattern direction. direction has a default value.

You’ve also added the required initializer for when a storyboard initializes the view. You’ll need this later when you transfer your code to the app.

In MyViewController, change patternView since you’ve changed the initializer:

let patternView = PatternView(
  fillColor: [0.0, 1.0, 0.0, 1.0],
  direction: .right)

Here, you instantiate a pattern view with non-default values.

Run the playground. Your triangles are now green and pointing to the right:

Congratulations! You’re done prototyping your pattern using Playgrounds. It’s time to use this pattern in Recall.

Updating the Game to Use the Pattern

Open the Recall starter project. Go to PatternView.swift and copy over the CGPath extension from your playground to the end of the file.

Next, replace PatternView in PatternView.swift with the class from your playground.

Build and run the app. You should see something like this:

Something’s not quite right. Your pattern appears to be stuck in default mode. It looks like a new game view isn’t refreshing the pattern views.

Go to GameViewController.swift and add the following to the end of setupPatternView(_:towards:havingColor:):

patternView.setNeedsDisplay()

This prompts the system to redraw the pattern so that it picks up the new pattern information.

Build and run the app. You should now see colors and directions nicely mixed up:

Tap one of the answer buttons and play through the game to check that everything works as expected.

Congratulations on completing Recall! You’ve come a long way from the mind-numbing days of simple paint jobs.

Considering Performance When Using Patterns

Core Graphics patterns are really fast. Here are several options you can use to draw patterns:

1. Using the Core Graphics pattern APIs that you worked through in this tutorial.
2. Using UIKit wrapper methods such as UIColor(patternImage:).
3. Drawing the desired pattern in a loop with many Core Graphics calls.

If your pattern is only drawn once, the UIKit wrapper method is the easiest. Its performance should also be comparable to the lower-level Core Graphics calls. An example of when to use this is to paint a static background pattern.

Core Graphics can work in a background thread, unlike UIKit, which runs on the main thread. Core Graphics patterns are more performant with complicated drawings or dynamic patterns.

Drawing the pattern in a loop is the slowest option. A Core Graphics pattern makes the draw call once and caches the results, making it more efficient.

Where to Go From Here?

Access the final project by clicking the Download Materials button at the top or bottom of this tutorial. You can also use this to check your work if you get stuck.

You should now have a solid understanding of how to use Core Graphics to create patterns. Check out the Patterns and Playgrounds tutorial to learn how to build patterns using UIKit.

You may also want to read through the Curves and Layers tutorial, which focuses on drawing various curves and cloning them using layers.

We hope you enjoyed this tutorial. If you have any comments or questions, please join the forum discussion below!