Building a Game

July 9, 2010 · Posted in code, iphone, projects · Comment 

A lot of my peers went to school to become game developers. Instead, most went on to work for big software companies in northern Virginia. I studied human-computer interaction and wanted to fix everything from poorly designed user interfaces to frustratingly complex household items. Instead, I became a Mac, iPhone, Flash and game developer. In a way, we both went where the money was.

How to start your game

I’ll assume you already have a game idea. No matter how ambitious you want to be though, think in milestones

  1. Display some graphics.
  2. Animate your graphics, either manually, or with basic input controls
  3. Get hit detection working.
  4. Everything else! (level loading, artificial intelligence, etc.)

If you can even make it to the fourth milestone, you’re farther than 90% of most game developers. If you make it past milestone four, you’re farther than 99% of game developers. Only the passionate, motivated and able ship. This is how I’ve started all of my games and it’s important to achieve tangible results to keep yourself motivated. In fact, this same step-by-step process can be used in regular application development as well.

Design

Start your development with a skeleton application. This does one of two things: first, it forces you to plan the architecture of your application by creating the objects (in files) that you’ll need in your development and second, it provides an outline for you to work from. So first, think about what display controllers and object controllers you’ll need, what model objects you’ll need and then go ahead and create the files for those. Also go ahead and fill in some functions too for the basic functionality. The point is, make sure you break up the functionality into bite size chunks. It’ll make your life easier, trust me.

Put in the functions you think you’ll want and then just put in print or trace statements to make sure they’re being called correctly. Then, just build it piece by piece, usually starting with getting something like a player character on the screen (DisplayController, PlayerController, GameController), then getting him to move, moving him via inputs (InputController), then applying constraints like hit detection or getting him to jump (implementing basic gravity), etc, etc. Just keep introducing and implementing new features, one at a time, playing the game, realizing you want to tweak something and playing it some more. This is called iterative design.

Get those milestones done as quickly as possible, keeping your code organized in your skeleton application. Don’t worry about graphics at first. Personally, I stick in multi-colored boxes instead spending a lot of time on graphics I may not use in the end. Objects will be added as you realize you need them, but the idea is to keep it organized, simple and cohesive.

When designing your class structures and diagrams, keep the low level functionality, like file access and keyboard inputs, abstracted and hidden in wrapper classes. The reason you abstract objects is for a couple of reasons: One is to be able to add in hooks before and after a part of code. For example, instead of calling the system clock directly, you want to calculate the elapsed time if your game was paused or suspended on the computer. If you abstracted this in the beginning with a GameClock object, you’d only have to change it once, in a single place. If you called it directly, you’d have to go back to every place in your code and calculate that value. Keep object responsibilities where they belong!

Start Programming!

To start you off, check out a game template designed for the Corona SDK (free 30 day trial), written in Lua. I recommend you create a template of all your project tyes as it’ll help jump start your next big idea and also keep you organized from the start.

How to Program for the iPhone – A Plan

January 16, 2010 · Posted in advice, code, work · 1 Comment 

This is not so much how to make applications for the iPhone, since there are so many on of those on the web already. This is more a syllabus on how to get started with the vast amount of information already out there and where to start from to quickly become proficient at iPhone development without getting frustrated or discouraged.

Development Requirements

An Intel-based Apple Mac
$99 (optional – if you want to actually publish your app)
That’s all!

Apple Developer Account

Development for the iPhone is initially free. So feel free to head over to http://developer.apple.com and sign up for a developer account if you don’t already have one. This will give you access to the Integrated Development Environment (IDE) called XCode, which is required to develop applications for the iPhone and iPod Touch. It also serves as a treasure chest of free information, sample code, tutorials, how-to videos and news, all of which I’ll talk about how to use later.

Once you’ve signed up for a developer account, you’ll need to download XCode and install it on your Mac. PC users are, as they always are, out of luck since a Mac is required for development. Once that’s done, put it aside as you won’t need it for a bit.

Learn to Program

An Important Design Pattern: Model View Controller

If you already know how to program a little bit, but haven’t gone through the rigors of a four year university Computer Science degree or something similar, start with learning an important design patterns, namely one called Model View Controller (MVC). Of course, a 4-year degree is not necessary, but you need to understand basic software engineering principles, design patterns and basic usability practices, which practically none of the programming tutorials, books and online articles teach. Also, a lot of practice helps as you’ll learn how to fix non-obvious compiler and runtime errors, how to structure your code, and pitfalls of each language you use.

Objective-C: The Language of Choice

After you understand the basic principle of MVC, you can then move on to learning the language of choice, Objective-C. Why Objective-C? Why didn’t Apple just choose a common language like C++ or Java? The reasons will become obvious as you learn about the language, it’s power, and how it fits into the MVC methodology better than any other language you’ve likely seen before. So here’s a nice tutorial on how to program in Objective-C.

If you already have a great understanding of programming and know a C-based langauge, skip the lengthy tutorial and take a look at this primer to get a sense of the additions to C that Objective-C brings to the table. For most people who are familiar with a C-based language, this will be all you need to get started.

Read more

Custom Mouse Cursor for ActionScript 3

May 30, 2009 · Posted in advice, code · 7 Comments 

I threw together an FLA for someone to show them the different ways to handle custom mouse cursors in ActionScript 3 (AS3). I figured I should start posting more of my code for people since I use other people’s blogs all the time to figure out my own problems.

I’m mostly coding up stuff for Flash, Flex, Augmented Reality, iPhone, PHP, and CSS/HTML right now so hopefully I’ll have the time to post more snippets of things I’ve figured out trying to get all this technology to work.

This movie requires Flash Player 9

Direct Access to the X and Y Mouse Coordinates

The first method allows us a finer control over the movement of the cursor by directly changing the X and Y coordinates of the cursor movieclip with the X and Y coordinates of the mouse. If we wanted to restrict the movement to say, a specific Y coordinate (as we’ll see in the next example), we can do that just as easily by keeping the target_mc.y a constant when we update it’s X coordinate.

// Set up our listeners for each of our mouse actions
boundary_mc.addEventListener( MouseEvent.MOUSE_OVER,
onMouseOver );
boundary_mc.addEventListener( MouseEvent.MOUSE_OUT,
onMouseOut );

// Ignores all sub movie clips and treats them as the parent
// -- otherwise events will be triggered on the child
// movieclips and not our main clip
target_mc.mouseChildren = false;
boundary_mc.mouseChildren = false;

// Ignore all the mouse events for the cursor
// -- otherwise MOUSE_OUT will trigger since mouse is
// now on target_mc instead of boundary_mc
target_mc.mouseEnabled = false;

///////////////////////////////////////////////////////////////
// ON MOUSE OVER /////////////////////////////////////////////
/////////////////////////////////////////////////////////////
// When the mouse rolls over onto our red boundary, hide
// mouse/show cursor
//
function onMouseOver( theEvent:MouseEvent ):void
{
// Swap the mouse for the cursor
Mouse.hide(); // hide mouse cursor
target_mc.visible = true;

// Add a listener to handle the moving of the mouse
// We add the listener here because otherwise the onMouseMove
// would execute whenever the mouse moved, whether it was
// on our boundary or not. Not a big deal, but better for
// efficiency
boundary_mc.addEventListener( MouseEvent.MOUSE_MOVE,
onMouseMotion );

// Handle the movement now so we don't have to wait for a
// mouse movement to reposition the cursor
onMouseMotion(null);
}

///////////////////////////////////////////////////////////////
// ON MOUSE MOTION ///////////////////////////////////////////
/////////////////////////////////////////////////////////////
// When the mouse moves, we also want to move our target to follow
// the mouse
//
function onMouseMotion( theEvent:MouseEvent ):void
{
// Reposition our custom cursor
target_mc.y = stage.mouseY;
target_mc.x = stage.mouseX;
}

///////////////////////////////////////////////////////////////
// ON MOUSE OUT //////////////////////////////////////////////
/////////////////////////////////////////////////////////////
// When mouse goes outside our red boundary, show default mouse,
// and hide our custom one
//
function onMouseOut( theEvent:MouseEvent ):void
{
// Swap the cursor for the mouse
Mouse.show();
target_mc.visible = false;

// Stop listening for mouse movement
boundary_mc.removeEventListener( MouseEvent.MOUSE_MOVE,
onMouseMotion );
}

The Drag and Drop Method

Our next method uses the drag function built into Flash. With this function you can drag a movieclip around the stage with the mouse automatically. This restricts some of our freedom, but gives us some very easy coding to control the mouse cursor to specific regions. In this case we simply restrict the motion of the cursor along a rectangle of 0 height (so it won’t move along the Y axis) and with a width as wide as our boundary box. This feature has its advantages, and I merely include it to demonstrate how to use it in the context of a custom mouse cursor.

// Set up our listeners for each of our mouse actions
boundary2_mc.addEventListener( MouseEvent.MOUSE_OVER,
onMouseOver2 );
boundary2_mc.addEventListener( MouseEvent.MOUSE_OUT,
onMouseOut2 );

// Ingores all sub movie clips and treats them as the parent
// -- otherwise events will be triggered on the child
// movieclips and not our main clip
target_mc.mouseChildren = false;
boundary2_mc.mouseChildren = false;

// Ignore all the mouse events for the cursor
// -- otherwise MOUSE_OUT will trigger since mouse is
// now on target_mc instead of boundary_mc
target_mc.mouseEnabled = false;

// Calculate the the vertical center of our boundary
// so that the cursor can move along that line
var verticalCenter_num = boundary2_mc.y + (boundary2_mc.height / 2);

///////////////////////////////////////////////////////////////
// ON MOUSE OVER 2 ///////////////////////////////////////////
/////////////////////////////////////////////////////////////
// Same as our previous one, but set for another boundary
//
function onMouseOver2( theEvent:MouseEvent ):void
{
// Swap the mouse for the cursor
Mouse.hide();
target_mc.visible = true;

// Add a listener to handle the moving of the mouse
// We add the listener here because otherwise the
// onMouseMove would execute whenever the
// mouse moved, whether it was on our boundary
// or not. Not a big deal, but better for efficiency
boundary2_mc.addEventListener( MouseEvent.MOUSE_MOVE,
onMouseMotion2 );

// Handle the movement now so we don't have to wait
// for a mouse movement to reposition the cursor
target_mc.y = verticalCenter_num;
target_mc.x = stage.mouseX;
}

///////////////////////////////////////////////////////////////
// ON MOUSE MOTION 2 /////////////////////////////////////////
/////////////////////////////////////////////////////////////
// Restricts the movement of our custom cursor along the X axis
//
function onMouseMotion2( theEvent:MouseEvent ):void
{
// Calculate the the vertical center of our boundary
// so that the cursor can move along that line
var verticalCenter_num = boundary2_mc.y +
(boundary2_mc.height / 2);

// We use startDrag() here since it's easier to restrict
// the cursor's boundaryusing a Rectangle object.
// boundary2_mc.x: Start from the x position of our
// boundary verticalCenter_num: Start from the
// vertical center as our y coordinate
// boundary2_mc.width: Allow the cursor to move
// the length of the boundary's width (starting from x)
// 0: Don't allow the cursor to move up or down
target_mc.startDrag( true, new Rectangle(
boundary2_mc.x,
verticalCenter_num,
boundary2_mc.width,
0)
);
}

///////////////////////////////////////////////////////////////
// ON MOUSE OUT 2 ////////////////////////////////////////////
/////////////////////////////////////////////////////////////
// When mouse goes outside our gray boundary, show default mouse,
// hide custom mouse and stop drag
//
function onMouseOut2( theEvent:MouseEvent ):void
{
// Swap the cursor for the mouse
Mouse.show();
target_mc.visible = false;

// Stop our drag
target_mc.stopDrag();

// Stop listening for mouse movement
boundary2_mc.removeEventListener( MouseEvent.MOUSE_MOVE,
onMouseMotion2 );
}

I hope the code is commented well enough for you to understand what’s going on. It should be fairly self explanatory, but if not, feel free to ask.

Sample Code

Below is the source code for the SWF used at the top of the post:

Download the Custom Cursors sample code.

Did you find this useful?

If you found this page useful, please consider helping us out by checking out the links on the right. Thanks!