How to Make a Custom Screensaver for Mac OS X

Learn the basics of programming your own Mac OS X screensaver

Trevor Phillips
Jul 15 · 5 min read
The “Wirbel” Screensaver

Apple’s default screensavers for Mac OS X are nice, but they get boring after a while. Any true nerd would take matters into their own hands when that happens!

If you want to make your own custom screensaver for Mac OS X, this article is for you. We’ll walk through a tutorial for making a screensaver which emulates the game Pong. It’s going to be super simple — this is just to get you started with how to make a screensaver. By the end, it will look something like this:

If you want inspiration to make something else, more complex screensavers are available here.


Step 1: Project Setup

Screensavers for Mac OS X are developed with Xcode. The first thing you’ll need to do is create a new Xcode project with the category “Screen Saver.”

I named my project Pong, but you can name yours anything you’d like. As of Xcode 10.2.1, Xcode will generate some files: , , and .

Since Objective-C isn’t the prettiest language and Swift is becoming more mainstream, we’re going to delete these auto-generated Objective-C files and create a new file, .

The structure of this Swift file is quite simple. You can copy-paste the template from below:

We will use the function to render content for each frame of the screensaver animation.

We will use the function to update the “state” of the screensaver every time the animation timer fires (this timer is created and handled automatically by the OS). It’s important to call at the end of this function so that the OS knows to re-draw the screen.

Important: Since we got rid of the Objective-C stuff and are using Swift, the project’s file needs to be updated. Prefix the value for the key “Principal class” with the name of the Xcode project. For example, my Xcode project is called Pong, so I changed the value from to .

Step 2: Implement Logic

The state of our pong screensaver is going to be tracked with just a few simple variables:

In the function, we’re going to configure the ball’s initial position and velocity. We set the initial position to the center of the screen and set the initial velocity to a random vector with magnitude .

Now we need some helper functions to determine when the ball makes contact with the edges of the screen and/or with the paddle. The following two functions will do the trick:

The function is not 100% robust for verifying contact between the ball and paddle, I know. But for our purposes, it’s good enough.

Now, we’re going to use these helper functions to update the “state” of our screensaver in .

The paddle is guaranteed to track the x-position of the ball. Therefore, it will always make contact with the ball before it bounces on the bottom of the screen (unless you set the ball’s velocity really high, in which case it could “jump through” the paddle).


Step 3: Draw Animations

The only thing left to do is to draw the ball and paddle in the function. Note that we re-draw the background first before drawing anything else, otherwise the ball would leave a “trail” as it bounces around the screen.

We also define more helper functions to compartmentalize the drawing logic:


Step 4: Install and Debug

At this point, the screensaver is ready to go. You can find all of the code here.

To install the screensaver, press the “Run” button on Xcode, open the build product in Finder, and double-click it. The Settings application should open up, and you’ll be prompted to install the screensaver.

If you make changes to the screensaver and want to re-install it, it’s important to close the Settings application before trying to re-install your screensaver.


Additional Debugging

It’s not ideal to test your screensaver using the tedious process of opening your build product in Finder, closing the Settings application, re-installing the screensaver, and etc.

Moreover, this method does not allow you to set breakpoints, interact with , or view console output. But there’s a way!

Your screensaver class inherits from , which itself inherits from . This means that it can be added to a subview of a regular old Mac OS X application.

Just create a new Xcode project of type “Cocoa App.” Then, add your screensaver as a subview of the main 's view generated by Xcode. We need to artificially create a timer for the animation loop, but it’s a pretty simple fix.

When you run this Cocoa App from Xcode, all of the normal tools such as breakpoints and console logs will be available for your debugging pleasure, and developing your screensaver will be a lot easier!


Resources

This was just an introduction to developing a Mac OS X screensaver. Your possibilities are only constrained by Apple’s API, and there’s a whole lot more that can be done.

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade