TweetFollow Us on Twitter

Screen Savers in Cocoa

Volume Number: 20 (2004)
Issue Number: 6
Column Tag: Programming

Screen Savers in Cocoa

by Scott Knaster

One of the classic mantra-like goals for computer science over the past 20 years or so has been to "Make simple things simple, and complex things possible". Programming with Cocoa has a sometimes-complex learning curve, but once you've swerved through that curve, there are definitely a bunch of things that are much easier to accomplish than they were in the old pre-OS X world we knew and occasionally loved.

One of the classic mantra-like goals for computer science over the past 20 years or so has been to "Make simple things simple, and complex things possible". Programming with Cocoa has a sometimes-complex learning curve, but once you've swerved through that curve, there are definitely a bunch of things that are much easier to accomplish than they were in the old pre-OS X world we knew and occasionally loved. Writing a screen saver is a perfect example: it should be simple. Most typical OS 9 application programmers never dipped their toes into the slightly wacky world of screen savers, but with Cocoa in OS X, implementing a screen saver is well within everybody's grasp. In this month's column, we'll take a look at how to get your very own screen saver up and, er, saving.

Here's What We're Gonna Do

Let's start by taking a look at the process for creating a screen saver in OS X. Here are the broad steps:

  • Create a new screen saver project in Xcode.
  • Edit our .h file.
  • Override methods and write other code in our .m file.
  • Build the project to create a .saver package.
  • Install the .saver package by putting it into the Library/Screen Savers/ folder.
  • Open System Preferences and see a preview of our screen saver.
  • Enjoy the savings!

We'll go through each of these steps in greater depth now.

Little Help

The basic magic that makes screen savers so easy is the Screen Saver framework in Cocoa. This framework defines the ScreenSaverView class, which is a subclass of NSView. By creating your own subclass of ScreenSaverView and adding some code, you define your screen saver. The Screen Saver framework also defines the class ScreenSaverDefaults, which you can use for handling preferences for your saver. Along with these classes, the framework provides some handy utility functions you can use in your code.

We'll go over some of the most interesting methods and functions in the ScreenSaverView class. You will rarely call methods defined by ScreenSaverView - most of the work is creating your own subclass and override some methods.

initWithFrame:isPreview:

- (id)initWithFrame:(NSRect)frame isPreview:(BOOL)isPreview

You override initWithFrame in your ScreenSaverView subclass. The system calls initWithFrame when the screen saver is about take over the screen or is selected in System Preferences. The frame parameter is the frame rectangle for the view. The isPreview parameter tells whether the screen saver is actually being invoked or is merely being asked to preview itself in System Preferences (as shown in Figure 1).


Figure 1. You can preview the screen saver in a little box in System Preferences. In your code, you can tell whether the screen saver is drawing full-screen or in the preview box.

startAnimation

- (void) startAnimation

The system calls startAnimation right before the screen saver is about to start drawing. You should override startAnimation to set up your screen saver's initial state, such as setting line widths or loading images. You should call the inherited implementation, or bad things might happen, such as incorrect drawing, or all water on earth instantaneously evaporating.

animateOneFrame

- (void) animateOneFrame

This is where your screen saver gets to show off its amazing graphical skills. Mac OS X asks your screen saver to do its drawing by calling animateOneFrame repeatedly. You can actually do your drawing in animateOneFrame or in drawRect, or even a little in both places. If you make any changes here that require further redrawing, your implementation should call setNeedsDisplay:YES, which will cause drawRect to be called.

drawRect

- (void) drawRect:(NSRect)rect 

Override drawRect to draw the screen saver view. You can do your drawing in animateOneFrame, or you can do some or all of it here. rect is the rectangle you're drawing into, which is handy to have when you want to erase the view and start drawing afresh.

stopAnimation

- (void) stopAnimation 

When Mac OS X wants your screen saver to stop doing its thing, it calls stopAnimation. You can override stopAnimation to release resources or do any other cleanup you want before your screen saver goes away.

Saving Time

Now that you're familiar with the cast of characters in ScreenSaverView, let's go ahead and code up our screen saver. To start, we'll open Xcode and create a new project of type Screen Saver (see Figure 2).


Figure 2. Creating a new Screen Saver project gets you started with the Screen Saver framework, including your own subclass of ScreenSaverView.

This proves that Xcode already knows about the screen saver framework, which saves us plenty of work. Our new project already contains a subclass of ScreenSaverView, and we already have the usual .h and .m files. We'll edit the .h file that Xcode gives us until it looks like this:

#import <ScreenSaver/ScreenSaver.h>


@interface SaveyerView : ScreenSaverView 
{
   NSBezierPath *path;
}


@end

The header file is pretty darn basic. All we do here is create a subclass of ScreenSaverView and add an NSBezierPath object to keep track of what we're drawing.

Now let's get into the implementation files and see what we can find. When we told Xcode to create a new ScreenSaver project, it start us off with some code, including the implementation for initWithFrame:isPreview:, the designated initializer. In this case, we're able to use the supplied code for initWithFrame without any changes:

- (id)initWithFrame:(NSRect)frame isPreview:(BOOL)isPreview
{
    self = [super initWithFrame:frame isPreview:isPreview];
    if (self) {
        [self setAnimationTimeInterval:1/30.0];
            // Draw 30 frames per second
    }
    return self;

The code here starts by calling the inherited implementation. After that, we use setAnimationTimeInterval to tell Mac OS X that we want our screen saver to draw 30 frames per second. As I mentioned, this is the default code that Xcode writes for this method. You can modify it if you want to perform some other task when the screen saver starts up. For example, if your screen saver has user-settable options, you can handle them here.

Next, we'll take a look at our startAnimation method, which the system calls right before asking our screen saver to start drawing. Our implementation of startAnimation begins by calling the inherited implementation. Then, we create our Bezier path and choose a nifty line join style:

- (void)startAnimation
{
   NSPoint x;

   [super startAnimation];
	
   path = [[NSBezierPath alloc] init];
      // We'll use a Bezier path for drawing

   [path setLineJoinStyle: NSRoundLineJoinStyle];	
      // Just for fun, connect the lines with
      // a round joint

When the system asks our screen saver to get ready to draw, we can call the view's isPreview method to see if we're being asked to draw on the full screen or in the little preview box in System Preferences (as shown back in Figure 1).

We can use the result of isPreview to make decisions about just what to draw. In our screen saver, we'll make the lines skinny for the preview, and fatter for the real, full-screen version:

   if ([self isPreview])
      // When drawing a preview, make the lines
      // much thinner than when saving screens.
   {
      [path setLineWidth: 0.0];
      // This is the thinnest possible line width
   }
   else
   {
      [path setLineWidth: 10.18];
      // This line width was chosen at random.
      // OK, actually, it's my son's birthdate.
   }

Our last task here is to get the Bezier path started. We'll do that by picking a random starting point and moving the path there:

   x = SSRandomPointForSizeWithinRect 
         (NSMakeSize (0,0), [self bounds]);
      // Call utility function to get a random point

   [path moveToPoint:x];
      // Start the path at the random point
}

We get a random point by calling SSRandomPointForSizeWithinRect, a handy function provided by the screen saver framework for just this purpose. Hooray for handy functions! Then, we simply move the path pen to that random point to start it out.

Everything that starts must end, and the next method we define is stopAnimation, which is called when the system doesn't need the screen saver to draw any more. Here's our implementation of stopAnimation:

- (void)stopAnimation
{
   [super stopAnimation];
	
   [path release];
         // Release the path

   path = nil;
         // Tell our screen saver view that there's no path
}

The standard stopAnimation provided by Xcode simply calls the inherited implementation. In our version, we keep that super call, and add code to release the Bezier path object and set the path instance variable to nil.

Every time the system wants our screen saver to draw another piece, it calls our animateOneFrame method. Let's take a look at that. First, we'll call that convenient SSRandomPointForSizeWithinRect utility function to get another random point:

- (void)animateOneFrame
{
    NSPoint x;
	
   x = SSRandomPointForSizeWithinRect 
         (NSMakeSize (0,0), [self bounds]);
            // Get a random point to extend the Bezier path

We want our screen saver to draw a bunch of lines on the screen, and every so often, we want it to erase the lines and start over. Let's say we want 50 lines at a time, in honor of our 50 states. If we haven't reached 50 yet, we add the new random point to the path:

if ([path elementCount] < 50)
      // Draw 50 lines before erasing
      {
         [path lineToPoint: x];
            // If we don't have 50 yet, add the 
            // new point to the line
      }

Once we have 50 points in the path, we want to reset the path by callously discarding all points and then start building it up again:

      else
      {
         [path removeAllPoints];
         [path moveToPoint:x];
            // If we do have 50, clean out the path
            // and get ready to start over
      }

We finish by telling the system that we've messed with the path and it needs to be redrawn by calling the screen saver view's drawRect method. Alternatively, we could do the actual drawing right here in animateOneFrame:

   [self setNeedsDisplay:YES];
      // Tell the system that something has changed
      // and drawRect should be called
}

The actual drawing happens in drawRect, which we'll look at NeXT. We start by calling the inherited drawRect, which by default erases the background to black.

- (void)drawRect:(NSRect)rect
{
   NSColor *color;

   [super drawRect:rect];

We then choose a pretty color, and call set to make sure that the drawing happens in that color. Then we call stroke on the Bezier path object to actually draw the thing:

   color = [NSColor colorWithCalibratedRed:(0.0) 
                  green:(1.0) blue:(1.0) alpha:(1.0)];

   [color set];
      // Set the color to teal. Go Sharks!
	
   [path stroke];
      // Draw the Bezier path 
}

The last method we implement is our version of dealloc. The view's Bezier path is the only allocated object we have to worry about, so our method looks like this:

- (void) dealloc
{
   [path release];
      // Release the Bezier path

   [super dealloc];
}

Put Me In, Coach

When we have all the source code done, we build our project. If everything builds OK, a file with the suffix .saver ends up in the project's build folder. To install the screen saver, start by quitting System Preferences if it's running. Then move or copy the .saver file into the /Library/Screen Savers directory. You can put it in ~/Library/Screen Savers if you want to keep it all to yourself and prevent other users from seeing it.

Once our screen saver is in the folder, you can start System Preferences, click Desktop & Screen Saver, click the Screen Saver tab, and select our screen saver in the list. You should see the skinny lines in the preview mode. Then click Test, and observe the big teal lines with their round elbows. There you go! You can get this month's code at http://www.papercar.com/mt/Jun04.zip

If you're interested in making your own screen savers, there are lots of directions you can go from here. Add user-settable options by overriding the hasConfigureSheet and configureSheet methods. Use random colors. Do some much fancier drawing in your animateOneFrame method - for example, draw shapes, use curveToPoint instead of lineToPoint, or load images from disk. Whatever you do, have fun, and remember: the screen you save may be your own.


Scott Knaster writes books, including the recently published Mac Toys and the brand-new Hacking iPod and iTunes, both from Wiley Publishing. Scott can't read and listen to vocal music at the same time. Scott writes these little bios in the third person. Write to Scott at scottk@mactech.com.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

iExplorer 4.1.10 - View and transfer fil...
iExplorer is an iPhone browser for Mac lets you view the files on your iOS device. By using a drag and drop interface, you can quickly copy files and folders between your Mac and your iPhone or... Read more
iExplorer 4.1.10 - View and transfer fil...
iExplorer is an iPhone browser for Mac lets you view the files on your iOS device. By using a drag and drop interface, you can quickly copy files and folders between your Mac and your iPhone or... Read more
Adobe InCopy CC 2018 13.0.1.207 - Create...
InCopy CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous InCopy customer). Adobe InCopy CC 2018, ideal for large team projects... Read more
Microsoft Office 2016 15.40 - Popular pr...
Microsoft Office 2016 - Unmistakably Office, designed for Mac. The new versions of Word, Excel, PowerPoint, Outlook and OneNote provide the best of both worlds for Mac users - the familiar Office... Read more
Adobe InDesign CC 2018 13.0.1.207 - Prof...
InDesign CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous InDesign customer). Adobe InDesign CC 2018 is part of Creative Cloud.... Read more
Apple iOS 11.1.2 - The latest version of...
iOS 11 sets a new standard for what is already the world’s most advanced mobile operating system. It makes iPhone better than before. It makes iPad more capable than ever. And now it opens up both to... Read more
Slack 2.9.0 - Collaborative communicatio...
Slack is a collaborative communication app that simplifies real-time messaging, archiving, and search for modern working teams. Version 2.9.0: Slack now officially, and fully, supports Japanese.... Read more
iExplorer 4.1.9 - View and transfer file...
iExplorer is an iPhone browser for Mac lets you view the files on your iOS device. By using a drag and drop interface, you can quickly copy files and folders between your Mac and your iPhone or... Read more
PCalc 4.5.3 - Full-featured scientific c...
PCalc is a full-featured, scriptable scientific calculator with support for hexadecimal, octal, and binary calculations, as well as an RPN mode, programmable functions, and an extensive set of unit... Read more
iExplorer 4.1.9 - View and transfer file...
iExplorer is an iPhone browser for Mac lets you view the files on your iOS device. By using a drag and drop interface, you can quickly copy files and folders between your Mac and your iPhone or... Read more

Latest Forum Discussions

See All

Mighty Battles guide - how to build a so...
Mighty Battles, the latest title from Hothead Games, is set to take the App Store by storm. The game puts a welcome twist on lane battlers, adding FPS elements to spice things up a bit. You'll collect cards to put your own military unit to gether,... | Read more »
Rules of Survival guide - how to be the...
The PUBG craze makes its way to mobile, with more and more battle royale games debuting on iOS and Android. Rules of Survival joins the ranks of mobile PUBG-likes, offering a classic battle royale experiences that doesn't vary too much from its... | Read more »
The best new games we played this week -...
The weekend is upon us friends, and it's time to take a look back and reflect on all of the wonderful games we've played over the past few days. This week was jam packed with new releases. There were some big, long awaited launches, some fun... | Read more »
Lineage II: Revolution guide - tips and...
At long last, Lineage II: Revolution has now come to western shores, bring Netmarble's sweeping MMORPG to mobile devices. It's an addictive, epic experience, but some of the systems in the game can be a bit overwhelming. Here are a few tips to help... | Read more »
A Boy and His Blob (Games)
A Boy and His Blob 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: | Read more »
Fight terrible monsters and collect epic...
Released on Western markets early last month, Dragon Project, created by Japanese developer COLOPL, brings epic monster hunting action to mobile for the very first time. Collect a huge array of weapons and armor, and join up with friends to fight... | Read more »
I Am The Hero (Games)
I Am The Hero 1.0 Device: iOS Universal Category: Games Price: $1.99, Version: 1.0 (iTunes) Description: I Am The Hero is a pixel art, beat 'em up, fighting game that tells the story of a "Hero" with a glorious but mysterious past.... | Read more »
Kauldron (Music)
Kauldron 1.0 Device: iOS Universal Category: Music Price: $3.99, Version: 1.0 (iTunes) Description: Kauldron is our warmest sounding, punchiest synth yet! A completely new modeling technology, combined with carefully designed... | Read more »
Lineage II: Revolution is mobile’s bigge...
NCSoft’s hit fantasy MMORPG series has just made the leap to mobile with the help of Netmarble in Lineage II: Revolution. With over 1.5 million players having already pre-registered ahead of the game’s launch, Revolution hit the app stores... | Read more »
Swing skilfully in new physics-based pla...
Sometimes it’s the most difficult of obstacles that can be the most rewarding. One game hoping to prove this is OCMO, the new tough but fair platformer from developers Team Ocmo. Primed to set every speedrunner’s pulse racing, as an otherworldly... | Read more »

Price Scanner via MacPrices.net

Best Apple iPad deals this weekend, up to $80...
Apple resellers are offering 9.7″ iPads and 10.5″ iPad Pros for up to $80 off MSRP this weekend as part of their early Holiday and Black Friday sales: Adorama is offering new 2017 9.7″ 32GB WiFi... Read more
Early Black Friday sale: Apple iMacs for up t...
B&H Photo has 27-inch iMacs in stock and on sale for up $130-$150 off MSRP including free shipping. B&H charges sales tax in NY & NJ only: – 27″ 3.8GHz iMac (MNED2LL/A): $2149 $150 off... Read more
Apple restocks refurbished Mac minis starting...
Apple has restocked Certified Refurbished Mac minis starting at $419. Apple’s one-year warranty is included with each mini, and shipping is free: – 1.4GHz Mac mini: $419 $80 off MSRP – 2.6GHz Mac... Read more
Save on 12″ MacBooks, Apple refurbished model...
Apple has Certified Refurbished 2017 12″ Retina MacBooks available for $200-$240 off the cost of new models. Apple will include a standard one-year warranty with each MacBook, and shipping is free.... Read more
Early Holiday sale: 12″ iPad Pros for up to $...
B&H Photo has 12″ iPad Pros on sale today for up to $130 off MSRP. Shipping is free, and B&H collects no sales tax outside NY & NJ: – 12″ 64GB WiFi iPad Pro: $749, save $50 – 12″ 256GB... Read more
Holiday sale prices on Apple 13″ MacBook Pros...
B&H Photo has 2017 13″ MacBook Pros in stock today and on sale for $100-$150 off MSRP, each including free shipping plus NY & NJ sales tax only: – 13-inch 2.3GHz/128GB Space Gray MacBook Pro... Read more
Sale: 13″ MacBook Airs starting at $899, $100...
B&H Photo has 2017 13″ MacBook Airs on sale today for $100 off MSRP including free shipping. B&H charges NY & NJ sales tax only: – 13″ 1.8GHz/128GB MacBook Air (MQD32LL/A): $899, $100 off... Read more
Week’s Best Deal on 13″ MacBook Pros: Apple r...
Apple has a full line of Apple Certified Refurbished 2017 13″ MacBook Pros available for $200-$300 off MSRP. A standard Apple one-year warranty is included with each MacBook, and shipping is free.... Read more
Deal: 15″ 2.6GHz MacBook Pro for $1799 w/free...
B&H Photo has clearance 2016 15″ 2.6GHz Touch Bar MacBook Pros in stock today and available for $600 off original MSRP. Shipping is free, and B&H charges NY & NJ sales tax only: – 15″ 2.... Read more
Black Friday pricing on the 1.4GHz Mac mini....
MacMall has the 1.4GHz Mac mini on sale for $399 including free shipping. Their price is $100 off MSRP (20% off), and it’s the lowest price for available for this model from any reseller. MacMall’s... Read more

Jobs Board

Product Manager - *Apple* Pay on the *Appl...
Job Summary Apple is looking for a talented product manager to drive the expansion of Apple Pay on the Apple Online Store. This position includes a unique Read more
*Apple* Pro/Consumer Apps Support Engineer -...
…exemplify AppleCare's expert technical support paired with exceptional customer service for Apple 's software apps. This person is a problem solver, who understands Read more
Partner Marketing Manager, *Apple* Pay - Ap...
Job Summary The Apple Pay partner marketing team is looking for a Marketing Manager to develop and drive US programs. The right candidate will be passionate about Read more
*Apple* Solution Consultant - Apple (United...
# Apple Solution Consultant - Rochester, MN Job Number: 113037950 Rochester, MN, Minnesota, United States Posted: 19-Sep-2017 Weekly Hours: 40.00 **Job Summary** Are Read more
Sr. Experience Producer, Today at *Apple* -...
# Sr. Experience Producer, Today at Apple Job Number: 56495251 Santa Clara Valley, California, United States Posted: 23-Jun-2017 Weekly Hours: 40.00 **Job Summary** Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.