Advertisements

Make a game in a few weeks


Hey guys,

My friends at MakeGamesWithUs are creating a great opportunity to improve your iOS skills this summer. The MakeGamesWithUs Summer Academy is an 8 week program where you learn how to design, code, and ship your own iPhone game with locations in New York City and the San Francisco Bay Area. Their curriculum is used at schools like MIT, UC Berkeley, and Carnegie Mellon and their alums have gone on to work at awesome tech companies, startups, and game studios. You can find out more information and apply here:www.mgw.us/academy. The deadline to apply is this Saturday and you can use CupsOfCocoa as a discount code for 10% off!
Thanks again for visiting cupsofcocoa.com!
Make an iOS game this summer! Apply with discount code CupsOfCocoa
Advertisements

Status Update


I’m sorry it’s been so long since the last post. I’ve gotten involved with two startups, which are taking up all the time I have (more details coming later!)

I’ll keep creating new content, but if anyone is interested in writing for CupsOfCocoa, get in touch! I’d love to have another person creating awesome tutorials and explanations for iOS (and related) developers.

Cheers!

Adding Frameworks to an Xcode Project


A lot of Xcode projects require you to add additional frameworks to link against. Here’s how:

  1. Select the main project listing in the left column.
    Select Project

    Select Project

  2. Select Build Phases from the tabs near the top.
    Build Phases Tab

    Build Phases Tab

  3. Click the ‘+’ button in the “Link Binary With Libraries” section (you may have to twist it open.
    Select Frameworks

    Select Frameworks

  4. Choose the framework(s) you want to add, and click the “Add” button.
    Add Frameworks

    Add Frameworks

BlackBerry X: Initial Thoughts


Last week RIM released a preview of their new software, BlackBerry X. Normally my eyes would slide over the word “BlackBerry” like a greased weasel on skates, but something about the new release caught my attention. I had to do a triple take before I realized that, somehow, incredibly, BlackBerry X looked good. And the hardware they were using also looked good. I won’t really talk about the hardware—there’s not much to say. Ditching the physical keyboard frees them from the constraints of the plastic reality and the limited freedom of a hardware keyboard. The problem, though, is that RIM isn’t sure where it wants to go. They’ll still create a version with a physical keyboard—for the five people in the world who still like the physical keyboard. This also means that they can’t make any definitive call about having the keyboard or not. And at this point, RIM needs focus, rather than trying to appeal to everyone.

On to the software (because this is a site about software, after all). BlackBerry X features a pleasant amount of eye candy, but somehow still looks very professional. As a very satisfied iPhone user, the portions of the BlackBerry X interface seemed more polished somehow. The UI looks clean with a font suited for display. iOS uses Helvetica as its system font; while Helvetica looks timeless on paper, it is not as good on a display. The BlackBerry font is clean and modern, without being gimmicky or trendy. I noticed this in Android 4.0 (ICS), but I thought ICS had too much white-on-black. BlackBerry X keeps the clean look with more black- (and grey-) on-white. The UI elements look familiar but, again, clean and modern. Some of the icons are carried over from old BlackBerry, but other elements, including the rounded bars at the top of the screen, are decidedly iOS. Overall, however, I feel like BlackBerry X looks more professional—not button-down-and-suit-boring professional, but like the difference between metal and plastic. The iOS interface almost looks childish. I particularly like the ability to page through multiple screenfuls in a nav stack at the same time. It just feels more intuitive, and useful for those moments when you do a double-take (it’s happened to me more than you might think). Apple describes the nav controller as a deck of cards; you should be able to fan a deck of cards and peek at several. In the interest of simplicity iOS doesn’t allow this, but BlackBerry X seems to show that it works very well. It’s just not clear how exactly you’d invoke it.

The intelligent keyboard is the other major feature RIM has been touting. It uses “intelligent” algorithms to predict what you might be typing and with a flick up on the key of the software keyboard (another benefit to the software keyboard, and I suppose this feature won’t be available to the hardware keyboard model. Shame, really, that one of the major features won’t be available to a large portion of people who use BlackBerry (because they like the hardware keyboard)). The good thing is that it’s just one simple gesture—you’re flicking the word up to the text area. The negative is that it’s actually not that intuitive. When you’re typing fluently, there’s a sort of momentum in your fingers, in that it is often a lot easier to just keep typing than to use autocomplete or this new feature. Put another way, in the time it takes you to read the word suggestion, move your finger over and perform the flick gesture, you could probably have finished typing the word yourself. Only time will tell how well this feature works. I suspect a few people will use it religiously, and most will situationally appreciate it—rather like Siri on the iPhone 4S.

From what RIM’s released, I don’t think BlackBerry X will be enough to save the platform and company. But at least they’ll go out with a bang.

Extension: A Quartz Primer


Because of the way my system is set up right now, I don’t have a version of Xcode that runs on my system. That’s part of the reason I haven’t posted anything in a while. I haven’t resolved the issue yet, but in the meantime, here is a primer on the Quartz 2D drawing system that allows you to do incredible things with graphics.

Overview

The iOS platform includes a powerful API that lets you directly draw content to the screen. The Core Graphics, or Quartz, framework was introduced in the early versions of Mac OS X, and was included in the iOS SDK. Quartz is a vector drawing API, which means that the drawing code is independent of the pixels on the screen. This is in contrast to usual image files, which has a finite number of pixels. The end result is that graphics drawn with Quartz will look especially sharp on Retina Displays, without resorting to additional resource files.

From Apple’s official documentation, “Quartz 2-D is an advanced, two-dimensional drawing engine available for iOS application development…. Quartz 2-D provides low- level, lightweight 2-D rendering with unmatched output fidelity regardless of display or printing device. Quartz 2-D is resolution- and device-independent; you don’t need to think about the final destination when you are using the Quartz 2-D…API for drawing.” We will talk about what this actually means throughout the course of this article.

Stocks app screenshot—landscape

Stocks app: Custom drawing

Quartz is used to do a lot of custom drawing across iPhone apps and can distinguish apps and their custom interfaces. For example, the Stocks app uses to draw the graphs the reflect the stock price over a specific interview. It is not possible to ship the app with every possible graph already drawn out as a regular PNG image; the app has to create the graphics itself. It does this using the Quartz APIs.

The Quartz API is a C API, which means that you won’t be working with Objective-C method calls. All the code you write for Quartz will consist of C functions. Don’t be afraid of C though; the API is not any harder to use than the Objective-C stuff that you should be familiar with.

How Quartz Works

Two fundamental patterns govern most Quartz functions. Quartz, like many other rendering engines, is state-based. Generally, you set some values, such as color or line- width, and those same values continue to be used until you set other values. In addition, Quartz uses the artist’s model to layout contents. This simply means that content drawn first will appear underneath newer content; in other words, new content can obscure older content. Therefore, the order in which you draw things matters.

Most Quartz functions are relative to a specific context. A context is simply a virtual canvas which you can draw to. This could be the screen, a PDF, a bitmap image file, or a custom context. Most Quartz functions take a context as an argument, to know which context to draw to. In fact, this is how printing works: on-screen content is rendered to a printer context (often a PDF), and then send to the printer. This was a technological breakthrough when it was invented— to be able to use the same code to draw on-screen as to the printer.

There are three general types of functions in Quartz. You begin by drawing to the context. This creates an abstract, transparent representation in the context. At this point, there is a data structure in memory, but nothing is actually shown. You can then stroke and/or fill the content you’ve drawn to make it display on screen. This allows you to use Quartz as an underlying structure for more complex drawing, such as displaying text along a curve.

Quartz functionality should be immediately familiar to graphic designers. Nearly anything you can do with vector drawing programs, such as Adobe Illustrator, you can do with Quartz. You can, for example, set line width, line color, line endings (cap, butt, round), and various blend modes, to name a few of Quartz’s functions.

Drawing in a view begins in the drawRect: method, which is a method inherited from UIView. You put Quartz calls in drawRect:, or call drawing subroutines (additional functions that contain separate Quartz calls—splitting the drawing code across different things you might want to do). However, you should never call drawRect: directly; the system will call it as needed. If you want to force the system to redraw an area of the screen, you can call setNeedsDisplay on the view, and it will be redrawn according to the code in drawRect:.

Drawing Basics

Most drawing in Quartz begins with a graphics context. The simplest context is the “current” context, ostensibly the on-screen content. For iOS, you call UIGraphicsGetCurrentContext(), which returns an object of type CGContextRef. You should save this context in a local variable for all subsequent drawing calls:

CGContextRef context = UIGraphicsGetCurrentContext();

If you have additional functions that draw additional context (generally known as drawing subroutines), you should pass in the context as an argument to the function, then push the context on the graphics stack. You should also pop it when done. This allows you to keep a separate version of the context to work with in the subroutine, so changes you make, such as setting fill color or stroke style, don’t affect the state in any other function, including in drawRect: itself. In addition, the system automatically sets up the context each time drawRect: is called. No guarantee is made about the state of the context across multiple method calls; therefore, you should not save the context in a local variable. Simply call UIGraphicsGetCurrentContext() at the beginning of drawRect:.

Quartz, as you might imagine, is primarily based on x-y points. All points are positive (unless you do some custom mapping for whatever reason). On the iPhone, the point (0,0) is the top-left point of the view, which follows the convention of web design and makes sense in many cases. Quartz on the desktop uses the reverse—like in geometry textbooks, (0,0) is located at the bottom-left point. This means that, without any modification of points, Quartz code from the iPhone will appear upside-down on the desktop, and the opposite is true as well.

All drawing in Quartz begins with rectangles. They are represented by the CGRect structure, containing an origin point and a size; the former is comprised of an x- and y-value float, while the latter is composed of a width and height. You can then stroke or fill the rectangles directly. To draw other shapes, you can either define a free-form path, or start with a bounding rectangle. For example, you could draw a circle by starting with a square (which is a rectangle) without a stroke or fill, and then call the function CGContextFillEllipseInRect() if you want a filled circle, or CGContextStrokeEllipseInRect() if you want an outline.

But thinking outside the box, you are allowed to draw any shape you’d like in Quartz, ranging from triangles to intricate curves. You do this by defining paths. For example, to draw a triangle you could use something like this:

CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextMoveToPoint(context, 100, 20);
CGContextAddLineToPoint(context, 150, 75);
CGContextAddLineToPoint(context, 50, 75);
CGContextClosePath(context); // Draws a straight line between first and last point

This code segment defines a triangle in memory. However, for anything to appear on screen you’ll have to do a bit more setup.

[[UIColor greenColor] setFill];
CGContextSetStrokeColor(context, [UIColor blackColor].CGColor);
CGContextDrawPath(context, kCGPathFillStroke);

Quartz takes typedef’d CGColors, but the object-oriented UIColor works well with Quartz. Instances of UIColor have a setFill and setStroke method, which are used to set the stroke and fill in Quartz contexts. You can also use the Quartz function calls and get a CGColor from a UIColor instance using the CGColor property. Finally, there are a number of ways to fill and/or stroke paths. In this case, you pass in the context, and a preprocessor constant that tells Quartz to both fill and stroke.

Quartz constants generally begin with ‘k’ and follow camel case conventions.

Quartz has functions to draw text and images, but UIKit provides classes that handle this for you. UILabel and UIImageView are much easier to work with than using Quartz to render text or images; unless you need exact control over the layout, consider using one of those classes instead.

Drawing to a Close

Quartz is an incredibly powerful 2D drawing engine. Over the coming weeks (when I can get my system set up again), we’ll explore code examples and explore ways to leverage Quartz to its maximum potential.

RIP Steve Jobs.


He truly was a great man. Namaste.

IceFall!


IceFall Icon

IceFall

My friend came to me a few weeks ago for a simple game idea. I was glad to help him build up his concept, and after a few weeks (it’s true—the last 20% takes 80% of the time…), we have finished it. It’s a clean, simple game; it was a blast for us to make and we hope you enjoy it too. Please do us a favor and check it out! It would mean a lot to us.

IceFall
On the App Store

Floating in Uncertainty


Among the primitive data types that Objective-C offers are float and double. Similar to long, double is simply double the storage in bits of float. However, as the name suggests, both are floating-point numbers. That is, the decimal point literally “floats” around as necessary. This can lead to many subtle bugs, even between executions of the same program.

How Do They Work?

Both types have a certain numbers of bits for storage. The exact number of bits varies per implementation, just as the exact storage sizes for ints and doubles aren’t fixed. However, a floating point number effectively has two parts, the “whole” part and the “fractional” part. The floating nature comes in because the number of bits used to store each section is not always the same, and will vary depending on the sizes of the numbers involved.

The Precise Issue

Although there are an infinite number of integers, they all differ by the same amount—1. Therefore it is relatively easy to represent an integer value as bits. By contrast, however, the difference between one decimal number and another is incredibly small, and, what’s worse, this difference can change. When trying to squeeze an infinite number of digits with infinite precision into a finite number of bits, something has to give. This usually means that the floating-point value is rounded, and is not completely accurate. Here’s a simple program (using plain C) to illustrate this issue:

int main (int argc, const char *argv[]) {
	float f = 1234.123456789;
	printf("%f\n", f);
	printf("%.9f\n", f);
	return 0;
}

Output:

1234.123413
1234.123413086

The first print statement (printf() is nearly identical to NSLog(), except that it takes C-style strings instead) shows the actual value of f in memory, with ten digits in this case. Notice that the value is different from the value we assigned to the variable. This is because there are not enough bits to hold every single digit, so some of it had to be rounded away. That rounding is not perfectly accurate—it rounds the tailing ‘456789’ into ‘413’. If, however, we try to force it to display nine digits as seen in the next line, we still end up with the ‘413’, along with a tailing ‘086’—not digits that we put in.

Comparisons

How many times should this loop run?

#import <Foundation/Foundation.h>
int main (int argc, const char * argv[]){
	NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
	int count = 0;
	for (float i = 10; i != 0; i -= 0.1) {
		count++;
		printf("count is %d\n", count);
	}
	[pool drain];
    return 0;
}

Common sense tells us that it should run 100 times, but in fact this is an infinite loop. Because of these rounding errors, i will never be exactly equal to zero. It’ll come close after 100 cycles through, but it won’t be perfect. As such, when dealing with floating point numbers, you want to check to see if it’s close to a value. In the above example, the comparison should be i >= 0; (the equal bit because the floating point number might be a tiny negative value) to ensure that the loop ends.

To check if two floating point numbers are equal, you could use the == (double equals) operator, but there’s no guarantee that they will give an accurate result, especially after many calculations. A better way (albeit less efficient) would be to get the absolute value of their difference, and see if it’s less than a small number, such as 0.00001. If it’s less, you can safely assume they’re equal; otherwise, they’re not.

Floating point inaccuracies can be very difficult to debug, so it pays off to take precautions earlier. As a matter of fact, I spent about half an hour trying to figure out why something wasn’t showing up on screen, when in fact a botched conversion from integers to floating point (similar issues result) lead to everything being 0. Not fun.

An Update


So, it’s been a few weeks since I’ve have time to post here. Unfortunately this busy-ness will last for a few more days, so there won’t be any new content until then. But more importantly, the content on this site—at this point, the Objective-C portion is mostly completed. Over the next few weeks, then, I’ll be wrapping up the Objective-C portion, and move into more fun stuff. I’ve noticed a surprising lack of Xcode 4 information; seeing how it has been released for several months now, lots of people must be using it. So that’ll be really useful, and I’m itching to dive right in.

Thanks to everyone for stopping by, and I hope this site has been helpful. Over the next few weeks, I hope to add much more content, and make this little slice of the Internet even more useful. 🙂

WWDC 2011—Initial Impressions


Today Apple began the annual WWDC week with a keynote that introduced OS X Lion, iOS 5, and iCloud. If you haven’t done so yet, check out the keynote stream. Rather than just re-iterate the new features, I’d like to share some of my thoughts.

Lion

At first, I have to say that as far as features go, it was a bit underwhelming. I do have to say , I’ve been using pre-release seeds of Lion. Because of the NDA, I can’t talk too much more about the exact features…

Having seen and used these features, I realized that from a new user’s perspective the features are actually really compelling. Why did I find them underwhelming? It’s because the features have integrated themselves so smoothly and seamlessly into my daily experience that they’re really not obtrusive. Some commentary:

  • Gestures: I love them. Takes a bit of getting used to at first, but really integrate into my user experience. I love being able to touch everything and directly interact with it. My only complaint is that there is (at the moment, at least) no built-in ability to define custom gestures.
  • Full Screen: Very useful on laptops, not so much on desktops. Could be useful in some cases, but I’m not sure I like it at all. Its usefulness is doubtful, in my opinion.
  • LaunchPad & MAS: The App Store is actually really nice. Convenient, easy, accessible—everything is as advertised. As far as LaunchPad goes, I find it easy enough to use, and with the gesture to invoke from my Magic Trackpad, it joins my repertoire of app launching, along with the Applications stack, Spotlight, and LaunchBar. Not always as smooth as advertised though.
  • AutoSave, Versions, etc.: Very helpful. ‘Nuff Said.
  • Resume: Usually very useful, for when I have a bunch of documents open in Preview, but can be annoying at times. Sometimes the point of quitting an app is to clear out all the windows. It’s a bit more annoying when the files take a while to load, as they might when launching QuickTime. But very useful after a reboot.
  • Mail: Great new interface, no loss of functionality—great recipe.
What happens is that OS X is less of a new OS, and more of a new paradigm. With the further integration of iCloud, it definitely fits this role. That’s also part of the reason why it’s $29.99—a great price for a preview of the future of computing. And yes, I honestly believe that.

iOS 5

  • Notifications: This one was a long time coming. Predicted by rumors for months, this is probably the best way to do notifications in a mobile platform. Very well done.
  • Twitter: I don’t use Twitter. I don’t get Twitter. …
Logo of WebKit framework

WebKit

  • Safari: The tabs are frankly a bit ugly, but the rest of the stuff is awesome. I’ve been a proponent of WebKit since the original iPhone. I love Safari Reader on the desktop, and I’m glad they brought it to iOS.
  • Reminders: Everyone needs this. The problem with To-Do lists though is forgetting to actually use them. Not sure what Reminders is going to do for that.
  • Camera: How do I up the volume in camera mode…? Actually, the features are really nice. If the iPhone 5 bumps the camera specs a bit, it could become a serious competitor to higher-end point-and-shoots, or maybe even some dSLRs…?
  • The New Keyboard: The keyboard on the original iPad always seemed just a little bit too small. I like being able to split the keyboard, but can’t help thinking that simply typing with my thumbs might not be the most efficient. Of course, this isn’t an issue that can be fixed overnight. Why couldn’t the screen have been just a tiny bit bigger…?

iCloud

Actually not sure what to think about this yet. The features look compelling enough, but without having half a dozen Apple devices not sure how well this’ll work. And plus, some companies, schools, etc. might block anything besides in-house cloud services, so its practicality might be limited. We’ll see.

First Impressions

So, that’s some initial commentary. I kept them to short blurbs for a reason—they’re first impressions. Incidentally, for developers, first impressions are absolutely vital. So, what are your thoughts? Post them in the comments below.

What’s in it for us?

Well, all the new APIs must mean something. What happens, though, is that Lion is literally bringing the iOS design paradigms to the desktop. Which means that user interfaces can be re-thought. Instead of simply relying on individual mouse clicks, gestures are now a now interface interaction method. This allows for much more fluid interfaces. What happens is that the design of user interfaces now takes prominence. Always emphasized with iOS, this design-based nature will trickle down to OS X. These interactions are visible in the new Mail, Safari, and iCal (^^). Sometime there will no longer be a single pair of coordinates for a mouse pointer—there will only be multi-touch and gestures. That is the future. And that is what developers must work for.

Advertisements
  • Welcome

    My goal is to make CupsOfCocoa into a beautiful source for beginners to the iPhone platform to get started. Subscribe below for more, and stay tuned!

  • Contact Me

    If you need to contact me for any reason, feel free to send me an email.
  • The Giving Spirit

    If you've found this site helpful, would you consider donating a little sum? Any amount is appreciated...Thanks so much!

  • Roadmap

  • Enter your email address to follow this blog and receive notifications of new posts by email.

    Join 223 other followers

  • Back to the Past

    September 2017
    S M T W T F S
    « Apr    
     12
    3456789
    10111213141516
    17181920212223
    24252627282930
  • Time Machine

  • You count!

    • 620,386 views
  • Worldwide Stats

    free counters
%d bloggers like this: