The terms interactive and user experience design can be used to describe applications, websites, user interfaces or games. But each of them can be very different beasts to design, requiring varying levels of balance in user experience to be successful.

When designing a tool like a word processor, the key is to enhance usability. While the user experience is important, the success of the product rides on whether the tool does the task it is meant to efficiently.

In game design we are able to shed the usability requirement and exchange it for ‘playability’. But the importance of a games playability is overshadowed if the user does not have a great experience.

That is the allure of game design over any other type interactive design. The success of your game is completely dependent on the user having a satisfying experience. The user (your customer/client) is
spending their hard earned dollars trusting that your game can allow them to have such an experience. If your game does not deliver on this front, you won’t be delivering a successful product. And remember, your game is not the experience, it only allows the player to have the experience.

So how do we ensure a positive experience for our players? That is a much longer post, and the essence of game design. A good place to start is many iterations and much testing.

I find many similarities between game design and cooking. I get the same excitement from watching someone play with a game or mechanic I made that I do when I cook them a meal. I love to see that look of enjoyment on people’s faces when biting into a delicious meal. And if it’s not perfect, I can’t wait to pick apart the reasons why and how the recipe can be improved.

What is it about game design that keeps you coming back for more?

Budd Caddell’s “How to be Happy in Business” venn diagram is accurate, insightful and motivational. That’s why I’ve created a quick desktop wallpaper to remind me to strive for “HOORAY!”.

Thanks Budd!

Download 1920×1200

Doanload 1280×800

The following steps will help you setup a virtual domain on apache 2.2 on Windows. Steps are very similar for OS X, only the location of the files will change.

In these steps I’ve used cowabunga.localhost as a test. The .localhost TLD is reserved for testing, so you can be guaranteed it won’t interfere with any real websites. This is the best practice to follow, if you create a virtual host of cowabunga.com, you will not be able to reach the real version of that site.

1. Edit httpd.conf
2. Uncomment the line Include conf/extra/httpd-vhosts.conf. Right after # Virtual hosts
3. Add the following above # Virtual hosts (replace C:\www with the path to your web root). Close and save it when done.

<Directory "C:/www">
 Order Deny,Allow
 Allow from all
</Directory> 

1. We’ll setup the follow virtual host site.
   1. cowabunga (C:\www\cowabunga). We’ll access this in the browser as cowabunga.localhost.
2. Edit httpd-vhosts.conf (located in apache root/conf/etc/)
3. Add the following to the bottom of httpd-vhosts.conf. Close and save it when done.

<VirtualHost *:80>
DocumentRoot "C:/www/cowabunga"
ServerName cowagunga.localhost
</VirtualHost>

<VirtualHost *:80>
DocumentRoot "C:/www/"
ServerName localhost
</VirtualHost>

1. That’s it for apache configuration. It’s now ready to host the virtual domain. We just need to tell Windows to go to our virtual host, rather than looking up the DNS.
2. Edit your “hosts” file. Available in one of the following places
   1. Windows 95, 98, ME: Windows directory
   2. NT, 2000, XP, 2003, Vista, 7: Windows folder\system32\drivers\etc\
   3. Mac OS X, iOS: /private/etc/hosts or /etc/hosts
3. Add the following line to the end of hosts. Close and save it when done.

127.0.0.1    burgess.localhost
127.0.0.1    localhost

1. Restart apache from the GUI or the command prompt using:

apache -w -n "Apache" -k restart

Usually, I’m a big fan of UI libraries like jQuery and YUI. Don’t really like to re-invent the wheel. This is a function that’s quite easy to do in either of those libraries.

Unfortunately, I’m working on a project right now with very strict guidelines on it’s code, so it turns out I am unable to use any JavaScript UI Libraries. So, I set forth on putting this together.

There were a few resources I used that came in handy to create this, and I’ve given credit to those folk at the end of this post.

Part one: setInternalLinks

Run this function on page load. I use Simon Willison’s addLoadEvent to do this. It will search for all internal links on your page, and add a click listener to the animation function scrollToYOffset.

/**
* setInternalLinks
* Searches the page for any internal links and converts them to animated automatic scrolls
*/
function setInternalLinks()
{
	// grab all anchor links on the page
	var anchors = document.getElementsByTagName('a');
 
	for (var i = 0; i < anchors.length; i++) {
		var a = anchors[i];
 
		if (a.href && a.href.indexOf("#") != -1  // href has #
		   && ((a.pathname == location.pathname) || ('/' + a.pathname == location.pathname)) // path name of url is same as current
		   && (a.search == location.search)) { // query string of url is same as current
			var aName = a.href.substr(1, a.href.length - 1);
			a.onclick = function (e) {
				// checks if the caller event e exists and grabs the target (mozilla + webkit). Grabs the IE equivalent if not.
				var target = e ? e.target : event.srcElement;
				// the anchor name
				var anchorName = target.hash;
				// cut out the hash mark
				anchorName = anchorName.substr(1, anchorName.length - 1);
				// grab all the anchors on the page again
				anchors = document.getElementsByTagName('a');
 
				for (var j = 0; j < anchors.length; j++) {
					if (anchors[j].name == anchorName) {
						// found the right anchor. scroll to it!
						scrollToYOffset(anchors[j].offsetTop);
					}
				}
			};
		}
	}
}

Part two: scrollToYOffset

The method below is called by an onclick handler added by the setInternalLinks method. It’s a time-based animation with sinusoidal easing. Smooth and quick.

/**
* scrollToOffset
*
* @param yOffset	The vertical offset to scroll to
*/
function scrollToYOffset(iTargetY)
{
	// if the target is negative set it to 0
	iTargetY = iTargetY < 0 ? 0 : iTargetY;
 
	var frameInterval = 20; // 20 milliseconds per frame
 
	var totalTime = 750;
	// current scroll position: checks if window.pageYOffset exists (webkit + mozilla). If not, set's it to the IE equivalent
	var startY = window.pageYOffset ? window.pageYOffset : window.document.body.scrollTop;
 
	var d = iTargetY - startY; // total distance to scroll
	var freq = Math.PI / (2 * totalTime); // frequency
	var startTime = new Date().getTime();
 
	var tmr = setInterval(
		function () {
			// check the time that has passed from the last frame
			var elapsedTime = new Date().getTime() - startTime;
 
			if (elapsedTime < totalTime) { // are we there yet?
				var f = Math.abs(Math.sin(elapsedTime * freq));
				window.scrollTo(0, Math.round(f*d) + startY);
			} else {
				clearInterval(tmr);
				window.scrollTo(0, iTargetY);
			}
		}
	, frameInterval);
}

Above code has been tested in Firefox 3.6.6, Safari 5 and IE 7.

Credit for some help: Sitepoint: Make Internal Links Scroll Smothly with JavaScript and Cross-Browser.com: Animation Techniques

On my way to the ip3 Forum today. First event of it’s kind in Toronto.

http://www.interactiveontario.com/ip3

Looking for a quick way to convert your audio files for use on iPhone or iPad development? This is right from the Apple developer docs, but I am always looking it up, so here it is:

/usr/bin/afconvert -f caff -d LEI16 inputFilename outputFilename

We all need a quick and easy way to move a body based on accelerometer movement. This method allows quick execution and testing. In this post I’ll be detailing how to move a cpBody on screen using the accelerometer.

I’m assuming you’ll make all the connections between your sprite and the cpBody and understand how to set up a cocos2D and Chipmunk project. If you need help with this check out Alexandre Gomes’ excellent tutorial “An introduction to game physics with Chipmunk“. Much of the code below is not directly related to the acceleration, while I am not including all the methods required for the class, I like to provide complete methods, so you can see how things will interact.

In this case we’ll just move a body based on the x (left and right) movement.

1) enable accelerometer in the init method and initialize the acceleration at 0.

-(id) init
{
    if( (self=[super init]) ) {
        self.isAccelerometerEnabled = YES;
        accellX = 0; // float defined in header
 
        // setup chipmunk
        [self setupChipmunk];
 
        // setup your cpShapes, cpBodies and CCSprites here
        // I'll be using spriteBody to these
    }
}

2) Setup Chipmunk

- (void) setupChipmunk
{
    // start chipmunk
    cpInitChipmunk();
 
    // create space object
    space = cpSpaceNew();
 
    // define gravity vector - zero gravity here - change the vector to apply gravity
    space->gravity = cpv(0, -0);
 
    // Add some elastic effects to the simulation
    space->elasticIterations = 20;
 
    // Create an update schedule
    [self schedule:@selector(step:)];
}

3) Update the current acceleration when an update is received

- (void) accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration
{
    // set current acceleration to 10x the current acceleration of the device.
    // change 10 to any number that works for your implementation speed.
    accellX = acceleration.x * 10;
}

4) The step function we referred to in #2. This move the cpBody based on the current acceleration as defined in #3. Remember, right now this is x only, I’ll let you make the connections to get y working.

-(void) step: (ccTime) dt
{
    cpSpaceStep(space, dt);
 
    // get new x position based on acceleration
    // spriteBody is a cpBody defined in the header file and setup with a shape and sprite in the init
    float newX = spriteBody->p.x + accellX;
 
    // move the sprite body to the new x position
    spriteBody->p = cpv(newX, spriteBody->p.y);
 
    // call our function for each shape
    cpSpaceHashEach(space->activeShapes, &updateShape, nil);
}

5) Just for completion’s sake, I’ll include the method to update the shapes called in the last line of the previous code. None of this effects the acceleration at all… simply moves the sprite to the position of the shape.

void updateShape(void *ptr, void* unused)
{
    cpShape *shape = (cpShape *)ptr; // the shape
    CCSprite *sprite = shape->data; // the sprite
 
    // set the sprite position to the shapes body position
    [sprite setPosition: shape->body->p];
}

And that’s it, your body should be moving based on the accelerometer input.

Just upgraded to iOS SDK 4 GM release along with Xcode 3.2, so I can test some of my projects on my device.

When I opened up the first old project (built for OS 3.2 on XCode 3.1), I received a “Base SDK Missing” error in the Device | Debug drop down menu.

Clicking the info icon in the tool bar of the open project allows you to select the “Base SDK for All Configurations” drop down. Select your new SDK and voila! You can also change the “Project Format” here as well, might be a good idea to select your current Xcode version.

Pretty simple problem and solution, but it seems like developers (like me) are experiencing this every day.

Update 1: Tom has pointed out in the comments, that you can retain compatibility with 3.0 devices if you set the base SDK as 4.0, but set the deployment target as 3.0. Thanks Tom!

Let’s try this again… with a new attitude!

I’ve dumped all my old, sporadically posted blog entries… going to give this journal/blog thing another try. Although, I may recover some of the old technical posts to keep a hold of them

This mostly stems from the realization that during my work I solve many problems… then when the problem arises again, I forgot how I solved it previously.

I’m hoping that by keeping notes on these solutions and ideas I’ll be able to keep track of them for future use, and maybe be of some help to someone else out there in the world.

Most of the posts will be centered around my current focus, as broad as it may be:

• iOS (iPhone, iPad, iPod) game development
• Flash and AS3 development for web and touch screen
• HTML + CSS + PHP + MySQL

Some of the topics I cover will include some basic topics and some more advanced. I’m much more proficient in AS3 than MySQL, so I you’ll get a different level of complexity.