Mobiletuts+

Mobile App Development Options: Which Way To Go?

Mark Hammonds — Thu, 31 May 2012 14:48:01 +0000

When starting a new mobile project, the decision to build a native, hybrid, or mobile web application can be daunting. In this talk from the WindyCityGo conference, J Schwan of Solstice Consulting presents a comprehensive analysis of the pros and cons of each mobile development option.

Key Slides & Quotations:

The biggest pro of the mobile web is that it’s cross-platform. You’ve only gotta build it once, so that investment is much smaller.

Mobile Web Pros:

Cross-platform
Open standards
No proprietary programming languages
Easier reuse of existing enterprise tech
No dependency on app stores

Mobile Web Cons:

No disconnected state
No access to (most of) the phone’s senses
Device testing a challenge
Writing multiple implementations
No marketing/distribution through app store

Native apps are great when you need access to the phone’s senses, you need a rich uncompromised user-experience. . .and the majority of your functions require disconnected access. . .

Native App Pros:

Native access to the phone’s senses
Native access to the phone’s data
Offline storage
Richer GUI options
App Store monetization/In-App Purchases

Native App Cons:

Different Development Technologies
Different IDEs
Duplicate development efforts
Increased support costs
App Store approval queues

Hybrid apps are great when you are mobilizing an existing web app, but you need app store exposure, you want native app coverage across all platforms, your mobile web functions do not require disconnected state, and you require access to the phone’s hardware for some features.

Hybrid App Pros:

Majority of content portable (developed on mobile web)
Disconnected state possible
Some screens can be developed natively
Notifications can be supported
App Store exposure/monitization
Decreased costs for multi-platform

Hybrid App Cons:

Decreased user experience for mobile web delivered content
Offline access not trivial for mobile web screens
Multi-platform wrapper requires native and mobile web technology know-how

Ultimately, we’re moving towards a mobile-based operating system and we’re going to have workstations that are going to be the exception scenarios versus workstation-based systems with mobile use cases being the exception scenarios. So this is all going to flip-flop. . .As we design new products, we better be thinking about mobile.

About the Speaker

J Schwan is the Founder and President of Solstice Consulting as well as Solstice’s product development studio, Bottega Sol. Under his leadership, Solstice has lead the industry in helping enterprises understand, embrace and adapt to emerging technologies. In addition to helping his teams build great products for Solstice’s customers, J enjoys speaking about emerging technology topics at many educational institutions, technology conferences and focus groups. J enjoys playing tennis and golf, but gets most of his exercise chasing around his 3 year old daughter and 2 year old son.

-Solstice Consulting

About the Venue

WindyCityGo is a two-day conference focused on Android, iOS, Windows Phone, and HTML5 application development. Learn how to create better mobile apps and how to sell them effectively. Meet others who are just as passionate as you. Developers, designers, entrepreneurs, & investors all find value in WindyCityGo.

-WindyCityGo.org

Mobiletuts+ Quiz: Android User Interface Essentials

Sue Smith — Tue, 29 May 2012 11:30:40 +0000

Learning Android development can be quite a task. If you’re wondering whether you have a good grasp of the essential features of Android user interfaces, test your knowledge with this quiz!

Reader’s Pulse: What Mobile Topics Should We Teach?

Mark Hammonds — Mon, 28 May 2012 11:30:02 +0000

At Mobiletuts+, we strive to publish tutorials on as many development platforms as possible. We also frequently publish on design and marketing related material as well. This leaves us with a lot of options when planning the site’s content. Help make sure we choose the best tutorials by voting in this poll!

Working with CorePlot – Tuts+ Premium

Aron Bury — Sat, 26 May 2012 17:54:27 +0000

When working with data intensive applications, a developer must often do more than just show lists of data records in a table view. The CorePlot library will allow you to add stunning data visualizations to your applications. Find out how in this Tuts+ Premium series!

Tutorial Teaser

Where We Left Off

Last time we got into how to create a bar chart, how to customize the bar colors and how to add custom labels to our axis if we want to display custom text instead of just numbers.

What We’ll Cover Today

This time we’ll cover how to abstract the logic out of our controller into a more reusable data source object. Once we’ve mastered this, we’ll go over how to display the same data as the bar chart, except this time displaying it as a pie chart!

Step 1: Setting Up

Before we get into abstracting the data logic we’re going to create our base classes for the pie chart. Just like last time, we’re going to need to create a new view controller for the graph. Let’s call it ‘STPieGraphViewController’.

Notice that we don’t need to create a view this time because we will be able to use ‘STGraphView’. Before we start setting things up let’s jump into STStudentListViewController.h and import STPieGraphViewController.h. We also need to conform to the protocol STPieGraphViewControllerDelegate (which we will create later):

@interface STStudentListViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, AddStudentViewControllerDelegate, UIActionSheetDelegate, STLineGraphViewControllerDelegate, STBarGraphViewControllerDelegate, STPieGraphViewControllerDelegate>

Switch over to the .m file. We need to add a button to the action sheet. Locate the graphButtonWasSelected: method. We’re going to edit the second button text and add a third one:

- (void)graphButtonWasSelected:(id)sender
{
    UIActionSheet *graphSelectionActionSheet = [[[UIActionSheet alloc] initWithTitle:@"Choose a graph" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Enrolment over time", @"Subject totals - Bar", @"Subject totals - Pie", nil] autorelease];

    [graphSelectionActionSheet showInView:[[UIApplication sharedApplication] keyWindow]];
}

Now jump into the actionSheet:clickedButtonAtIndex: method and add a clause for buttonIndex == 2:

else if (buttonIndex == 2)
{
    STPieGraphViewController *graphVC = [[STPieGraphViewController alloc] init];
    [graphVC setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
    [graphVC setModalPresentationStyle:UIModalPresentationFullScreen];
    [graphVC setDelegate:self];
    [graphVC setManagedObjectContext:[self managedObjectContext]];

    [self presentModalViewController:graphVC animated:YES];

    [graphVC release];
}

Just like last time, it will show some warnings because STPieGraphViewController doesn’t have a delegate or managedObjectContext property.

Get the Full Series!

This tutorial series is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

For those unfamiliar, the family of Tuts+ sites runs a premium membership service called Tuts+ Premium. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Mobiletuts+, Nettuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+. You’ll learn from some of the best minds in the business. Become a premium member to access this tutorial, as well as hundreds of other advanced tutorials and screencasts.

Corona SDK: Create a Balloon Game – Final Steps

Carlos Yanez — Thu, 24 May 2012 11:30:28 +0000

Welcome to the final tutorial in our Bloons inspired game series! In this tutorial, we’ll handle the acorn shooting, level restart and the steps to build the final app.

Where We Left Off. . .

Please be sure to check part 1 and part2 of the series to fully understand this tutorial.

Step 1: Hide Direction Graphic

This is the shoot function, it handles the aim and acorn creation. We’ll start by showing the direction indicator.

function shot:touch(e)
	if(e.phase == 'ended') then
		-- Hide gCircle 

		Runtime:removeEventListener('enterFrame', charge)
		gCircle.isVisible = false
		gCircle.rotation = 0

Step 2: Create And Shoot Acorn

Next we create a new acorn physics object and apply the calculated impulse to shoot it.

-- Create new Acorn 

local acorn = display.newImage('acorn.png', 84, 220)
physics.addBody(acorn, {density = 1, friction = 0, bounce = 0})
acorns:insert(acorn)

-- Shoot acorn 

acorn:applyLinearImpulse(dir, impulse, acorn.x, acorn.y )

Step 3: Listener and Counter

A collision listener is added to the acorn to detect when it pops a balloon. The acorn counter is decreased in this part of the code.

-- Collision Listener

		acorn:addEventListener('collision', onCollision)

		-- Update Acorn counter 

		acornsTF.text = acornsTF.text - 1
	end
end

Step 4: Update

The update function will perform a series of EnterFrame operations such as removing offstage acorns and checking for game over.

function update()
	-- Check if acorn is offstage

	for i = 1, acorns.numChildren do
		if(acorns[i].y > display.contentHeight) then
			display.remove(acorns[i])
			acorns[i] = nil

			-- Check for out of acorns

			if(tonumber(acornsTF.text) <= 0) then
				alert('lose')
			end
		end
	end
end

Step 5: Restart Level

This code runs when the Restart button is clicked. It will reset the necessary variables and listeners to restart the level.

function restartLvl()

	-- Destroy Balloons, reset score and acorns

	for i = 1, #balloons do
		display.remove(balloons[i])
	end

	scoreTF.text = '0'
	acornsTF.text = '5'

	balloons = {}

	createBalloons(5, 3)
end

Step 6: Alert

The alert function stops the game, removes the listeners, and displays a game status message.

function alert(state)
	gameListeners('rmv')

	local alert

	if(state == 'win') then
		alert = display.newImage('win.png')
	else
		alert = display.newImage('lose.png')
	end

	alert:setReferencePoint(display.CenterReferencePoint)
	alert.x = display.contentCenterX
	alert.y = display.contentCenterY
	transition.from(alert, {time = 300, xScale = 0.3, yScale = 0.3})

	local score = display.newText(scoreTF.text, 220, 190, native.systemFontBold, 20)
	score:setTextColor(135, 75, 44)
end

Step 7: Call Main Function

In order to initially start the game, the Main function needs to be called. With the above code in place, we’ll do that here:

Main()

Step 8: Loading Screen

The Default.png file is an image that will be displayed right when you start the application while iOS loads the basic data to show the Main Screen. Add this image to your project source folder, it will be automatically added by the Corona compliler.

Step 9: Icon

Using the graphics you created before, you can now create a nice and good looking icon. The icon size for the non-retina iPhone icon is 57x57px, but the retina version is 114x114px and the iTunes store requires a 512x512px version. I suggest creating the 512×512 version first and then scaling down for the other sizes.

It doesn’t need to have the rounded corners or the transparent glare, iTunes and the iPhone will do that for you.

Step 10: Testing in Simulator

It’s time to do the final test. Open the Corona Simulator, browse to your project folder, and then click open. If everything works as expected, you are ready for the final step!

Step 11: Build

In the Corona Simulator go to File > Build and select your target device. Fill the required data and click build. Wait a few seconds and your app will be ready for device testing and/or submission for distribution!

Conclusion

Experiment with the final result and try to make your custom version of the game!

I hope you liked this tutorial series and find it helpful. Thank you for reading!

iOS SDK: Custom Delegates

Aaron Crabtree — Wed, 23 May 2012 11:30:49 +0000

Delegates are a useful tool in communicating between objects. In this tutorial we will create and implement a custom delegate to allow three UISliders to adjust the background color of a ViewController.

About Delegates

Messages in Objective-C are a one-way street. A parent class can send a message to its child, but the child cannot, on its own, send a message to its parent. However, with the help of a delegate, two-way communication can be achieved. UIScrollView and UITableView use delegates routinely to communicate between the model, view, and controller. There are many reasons why the delegate pattern is useful. A delegate might be used to make an object reusable, to provide a flexible way to send messages, or to implement customization.

Step 1: Create a New Project

Launch Xcode and click File > New > Project. Select an iOS Single View Application and click "Next." Name your product "Delegates" and enter a name for your Company Identifier, such as "com.companyName.delegates." Choose the iPhone device family and click "Next." Choose a location to store your project and click "Create."

Step 2: Subclassing `UISlider`

Click File > New > File and choose a Cocoa Touch Objective-C class. Name your class "MTSlider" and choose UISlider from the "Subclass of" drop down menu. Click "Next," then click "Create."

Step 3: Adding the Delegate Protocol Methods

First we need to declare the methods for the delegate. Click on "MTSlider.h." Type the following code above the interface.

@class MTSlider;
@protocol MTSliderDelegate <NSObject>
@optional
- (void)MTSliderDidChange:(MTSlider *)MTSlider withValue:(CGFloat)value;
@required
- (CGFloat)startPositionForMTSlider:(MTSlider *)MTSlider;
@end

Compiler Directive

Notice the line @class MTSlider. By placing this code above everything else, the compiler is informed that at some point down the line, MTSlider will be declared. Without this compiler directive, the compiler will give you a warning because it is expecting to find the interface for MTSlider right away.

Declaring the Delegate Methods

The delegate's methods are declared starting with @protocol. The protocol MTSliderDelegate conforms to the NSObject protocol for a specific reason. The NSObject protocol contains a method, respondsToSelector:, that can be used to ensure the delegate object actually implements an optional method before the method is called. Calling a method that isn't implemented by the delegate object will cause an application to crash.

Optional Method

Plainly speaking, an optional method is a method that does not have to be implemented by the delegate object; in this case the delegate object will be the ViewController, however it could be any object. The optional method MTSliderDidChange:withValue: is messaged in the delegate object when the slider's value changes.

Required Method

On the other hand, a required method is a method that must be implemented by the delegate object or else you will get a compiler warning. The required method startPositionForMTSlider: asks the delegate object where the sliders should start and gets its starting position value in return from the delegate.

Creating an Instance Variable for the Delegate

Still in "MTSlider.h," type the following code directly below @interface to declare an instance variable, or ivar, for the delegate.

id <MTSliderDelegate> sliderDelegate;

If you are using ARC, type the following code instead:

__weak id <MTSliderDelegate> sliderDelegate;

The ivar is of type id so it is flexible and can accept any object type. The next part, MTSliderDelegate says that whatever object ends up being assigned to sliderDelegate will contain the protocol methods of MTSliderDelegate as part of its own implementation.

Creating the Setters and Getters

Finish by synthesizing the setter and getter methods. Type the following code just below the instance variable closing brace.

@property (nonatomic, assign) id <MTSliderDelegate> sliderDelegate;

If you are using ARC, type the following code instead:

@property (nonatomic, weak) id <MTSliderDelegate> sliderDelegate;

Click on "MTSlider.m" and type the following code just below @implementation to complete the property.

@synthesize sliderDelegate;

Step 4: Conforming to the Delegate Protocol Methods

Click on the "ViewController.h" file. Type the following code to conform to the MTSliderDelegate protocol and import "MTSlider.h."

#import "MTSlider.h"
@interface ViewController : UIViewController <MTSliderDelegate>

Implementing the Delegate Protocol Methods

Click on the "ViewController.m" file and type the following code to implement the MTSliderDelegate protocol methods.

- (CGFloat)startPositionForMTSlider:(MTSlider *)MTSlider{

}

- (void)MTSliderDidChange:(MTSlider *)MTSlider withValue:(CGFloat)value{

}

Step 5: Setting the Delegate

Custom Initializer

Creating a custom initializer is key to getting the starting position for the sliders. In "MTSlider.h," add the following code to declare the new initializer.

- (id)initWithFrame:(CGRect)frame andDelegate:(id<MTSliderDelegate>)delegateObject;

Click on "MTSlider.m" and look for the initWithFrame: method. Delete the existing method and replace it with the following code.

- (id)initWithFrame:(CGRect)frame andDelegate:(id<MTSliderDelegate>)delegateObject{
    self = [super initWithFrame:frame];
    if (self) {
        self.sliderDelegate = delegateObject;
        self.value = [sliderDelegate startPositionForMTSlider:self];
    }
    return self;
}

Setting the delegate during initialization allows the delegate method to be called immediately. The method startPositionForMTSlider: gets the starting location for the sliders. Because it is called in the initializer, the sliders' positions are set before they are drawn on the screen.

Overriding `UISlider` Method

The UISlider method setValue:animated: is called automatically each time a slider peg is moved. Still in the "MTSlider.m" file, add the following method.

- (void)setValue:(float)value animated:(BOOL)animated{
    [super setValue:value animated:animated];
    if (sliderDelegate != nil && [sliderDelegate respondsToSelector:@selector(MTSliderDidChange:withValue:)]){
		[[self sliderDelegate] MTSliderDidChange:self withValue:value];
	}
}

By overriding setValue:animated: each time a slider peg moves, a message is sent to the delegate object. Notice the call to super, super setValue:animated:. It is important that we don't accidentally mess up something the method is doing behind the scenes when overriding an existing method.

The delegate method MTSliderDidChange:withValue: is the optional protocol method declared earlier. The delegate object is messaged each time the slider changes. Remember, calling a method that hasn't been implemented will cause the application to crash. Calling respondsToSelector: on the delegate object verifies it is okay to go ahead and message the optional delegate method.

Step 6: Setting the Background Color and Instantiating the Sliders

Click on the "ViewController.m" file and type the following code inside viewDidLoad to set the view's background color with four color components and instantiate the red, green, and blue MTSlider objects. If you are using ARC, be sure to remove the lines [redSlider release];, [greenSlider release];, and [blueSlider release]; as these calls are not necessary.

CGFloat sliderColorPosition = 0.3f;
self.view.backgroundColor = [UIColor colorWithRed:sliderColorPosition green:sliderColorPosition blue:sliderColorPosition alpha:1.0f];

CGRect redSliderFrame = CGRectMake(20.0f, 20.0f, 280.0f, 28.0f);
MTSlider *redSlider = [[MTSlider alloc] initWithFrame:redSliderFrame andDelegate:self];
redSlider.tag = 1;
[self.view addSubview:redSlider];
[redSlider release];

CGRect greenSliderFrame = CGRectMake(20.0f, 70.0f, 280.0f, 28.0f);
MTSlider *greenSlider = [[MTSlider alloc] initWithFrame:greenSliderFrame andDelegate:self];
greenSlider.tag = 2;
[self.view addSubview:greenSlider];
[greenSlider release];

CGRect blueSliderFrame = CGRectMake(20.0f, 120.0f, 280.0f, 28.0f);
MTSlider *blueSlider = [[MTSlider alloc] initWithFrame:blueSliderFrame andDelegate:self];
blueSlider.tag = 3;
[self.view addSubview:blueSlider];
[blueSlider release];

By using the custom MTSlider initializer, initWithFrame:andDelegate:, the delegate is set and the ViewController object becomes the delegate object of each slider. Normally you might expect to see a delegate set using the following code: redSlider.sliderDelegate=self;. However, in this case, the delegate assignment is passed in during the initialization.

Notice each slider's tag property has been set. Initially, the background color of the ViewController is set to dark gray. As each slider is adjusted, the background color will change accordingly because the tag identifies which slider is active.

Step 7: Changing the Background Color

Find the implementation of startPositionForMTSlider:, and type the following code inside the braces to set the initial value of the sliders to 0.3.

CGFloat sliderStartPosition = 0.3f;
return sliderStartPosition;

Adjusting the Background Color

Find the implementation of MTSliderDidChange:withValue:, and add the following code to adjust the background color.

if (MTSlider.tag == 1) { //Red Slider
	CGColorRef bgColor = self.view.backgroundColor.CGColor;
	const CGFloat *colorsPointer = CGColorGetComponents(bgColor);
	CGFloat currentGreen = colorsPointer[1];
	CGFloat currentBlue = colorsPointer[2];
	self.view.backgroundColor = [UIColor colorWithRed:value green:currentGreen blue:currentBlue alpha:1.0f];

}
if (MTSlider.tag == 2) { //Green Slider
	CGColorRef bgColor = self.view.backgroundColor.CGColor;
	const CGFloat *colorsPointer = CGColorGetComponents(bgColor);
	CGFloat currentRed = colorsPointer[0];
	CGFloat currentBlue = colorsPointer[2];
	self.view.backgroundColor = [UIColor colorWithRed:currentRed green:value blue:currentBlue alpha:1.0f];

}
if (MTSlider.tag == 3) { //Blue Slider
	CGColorRef bgColor = self.view.backgroundColor.CGColor;
	const CGFloat *colorsPointer = CGColorGetComponents(bgColor);
	CGFloat currentRed = colorsPointer[0];
	CGFloat currentGreen = colorsPointer[1];
	self.view.backgroundColor = [UIColor colorWithRed:currentRed green:currentGreen blue:value alpha:1.0f];
}

Each time the slider changes, a message is sent to the delegate method. The message contains the current MTSlider and its value. The current slider's tag property is accessed to determine which slider sent the message, and the background color is updated accordingly.

Step 8: Testing the Delegate

Click Product > Run, or click the "Run" arrow in the upper left corner, to view the sliders in action. Adjust the sliders to see how the child elements are able to control the parent element's background color.

Conclusion

There are many other ways to control the background color of a UIViewController, including targets or notifications. Apple designed UISlider to use a target pattern to pass data. However, if you want to add more functionality, the best way to communcate from a child to its parent is by creating a custom delegate.

iOS SDK: UIKit Theme Customization

C.A. Beninati — Tue, 22 May 2012 11:30:42 +0000

Theme customization is a great way to stand out in the App Store, but it isn’t always easy to achieve. This tutorial will teach you several basic UIKit customization tricks that will help distinguish your applications and create more memorable user experiences.

Overview

If you’ve spent any time poking around Apple’s online documentation in their iOS Dev Center, then you’ve surely become familiar with the infamous Human Interface Guidelines (more casually referred to as the “HIG”). This document provides developers and designers of iOS applications with guidelines for how users expect to interact with Apps on the iOS platform, common usage examples, and general UI/UX principles to follow.

While there are many ways to customize the appearance of your own iOS App -from changing colors and sizes to rolling your own UI elements- it is considered best practice to follow the HIG and its suggestions for providing a concise, usable interface.

With that in mind, let’s take a look at some ways that we can do just that while customizing our interface to suit a more unique visual theme.

A Photo Viewer

Most iOS developers are familiar with the common attributes of the UIView class that are easy to change, such as background color, font size, or opacity. But sometimes, tweaking these properties just doesn’t get us the result we need.

So, to demonstrate more hands-on customization techniques, we’ll work on a simple photo viewer app. This is what the app will look like without any customizations, and then with the changes that we’ll perform:

Before we get started, you’ll need a few images which you can download here.

Also, I’ve set up the basic application that we’ll be using, which you can download here. You don’t have to worry about all of the prep work; let’s just get started customizing!

UIViews and Their Visual Properties

With our prep app, we have a few basic components:

UINavigationBar (variable: aNavigationBar)
UIImageView (variable: anImageView)
UILabel (variable: aLabel)
UISegmentedControl (variable: aSegmentControl)

We’ll start by making our background look a little classier by setting a background image. To do this, let’s add a method in our “MTViewController” class called “-setupUI”.

We’ll add this method just below our @synthesize declarations.

- (void)setupUI {
}

Now, we need to add our background image file to our project, so get the “BG-pattern.png” file from the resources that you downloaded just a minute ago, and drag it into our App. I’ve created a new group for our UI images called “UI Graphics”.

With the image in place, we can go inside this “setupUI” method, and we only need to add one line:

[self.view setBackgroundColor:[UIColor colorWithPatternImage:[UIImage imageNamed:@"BG-pattern.png"]]];

In order to make this change live in our App, we’ll need to call our “setupUI” method from the “viewDidLoad” method of our ViewController. I’ve already added a few calls to the “viewDidLoad” method, so we can just add this one at the beginning:

- (void)viewDidLoad
{
    // set up the custom UI elements
    [self setupUI];

    // build arrays for images and titles
    [self setupData];

    // start app with first segment selected
    [self didChangeSegmentControl:aSegmentControl];

    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
}

Now, let’s make our image stand out a little bit by adding a white border around it. To do this, we’ll be working with CALayers, which means that we need to first include the QuartzCore framework into our project.

So go to our UIKitDemo project and we’ll select our target (UIKitDemo). Then we’ll go over to the tab titled “Build Phases”, and show the “Link Binary With Libraries” section.

At the bottom, we click the “+” button and choose “QuartzCore.framework”.

Finally, we have to #import Quartz into our ViewController (MTViewController.m).

#import <QuartzCore/QuartzCore.h>

With Quartz in place, we can start fiddling around with the anImageView sublayers. We’ll add the following to our “setupUI” method to add the border around our ImageView:

    [anImageView.layer setBorderWidth:5.0f];
    [anImageView.layer setBorderColor:[[UIColor whiteColor] CGColor]];

If we build and run our App now, we can see a neat, white border around our ImageView.

Now, to make our image stick out even more, we can put a subtle shadow behind it using similar methods:

    [anImageView.layer setShadowRadius:5.0f];
    [anImageView.layer setShadowOpacity:.85f];
    [anImageView.layer setShadowOffset:CGSizeMake(1.0f, 2.0f)];
    [anImageView.layer setShadowColor:[[UIColor blackColor] CGColor]];
    [anImageView.layer setShouldRasterize:YES];
    [anImageView.layer setMasksToBounds:NO];

A few of these commands aren’t immediately obvious as to their function, so we’ll look at those line-by-line:

    [anImageView.layer setShadowRadius:5.0f];

We’re starting out by setting the amount of “blur” our shadow will have.

    [anImageView.layer setShadowOffset:CGSizeMake(1.0f, 2.0f)];

Next, we create an offset for our shadow, so that it’s not just directly behind our image.

    [anImageView.layer setShouldRasterize:YES];

This command will help with performance, as it makes sure the shadow is only drawn once and then saved as a bitmap, avoiding the need for the App to re-draw the processor intensive transparent layer.

    [anImageView.layer setMasksToBounds:NO];

Finally, we want to make sure that we’re not cutting off our shadow, since it spreads out beyond our original view’s bounds.

Try running the App again, and you’ll see a nice shadow behind our image.

We have a lot of hard edges, so let’s soften up our interface by making our UILabel (aLabel) have rounded corners.

We can do this in the same “setupUI” method beneath the UIImageView customizations. All we need is one simple line to make this work:

    [aLabel.layer setCornerRadius:15.0f];

Now, the final change to our “setupUI” method will rotate our UIImageView slightly, which will break up the “square” feeling of the rest of the layout.

We can do this with two more lines at the bottom of our “setupUI” method:

    CGAffineTransform transform = CGAffineTransformMakeRotation(.03f);
    anImageView.transform = transform;

And that’s it for our “setupUI”. Not too bad for only a few lines of code, right?

UIKit Customization

With the release of iOS 5 came a new protocol for subclasses of UIViews called “appearance”. This protocol allows us to modify certain aspects of our standard UIKit components as we like- such as setting custom background images, shadows, color effects and more.

A simple example of this is the UINavigationBar. We can now set custom images to change our UINavigationBars to suit our App’s themes without any hassle:

    [[UINavigationBar appearance] setBackgroundImage:navBarImage forBarMetrics:UIBarMetricsDefault];

In this case, we have a UIImage named “navBarImage”, which we are setting as the default image for our UINavigationBar. The “appearance” call is going to affect our UINavigationBar class, not just a single instance. This means that our changes will be applied to all UINavigationBars that we use in this App.

To implement this change in our current Photo Viewer project, we need to go to our AppDelegate class (MTAppDelegate). We’re going to the AppDelegate because we want our change to affect all of the instances of UINavigationBars in our App, so in order to ensure that our changes are made, we’ll implement them immediately after the App is opened.

Let’s start by adding the method to our “MTAppDelegate” class right after our @synthesize declarations, just like we did in our “MTViewController” class:

- (void)setupUI {
}

Now, we’ll import our “navBar.png” image (from the image resources folder you downloaded earlier).

We can then create the UIImage instance that we’ll be using for our background:

    UIImage *navBarImage = [UIImage imageNamed:@"navBar.png"];

And right after that, we can make our “appearance” call:

    [[UINavigationBar appearance] setBackgroundImage:navBarImage forBarMetrics:UIBarMetricsDefault];

Before this change is active though, we need to call our “setupUI” method from the application:didFinishLaunchingWithOptions: method.

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    [self setupUI];

	...
}

You can run your App now -notice the dark background in our UINavigationBar at the top.

For our next trick, things get a little bit more complicated. We’re going to set custom images for our UISegmentedControl. The tricky part here is that we’re not just dealing with one or two background images, but instead we have to work with specific sections of images; such as the rounded ends, selected or unselected middle sections, the dividing line between two segments, etc…

First off, if you haven’t already, import the remaining images in the image resource folder you downloaded.

Just like the UINavigationBar that we modified a minute ago, we need to do two things to get our UISegmentedControl changed.

Create the UIImages for our backgrounds
Apply the UIImages for their respective states

I don’t have enough time here to break down each of these actions step-by-step, but I’ll address some of the main ones in a minute. For now, append the following code to your “setupUI” method:

    UIImage *segmentSelected =
    [[UIImage imageNamed:@"segcontrol_sel.png"]
     resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
    UIImage *segmentUnselected =
    [[UIImage imageNamed:@"segcontrol_uns.png"]
     resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)];
    UIImage *segmentSelectedUnselected =
    [UIImage imageNamed:@"segcontrol_sel-uns.png"];
    UIImage *segUnselectedSelected =
    [UIImage imageNamed:@"segcontrol_uns-sel.png"];
    UIImage *segmentUnselectedUnselected =
    [UIImage imageNamed:@"segcontrol_uns-uns.png"];

This creates our UIImages, and performs resizing as appropriate. You’ll notice this little bit:

	resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)

This allows us to essentially “crop” our image file by cutting into it by certain margins. In this case, we’re leaving the top as is, moving 15pts in from the left side, leaving the bottom as it is, and moving 15pts in from the right side. That leaves us with the middle section which will expand to the necessary width, but the rounded ends will stay the same- bookending our stretched middle.

For more information on “resizableImageWithCapInsets:”, check out the official Apple documentation.

With our images sized and ready, we can set the different states of our UISegmentedControl. Each of the five images we just added will have a corresponding state:

    [[UISegmentedControl appearance] setBackgroundImage:segmentUnselected
                                               forState:UIControlStateNormal barMetrics:UIBarMetricsDefault];
    [[UISegmentedControl appearance] setBackgroundImage:segmentSelected
                                               forState:UIControlStateSelected barMetrics:UIBarMetricsDefault];

    [[UISegmentedControl appearance] setDividerImage:segmentUnselectedUnselected
                                 forLeftSegmentState:UIControlStateNormal
                                   rightSegmentState:UIControlStateNormal
                                          barMetrics:UIBarMetricsDefault];

    [[UISegmentedControl appearance] setDividerImage:segmentSelectedUnselected
                                 forLeftSegmentState:UIControlStateSelected
                                   rightSegmentState:UIControlStateNormal
                                          barMetrics:UIBarMetricsDefault];

    [[UISegmentedControl appearance] setDividerImage:segUnselectedSelected
                                forLeftSegmentState:UIControlStateNormal
                                   rightSegmentState:UIControlStateSelected
                                          barMetrics:UIBarMetricsDefault];

Unlike a simple UIButton, which is basically either selected or not, our UISegmentedControl can also check what the state is on either side of the current segment, but it’s not too complex once we’ve gotten the hang of it.

Conclusion

With the new features in iOS 5, and some creative work with Quartz, we can quickly and easily get our Apps to look just as we please. Some challenges that present themselves with UI customization are:

Finding good graphics that are easy to manipulate.
Ensuring that you keep your focus on the user experience.

It can be relatively easy to find good graphics, and there are plenty of good designers out there willing to help. It can be more difficult sometimes to keep the focus on the “why” and not just the “how” of UI customization. To quote the fictitious Dr. Ian Malcolm in Jurassic Park:

[They] were so preoccupied with whether they could that they didn’t stop to think if they should.

As always, go out, try new things, tweak settings, and explore the many other ways you can customize your iOS interfaces!

Corona SDK: Create a Balloon Game – Interaction

Carlos Yanez — Mon, 21 May 2012 14:20:15 +0000

This is the second installment in our Corona SDK Bloons inspired Game tutorial. In today’s tutorial, we’ll add to our interface and start coding the game interaction. Read on!

Where We Left Off. . .

Please be sure to check part 1 of the series to fully understand and prepare for this tutorial.

Step 1: Declare Functions

Declare all functions as local at the start.

local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local gameListeners = {}
local startCharge = {}
local charge = {}
local shot = {}
local onCollision = {}
local startGame = {}
local createBalloons = {}
local update = {}
local restartLvl = {}
local alert = {}
local restart = {}

Step 2: Constructor

Next, we’ll create the function that will initialize all the game logic:

function Main()
	-- code...
end

Step 3: Add Title View

Now we place the TitleView in the stage and call a function that will add the tap listeners to the buttons.

titleBg = display.newImage('titleBg.png')
playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY + 40)
creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 85)
titleView = display.newGroup(titleBg, playBtn, creditsBtn)	

startButtonListeners('add')

Step 4: Start Button Listeners

This function adds the necesary listeners to the TitleView buttons.

function startButtonListeners(action)
	if(action == 'add') then
		playBtn:addEventListener('tap', showGameView)
		creditsBtn:addEventListener('tap', showCredits)
	else
		playBtn:removeEventListener('tap', showGameView)
		creditsBtn:removeEventListener('tap', showCredits)
	end
end

Step 5: Show Credits

The credits screen is shown when the user taps the about button. A tap listener is added to the credits view to remove it.

function showCredits:tap(e)
	playBtn.isVisible = false
	creditsBtn.isVisible = false
	creditsView = display.newImage('credits.png')
	transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

Step 6: Hide Credits

When the credits screen is tapped, it’ll be tweened out of the stage and removed.

function hideCredits:tap(e)
    playBtn.isVisible = true
    creditsBtn.isVisible = true
    transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

Step 7: Show Game View

When the Start button is tapped the title view is tweened and removed, revealing the game view.

function showGameView:tap(e)
	transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil startGame() end})

	-- Add GFX

	infoBar = display.newImage('infoBar.png', 0, 276)
	restartBtn = display.newImage('restartBtn.png', 443, 286)
	squirrel = display.newImage('squirrel.png', 70, 182)
	gCircle = display.newImage('gCircle.png', 83, 216)
	gCircle:setReferencePoint(display.CenterReferencePoint)

	targetTF = display.newText('0', 123, 287, native.systemFontBold, 14)
	targetTF:setTextColor(238, 238, 238)

	scoreTF = display.newText('0', 196, 287, native.systemFontBold, 14)
	scoreTF:setTextColor(238, 238, 238)

	acornsTF = display.newText('5', 49, 287, native.systemFontBold, 13)
	acornsTF:setTextColor(238, 238, 238)
end

Step 8: Game Listeners

This code adds tap listeners to the game background. These will be used to shoot the acorns to the balloons. A tap listener is also added to the restart button.

function gameListeners(action)
	if(action == 'add') then
		bg:addEventListener('touch', startCharge)
		bg:addEventListener('touch', shot)
		restartBtn:addEventListener('tap', restartLvl)
		Runtime:addEventListener('enterFrame', update)
	else
		bg:removeEventListener('touch', startCharge)
		bg:removeEventListener('touch', shot)
		restartBtn:removeEventListener('tap', restartLvl)
		Runtime:removeEventListener('enterFrame', update)
	end
end

Step 9: Start Game

Here we start the game by hiding the direction indicator, adding the game listeners and calling the function that generates the balloons.

function startGame()
	-- Hide gCircle 

	gCircle.isVisible = false

	-- Create balloon function 

	gameListeners('add')
	createBalloons(5, 3)
end

Step 10: Create Balloons

A double for loop is used to create and place the balloons on the stage. The balloon is then added to a table. This will grant us access to the balloons outside this function.

function createBalloons(h, v)
	for i = 1, h do
		for j = 1, v do
			local balloon = display.newImage('balloon.png', 300 + (i * 20), 120 + (j * 30))
			balloon.name = 'balloon'
			physics.addBody(balloon)
			balloon.bodyType = 'static'
			table.insert(balloons, balloon)
		end
	end

	-- Set balloon counter 

	targetTF.text = #balloons
end

Step 11: Collisions

This function handles the acorn-balloon collisions.

When this occur, the balloon is removed from the stage and a sound is played. We also update the score and target textfields.

function onCollision(e)
	if(e.other.name == 'balloon') then
		display.remove(e.other)
		e.other = nil
		audio.play(pop)
		scoreTF.text = scoreTF.text + 50
		scoreTF:setReferencePoint(display.TopLeftReferencePoint)
		scoreTF.x = 196
		targetTF.text = targetTF.text - 1
	end

	if(targetTF.text == '0') then
		alert('win')
	end
end

Step 12: Start Charge

This code will reveal the direction indicator, reset the acorn’s impulse variable, and add a frame listener that will handle the aim and impulse value.

function startCharge:touch(e)
	if(e.phase == 'began') then
		impulse = 0
		gCircle.isVisible = true
		Runtime:addEventListener('enterFrame', charge)
	end
end

Step 13: Charge

The aim rotates accordingly to the direction that will take the acorn, which is set by the impulse variable.

function charge()
	gCircle.rotation = gCircle.rotation - 3
	impulse = impulse - 0.2

	-- Prevent over rotation

	if(gCircle.rotation < -46) then
		gCircle.rotation = -46
		impulse = -3.2
	end
end

Step 14: Code Review

Here is the full code written in this tutorial, alongside with the comments to help you identify each part:

-- Balloons Physics Game
-- Developed by Carlos Yanez

-- Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

-- Physics

local physics = require('physics')
physics.start()

-- Graphics

-- [Background]

local bg = display.newImage('gameBg.png')

-- [Title View]

local titleBg
local playBtn
local creditsBtn
local titleView

-- [Credits]

local creditsView

-- [Game View]

local gCircle
local squirrel
local infoBar
local restartBtn

-- [TextFields]

local scoreTF
local targetTF
local acornsTF

-- Load Sound

local pop = audio.loadSound('pop.mp3')

-- Variables

local titleView
local credits
local acorns = display.newGroup()
local balloons = {}
local impulse = 0
local dir = 3

-- Functions

local Main = {}
local startButtonListeners = {}
local showCredits = {}
local hideCredits = {}
local showGameView = {}
local gameListeners = {}
local startCharge = {}
local charge = {}
local shot = {}
local onCollision = {}
local startGame = {}
local createBalloons = {}
local update = {}
local restartLvl = {}
local alert = {}
local restart = {}

-- Main Function

function Main()
	titleBg = display.newImage('titleBg.png')
	playBtn = display.newImage('playBtn.png', display.contentCenterX - 25.5, display.contentCenterY + 40)
	creditsBtn = display.newImage('creditsBtn.png', display.contentCenterX - 40.5, display.contentCenterY + 85)
	titleView = display.newGroup(titleBg, playBtn, creditsBtn)

	startButtonListeners('add')
end

function startButtonListeners(action)
	if(action == 'add') then
		playBtn:addEventListener('tap', showGameView)
		creditsBtn:addEventListener('tap', showCredits)
	else
		playBtn:removeEventListener('tap', showGameView)
		creditsBtn:removeEventListener('tap', showCredits)
	end
end

function showCredits:tap(e)
	playBtn.isVisible = false
	creditsBtn.isVisible = false
	creditsView = display.newImage('credits.png')
	transition.from(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:addEventListener('tap', hideCredits) creditsView.x = creditsView.x - 0.5 end})
end

function hideCredits:tap(e)
	playBtn.isVisible = true
	creditsBtn.isVisible = true
	transition.to(creditsView, {time = 300, x = -creditsView.width, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

function showGameView:tap(e)
	transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil startGame() end})

	-- Add GFX

	infoBar = display.newImage('infoBar.png', 0, 276)
	restartBtn = display.newImage('restartBtn.png', 443, 286)
	squirrel = display.newImage('squirrel.png', 70, 182)
	gCircle = display.newImage('gCircle.png', 83, 216)
	gCircle:setReferencePoint(display.CenterReferencePoint)

	targetTF = display.newText('0', 123, 287, native.systemFontBold, 14)
	targetTF:setTextColor(238, 238, 238)

	scoreTF = display.newText('0', 196, 287, native.systemFontBold, 14)
	scoreTF:setTextColor(238, 238, 238)

	acornsTF = display.newText('5', 49, 287, native.systemFontBold, 13)
	acornsTF:setTextColor(238, 238, 238)
end

function gameListeners(action)
	if(action == 'add') then
		bg:addEventListener('touch', startCharge)
		bg:addEventListener('touch', shot)
		restartBtn:addEventListener('tap', restartLvl)
		Runtime:addEventListener('enterFrame', update)
	else
		bg:removeEventListener('touch', startCharge)
		bg:removeEventListener('touch', shot)
		restartBtn:removeEventListener('tap', restartLvl)
		Runtime:removeEventListener('enterFrame', update)
	end
end

function startGame()
	-- Hide gCircle 

	gCircle.isVisible = false

	-- Create balloon function 

	gameListeners('add')
	createBalloons(5, 3)
end

function createBalloons(h, v)
	for i = 1, h do
		for j = 1, v do
			local balloon = display.newImage('balloon.png', 300 + (i * 20), 120 + (j * 30))
			balloon.name = 'balloon'
			physics.addBody(balloon)
			balloon.bodyType = 'static'
			table.insert(balloons, balloon)
		end
	end

	-- Set balloon counter 

	targetTF.text = #balloons
end

function onCollision(e)
	--if(e.other.name == 'balloon' and e.phase == 'ended') then
	if(e.other.name == 'balloon') then
		display.remove(e.other)
		e.other = nil
		audio.play(pop)
		scoreTF.text = scoreTF.text + 50
		scoreTF:setReferencePoint(display.TopLeftReferencePoint)
		scoreTF.x = 196
		targetTF.text = targetTF.text - 1
	end

	if(targetTF.text == '0') then
		alert('win')
	end
end

function startCharge:touch(e)
	if(e.phase == 'began') then
		impulse = 0
		gCircle.isVisible = true
		Runtime:addEventListener('enterFrame', charge)
	end
end

function charge()
	gCircle.rotation = gCircle.rotation - 3
	impulse = impulse - 0.2

	-- Prevent over rotation

	if(gCircle.rotation < -46) then
		gCircle.rotation = -46
		impulse = -3.2
	end
end

Next Time…

In the next and final part of the series, we’ll handle the acorn shooting, level restart, and the final steps to take prior to release like app testing, creating a start screen, adding an icon and, finally, building the app. Stay tuned for the final part!

Working With CorePlot – Tuts+ Premium

Aron Bury — Fri, 18 May 2012 07:03:38 +0000

Tutorial Teaser

Where We Left Off

Last time we went over how to customize the look and style of a line graph (or scatter plot) using classes such as CPTMutableTextStyle and CPTMutableLineStyle. We learned how to customize the X and Y axis increments and number styles using the CPTXYAxisSet and CPTXYAxis classes. We also looked at how to add multiple plots to your graph and modify the data source methods to provide the correct data for the right plots using plot identifiers.

What We’ll Cover Today

Today we’ll be working with a completely new graph. We will be creating a bar chart that shows the total number of students in each subject with each bar representing a subject. We’ll also look at how to customize the look and feel of the graph. Let’s get started!

Step 1: Setting Up

First up we need to add the relevant classes to our project. Let’s create a ViewController called ‘STBarGraphViewController’ and a ‘STGraphView’. (Make sure you put them in the relevant groups)

Notice the naming of the view to ‘STGraphView’ instead of ‘STBarGraphView’. Going forward we will be using this view to display the bar and pie graphs.

Before we start working with any code we need to add a button to the Action sheet of our student list view. First open up ‘STStudentListViewController.h’ and import STBarGraphViewController. Add STBarGraphViewControllerDelegate to the list of registered protocols (the protocol actually doesn’t exist yet but we will create it later):

@interface STStudentListViewController : UIViewController <UITableViewDelegate, UITableViewDataSource, AddStudentViewControllerDelegate, UIActionSheetDelegate, STLineGraphViewControllerDelegate, STBarGraphViewControllerDelegate>

Next, jump into the .m file and locate the ‘graphButtonWasSelected:’ method. Add ‘Enrolment by subject’ to the list of ‘otherButtonTitles:’:

UIActionSheet *graphSelectionActionSheet = [[[UIActionSheet alloc] initWithTitle:@"Choose a graph" delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Enrolment over time", @"Enrolment by subject", nil] autorelease];

Now find the ‘actionSheet:clickedButtonAtIndex:’ method and modify it to work with buttonIndex == 1:

if (buttonIndex == 0)
{
    STLineGraphViewController *graphVC = [[STLineGraphViewController alloc] init];
    [graphVC setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
    [graphVC setModalPresentationStyle:UIModalPresentationFullScreen];
    [graphVC setDelegate:self];
    [graphVC setManagedObjectContext:[self managedObjectContext]];

    [self presentModalViewController:graphVC animated:YES];

    [graphVC release];

}
else if (buttonIndex == 1)
{
    STBarGraphViewController *graphVC = [[STBarGraphViewController alloc] init];
    [graphVC setModalTransitionStyle:UIModalTransitionStyleFlipHorizontal];
    [graphVC setModalPresentationStyle:UIModalPresentationFullScreen];
    [graphVC setDelegate:self];
    [graphVC setManagedObjectContext:[self managedObjectContext]];

    [self presentModalViewController:graphVC animated:YES];

    [graphVC release];
}

Again, this will show some warnings because we haven’t implemented the delegate or managedObjectContext properties on STBarGraphViewController yet.

Now jump into STBarGraphViewController.h. Import CorePlot-CocoaTouch.h and add the following property declaration:

@protocol STBarGraphViewControllerDelegate
@required
- (void)doneButtonWasTapped:(id)sender;

@end

Now add the following properties:

@property (nonatomic, strong) CPTGraph *graph;
@property (nonatomic, assign) id<STBarGraphViewControllerDelegate> delegate;
@property (nonatomic, strong) NSManagedObjectContext *managedObjectContext;

Finally, register that this class will follow these protocols:

@interface STBarGraphViewController : UIViewController <CPTBarPlotDelegate, CPTBarPlotDataSource>

Notice that, aside from conforming to different protocols, this class is the same as STLineViewController. Ideally, you would have a base class that would have these properties that you would subclass to reduce code repetition. This tutorial is focusing on core plot only, so we are only focusing on how best to work with the CorePlot framework. If you’ve got the knowledge and time, feel free to create the base class and use inheritance, but we’re going to keep it simple in the sample code here.

Next, jump into the .m file, synthesize the properties, and release them in the dealloc method.

Now let’s link the view class as the controller’s view. Import ‘STBarGraphView.h’, and add the following method:

- (void)loadView
{
    [super loadView];

    [self setTitle:@"Enrolment by subject"];
    [self setView:[[[STGraphView alloc] initWithFrame:self.view.frame] autorelease]];

    CPTTheme *defaultTheme = [CPTTheme themeNamed:kCPTPlainWhiteTheme];

    [self setGraph:(CPTGraph *)[defaultTheme newGraph]];
}

Get the Full Series!

This tutorial series is available to Tuts+ Premium members only. Read a preview of this tutorial on the Tuts+ Premium web site or login to Tuts+ Premium to access the full content.

Joining Tuts+ Premium. . .

Introduction to Unity3D

Ian Zamojc — Thu, 17 May 2012 11:30:48 +0000

Unity3D is a powerful cross-platform 3D engine and a user-friendly development environment. Learn how Unity3D can help you create games in this article!

What is Unity3D?

Unity3D is a powerful cross-platform 3D engine and a user friendly development environment. Easy enough for the beginner and powerful enough for the expert; Unity should interest anybody who wants to easily create 3D games and applications for mobile, desktop, the web, and consoles.

Cost

Indie developers rejoice, Unity is free! Well, almost. There is a Pro edition that comes with more features and tools, but will set you back $1,500. Considering the feature set and how permissive the Unity publishing license is, this price is actually very reasonable. However, the free version will let you get your feet wet, build complete games, and even publish them to the desktop and the web without paying a cent! The only caveat is that games published under the free edition will have a small Unity watermark.

Anything built in Unity will work exactly the same way in Unity Pro. This means you can choose to upgrade at any point if you need the additional features, or want to publish to more platforms such as iOS and Android. There’s also a 30 day Pro trial you can sign up for in order to test drive all the extra features!

A complete feature comparison between Unity and Unity Pro can be found here:

http://unity3d.com/unity/licenses

Installation

Installation is a painless two step process. First, download and run the Unity installer.

Second, when you start Unity for the first time, it will open a web browser and prompt you to register using your email address. It will let you choose which version you want to run. You can select either the free version or a Pro trial that will fallback to the free version after 30 days.

The Application

The Unity application is a complete 3D environment, suitable for laying out levels, creating menus, doing animation, writing scripts, and organizing projects. The user interface is well organized and the panels can be fully customized by dragging and dropping.

The Project panel is where all the assets within a project are stored. When assets are imported, they will first appear here.

The hierarchy panel is where assets are organized in a scene. Assets from the Project panel can be dragged into the Hierarchy panel to add them to the current scene.

The Inspector panel lets you inspect and adjust all the attributes of a selected asset. Everything from its position and rotation, to whether it’s affected by gravity or able to cast a shadow.

The Scene panel is a 3D viewport where you can physically arrange assets by moving them around in 3D space. You can navigate the viewport by panning, rotating, and zooming the view. If you’ve used Maya at all, you should find these hotkeys familiar:

When it comes to running your game, it couldn’t be simpler. Just press the play button. To stop it, press the play button again. You can even pause your game during play to inspect your scene.

Unity Projects

A Unity project is an ordinary folder containing every resource that belongs to your game. Creating a new project is a straightforward affair.

Click File > New Project
Click the Create New Project tab
Browse to a suitable folder
Click Create

The result is a project folder containing subfolders named Assets, Library, and ProjectSettings.

Assets

Assets are any resource your game uses. These include 3D models, materials, textures, audio, scripts, and fonts, to name a few. Other than a few simple objects such as cubes and spheres, Unity can’t actually create most of these assets. Instead, they must be created externally using 3D modeling applications and painting tools and then imported into Unity.

Thankfully, Unity’s asset importing is robust and intelligent. Traditionally, 3D game engines have usually been finicky things and are very particular about what files you give them, forcing developers to carefully convert all their files. Not Unity. It will accept all popular 3D file formats including Maya, 3D Studio Max, Blender and FilmBox with all the rigging, materials and textures intact. Unity also supports all common image file formats, including PNG, JPEG, TIFF and even layered PSD files directly from Photoshop. When it comes to audio, Unity supports WAV and AIF, ideal for sound effects, and MP3 and OGG for music.

A complete list of all the formats Unity can import can be found here:

http://unity3d.com/unity/editor/importing

Let’s import an asset so we have something to work with:

Download boxboy.zip
Unzip it to your desktop
Drag the boxboy folder (containing boxboy.fbx and texture.png) from your desktop into the Project panel
Drag the boxboy asset from the Project panel into the Hierarchy panel
Select boxboy in the Hierarchy panel
Press F to focus the Scene panel on the boxboy

Note: Unity has an Asset Store where you can purchase 3D models, characters, textures, sound effects, music, tools, and even scripts. The Unity Asset Store has quickly become an invaluable resource for game developers and a money making venture for artists and tool developers.

Scenes

Scenes are where you can drag in project assets and arrange them to make levels and game screens. The Hierarchy panel represents the contents of the current scene in a tree-like format. While the Scene panel is ideal for arranging your scene’s assets in 3D space, the Hierarchy is where you’ll spend most of your time actually organizing your scenes and keeping them tidy.

When you start a new project, Unity automatically creates a new scene for you. Scenes start out with nothing but a camera. If you were to run the game now, you won’t see anything but the background color. To give us something to look at:

Drag the boxboy asset we imported from the Project panel into the Hierarchy panel
Select the boxboy asset in the Hierarchy panel
In the Inspector, find the Transform component and adjust the position so that X, Y, and Z are all set to 0. This will ensure your asset is at the exact center of the 3D world.
The default camera position isn’t very good, so let’s give it a better angle. Select the camera, then reposition it using the move and rotate tools.

Scenes are assets and should be saved in your project just like other assets. To save your scene:

Click File > Save Scene
Navigate to your project’s Assets folder
Name your scene Main
Click Save

Scripting

Scripts, known in Unity as behaviours, let you take assets in your scene and make them interactive. Multiple scripts can be attached to a single object, allowing for easy code reuse. Unity supports three different programming languages; UnityScript, C#, and Boo. UnityScript is similar to JavaScript and ActionScript, C# is similar to Java, and Boo is similar to Python. Depending on your background you may feel more comfortable with one or the other.

Let’s create a C# script:

Click Assets > Create > New C# Script
Rename the new script in the Project panel to PlayerScript
Double click the script to open it in MonoDevelop

The script should look just like this:

using UnityEngine;
using System.Collections;

public class PlayerScript : MonoBehaviour {
        // Use this for initialization
        void Start () {
        }

        // Update is called once per frame
        void Update () {
        }
}

Note: C# class names must be the same as their file name and are case sensitive. Make sure your class name matches the file name exactly, excluding the file extension.

All scripts have a start() method and an update() method. The start() method is run once when the object is first created, while the update() method run once per frame. Our script needs to be constantly checking for arrow keys being pressed, so we’ll add the following code to the update() method.

void Update () {
    float horizontal = Input.GetAxis("Horizontal");
    float vertical = Input.GetAxis("Vertical");
    transform.Translate(horizontal, vertical, 0);
}

Now that our script is done, we need to assign it to our asset. Naturally, Unity makes this a simple affair:

Drag the script onto the boxboy asset in your scene

With the script assigned to our boxboy asset, we can run the game and move BoxBoy around by pressing the arrow keys.

Publishing

Unity is able to publish to Windows, OS X, and the web via the Unity Web Player. The Web Player is a browser plugin that works in all major browsers and offers the same performance available on the desktop.
You can download the Unity Web Player here:

http://unity3d.com/webplayer/

Not surprisingly, Unity Pro can publish to even more platforms, including iOS, Android, Wii, Xbox 360, Playstation 3 and even a Flash version of the Web Player.

To publish our game for the Web Player:

Click File > Build & Run
Select Web Player from the list
Click Build And Run

Conclusion

Click here to download the complete Unity project.

This article barely scratches the surface of what is possible with Unity. If this introduction has whet your appetite for more 3D game development, be sure to check out the following resources:

Mobiletuts+

Mobile App Development Options: Which Way To Go?

Key Slides & Quotations:

Mobile Web Pros:

Mobile Web Cons:

Native App Pros:

Native App Cons:

Hybrid App Pros:

Hybrid App Cons:

About the Speaker

About the Venue

Mobiletuts+ Quiz: Android User Interface Essentials

Reader’s Pulse: What Mobile Topics Should We Teach?

Working with CorePlot – Tuts+ Premium

Tutorial Teaser

Where We Left Off

What We’ll Cover Today

Step 1: Setting Up

Get the Full Series!

Joining Tuts+ Premium. . .

Corona SDK: Create a Balloon Game – Final Steps

Where We Left Off. . .

Step 1: Hide Direction Graphic

Step 2: Create And Shoot Acorn

Step 3: Listener and Counter

Step 4: Update

Step 5: Restart Level

Step 6: Alert

Step 7: Call Main Function

Step 8: Loading Screen

Step 9: Icon

Step 10: Testing in Simulator

Step 11: Build

Conclusion

iOS SDK: Custom Delegates

About Delegates

Step 1: Create a New Project

Step 2: Subclassing UISlider

Step 3: Adding the Delegate Protocol Methods

Compiler Directive

Declaring the Delegate Methods

Optional Method

Required Method

Creating an Instance Variable for the Delegate

Creating the Setters and Getters

Step 4: Conforming to the Delegate Protocol Methods

Implementing the Delegate Protocol Methods

Step 5: Setting the Delegate

Custom Initializer

Overriding UISlider Method

Step 6: Setting the Background Color and Instantiating the Sliders

Step 7: Changing the Background Color

Adjusting the Background Color

Step 8: Testing the Delegate

Conclusion

iOS SDK: UIKit Theme Customization

Overview

A Photo Viewer

UIViews and Their Visual Properties

UIKit Customization

Conclusion

Corona SDK: Create a Balloon Game – Interaction

Where We Left Off. . .

Step 1: Declare Functions

Step 2: Constructor

Step 3: Add Title View

Step 4: Start Button Listeners

Step 5: Show Credits

Step 6: Hide Credits

Step 7: Show Game View

Step 8: Game Listeners

Step 9: Start Game

Step 10: Create Balloons

Step 11: Collisions

Step 12: Start Charge

Step 13: Charge

Step 14: Code Review

Next Time…

Working With CorePlot – Tuts+ Premium

Tutorial Teaser

Step 2: Subclassing `UISlider`

Overriding `UISlider` Method