kwigbo

Simplify UIView Animation With Categories

Tue, 22 Feb 2011 14:09:00 -0500

What follows is a category I use to animate UIViews. Adding the animation code where the animation happens feels very messy to me. With these simple categories you can cut down the animation of a UIView in certain situations to a single line of code.

@interface UIView (Extra)

// Animate removing a view from its parent
- (void) removeWithTransition:(UIViewAnimationTransition) transition andDuration:(float) duration;
// Animate adding a subview
- (void) addSubview:(UIView *)view withTransition:(UIViewAnimationTransition) transition withDuration:(float) duration;
// Animate the changing of a views frame
- (void) setFrame:(CGRect) fr withDuration:(float) duration;
// Animate changing the alpha of a view
- (void) setAlpha:(float) a withDuration:(float) duration;

@end

@implementation UIView (Extra)

- (void) removeWithTransition:(UIViewAnimationTransition) transition andDuration:(float) duration
{
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:duration];
	[UIView setAnimationTransition:transition forView:self.superview cache:YES];
	[self removeFromSuperview];
	[UIView commitAnimations];
}

- (void) addSubview:(UIView *)view withTransition:(UIViewAnimationTransition) transition withDuration:(float) duration
{
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:duration];
	[UIView setAnimationTransition:transition forView:self cache:YES];
	[self addSubview:view];
	[UIView commitAnimations];
}

- (void) setFrame:(CGRect) fr withDuration:(float) duration
{
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:duration];
	self.frame = fr;
	[UIView commitAnimations];
}

- (void) setAlpha:(float) a withDuration:(float) duration
{
	[UIView beginAnimations:nil context:NULL];
	[UIView setAnimationDuration:duration];
	self.alpha = a;
	[UIView commitAnimations];
}

@end

Here is an example of using the setFrame:withDuration: to slide a UIDatePicker on and off screen.

- (void) hideDatePicker:(BOOL) hide
{
	CGRect hideFrame = CGRectMake(0, self.view.frame.size.height, datePicker.frame.size.width, datePicker.frame.size.height);
	CGRect showFrame = CGRectMake(0, self.view.frame.size.height - datePicker.frame.size.height, datePicker.frame.size.width, datePicker.frame.size.height);
	
	if(!hide) [datePicker setFrame:showFrame withDuration:.5];
	else [datePicker setFrame:hideFrame withDuration:.5];
}

The following is an example of the flip animation used in a default “utility” application.

// Show the view with animation
[self.view addSubview:myviewcontroller.view withTransition:UIViewAnimationTransitionFlipFromLeft withDuration:.5];
// Remove the view with animation
[myviewcontroller.view removeWithTransition:UIViewAnimationTransitionFlipFromLeft andDuration:.5];

To summarize, categories rock! They make it easy to add functionality to existing classes without the need to subclass. As always questions and comments are welcome.

Managing Color With UIColor Categories

Tue, 15 Feb 2011 12:27:00 -0500

I find it nice to have all the colors for my application contained in one file. This makes it easy to tweak the colors of the app without hunting. How I do this, is to create a Colors.h file and import it in the prefix.pch file. The prefix.pch file is located in “other sources” by default in a new xcode project. The file should look something like this…

#ifdef __OBJC__
	#import <Foundation/Foundation.h>
	#import <UIKit/UIKit.h>
	#import "Colors.h"
#endif

This will include the Colors.h file into every file in your project. With this you will be able to access your colors from everywhere without having to import.

In the Colors.h file I have my UIColor Extra category. This category has some convenience methods for creating colors. There is a method for creating a random UIColor and a method for creating a UIColor from a hex value. I prefer using hex values over RGB since they feel more comfortable to me.

@interface UIColor (Extra)
+ (UIColor *) randomColor;
+ (UIColor *) colorWithHex:(uint) hex;
@end

@implementation UIColor (Extra)
+ (UIColor *) randomColor
{
	CGFloat red =  (CGFloat)random()/(CGFloat)RAND_MAX;
	CGFloat blue = (CGFloat)random()/(CGFloat)RAND_MAX;
	CGFloat green = (CGFloat)random()/(CGFloat)RAND_MAX;
	return [UIColor colorWithRed:red green:green blue:blue alpha:1.0];
}
+ (UIColor *) colorWithHex:(uint) hex
{
	int red, green, blue, alpha;
	
	blue = hex & 0x000000FF;
	green = ((hex & 0x0000FF00) >> 8);
	red = ((hex & 0x00FF0000) >> 16);
	alpha = ((hex & 0xFF000000) >> 24);
	
	return [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:alpha/255.f];
}
@end

Here is two examples to show the usage of these two new methods.

// Set the background color of a UIView to black.
myview.BackgroundColor = [UIColor colorWithHex:0xFF000000];
//Set the background color of a UIView to a random color.
myview.BackgroundColor = [UIColor randomColor];

Now, all that needs to be done is adding our custom colors as another category.

@interface UIColor (Custom)
+ (UIColor *) myCustomColor;
@end

@implementation UIColor (Custom)
+ (UIColor *) myCustomColor;
{
	return [UIColor colorWithHex:0xFFFFFFFF];
}
@end

You can create as many convenience methods in this file as you like. They will all be accessible from everywhere in your application.

Custom UITableViewCell Without Subclassing

Tue, 08 Feb 2011 13:20:00 -0500

I was going to do another game dev post today, but because of a lack of time I will be doing a short tutorial on customizing a UITableViewCell without subclassing.

I find myself in a position frequently where I want to add a label or image to a table cell. You can easily subclass UITableViewCell and add as many other components as you want. I don’t like this solution for adding just a few component due to the fact that it adds two files to my project. Since I like to keep the number of files in my project to a minimum, this is less than ideal.

What we are going to do is tag the sub components we want in our table cell. At the top of the .m for the UITableViewDataSource I define a constant…

#define LABEL_TAG 1

In the cellForRowAtIndexPath method when the cell is created we can simply create a label component and set its tag. A UIView tag property will default to zero so we just have to set the tag to greater than zero.

- (UITableViewCell *)tableView:(UITableView *)aTableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{		
	UITableViewCell *cell = [aTableView dequeueReusableCellWithIdentifier:@"MyCell"];
	
	if(!cell)
	{
		//Create the cell
		cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:@"MyCell"] autorelease];

		//Create the label
		UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, aTableView.frame.size.width, 40)];
		//Tag the label
		label.tag = LABEL_TAG;
		//Add the label to the cell
		[cell.contentView addSubview:label];
		[label release];
	}

	// Get the label for the current cell
	UILabel *header = (UILabel *)[cell viewWithTag:LABEL_TAG];
	// Set the label text
	header.text = currSet.setName;

	return cell;
}

This technique can be used to add any number of components to a UITableViewCell. However, I would only recommend this when the amount of components added is small.

Building a Platform game with Corona and Lime

Tue, 01 Feb 2011 08:29:00 -0500

Update - Added Corona Project Minus Lime Source Code

You can download the project I will be working with here. This does not include the Lime source code, you will have to buy that yourself here.

Note: I have been coding in lua for about a week now. Please let me know if you find anything incorrect or bad practice.

In this tutorial I will be walking you through the code needed to create a platform game. I will be using the Corona SDK and Lime. Lime is a nice library for use with Corona that makes it easy to create tile based games with Tiled. If you don’t know what Tiled is, check it out.

Here is a demo video of the game in action!

If you load the map.tmx from the project into Tiled you will see two layers. The top layer is called “Physics”. This is the layer that will define all our objects. The bottom layer is called “Background” and will hold all the tiles that create the visual aspect of the map.

First thing to do is set up the main entry point for the game. In the main.lua file I have the following code. This will do a bit of setup for the app and create our platform world.

--Hide the status bar
display.setStatusBar( display.HiddenStatusBar )

--Enable multitouch
system.activate( "multitouch" )

--Include platform.lua
local platform = require("platform")

--Call the loadMap function in platform.lua
platform.loadMap("map.tmx")

Next is the initial setup of our platform.lua file.

--platform.lua is defined as a module
module(..., package.seeall)

--Include physics and start the physics simulation
require("physics")
physics.start()

--Load lime and assign to a variable
local lime = require("lime")

function loadMap(tmx)
	--Load the map into our instance of lime
	map = lime.loadMap(tmx)

	--Add a listener so we know when the player object has been loaded from the map
	map:addObjectListener("Player", onPlayerLoaded)
	
	--Tell lime to create the visual aspect of the world
	visual = lime.createVisual(map)

	--Tell lime to create the physics bodies needed for the world
	local physical = lime.buildPhysical(map)
end

Now that the map is loaded we can move on to the listener function referenced in the loadMap function. This method will get passed the player object defined in Tiled. Most of the properties are simply stored for use later. The object.sheet property is used to load the image used to represent the main character.

function onPlayerLoaded(object)
	--Store properties for later use
	topSpeed = tonumber(object.topSpeed)
	floatForce = tonumber(object.floatForce)
	walkForce = tonumber(object.walkForce)
	jumpForce = tonumber(object.jumpForce)
	jumpDrag = tonumber(object.jumpDrag)
	wallJumpPower = tonumber(object.wallJumpPower)
	wallDrag = tonumber(object.wallDrag)
	
	--Create our player display object
	player = display.newImage(object.sheet)
	
	--Grab the layer display object and add the player to it
	local layer = map:getObjectLayer("Physics")
	layer.group:insert(player)
	
	--Add a collision listener and set the initial position of the player
	player:addEventListener( "collision", onPlayerCollision )
	player.x = object.x
	player.y = object.y
	
	--Create a physics body to represent the player and stop it from rotating
	physics.addBody(player, { density = object.density, friction = object.friction, bounce = object.bounce })
	player.isFixedRotation = true
	--Player is ready, setup the joystick
	setupJoystick()
end

Before I get into the collision detection I would like to step back and go over touch events and the main loop. Here is how those event listeners are defined.

Runtime:addEventListener("touch", onTouch)
Runtime:addEventListener("enterFrame", onPlatformLoop)

The first is the “touch” event. What I am going to do is use a joystick for left and right movement and a tap anywhere else on screen for the jump. The onTouch Method simply sets a variable to indicate whether the user has touched the screen anywhere. When a touch begins I am also calling a resetJump method. More on that part later though.

local function onTouch(event)
	if event.phase == "began" then 
		touchDown = true
		resetJump()
	elseif event.phase == "ended" then 
		touchDown = false
	end
end

Next up is the main loop. This gets called once every frame, so we can use it for updating our map position among other things.

local function onPlatformLoop(event)
	--If the player has been created set the map to center around the player
	if player then map:setPosition(player.x, player.y) end
	--If the user is touching the screen I will call this method
	if touchDown then onTouchIsDown() end
	--For the sake of clean code all player updates will be in another function
	updatePlayer()
end

Next step is to get the joystick controls in. For this I found a nice class for use in Corona SDK here. We setup the joystick when our player is loaded and ready to control. You can consult the joystick class for details on how to use it. I have a simple setup here since it is only used for left and right movement.

--Include joystick.lua
local joystickClass = require( "joystick" )

function setupJoystick()
	joystick = joystickClass.newJoystick{
		outerImage = "joystickOuter.png",
		outerAlpha = 0.0,
		innerImage = "joystickInner.png",
		innerAlpha = 1.0,
		position_x = 0,
		position_y = display.contentHeight - (display.contentHeight/2),
		onMove = onWalk
	}
end

One thing to note about the joystick is the onMove property points to the onWalk function. The onWalk function will test if the player can walk and apply a force to make the player move.

function onWalk( event )
	--Make sure the joystick is not in the neutral position
	if event.joyX ~= false then
		--Get the current velocity of the player
		vx, vy = player:getLinearVelocity()
		--Make sure we don't keep speeding up past the topSpeed
		local belowSpeed = vx > -topSpeed and vx < topSpeed;
		--Set a different speed for horizontal movement in the air
		local force = playerOnGround and walkForce or floatForce
		--Apply force to move the player
		if belowSpeed then player:applyForce( event.joyX * force, vy, player.x, player.y) end
	end
end

Back in our game loop we called a function named onTouchIsDown. Right now all this does is call the updateJump function. It may do more in the future but that’s for another day.

function onTouchIsDown()
	updateJump()
end

function updateJump()
	--Set the current force for the jump, will reset when user taps
	currForce = currForce - jumpDrag
	--Make sure the force is never negative
	if currForce < 0 then currForce = 0 end
	--If on the ground apply a horizontal force
	if playerOnGround then player:applyForce( 0, -currForce, player.x, player.y ) end
	--If the player is on the wall make him jump off
	if playerOnGround == false and playerOnWall then wallJump() end
end

function resetJump()
	--Set current force back to its initial value
	currForce = jumpForce
end

In our game loop I was also calling a function named “updatePlayer”. This is meant to adjust movement in different directions based on the state of the player.

function updatePlayer()
	-- Stop movement on the x axis in the air
	if joystick.joyX == false and playerOnGround == false then
		vx, vy = player:getLinearVelocity()
		player:setLinearVelocity(0, vy)
	end

	--Slide down walls slowly when pushing towards the wall
	if joystick.joyX ~= false and playerOnWall and wallJumping == false then
		player:setLinearVelocity(0, wallDrag)
	end
end

The wall jump function will allow our player to jump of walls. This is a fun feature in my opinion. I like wall jumping to reach high places.

function wallJump()
	--Only wall jump if joystick is not in the neutral position
	if joystick.joyX then
		--Don't try to wall jump if I am already wall jumping
		if wallJumping ~= true then
			--Get the side the wall is on to set our jump direction
			local xPower = wallOnLeft and wallJumpPower or -wallJumpPower
			wallJumping = true
			--Make the player jump
			player:setLinearVelocity(xPower, -(wallJumpPower*2))
		end
	end
end

Last up is collision detection. The physics engine in Corona handles all the real collision detection. What it won’t tell us is what side of an object the player hit. This is important if we want to wall jump. We need to know if we are hitting the ground or a wall. The following function is the listener that was set up when the player was created. In this function event.other refers to the physics body that our player has collided with. If the body has the property IsGround (which was set in the map) then we call hitGround or offGround based on whether the collision began or ended. We pass the collision object along since we will need to know its location and size later.

function onPlayerCollision(event)
	if event.phase == "began" then
		if event.other.IsGround then hitGround(event.other) end
	end
	
	if event.phase == "ended" then
		if event.other.IsGround then offGround(event.other) end	
	end
end

When we call the hitGround function we need to test what side was hit and whether the collision was valid.

function hitGround(ground)
	--The player is no longer wall jumping if it hit a new ground object
	wallJumping = false

	--Check which side of the ground the player hit
	local hitSide = getCollisionSide(ground, player)

	--activeWall tracks the wall currently in contact with the player
	--If not already touching a wall test for a wall
	if activeWall == nil then 
		playerOnWall = hitSide == 3 or hitSide == 4
		--If the player is on the wall set the active wall
		if playerOnWall then 
			activeWall = ground
			wallOnLeft = hitSide == 3
		end
	end
	--activeGround tracks the ground currently in contact with the player
	--If not already touching the ground test for the ground
	if activeGround == nil then 
		playerOnGround = hitSide == 2

		--If the player is on the ground then set the active ground and unset wall
		if playerOnGround then 
			activeGround = ground 
			activeWall = nil 
			playerOnWall = false
		end
	end
end

The offGround function is more simple. If a collision ended and the wall is active then deactivate the wall. the same goes for the ground.

function offGround(ground)
	if ground == activeWall then 
		activeWall = nil 
		playerOnWall = false
	end
	if ground == activeGround then 
		activeGround = nil 
		playerOnGround = false
	end
end

Here is the method that checks which side of the ground object the player collided with. This is just a simple rectangle rectangle collision detection. The varaible names should make it self explanatory.

function getCollisionSide(ground, player)
	local groundX, groundY = ground.x - (ground.width / 2), ground.y - (ground.height / 2)
	local playerX, playerY = player.x - (player.width / 2), player.y - (player.height / 2)
	
	local groundLeft = groundX
	local playerLeft = playerX
	local groundRight = groundX+ground.width
	local playerRight = playerX+player.width
	
	local groundTop = groundY
	local playerTop = playerY
	local groundBottom = groundY+ground.height
	local playerBottom = playerY+player.height

	if groundBottom < playerTop then return 1 end
	if groundTop > playerBottom then return 2 end
	
	if groundRight < playerLeft then return 3 end
	if groundLeft > playerRight then return 4 end
end

That about wraps it up. As always please feel free to ask questions.

I am very impressed with how easy it was to build this simple platformer. I really like Lime, which was created by @MonkeyDead. There is definitely room for improvement, but it has a solid foundation to work off of. The developer of Lime has been very responsive and helpful. With the Lime Corona combo I feel like I can focus more on making games instead of writing code.

Naked Match Experiment Part 2

Tue, 25 Jan 2011 08:33:48 -0500

I was just told yesterday by @mysterycoconut that I am up for #iDevBlogADay on Tuesdays now. He gave me the option of starting next week but I figured I could come up with something to post today.

I decided that I would do an update on how Naked Match was doing. You can see my initial post about it here…

Naked Match Experiment Part 1

First of all, I am working on a redesign of Naked Match, since it is still by far my most popular game. I am playing with the Aviary.com tool Raven. Raven is a browser based vector app built on Adobe Flash. I really like it and it is a good app to use for anyone who doesn’t have access to some other desktop based vector app. You can see the design work in progress here…

Naked Match Redesign W.I.P.

I will also be adding new board sizes to increase the difficulty of the game for those who desire it.

The ads in Naked Match have done fairly well for me so far. When it first launched it rose up the charts quickly but never reached as high as My Memory did. My Memory was launched in the months following the initial launch of the App Store. There wasn’t as much competition in the App Store at that time. Below is a graph showing the ad revenue generated so far by Naked Match.

I am planning on continuing this experiment further by releasing another version of Naked Match that will be named something different and be targeted towards kids. This will come after the redesign of Naked Match.

Sorry for the short post this week. I will try and come up with more for next week.

Problems With .js Files in XCode

Wed, 05 Jan 2011 08:33:00 -0500

Do you find your self seeing the following error after adding a javascript file to your project?

warning: no rule to process file ‘$(PROJECT_DIR)/Resources/textView.js’ of type sourcecode.javascript for architecture armv6

Fear not for this is an easy fix. Select the .js file and click the details tab. In the detail view uncheck the bullseye column (the last to the right). This column when checked indicates the file is compiled code.

Alternatively, you can just expand your target and remove the .js file from the “Compiled Sources”.

For some reason when you add a javascript file it is automatically set to be a compiled source. Don’t ask me why, and if there is anyone who knows a way to make XCode stop adding .js files here I would love to know.

New splash screen W.I.P. for Naked Match! I wonder if it will...

Tue, 04 Jan 2011 13:59:09 -0500

New splash screen W.I.P. for Naked Match! I wonder if it will pass Apple review?

Passcode Entry Screen iOS

Wed, 29 Dec 2010 11:03:00 -0500

I was recently asked to create a passcode screen for Tumble Photo. Since there is adult content on tumblr, the user wanted the ability to lock down the app with a passcode. I googled for a bit, thinking that someone had to have already done this. No luck, so here is the results of what I came up with. This can be used to set the passcode as well as to authenticate the passcode. I tried to get it as close visually and functionally to the passcode screen in the settings app.

Update

The following category is required for this to work.

Hex UIColor Category

Get the Source!

The KLockScreenController is the only class that you will need to use directly. Here is an example of usage…

This sample will show a lock screen for login.

KLockScreenController *lockScreen = [[[KLockScreenController alloc] 
	initWithLock:NO shouldClearLock:NO] autorelease];
lockScreen.delegate = self;
lockScreen.view.frame = CGRectMake(0, 0, 320, 480);
[self presentModalViewController:lockScreen animated:YES];

This sample will show a lock screen for login and specify that it should disable the passcode.

KLockScreenController *lockScreen = [[[KLockScreenController alloc] 
	initWithLock:NO shouldClearLock:YES] autorelease];
lockScreen.view.frame = CGRectMake(0, 0, 320, 480);
lockScreen.delegate = self;
[self presentModalViewController:lockScreen animated:YES];

This sample will enable setting a passcode.

KLockScreenController *lockScreen = [[[KLockScreenController alloc] 
	initWithLock:YES shouldClearLock:YES] autorelease];
lockScreen.view.frame = CGRectMake(0, 0, 320, 480);
lockScreen.delegate = self;
[self presentModalViewController:lockScreen animated:YES];

These are the delegate methods which you will use to store and check the passcode.

// Return YES if passcode is correct
- (BOOL) didSubmitPassCode:(NSString *) code withClear:(BOOL) clear
{
	return YES;
}

// Store newly created passcode
- (void) didSubmitLock:(NSString *) code
{
	
}

As always, let me know how well it works for you and I am always open to suggestions for improvement.

Tumble Photo Available in the App Store Now!

Thu, 16 Dec 2010 10:53:00 -0500

My new app has just passed Apple review. Tumble Photo is a simple Tumblr image gallery viewer for the iPad, iPhone, and iPod touch. View all the image posts from your favorite tumblr Tumblelog in an easy to use image gallery app.

Download it now Free!
http://itunes.apple.com/us/app/tumble-photo/id398357516?mt=8

Check if Current Device is iPad

Fri, 19 Nov 2010 12:14:00 -0500

This is a simple method I use in all my apps to easily tell if the current device is iPad. I add the import for this class to the Prefix.pch file so I can easily check what device I am on without having to import.

//Device.h
@interface Device : NSObject 
{
}
+ (BOOL) isPad;
@end
 
//Device.m
#import "Device.h"
 
@implementation Device
+ (BOOL) isPad
{
#ifdef UI_USER_INTERFACE_IDIOM
	return UI_USER_INTERFACE_IDIOM() == UIUserInterfaceIdiomPad;
#endif
	return NO;
}
@end

Core Data QuickTip: Inverse Relationships

Thu, 11 Nov 2010 19:57:00 -0500

Core Data QuickTip: Inverse Relationships:

brandontreb:

One thing I always wondered about Core Data is why the compiler would warn you if you didn’t specify the inverse relationship. After reading through Apple’s docs, they essentially say its to make your database more robust by reinforcing those relationships. Plus, you never know when you may have…

Check if NSString Contains a Sub String

Mon, 08 Nov 2010 12:05:00 -0500

This is a simple category that allows you to see if an instance of NSString contains a specific sub string.

@interface NSString (SubString)
- (BOOL) hasSubString:(NSString *) str;
@end
 
@implementation NSString (SubString)
- (BOOL) hasSubString:(NSString *) str
{
	return [self rangeOfString:str].location != NSNotFound;
}
@end

Automate iOS Builds With ANT

Fri, 29 Oct 2010 12:00:00 -0400

This is a simple tutorial on how to automate an iOS build with ANT. ‘Why ANT,’ you ask? Because ANT rocks. Coming from the world of Flex development, I am very comfortable with ANT. I have used ANT to compile and deploy Flex application many times. ANT is simple. Install it, write a simple xml file, and run it.

What you need

Step 1: Install TextMate

If you haven’t done so already install TextMate. For those of you who don’t know, TextMate is a kick ass text editor. I won’t go into how awesome it is because that could take up an entire blog post. Just know that it rocks and you can install bundles to do different things.

Step 2: Install the ANT bundle for TextMate

Download, unzip and double click the TextMate ANT bundle.

Step 3: Verify that you have ANT installed

Open terminal and type “ant -v”. ANT comes installed on Mac so it should be there. If not you can google it and find out how to do that.

Step 4: Create a build file.

For those of you new to ANT, an ANT build file is nothing more than an xml file. Here is an example of a basic build file.

<project name="iOS Compile" default="Compile" basedir=".">

	<property name="MY_PROP" value="myprop"/>

	<target name="Compile">
	
		<echo level="info">${MY_PROP}</echo>
	
	</target>

</project>

Each build file contains a root “project” tag and any number of “target” tags. Each target can be run individually or you can run the build file and it will run whichever target is specified as default in the project tag. “Property” tags are also very useful for storing frequently used values. “Echo” tags are used to output text. In this example we are outputting the property MY_PROP.

Step 5: Run the build file.

In TextMate, open your build file and hit command+r. This will run the default target of your build file. Alternatively, you can go to bundles>ant>build target to run a specific target in the build file.

That’s great, but how do I compile an iPhone project? Well that’s simple…

<project name="iOS Compile" default="compress" basedir=".">

	<target name="clean">
		
		<echo level="info">Cleaning ...</echo>
		<exec executable="xcodebuild" dir="${IOS_PROJECT_ROOT}" 
			failonerror="true">
		        
			<arg line="-project AppName.xcodeproj"/>
			<arg line="-alltargets clean" />
		            
		</exec>
	
	</target>
	
	<target name="compile" depends="clean">
		        
		<echo level="info">Compiling...</echo>
		<exec executable="xcodebuild" dir="${IOS_PROJECT_ROOT}" 
			failonerror="true">
		        
			<arg line="-project Branded.xcodeproj"/>
			<arg line="-alltargets" />
			<arg line="-configuration Release" />
		            
		</exec>
		
	</target>
	
	<target name="compress" depends="compile">
			
		<echo level="info">Compressing...</echo>
		<exec executable="zip" dir="${PATH_TO_IOS_BUILD_DIR}" 
			failonerror="true">
				        
			<arg line="-y -r AppName.zip AppName.app"/>
				            
		</exec>
	
	</target>

</project>

Ok, lets go through this step by step. First, we have 3 targets, Clean, Compile, and Compress. You will probably notice the depends attribute. When a target is run and it has a depends attribute the target referenced in that attribute is run first. So in this case our default target is compress. Compress depends on compile and compile depends on clean. So when the build file is run it will go… Clean - Compile - Compress.

You’ll notice that all these targets have something in common, which is the exec task. The exec task can do any number of command line functions. In the case of clean and compile we are calling the xcodebuild command which is xcodes command line interface. In the case of compress we are calling the zip command. So you can see with this, the sky is the limit. The exec command also has a dir attribute which will specify the directory where the command will execute. In the clean and compile targets we are setting a property that points to the xcode project directory. The failonerror attribute will just kill the build if the command hits an error. Each exec command can have any number of arg nodes. Each of these nodes is used to pass arguments to the command. To see a list of what’s available for xcodebuild just add the following arg node.

<arg line="-help" />

Conclusion

This is by no means a thorough tutorial on ANT. It is meant to be a simple introduction to help you get started. Below is a list of resources to help you get more out of ANT. As always, feedback is appreciated and don’t hesitate to ask questions.

Note: TextMate isn’t required since you can run an ANT build file from the command line as well.

More Info

Wandering NPCs!

Thu, 26 Aug 2010 07:43:00 -0400

AAS Editor Demo

Sun, 22 Aug 2010 13:17:51 -0400

For my #iDevBlogADay post this week I decided to do a screen cast. I wanted to give an update on my progress with the AAS engine. This is my first ever narrated screen cast, so be gentle :). Below the screen cast is a demo video showing the game in action inside the AAS. Enjoy!

Cracklytics Quick access to Google Analytics stats! View and...

Tue, 17 Aug 2010 08:02:00 -0400

Cracklytics

Quick access to Google Analytics stats! View and compare stats from the current day, previous day, and the entire month. Stats included are visits, bounce rate, page views, and pages per visit. This app also allows tracking multiple sites as well. If you finding yourself checking you GA stats constantly, this is a great app to have!

Alli’s Jigsaw Puzzle This awesome game allows you to take...

Mon, 16 Aug 2010 09:39:38 -0400

Alli’s Jigsaw Puzzle

This awesome game allows you to take your own photos and turn them into jigsaw puzzles. You can choose between 25 and 36 pieces with the option of allowing the pieces to rotate. If you like puzzles check out this great game!

Finite State Machine Part 1

Sun, 15 Aug 2010 16:43:00 -0400

Intro

I would like to start by saying, I am not a computer scientist. The only degree I have is an Associates in visual communications. I am a self taught developer and have no formal training in any kind of programming. What follows is my understanding and implementation of a Finite State Machine (FSM). That being said, I am open to corrections and suggestions. Also a lot of this is based around cocos2d, since that is what I am using for the AAS (Awesome Adventure System).

What is an FSM?

An FSM is basically a way to simplify and organize complicated logic associated with an object. Well, what does that mean? Say you have a robot, and you want it to perform various tasks. Tasks might include walk, talk, and kill. So, how would we program our robot to do all these things? Well, we could create some complex conditional logic based on if/switch. This is less than ideal especially when we want to change who we want our robot to kill. An FSM in its simplest form is a machine (robot) and its states (kill, walk, talk etc.). States are swapped in and out of our machine in order to make it do different things.

That’s great, but how does it work?

If you look at the code below, you will see the header for the FSM that I am using in the AAS. I have created an Actor class that is a subclass of CCSprite. Each Actor has its own FSM and is the owner of the FSM. You can think of the Actor as the car and the FSM as the engine.

#import "FSMState.h"

@interface FSM : NSObject
{
	id _owner;
	FSMState *_currentState;
	FSMState *_globalState;
	FSMState *_previousState;
}

- (id) initWithEntity:(id) entity;
- (BOOL) inState:(Class) state;
- (void) update;
- (void) changeState:(FSMState *) newState;
- (void) changeGlobalState:(FSMState *) newState;
- (void) revertToPreviousState;

@end

The initWithEntity method is simply a way for an Actor to create its FSM and pass itself in as the owner. We need the FSM to know what object to control so whatever state is active will also have a reference to that object.

- (id) initWithEntity:(id) entity
{
	if((self = [super init]))
	{
		_owner = [entity retain];
	}
	
	return self;
}

Ok, now we want to add a state to our machine so it can do something. In our changeState method we will set the previous state to our current state first. This is so that we can easily revert to the previous state. Next, we will exit the current state and set our new state as the current state.

- (void) changeState:(FSMState *) newState
{
	[newState retain];
	
	if(_previousState) [_previousState release];
	_previousState = _currentState;
	
	if(_currentState) [_currentState exit];
        
	_currentState = newState;
	
	[_currentState setEntity:_owner];
	[_currentState enter];
}

Here is the revertToPreviousState method which is pretty much self explanatory. All it does it call the changeState method with the previous state.

- (void) revertToPreviousState
{
	[self changeState:_previousState];
}

Next we have the concept of a global state. A global state is a state that executes without exiting the current state. Here is our changeGlobalState method, which is very similar to the changeState method.

- (void) changeGlobalState:(FSMState *) newState
{
	if(_globalState) [_globalState exit];  
	_globalState = newState;
	
	[_globalState setEntity:_owner];
	[_globalState enter];
}

The last method in our FSM is the update method. This is the method that will get called in your main game loop. This will just call the execute method on our current and global states so they can update as well.

- (void) update
{
	if(_globalState) [_globalState execute];
	if(_currentState) [_currentState execute];
}

Creating the states

Below is the header for the base class for the states that will be loaded into the FSM. It contains a class method for getting an instance of our state. This will make it easy to create and load our states in the FSM. We have an entity property that is a reference to our Actor which the state will manipulate. The enter method is called when the state is loaded, the execute method is called in our game loop, and the exit method is called when we unload our state.

@interface FSMState : NSObject
{
	id _entity;
}

+ (id) state;

- (void) setEntity:(id) ent;
- (id) getEntity;

- (void) enter;
- (void) execute;
- (void) exit;

@end

The walk state

How you build your states is dependent on what type of game you are building, what the object needs to do, and many other variables. Here is a sample of a simple walk state. I create a new class method to get an instance of the state. I don’t want to use the default one in my base class in this instance because I want to pass a path to the state. The path is simply an array of tile coordinates that are found using an A* path finding algorithm.

+ (id) stateWithPath:(NSMutableArray *) path
{
	WalkState *state = [[WalkState alloc] init];
	state.path = [path retain];
	return [state autorelease];
}

In the enter method I call a walk next method which will walk my sprite to the next tile in the path. I am getting the tile size for my map to translate the tile coordinates into an actual position in the map. I then grab the next tile I have to move to from the path array and use some cocos2d magic to move my sprite to the new tile location.

- (void) enter
{
	[self walkNext];
}

- (void) walkNext
{
	int tileSize = [AASGameManager tileSize];
	Actor *ent = (Actor *) _entity;
	
	PathFindNode *currNode = (PathFindNode *)[path 
		objectAtIndex:path.count-1];

	float nodeX = currNode->nodeX * tileSize;
	float nodeY = currNode->nodeY * tileSize;
	
	id walkMove = [CCMoveTo 
			actionWithDuration:.25 position:ccp(nodeX, nodeY)];

	id endWalkFunc = [CCCallFuncN actionWithTarget:self 
			selector:@selector(endWalkNext)];

	id walkSequence = [CCSequence actions:walkMove, endWalkFunc, nil];
	
	[ent runAction:walkSequence];
}

When the move is complete I call the endWalkNext method. This removes the node that I just moved to from our path array, checks for the end of the path, and walks to the next node or loads a stand state via the stand method.

- (void) endWalkNext
{
	Actor *ent = (Actor *) _entity;
	
	[path removeLastObject];
	
	if(path.count == 0)
	{
		[path release];
		[ent stand];
		return;
	}
	
	[self walkNext];
}

In this example state I didn’t use the execute state. The reason being cocos2d handles all the animation nicely without having to worry about movement in the game loop.

Loading the states

Here are the methods in my Actor class that will trigger a state change. The stand method will simply load an instance of the StandState class in the state machine. The walk to class will take a point in the map (found via a tap in my case) and use an A* algorithm to find a path. Once the path is found I can load a new WalkState into the state machine and pass it the path I just found.

- (void) stand
{
	[stateMachine changeState:[StandState state]];
}

- (void) walkTo:(CGPoint) point
{
	if([self spaceIsBlocked:point.x :point.y]) return;
	
	if([stateMachine inState:[WalkState class]]) [self stand];
	
	int tileSize = [AASGameManager tileSize];
	
	int startX = floor(self.position.x/tileSize);
	int startY = floor(self.position.y/tileSize);
	
	NSMutableArray *path = [[astar 
			findPath:startX :startY :point.x :point.y] retain];

	[stateMachine changeState:[WalkState stateWithPath:path]];
	[path release];
}

The End?

This is just part one of my postings on the use of an FSM. The next part will have a sample application with it as well. At the moment I am having computer problems at home so I couldn’t get a demo in time for my #iDevBlogADay post. As always I am open to comments and suggestion.

Awesome Adventure System

Sun, 08 Aug 2010 10:05:00 -0400

iDevBlogADay

I am pleased to announce that I will be participating in the iDevBlogADay. I will be posting every Sunday to keep my spot on the iDevBlogADay.com list. Stay tuned, maybe I can get in the habit of posting more regularly.

The Awesome Adventure System

Lately, I have been rethinking my adventure game idea. I have come to the conclusion that I will build an adventure game system. I am calling it the AAS (Awesome Adventure System). Recently I ran across a text adventure engine written in Javascript (link) and while checking that out I thought to myself… “Self, wouldn’t it be cool if I could create a simple XML definition for a more visually oriented adventure game?”

Tiled The Editor

I have chosen to use Tiled (link) to be the game creation tool for the AAS. For those of you who use Cocos2d, you may be familiar with Tiled already. For everyone else, Tiled is a very nice 2-D tile map editor. Tiled can create special object layers and these object layers can contain any number of objects, all with their own properties. Tiled also exports an XML file and its TMX format is supported by Cocos2d.

Progress

The AAS games will be downloaded as zip files. This zip file will include all needed game assets. Each game will start with a default.tmx file that will load the initial map and the main character. It will also initialize other global setting for an AAS game. Each map can have any number of exits that will link to other .tmx maps. When you step on an exit it will unload the current .tmx map and all its assets and load the next one. The engine so far can download, extract, and load a game. You can walk around loading and unloading maps as well. The player moves with a point and click (tap). I have an A* pathfinding algorithm that will walk the player from one point to the next. Each object in the world will be a finite state machine to simplify the creation of actions available.

Scope

Some of you are probably thinking that this is a pretty large project and will probably end up going nowhere. I am not trying to create an engine that will be able to emulate one of the Kings Quest games. I am talking about short adventures that will take 1-2 hours to complete. The stories can be broken up into chapters so new chapters will be released on a semi regular basis. This is a project I have been wanting to do for years. Once it’s done it will allow me to focus on art again for awhile. I would also like to allow others who are interested to make games for the AAS.

The Art

I am an indie dev and do all my game work in my spare time around a wife and 3 kids. Something needed to be done to get this looking cool while still giving me the chance to code. I decided to ask the great and mighty pixel artist, Jalonso (Gallery) if he would lend a hand. I am very happy to say he has accepted and will be helping out in his spare time. Thanks Jal!

Conclusion

The AAS is going to be my sole focus for iPhone dev for quite a while. I am more excited about this project than any other that has come before it. Please feel free to give me ideas, suggestions, or criticisms via the comments.

New Review Section

Thu, 05 Aug 2010 15:04:02 -0400

I just added a new section to this site for reviews. I have decided to start doing some mini reviews of apps that I find of interest. I don’t think I will be taking requests for reviews though. My main focus in this area will be app that catch my attention. So stay tuned for the first app review!

kwigbo

Simplify UIView Animation With Categories

Managing Color With UIColor Categories

Custom UITableViewCell Without Subclassing

Building a Platform game with Corona and Lime

**Update** - Added Corona Project Minus Lime Source Code

Naked Match Experiment Part 2

Problems With .js Files in XCode

New splash screen W.I.P. for Naked Match! I wonder if it will...

Passcode Entry Screen iOS

** Update **

This sample will show a lock screen for login.

This sample will show a lock screen for login and specify that it should disable the passcode.

This sample will enable setting a passcode.

These are the delegate methods which you will use to store and check the passcode.

Tumble Photo Available in the App Store Now!

Check if Current Device is iPad

Core Data QuickTip: Inverse Relationships

Check if NSString Contains a Sub String

Automate iOS Builds With ANT

What you need

Step 1: Install TextMate

Step 2: Install the ANT bundle for TextMate

Step 3: Verify that you have ANT installed

Step 4: Create a build file.

Step 5: Run the build file.

Conclusion

More Info

Wandering NPCs!

AAS Editor Demo

Cracklytics Quick access to Google Analytics stats! View and...

Cracklytics

Alli’s Jigsaw Puzzle This awesome game allows you to take...

Alli’s Jigsaw Puzzle

Finite State Machine Part 1

Intro

What is an FSM?

That’s great, but how does it work?

Creating the states

The walk state

Loading the states

The End?

Awesome Adventure System

iDevBlogADay

The Awesome Adventure System

Tiled The Editor

Progress

Scope

The Art

Conclusion

New Review Section

Update - Added Corona Project Minus Lime Source Code

Update