Our goal is to build an application that contains a simple scatter graph with data stored in an NSArray (which could easily have been loaded from a CSV file). We aim to add this in a generic fashion, in a sub-view of a NIB file – so that you could drop this work into an app you’re working on without much work. We target the iPad, but the same method will work for the iPhone without any changes and will also work on OSX if you make a couple of minor changes.

This tutorial assumes that basic iOS programming knowledge and experience. Before we start, it’s worth noting that CorePlot is a very flexible library – it just takes a bit of getting used to. Unfortunately, the base documentation doesn’t help much when you’re getting started – so I’ll try to expose as much as I currently know about the library.

1. Starting a new Project

We’re going to develop a simple single-view iPad application – but you can add your CorePlot to any existing view in an application using the same method presented here. I use a class prefix of TUT to represent any classes I build during this tutorial.

Step 1. Project Settings

2. Acquiring and Installing CorePlot

When your project is ready and waiting, the first thing we will do is install the CorePlot library, which will expose the classes necessary for you to get started in adding your scatterplot to your application. Head over to the CorePlot website and download the latest zip file. This tutorial is based on CorePlot 0.9, so if the code has changed significantly in the future – you might want to download version 0.9 to work through this tutorial and then figure out how the code has changed later.

When your download is complete, unzip the files in your Downloads directory. We’re going to install the static library, where the code has already been compiled as libCorePlot-CocoaTouch.a, but you could install the source-code version instead if you prefer – which would then recompile CorePlot when you build your app. Both methods are essentially the same, as you’ll still need to include the header files so that your code can access the methods. I keep my external libraries separate from my own source code, so we’re going to add a new folder at the root of our project called ‘Libs’ and then create a sub-directory inside that called ‘CorePlot’. Now, from the zip file that you downloaded – you want to copy libCorePlot-CocoaTouch.a and the folder CorePlotHeaders from the folder CorePlot_0.9/Binaries/iOS/. Your directory structure should look like this;

Step 2. Copying the Library Files

Now that your files are in place, you just need to add them to your Xcode project. Drag and drop the whole Libs folder onto your Xcode file tree. Or, you can use the File -> Add Files to “Core Plot Introduction” option from the files menu and select the Libs folder. There should now be  a Libs folder in your project sidebar containing the CorePlotHeaders and the libCorePlot file. Now, there are a couple of settings we need to tweak to get CorePlot working before we can start to implement our scatter plot. Select your project from the navigator panel in Xcode and then highlight the Build Settings tab. Filter the settings or locate ‘Other Linker Flags’ from this list and then add -ObjC -all_load to these settings, as shown in the next figure;

Step 2. Setting Other Linker Flags

There’s just one more step before we can start working with CorePlot in our application. As CorePlot makes use of Apple’s Core Animation code, which is a part of the QuartzCore framework – we need to ensure that our project is linking against the QuartzCore code. With the project still selected in Xcode, highlight the Build Phases tab. Expand the Link Binary with Libraries panel and click on the plus button at the bottom. Now select QuartzCore.framework from the list and hit ok. I usually copy the reference in my project into the Framework folder to be tidy – but this isn’t a necessity.

Step 2. Linking with QuartzCore

3. Adding a Graph Hosting View to our Interface

In order to add a CorePlot chart space to our application, we start by setting up a ‘Hosting View’ which we will later attach our graph(s) too. We’re just creating a placeholder in our NIB at the moment, into which we will tell CorePlot to start drawing using our code later on.

We start by adding a label to the top of the interface with some dummy text and change the background colour of the main XIB view to Scroll View Textured Background Color to make it looks swish. Next, drag and drop a UIView component from the object library onto your project. You would normally make this as big as possible, as we would adding padding within CorePlot (to leave spill over space for axis labels). However, for this tutorial – I’ve left a border to make it easier to see what’s going on in the figures. Next, select the view you’ve just added and change it’s class in the property panel to the right. It’s class should be; CPTGraphHostingView. You should now have something that looks like the next figure (notice the object hierarchy on the left and the UIView’s class at the top right).

Step 3. Adding a Hosting View

4. Creating our Scatter Plot object

CorePlot acquires data for its plots much like UITableView does – by calling specific methods on the class you have set as the Graph’s delegate. Incidentally, it also delegates many of it’s features this way too, for instance if you want the user to be able to interact with the chart. So, much like a table view, you could set the main ViewController as your delegate and not add an extra class to your code. However, in order to keep your charts re-usable and interchangeable, I think it’s best to create a new class that will do all the work for your chart.

So, we add a new class to our project TUTSimpleScatterPlot, which is simply a subclass of NSObject. In TUTSimpleScatterPlot.h we need to import the CorePlot libraries; #import “CorePlot-CocoaTouch.h” and then we define a few properties for the objects we need to keep a reference too. The header file for our chart object looks like this…

TUTSimpleScatterPlot.h

#import
#import "CorePlot-CocoaTouch.h"

@interface TUTSimpleScatterPlot : NSObject  {
	CPTGraphHostingView *_hostingView;
	CPTXYGraph *_graph;
	NSMutableArray *_graphData;
}

@property (nonatomic, retain) CPTGraphHostingView *hostingView;
@property (nonatomic, retain) CPTXYGraph *graph;
@property (nonatomic, retain) NSMutableArray *graphData;

// Method to create this object and attach it to it's hosting view.
-(id)initWithHostingView:(CPTGraphHostingView *)hostingView andData:(NSMutableArray *)data;

// Specific code that creates the scatter plot.
-(void)initialisePlot;

@end

We need to keep hold of 3 objects to make our chart work. We will pass the hosting view from our XIB file and an array of data when we call initWithHostingView:andData: while creating an instance of our chart. We create the CPTXYGraph and setup our chart when initialisePlot is called – which we will usually call shortly after we initialise our object. Notice we have stated that our object responds to the CPTScatterPlotDataSource delegate methods in the class definition.

Next, we’re going to write the init and initialisePlot methods, as well as the methods from the CPTScatterPlotDataSource protocol required to get our chart working. In time honoured tradition, I’ll throw the code at you first, and then explain it. While it looks like a lot of code, most of it involves configuring certain graph elements – it’s simpler than it first appears.

TUTSimpleScatterPlot.m

#import "TUTSimpleScatterPlot.h"

@implementation TUTSimpleScatterPlot
@synthesize hostingView = _hostingView;
@synthesize graph = _graph;
@synthesize graphData = _graphData;

// Initialise the scatter plot in the provided hosting view with the provided data.
// The data array should contain NSValue objects each representing a CGPoint.
-(id)initWithHostingView:(CPTGraphHostingView *)hostingView andData:(NSMutableArray *)data
{
	self = [super init];

	if ( self != nil ) {
		self.hostingView = hostingView;
		self.graphData = data;
		self.graph = nil;
	}

	return self;
}

// This does the actual work of creating the plot if we don't already have a graph object.
-(void)initialisePlot
{
	// Start with some simple sanity checks before we kick off
	if ( (self.hostingView == nil) || (self.graphData == nil) ) {
		NSLog(@"TUTSimpleScatterPlot: Cannot initialise plot without hosting view or data.");
		return;
	}

	if ( self.graph != nil ) {
		NSLog(@"TUTSimpleScatterPlot: Graph object already exists.");
		return;
	}

	// Create a graph object which we will use to host just one scatter plot.
	CGRect frame = [self.hostingView bounds];
	self.graph = [[[CPTXYGraph alloc] initWithFrame:frame] autorelease];

	// Add some padding to the graph, with more at the bottom for axis labels.
	self.graph.plotAreaFrame.paddingTop = 20.0f;
	self.graph.plotAreaFrame.paddingRight = 20.0f;
	self.graph.plotAreaFrame.paddingBottom = 50.0f;
	self.graph.plotAreaFrame.paddingLeft = 20.0f;

	// Tie the graph we've created with the hosting view.
	self.hostingView.hostedGraph = self.graph;

	// If you want to use one of the default themes - apply that here.
	//[self.graph applyTheme:[CPTTheme themeNamed:kCPTDarkGradientTheme]];

	// Create a line style that we will apply to the axis and data line.
	CPTMutableLineStyle *lineStyle = [CPTMutableLineStyle lineStyle];
	lineStyle.lineColor = [CPTColor whiteColor];
	lineStyle.lineWidth = 2.0f;

	// Create a text style that we will use for the axis labels.
	CPTMutableTextStyle *textStyle = [CPTMutableTextStyle textStyle];
	textStyle.fontName = @"Helvetica";
	textStyle.fontSize = 14;
	textStyle.color = [CPTColor whiteColor];

	// Create the plot symbol we're going to use.
	CPTPlotSymbol *plotSymbol = [CPTPlotSymbol crossPlotSymbol];
	plotSymbol.lineStyle = lineStyle;
	plotSymbol.size = CGSizeMake(8.0, 8.0);

	// Setup some floats that represent the min/max values on our axis.
	float xAxisMin = -10;
	float xAxisMax = 10;
	float yAxisMin = 0;
	float yAxisMax = 100;

	// We modify the graph's plot space to setup the axis' min / max values.
	CPTXYPlotSpace *plotSpace = (CPTXYPlotSpace *)self.graph.defaultPlotSpace;
	plotSpace.xRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(xAxisMin) length:CPTDecimalFromFloat(xAxisMax - xAxisMin)];
	plotSpace.yRange = [CPTPlotRange plotRangeWithLocation:CPTDecimalFromFloat(yAxisMin) length:CPTDecimalFromFloat(yAxisMax - yAxisMin)];

	// Modify the graph's axis with a label, line style, etc.
	CPTXYAxisSet *axisSet = (CPTXYAxisSet *)self.graph.axisSet;

	axisSet.xAxis.title = @"Data X";
	axisSet.xAxis.titleTextStyle = textStyle;
	axisSet.xAxis.titleOffset = 30.0f;
	axisSet.xAxis.axisLineStyle = lineStyle;
	axisSet.xAxis.majorTickLineStyle = lineStyle;
	axisSet.xAxis.minorTickLineStyle = lineStyle;
	axisSet.xAxis.labelTextStyle = textStyle;
	axisSet.xAxis.labelOffset = 3.0f;
	axisSet.xAxis.majorIntervalLength = CPTDecimalFromFloat(2.0f);
	axisSet.xAxis.minorTicksPerInterval = 1;
	axisSet.xAxis.minorTickLength = 5.0f;
	axisSet.xAxis.majorTickLength = 7.0f;

	axisSet.yAxis.title = @"Data Y";
	axisSet.yAxis.titleTextStyle = textStyle;
	axisSet.yAxis.titleOffset = 40.0f;
	axisSet.yAxis.axisLineStyle = lineStyle;
	axisSet.yAxis.majorTickLineStyle = lineStyle;
	axisSet.yAxis.minorTickLineStyle = lineStyle;
	axisSet.yAxis.labelTextStyle = textStyle;
	axisSet.yAxis.labelOffset = 3.0f;
	axisSet.yAxis.majorIntervalLength = CPTDecimalFromFloat(10.0f);
	axisSet.yAxis.minorTicksPerInterval = 1;
	axisSet.yAxis.minorTickLength = 5.0f;
	axisSet.yAxis.majorTickLength = 7.0f;

	// Add a plot to our graph and axis. We give it an identifier so that we
	// could add multiple plots (data lines) to the same graph if necessary.
	CPTScatterPlot *plot = [[[CPTScatterPlot alloc] init] autorelease];
	plot.dataSource = self;
	plot.identifier = @"mainplot";
	plot.dataLineStyle = lineStyle;
	plot.plotSymbol = plotSymbol;
	[self.graph addPlot:plot];
}

// Delegate method that returns the number of points on the plot
-(NSUInteger)numberOfRecordsForPlot:(CPTPlot *)plot
{
	if ( [plot.identifier isEqual:@"mainplot"] )
	{
		return [self.graphData count];
	}

	return 0;
}

// Delegate method that returns a single X or Y value for a given plot.
-(NSNumber *)numberForPlot:(CPTPlot *)plot field:(NSUInteger)fieldEnum recordIndex:(NSUInteger)index
{
	if ( [plot.identifier isEqual:@"mainplot"] )
	{
		NSValue *value = [self.graphData objectAtIndex:index];
		CGPoint point = [value CGPointValue];

		// FieldEnum determines if we return an X or Y value.
		if ( fieldEnum == CPTScatterPlotFieldX )
		{
			return [NSNumber numberWithFloat:point.x];
		}
		else	// Y-Axis
		{
			return [NSNumber numberWithFloat:point.y];
		}
	}

	return [NSNumber numberWithFloat:0];
}

@end

First of all, lets look at each of the methods above and describe what they do, and then we’ll look at some of the Core Plot objects that we make use of in the initialisePlot method.

So, initWithHostingView:andData simple initialises this object and retains a reference to the hosting view and data array which is fed to this method. initialisePlot is designed to be called shortly after the init method, but has been separated so that you can choose when the brunt of the work is done in creating the graph. This method provides the bulk of this class, which mostly consists of setting up the graph object with the required axis settings, line styles and label styles etc.

numberOfReportsForPlot: is a delegate method which simply returns the number of unique data points that exist for a given plot. If you are using this object as a delegate for multiple plots, you can determine which plot you should return data for by interrogating the identifier property – which you set earlier in the initialisePlot method. Finally, numberForPlot:field:recordIndex: will be called twice per data point in each plot. fieldEnum tells you whether the graph object is expecting the X or Y value for a given data point at index. Like with numberOfReportsForPlot, you can differentiate between multiple plots by first checking the identifier of the plot.

The intialisePlot method is fairly self-explanatory when reading it with the comments. However, it took me a while to get my head around the different objects made available by CorePlot. The CPTXYGraph represents an area into which a 2-dimensional graph will be drawn inside of a HostingView which exists in the parent UIView. The graph comes with it’s own plotAreaFrame (the area inside the graph that the actual data will be rendered), a plotSpace (the minimum and maximum values of X and Y that will be drawn on your chart) and an axisSet (essentially style and rendering options for the axis on this graph). You generally pull out a reference from the graph object for each of these and then manipulate them to design your chart.

The most prominent style and design objects you will use are; CPTMutableLineStyle - which represents a set of options for how a given line should be drawn (width / colour), CPTMutableTextStyle - a set of objects describing how a text label should be drawn (font, size, colour) and CPTPlotSymbol - representing an ellipse or cross for instance that will appear at the actual data points on your chart lines. When all of your chart framework is setup, you can then add one or more CPTScatterPlot objects to your graph – each one representing a unique data set or line on your chart. We only add one in this example and set the delegate to self (as we’ve set the delegate methods which return the data), a line style and a plot symbol. We also set an identifier incase we add more plots in the future so that the delegates can tell which plot the graph is expecting data for when calling a delegate method.

5. Hooking it all together

Last but not least, we need to bring all of these elements together and look at our creation. So, we need to create an IBOutlet for our Graph Hosting View in TUTViewController. Your TUTViewController.h should look like the following;

TUTViewController.h

#import
#import "CorePlot-CocoaTouch.h"
#import "TUTSimpleScatterPlot.h"

@interface TUTViewController : UIViewController {
	IBOutlet CPTGraphHostingView *_graphHostingView;
	TUTSimpleScatterPlot *_scatterPlot;
}

@property (nonatomic, retain) TUTSimpleScatterPlot *scatterPlot;

@end

Now, don’t forget to hook your CPTGraphHostingView from the TUTViewController back to the view that you added to the NIB right back at the start of this tutorial. Load up TUTViewController.xib and Ctrl-Click-Drag from ‘Files Owner’ to the Hosting View and then select graphHostingView as the outlet. We’ll create some sample data and then create the scatterPlot object in the viewWillAppear method of the View Controller;

TUTViewController.m

- (void)viewWillAppear:(BOOL)animated
{
	[super viewWillAppear:animated];

	NSMutableArray *data = [NSMutableArray array];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(-10, 100)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(-8, 50)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(-6, 20)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(-4, 10)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(-2, 5)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(0, 0)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(2, 4)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(4, 16)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(6, 36)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(8, 64)]];
	[data addObject:[NSValue valueWithCGPoint:CGPointMake(10, 100)]];

	self.scatterPlot = [[TUTSimpleScatterPlot alloc] initWithHostingView:_graphHostingView andData:data];
	[self.scatterPlot initialisePlot];
}

Note that we’re storing our data as a simple array of CGPoints. However, as CGPoints aren’t descended from NSObject, we can’t store them in an NSArray directly, so we wrap them up in an NSValue object within the array.

Anyway, phew, it feels like a lot of work – but we’re finally there. The golden spot of any tutorial – the screenshot of the final product!

The End Result

If you’re having any problems getting this to work in your own app, then please don’t hesitate to get in touch by leaving a comment below – I’ll do my best to reply in a timely manner. If you want to download the code from the sample project, you can do so using the link below.

Download the Core Plot Introduction Xcode Project

Please note, that this is not an introduction to using Box2D with Cocos2D. This is intended as a drop-in class that you can use to simplify the process of displaying debug information from Box2D. For more information about using Box2D – see Ray Wenderlich’s great post on the subject.

Note: This class has now been included in Kobold2D (since v1.0.1). Kobold2D is a beginner friendly version of Cocos2D which includes a number of additional, commonly used libraries already integrated with it. If you just want to use this class out of the box without any setup and/or if you’re just starting out with Cocos2D, it’s definitely worth checking out Kobold2D.

In order to implement this class, you will need to be ensure that the relevant Box2D files are included in your project, as well as the default GLES-Render.h that comes packaged with the Cocos2D Box2D project template. GLES-Render.h provides all of the low-level calls required by Box2D to draw the objects within a Box2D world to the screen.

So, to create our CCLayer which draws the Box2D debug information, we create the class BoxDebugLayer, which inherits from CCLayer. This layer needs to maintain an instance of the GLESDebugDraw class (from GLES-Render – used to do the actual rendering). We also keep hold of a pointer to the world and the PTM ratio for good measure.

BoxDebugLayer.h (Download)

#import "cocos2d.h"
#import "Box2D.h"
#import "GLES-Render.h"

@interface BoxDebugLayer : CCLayer {
	GLESDebugDraw* _debugDraw;	// The DebugDraw instance from GLES-Render
	b2World *_boxWorld;		// The Box2D world this is attached to
	int _ptmRatio;			// The PTM Ratio used in this world
}

/** Return an autoreleased debug layer */
+(BoxDebugLayer *)debugLayerWithWorld:(b2World *)world ptmRatio:(int)ptmRatio;
+(BoxDebugLayer *)debugLayerWithWorld:(b2World *)world ptmRatio:(int)ptmRatio flags:(uint32)flags;

/** Initialise a debug layer with the given parameters. */
-(id)initWithWorld:(b2World *)world ptmRatio:(int)ptmRatio;
-(id)initWithWorld:(b2World *)world ptmRatio:(int)ptmRatio flags:(uint32)flags;

@end

BoxDebugLayer.mm (Download)

#import "BoxDebugLayer.h"

@implementation BoxDebugLayer

/** Create a debug layer with the given world and ptm ratio */
+(BoxDebugLayer *)debugLayerWithWorld:(b2World *)world ptmRatio:(int)ptmRatio
{
    return [[[BoxDebugLayer alloc] initWithWorld:world ptmRatio:ptmRatio] autorelease];
}

/** Create a debug layer with the given world, ptm ratio and debug display flags */
+(BoxDebugLayer *)debugLayerWithWorld:(b2World *)world ptmRatio:(int)ptmRatio flags:(uint32)flags
{
    return [[[BoxDebugLayer alloc] initWithWorld:world ptmRatio:ptmRatio flags:flags] autorelease];
}

/** Create a debug layer with the given world and ptm ratio */
-(id)initWithWorld:(b2World*)world ptmRatio:(int)ptmRatio
{
    return [self initWithWorld:world ptmRatio:ptmRatio flags:b2DebugDraw::e_shapeBit];
}

/** Create a debug layer with the given world, ptm ratio and debug display flags */
-(id)initWithWorld:(b2World*)world ptmRatio:(int)ptmRatio flags:(uint32)flags
{
	if ((self = [self init])) {
		_boxWorld = world;
        _ptmRatio = ptmRatio;
		_debugDraw = new GLESDebugDraw( ptmRatio );

		_boxWorld->SetDebugDraw(_debugDraw);
		_debugDraw->SetFlags(flags);
	}

	return self;
}

/** Clean up by deleting the debug draw layer. */
-(void)dealloc
{
	_boxWorld = NULL;

	if ( _debugDraw != NULL ) {
		delete _debugDraw;
	}

	[super dealloc];
}

/** Tweak a few OpenGL options and then draw the Debug Layer */
-(void)draw
{
	glDisable(GL_TEXTURE_2D);
	glDisableClientState(GL_COLOR_ARRAY);
	glDisableClientState(GL_TEXTURE_COORD_ARRAY);

	glPushMatrix();
	glScalef( CC_CONTENT_SCALE_FACTOR(), CC_CONTENT_SCALE_FACTOR(), 1.0f);
	_boxWorld->DrawDebugData();
	glPopMatrix();

	glEnable(GL_TEXTURE_2D);
	glEnableClientState(GL_COLOR_ARRAY);
	glEnableClientState(GL_TEXTURE_COORD_ARRAY);
}

@end

Using this class

Using this class in your code is as simple as just adding this layer as a child to your game layer. You need to inform the BoxDebugLayer class of which box2DWorld you would like it to attach to, and what your PTM ratio is for this world. Optionally, you can also provide the flags for which debug information you would like in the init method.

Adding this layer to your project is as simple as…

[self addChild:[BoxDebugLayer debugLayerWithWorld:_boxWorld ptmRatio:GAME_PTM_RATIO] z:10000];

If you would like to enable specific flags, use the alternative constructor…

uint32 flags = b2DebugDraw::e_aabbBit | b2DebugDraw::e_centerOfMassBit | b2DebugDraw::e_jointBit | b2DebugDraw::e_pairBit | b2DebugDraw::e_shapeBit;
[self addChild:[BoxDebugLayer debugLayerWithWorld:_boxWorld ptmRatio:GAME_PTM_RATIO flags:flags] z:10000];

Limitations

There are some limitations of this code as it stands. As each DebugLayer has to register itself with the box2D world, adding two debug layers to the same world will not work as expected. The second world will likely override the first debug layer, making the first defunct.

I also haven’t added any code to allow customisation of how the debug layer is drawn. In my own code, I simply change the GLES-Render.m file if I ever need to tweak how the debug information is drawn. This usually only includes changing a line width, so that the debug-lines are clearly visible over my artwork. However, if you have the time and inclination – I suspect you could add these options to this class, making it easier to customise debug information within the Box2D Debug Layer.

Explanation

If you are interested in how this layer works, then I’ll talk through the main methods below.

initWithWorld:ptmRatio:flags: is the main initialisation method that will ultimately be called to create this object (calling the shorter init method calls this one with default options).

This method maintains a local copy of the box2D world we’re working with and the PTM ratio. We then create an instance of the GLESDebugDraw class provided to us in GLES-Render.h (packaged with Cocos2D). GLESDebugDraw implements a number of methods that Box2D expects to use when drawing debug information to the screen. This class handles the code that does the actual drawing of the debug information even though the Box2D library will be driving that code to draw the information.

There are a number of flags you can provide to inform GLESDebugDraw what you would like to see drawn. The following options exist;

• b2DebugDraw::e_aabbBit – Draw the axis aligned bounding boxes.
• b2DebugDraw::e_centerOfMassBit – Draw the centre of Mass for bodies.
• b2DebugDraw::e_jointBit – Draw any joints between fixtures.
• b2DebugDraw::e_pairBit – Draw broad-phase pairs.
• b2DebugDraw::e_shapeBit – Draw outline shapes for fixtures / bodies.

Naturally, in our dealloc method we clean up after ourselves. As the Box2D and GLESDebugDraw classes aren’t NSObjects / objective-C, we don’t use the normal retain / release mechanics. Instead we delete them the old fashioned C++ way.

The draw method prepares OpenGL for the debug draw operation. Whereas with Cocos2D we’ve been drawing textured sprites, the debug information wants to make use of the primitive drawing methods. As such, before we call GLESDebugDraw we have to disable all of the textured drawing features of OpenGL so that it only expects to receive primitive information.

We then scale the world to account for the retina display (if required) before asking Box2D to draw the information. This is based on the assumption that you will be using one world size for your iPhone app regardless of whether it’s retina or not – so we need to scale the points to pixels in OpenGL. Last but not least, we return OpenGL the state it was in before we did our work.

That’s it. If you find this useful, add anything to your own implementation or think this class needs any additional features – please leave a comment below.

If you’re new to Objective-C, categories allows you to add additional methods to existing classes – without having to have access to the source code for that class. In this instance, we will add a new method to NSObject (and therefore, every object that inherits from NSObject) that will act much like the already existing performSelectorOnMainThread method, only it will accept any number of objects as input. You can read more about categories in this very helpful Objective-C guide.

Our code consists of two parts, the header file – which will define the extra method for NSObject, and the .m file, as per usual. The header file is simple (excuse my long file name, I like to be precise);

NSObject+PerformSelectorOnMainThreadMultipleArgs.h

#import <Foundation/Foundation.h>

@interface NSObject (PerformSelectorOnMainThreadMultipleArgs)

-(void)performSelectorOnMainThread:(SEL)selector waitUntilDone:(BOOL)wait withObjects:(NSObject *)object, ... NS_REQUIRES_NIL_TERMINATION;

@end

Nothing really out of the ordinary here. Just notice that using the (parathesis) after NSObject tells Objective-C that we’re making a category on NSObject. It’s also worth noting that the ‘with objects’ parameter for the method we’ve created has a comma and 3 ellipsis after the first parameter’s variable name. This is stating that we’re expecting a list of parameters. The NS_REQUIRES_NIL_TERMINATION states that, much like some of the NSMutableArray instance methods, we’re expecting a list which is terminated by a nil value. Now, onto the code for this method;

NSObject+PerformSelectorOnMainThreadMultipleArgs.m

#import "NSObject+PerformSelectorOnMainThreadMultipleArgs.h"

@implementation NSObject (PerformSelectorOnMainThreadMultipleArgs)

-(void)performSelectorOnMainThread:(SEL)selector waitUntilDone:(BOOL)wait withObjects:(NSObject *)firstObject, ...
{
    // First attempt to create the method signature with the provided selector.
    NSMethodSignature *signature = [self methodSignatureForSelector:selector];

    if ( !signature ) {
        NSLog(@"NSObject: Method signature could not be created.");
        return;
    }

    // Next we create the invocation that will actually call the required selector.
    NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:signature];
    [invocation setTarget:self];
    [invocation setSelector:selector];

    // Now add arguments from the variable list of objects (nil terminated).
    va_list args;
    va_start(args, firstObject);
    int nextArgIndex = 2;

    for (NSObject *object = firstObject; object != nil; object = va_arg(args, NSObject*))
    {
        if ( object != [NSNull null] )
        {
            [invocation setArgument:&object atIndex:nextArgIndex];
        } 

        nextArgIndex++;
    }	

    va_end(args);

    [invocation retainArguments];
    [invocation performSelectorOnMainThread:@selector(invoke) withObject:nil waitUntilDone:wait];
}

@end

Now, you probably came here just looking for some code – so I won’t put too much tutorial in here. First off, let me just say that I’ve switched around the parameters for the method from the standard order so that the variable length list is the last parameter. Next up, I’ll just touch on the two main elements of the code.

First of all, this code relies on NSInvocation to do the leg work. NSInvocation represents the action of calling a method, but wraps it up in an object – so that you can do a number of things with it. In this case, it means that we can build the NSInvocation from the list of input objects that we’ve received, and then ensure that the NSInvocation object calls it’s own invoke method (calling the selector on the calling item) on the main thread. This means that we can lever the regular performSelectorOnMainThread functionality without having to do too much work on our own.

Secondly, the va_list is what allows us to pass the method a variable number of arguments. We keep popping objects off the argument list (in the for loop) until we reach a nil object. However, as we might also want to pass nil as an argument to our selector, I’ve made it such that you can pass NSNull which will then be interpreted as a nil argument in the final selector call. Here we simply pop the arguments from the withObjects parameter to the method and add them as arguments to the invocation. Note that we start at argument 2 for the invocation as NSInvocation’s arguments 0 and 1 are used for other purposes. So argument 2 actually corresponds to the first argument for the selector you’ve chosen.

That’s about it really – if you have any questions, please feel free to ask away in the comments section below. Otherwise, enjoy the code!

At the heart of my application were a number of layers which consisted of android.graphics.Bitmap layers. I wanted to be able to save (serialize) this data without simply saving the masses of raw binary data from the Bitmap object (which would have been obscenely large).

The following code shows the solution that I came up with. The following code gives an example of how to save a single layer from the application, but as this makes the object serializable, it’s easy then to save a number of these layers into a single file.

private String title;
private int sourceWidth, currentWidth;
private int sourceHeight, currentHeight;
private Bitmap sourceImage;
private Canvas sourceCanvas;
private Bitmap currentImage;
private Canvas currentCanvas;
private Paint currentPaint; 

/** This container class makes it easy to serialize / de-serialize the raw PNG bytes. */
protected class BitmapDataObject implements Serializable {
    private static final long serialVersionUID = 111696345129311948L;
    public byte[] imageByteArray;
}

/** Included for serialization - write this layer to the output stream. */
private void writeObject(ObjectOutputStream out) throws IOException{
    out.writeObject(title);
    out.writeInt(currentWidth);
    out.writeInt(currentHeight);

    ByteArrayOutputStream stream = new ByteArrayOutputStream();
    currentImage.compress(Bitmap.CompressFormat.PNG, 100, stream);
    BitmapDataObject bitmapDataObject = new BitmapDataObject();
    bitmapDataObject.imageByteArray = stream.toByteArray();

    out.writeObject(bitmapDataObject);
}

/** Included for serialization - read this object from the supplied input stream. */
private void readObject(ObjectInputStream in) throws IOException, ClassNotFoundException{
    title = (String)in.readObject();
    sourceWidth = currentWidth = in.readInt();
    sourceHeight = currentHeight = in.readInt();

    BitmapDataObject bitmapDataObject = (BitmapDataObject)in.readObject();
    Bitmap image = BitmapFactory.decodeByteArray(bitmapDataObject.imageByteArray,
                                               0, bitmapDataObject.imageByteArray.length);

    sourceImage = Bitmap.createBitmap(sourceWidth, sourceHeight, Bitmap.Config.ARGB_8888);
    currentImage = Bitmap.createBitmap(sourceWidth, sourceHeight, Bitmap.Config.ARGB_8888);

    sourceCanvas = new Canvas(sourceImage);
    currentCanvas = new Canvas(currentImage);

    currentPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    thumbnailPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    thumbnailPaint.setARGB(255, 200, 200, 200);
    thumbnailPaint.setStyle(Paint.Style.FILL);
}

This solution essentially forces the Bitmap object to compress itself to a ByteArrayOutputStream which we use to store the byte data of the resulting PNG compressed version of the file. There may be a better way to do this, but next up I wrapped this data in a custom object (BitmapDataObject) which can then hook into the standard serializable properties that Java presents to us.

Quite niche I know, but I hope that this saves someone out an hour or two.

From first time iPhone developers to Objective-C gurus, it’s hard to deny the usefulness of NSLog() and ‘gdb> po’ when trying to figure out just which part of your application is causing problems at a given time. NSLog works wonders for outputting strings combined with integers, floats etc. For example, consider the following code and corresponding output.

NSLog(@"Integration timestep: %d, x: %f, y: %f", timestep, x_value, y_value);

> 2011-01-19 10:20:30.123 AppName[...] Integration timestep: 10, x: 5.4, y:2.3

However, the default implementation doesn’t really know how to print anything useful for your custom objects. For instance, if you attempt the following, you don’t really get useful information.

NSLog(@"%@", self);

> 2011-01-19 10:20:30.123 AppName[...] <ClassName: 0x000000>

The output that you see is simply the class name and the memory address of the object that you’re logging. This is the default functionality provided by NSObject’s description, which is what is called when a subclass of NSObject is ‘converted to a string’ (which is done by calling the description method).

So, in order to output something more useful, it’s a good idea to override the NSObject description method. For example, you might want to override the description method for your base game object class to do something like the following;

-(NSString *)description
{
  return [NSString stringWithFormat:@"<GameObject: %@, Position: %f, %f>",
                 [self objectID], [self position].x, [self position].y];
}

Now, if you call NSLog on a game object, you will be presented with a much nicer string of the form

<GameObject: playerOne, Position: 200, 300>.

This is even more useful, when you consider that your entities will more than likely be in an array, or dictionary of some form. In this scenario, printing your list of game objects would go from…

> po [self gameObjects]
{
  <GameObject:0x100000>,
  <GameObject:0x101000>,
  <GameObject:0x102000>,
}

to…

> po [self gameObjects]
{
  <GameObject: playerOne, Position: 100, 100>
  <GameObject: playerTwo, Position: 600, 300>
  <GameObject: ball, Position: 200, 300>
}

While it’s easy to skip past this stage when building custom objects, it’s definitely worth the extra 2 minutes per class that it takes to write the description method. Especially when you consider the amount of time it’ll likely save you down the road when you’re debugging.

Including Class Name and Address

If you would like to extend the default design and include the class name and address in the object’s description, then you can do so using the following codes in your NSString format string with the relevant parameter afterwards.

"%@": NSStringFromClass([self class])
"%p": self

%@ simply represents a placeholder for another string, and we can get the class name for an object as a string by using NSStringFromClass([self class]). %p will be replaced by the address of an object, and so we simply need to pass the corresponding reference to self to include the address of an object this way.

So, for a state in a state machine you might want to output the following information;

-(NSString *)description
{
	return [NSString stringWithFormat:@"<%@: %p, ID: %d>",
		NSStringFromClass([self class]), self, [self stateId]];
}

Which would output debug information of the form; <ClassName: 0xfa707a0, ID: 1001>

The game would load, I would catch a glimpse of the login screen then the game would crash. I’m running Windows 7, so I tried the following things that have reportedly helped others;

1. ‘Running as Administrator’,

2. Deleting / Renaming the Battle.Net User Folder,

3. Opening up my firewall temporarily,

4. disabling my Anti-virus software,

5. Running a mal-ware scan (AdAware Free) and virus scan.

6. Changing my ‘Internet Options -> LAN Settings’ to not use a Proxy / use automatic settings.

After these all failed, I decided to reinstall, which made the problem worse. This time the game would state that I had to download a patch. Upon clicking ok, it would crash and restart – once again telling me to download the same patch. I didn’t see the launcher software at all, just a flash of a black screen.

Anyway, if you’ve tried all of the above and still can’t get it to work – I found a fix that works for me.

I launched IE (which I rarely use, as I use Chrome or Safari) and found that it was set to ‘Work Offline’. When I disabled this option, and tried again – StartCraft II updated and worked fine. Hope it helps someone.

Edit: If you still can’t get it to work, then some additional suggestions have been made in the comments section below. They are;

1. It’s possible that the BattleNet servers are actually down! There were a lot of people recently visiting this post, but unfortunately, it was simply that there was a period when the BNet servers were down. It’s worth checking Google to see if this is the case. Try disconnecting your Network Cable to run SC2 in Offline mode (Thanks @melsmed).

2. @Komi has reported that a simple reboot of the router might be all that you need!

3. @JamesR404 Makes a good point – if the client requires a stable network connection, make sure that there isn’t a firewall / port-block in effect on the router preventing you from connecting to the servers.

4. @Nathan Thanks for the additional suggestion; “The other day i acquired a virus somehow which changed IE’s proxy settings. If John’s method doesn’t work straight up then check your proxy settings.”

5. @Denbatte has found that, with Windows 7, if you have a ‘Virtual Wifi Miniport’ enabled (in adapters in the network centre) then you may need to disable any virtual ports that exist (right click -> disable). Many thanks for leaving the additional fix idea in the comments.

Thanks all!

Luckily, the iPhone OS 3.0 added this functionality. Quite excitingly, similar functionality for in-app SMS messages is coming soon (in iPhone OS 4.0), but we won’t talk about that here.

1. Referencing the MessageUI Framework

First up, we have to ensure that we are linking with the MessageUI Framework, which is the library that will provide the functionality we’re after. If you’ve not already got the MessageUI Framework referenced in your project, you’ll want to right click on ‘Frameworks‘ in your projects ‘Groups & Files’ and select Add -> Existing Frameworks. Select MessageUI.framework and insert it into your project.

2. Call up the MFMailComposeViewController view like any other UIView

Next up you need to create and push to the main navigation controller a fresh MFMailComposeViewController. This will control the in-app email view that will allow the user to complete the remaining details for the email they wish to send and then either beam that email off to the lucky recipients across the internet, or to cancel the operation.

The example below shows how set a whole host of options on the mail compose view. You don’t have to set all of these – things like the Subject and the Recipients are optional, but you will more than likely want to set one or two of these depending on the view that is enabling the user to start a new email.

The code for this will often go in an IBAction method and is as follows

-(IBAction)sendEmail:(id)sender {
  // Create a new Mail Composer View Controller
  MFMailComposeViewController *mailViewController = [[MFMailComposeViewController alloc] init];
  mailViewController.mailComposeDelegate = self;

  // Optional Configuration Parameters to make life easier for the user
  [mailViewController setSubject:@"Subject"];
  [mailViewController setMessageBody:@"Message Body" isHTML:NO];
  [mailViewController setToRecipients:[NSArray arrayWithObject:@"a@b.com"]];
  [mailViewController setCcRecipients:[NSArray arrayWithObject:@"a@b.com"]];
  [mailViewController setBccRecipients:[NSArray arrayWithObject:@"a@b.com"]];

  // Present the VIew Controller and clean up after ourselves
  [self presentModalViewController:mailViewController animated:YES];
  [mailViewController release];
}

Now, we’ve got an application that shows a compose email view ready for the user to send an email direct from your app. However, there’s one main problem with the app as it stands – once you’ve launched the mail compose view, it’ll never go away! In order for you to respond when the user has (or hasn’t) sent an email, and to optionally respond with your own messages depending on whether it worked or not, you’ll have to implement the MFMailComposeViewControllerDelegate protocol.

3. Implementing the MFMailComposeViewControllerDelegate Protocol

The third and final step in getting your in app Mail Composer working correctly is to respond to the appropriate delegate protocol. I often find that implementing delegate protocol methods can sometimes be a laborious task – but you’re in luck this time, as there is only one method that you have to worry about;

-(void)mailComposeController:(MFMailComposeViewController*)controller didFinishWithResult:(MFMailComposeResult)result error:(NSError*)error
{
  if ( result == MFMailComposeResultFailed )
  {
    // Sending failed - display an error message to the user.
    NSString* message = [NSString stringWithFormat:@"Error sending email '%@'. Please try again, or cancel the operation.", [error localizedDescription]];
    UIAlertView* alertView = [[UIAlertView alloc] initWithTitle:@"Error Sending Email" message:message delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];
    [alertView show];
  }
  else
  {
    // If we got here - everything should have gone as the user wanted - dismiss the modal view.
    [self dismissModalViewControllerAnimated:YES];
  }
}

There you have it – 3 easy steps to implementing the MFMailComposeViewController in your iPhone application.

Use them sparingly; Having too many global variables floating around makes it very hard to keep track of what’s going on. I never use more than one global object for each logical section of my code – even if that object contains a handful of other objects from that section.

But you do sometimes need them; I once wrote a small game where I decided not to use my own globals at all. Truth be told, I ended up with a bit of a mess – a large number of similar constructors with a numbers of parameters to link my objects together. Sure, the units were technically separate and didn’t rely on each other – but the reality was, that when you get deep enough into your code – some classes are only ever going to be used in this project (view controllers etc).

Use them when it’s applicable; Generally, global variables are applicable in situations when you’ve got an object / class of which you are only ever going to need one of them and they don’t logically sit as a child of one single part of the application. For instance, the ‘application’ object in some languages – where the object represents the running application.

So, Singleton Eh?

The Singleton model is often used to instantiate just one instance of a class which doesn’t allow a second instance of that same class to be loaded anywhere in the application. Some implementations will throw an exception if you try to create a second instance of the class, some will create the singleton for you when you first try to access it, and some will even let you create other instances if you want, but will always manage a ‘single shared instance’ for you. Many of the core Apple classes follow this pattern, such as [UIApplication sharedApplication].

Anyway, Apple do a very good job (naturally) of providing a good example of the Singleton model. The following code is rather similar to the Apple example, but it also includes what you should have in the header file. It is also a stable part of any library of code snippets, so it has to be here really!

SingletonClass.h

#import <Foundation/Foundation.h>

@interface SingletonClass : NSObject {

}

+ (id)sharedInstance;
@end

SingletonClass.m

#import "SingletonClass.h"

@implementation SingletonClass

static SingletonClass *sharedInstance = nil;

// Get the shared instance and create it if necessary.
+ (SingletonClass *)sharedInstance {
    if (sharedInstance == nil) {
        sharedInstance = [[super allocWithZone:NULL] init];
    }

    return sharedInstance;
}

// We can still have a regular init method, that will get called the first time the Singleton is used.
- (id)init
{
    self = [super init];

    if (self) {
        // Work your initialising magic here as you normally would
    }

    return self;
}

// Your dealloc method will never be called, as the singleton survives for the duration of your app.
// However, I like to include it so I know what memory I'm using (and incase, one day, I convert away from Singleton).
-(void)dealloc
{
    // I'm never called!
    [super dealloc];
}

// We don't want to allocate a new instance, so return the current one.
+ (id)allocWithZone:(NSZone*)zone {
    return [[self sharedInstance] retain];
}

// Equally, we don't want to generate multiple copies of the singleton.
- (id)copyWithZone:(NSZone *)zone {
    return self;
}

// Once again - do nothing, as we don't have a retain counter for this object.
- (id)retain {
    return self;
}

// Replace the retain counter so we can never release this object.
- (NSUInteger)retainCount {
    return NSUIntegerMax;
}

// This function is empty, as we don't want to let the user release this object.
- (oneway void)release {

}

//Do nothing, other than return the shared instance - as this is expected from autorelease.
- (id)autorelease {
    return self;
}

@end

There you go – copy and paste this into your new project, rename the interface and implementations and you’re done – a ready to use Singleton in your project.

Making the creation of your singleton thread safe

Jiunn Harr wrote a great blog post on making the creation of your Singleton thread safe. In the above example, it is possible that your Singleton’s init method could be called more than once, if sharedInstance was called for the first and second time concurrently on different threads. In order to by-pass this problem, you can replace the sharedInstance method above with the following;

+ (SingletonClass *)sharedInstance {
    if (nil != sharedInstance) {
        return sharedInstance;
    }

    static dispatch_once_t pred;        // Lock
    dispatch_once(&pred, ^{             // This code is called at most once per app
        singleton = [[SingletonClass alloc] init];
    });

    return singleton;
}

Note. This doesn’t make all calls on your Singleton thread safe – it simply ensures that the creation of your Singleton is thread safe. This code uses Grand Central Dispatch (Cocoa and iOS4+). To read more about how this works, and why you should consider using it – check out Jiunn Haur’s great blog post on the subject.

Using the Singleton Class

The above code creates the framework for a Singleton class. You can almost ignore the majority of the code above and no go about setting up your own variables and methods for use in your singleton class. It’s worth bearing in mind that when you first attempt to you access your Singleton, it will be created for you, and from that point onwards – it will probably reside in memory for the remainder of your application’s lifecycle. Because of this, you might want to be careful about memory usage and ensure that classes inside your singleton element are tidy.

Accessing your Singleton class from your code is then simply a matter of using the +(SingletonClass*)sharedInstance to get a pointer to the one instance of the singleton class that exists in your application. You can do this anywhere in your code and you would do this for the above class by doing something like the following;

SingletonClass* sharedSingleton = [SingletonClass sharedInstance];
[sharedSingleton callAMethod];

Enjoy!

Launching Safari from within an iPhone App

The openURL method of UIApplication is a very useful and valuable method. It provides a quick and simple way to leave the current application and load up the web browser, the email application or even the phone application. It also provides a way for you to set the ‘default’ data, such as the start page in safari, or the email recipient for mail.

Using the function to launch Safari with a specific URL is simple, it requires barely any code. The following example shows how one would use openUrl to launch Safari having clicked a button.

-(IBAction)linkButtonClick:(id)sender {
NSString* launchUrl = @"http://www.johnwordsworth.com/";
[[UIApplication sharedApplication] openURL:[NSURL URLWithString: launchUrl]];
}

Launching Mail, the Phone or SMS

Launching the mail client, phone or the SMS client is equally as simple. The openURL method examines the first few characters of your URL and then uses this information to determine what information you have provided. It then does it’s best to enact what you have requested.

The following functions give you a quick and easy way to launch the relevant apps quickly and easily.

// Launch the email client with mailto://[recipient]
-(BOOL)launchMailWithRecipient:(NSString *)recipient {
NSString* launchUrl = [NSString stringWithFormat:@"mailto://%@", recipient];
return [[UIApplication sharedApplication] openURL:[NSURL URLWithString: launchUrl]];
}

// Launch the phone with tel://[number]
-(BOOL)launchPhoneWithNumber:(NSString *)number {
NSString* launchUrl = [NSString stringWithFormat:@"tel://%@", number];
return [[UIApplication sharedApplication] openURL:[NSURL URLWithString: launchUrl]];
}

// Launch the SMS client with sms:[number]
-(BOOL)launchSMSWithNumber:(NSString *)number {
NSString* launchUrl = [NSString stringWithFormat:@"sms:%@", number];
return [[UIApplication sharedApplication] openURL:[NSURL URLWithString: launchUrl]];
}

But the iPod doesn’t have a phone!?

That’s right – there’s something we’ve not yet touched upon, and that’s the fact that openURL returns a boolean value. This value lets you know whether or not the operation completed successfully. Obviously, if it did – then you’d better clean up your App pretty quick as it’s not going to be in the foreground for much longer! However, more usefully, it allows you to handle the case when the supported operation is not permitted.

For instance, if you’re hoping to loading up the phone app on an iPod Touch, then it’s not going to work. In this case, you might want to popup a UIAlertView to let the user know that it’s not going to work. If you’re really working hard towards a friendly user interface, then you can use the canOpenUrl method to check this out without actually leaving the application. For instance, if canOpenUrl returns false, then you could disable the links or buttons that would otherwise launch the phone or SMS application.

How would you do that?

-(BOOL)doesDeviceHaveAPhone {
NSString* launchUrl = @"tel://0";
return [[UIApplication sharedApplication] canOpenUrl:[NSURL URLWithString: launchUrl]];
}

I’ll leave you to think about the other cunning things that you can do, such as launching with an http url that links directly to a google map / youtube video or custom Google search string. Anyhow, when combined with other elements of a productivity app, this can be quite useful! Enjoy.

So, instead of bitching about it, I thought I would ‘simply’ fix it. Now, I leafed through a couple of other people’s skins, browed through the empty ‘how to make a skin’ wiki page and thought; “It’s not going to be easy, but I’ll give it a try.”. Now, if you’ve ever had any experience re-skinning an application before, you’ll know that it’s never as easy as you think it should be. Vendetta Online is, unfortunately, no exception.

I thought it would have been nice if the skins consisted of an XML file that would allow you to set the text colors and provide solid borders without the need for producing graphics, but I can also see how this is low on the priority scales for the developers. Anyway, with over 100 files to produce my head is already turning around ideas of how to produce a piece of software to make the whole process easier, but for now, here are some screenshots of the skin that I have been working on.

(Click images to enlarge)

As you can see, there are a few bits that need some extra work. Most importantly, the HUD elements are still plagued by an aliasing problem that was the main reason that I wanted to write this skin. However, this time, it’s not the radar, but the central HUD elements. Anyway – I’ll find a good compromise, get it all packaged up, and hopefully release it out to the community at some point soon.

Another important difference, is that Vendetta Online is produced by only 4 people. In my opinion, this has had 2 massive effects on the game. First of all, unfortunately, it means that the game is lacking a little in scope. It’s not easy to find truly unique missions as the focus seems to have been on the core ‘learning the game’ and ‘generic always there missions’ to date. This means that the awesome history and thought that’s gone into the world doesn’t get to shine through. Also, the graphics aren’t quite up to EVE’s standards. Don’t get me wrong, they’re great for a team of 4, and produce a wonderful experience, but it’s unfortunate that they have to sit next to EVE in a comparison.

The second effect on the otherhand, is absolutely amazing. Being led by only a team of 4, and having a tight-nit community has led to some innovation in the MMORPG genre. The game has a Player Contribution Corp; a group of players who have access to a set of tools and guides for contributing missions, plugins and skins to the game. Some of the community made plug-ins really fill those gaps that the development team simply haven’t had time to plug yet.

Being able to contribute to a live MMORPG is really appealing to me. As someone who is just starting his career in the gaming industry, I love the idea of being able to join a friendly and ambitious community, put a handful of hours into a mission, skin or plug-in and see it in action in a real live game. It was this that spurned me on to write this post. I’ve started work on a new skin for the engine that I hope will help the engine shine a little more on my monitor, and wanted to share some thoughts about my experience.

The bottom line is this; If you’re looking for an MMORPG with a small yet friendly player-base that will allow you to contribute ideas and suggestions to the development of the game, then Vendetta Online is definitely something you should try out. I’m not going to lie – the first 30-60 minutes might be a little different to your regular MMORPG experience – it won’t be quite as shiny, but you will pretty quickly get to witness the community first hand. Hell, they’ve got an 8 hour trial (that’s 8 hours in game, you can spread it over a few weeks if you wish) – so why not give it a shot?

Download the Vendetta Online Client Here

This fantastic evening marks the begining of my revisited blog. There is still much for me to do on the blog design before I could consider it done (adding dates into the template in a friendly fashion to start with). Anyhow, this is all leading up to some posts about XNA programming from dicussions that I had a while ago over at xnachat.com. Anyhow, it’s late here and there’s much sleep to be had.

The Problem

Our game is relatively simple and we would like to define the stages that the player progresses through in a plain text file. While it’s a very simple task to read a text file in C#, I initially had problems assuming that loading a new StreamReader on the the Xbox like so StreamReader(“LevelIndex.txt”); would load up a text file in the same directory as my executable. Not the case – it turns out that, as the Xbox doesn’t really follow a directory structure like a PC, this doesn’t work.

The Solution

The solution is also relatively simple, but not east to find – as it’s one of those things that you either know how to do or not. There are 2 important things to note before jumping directly into a code listing.

1. StorageContainer.TitleLocation: In order to construct the file path that you will be feeding into a StreamReader, you must prefix your path with this property. To load up the file ‘LevelIndex.txt’, which resides in the root directory of your solution, you must construct the path as follows; String fullPath = StorageContainer.TitleLocation + “LevelIndex.txt”;

2. Build Action (None), Copy to Output Directory (Copy if Newer): As your text file is not going to be processed by the Content Processor, you need to tell Visual Studio what should be done with your text file. For my project, I dragged and dropped the text file into my Solution (but NOT in the Content directory). The text file sits alongside your .cs files (although, could reside in a folder). Then, you must change the properties of the text so that Build Action is set to ‘None’ and Copy to Output Directory is set to ‘Copy if Newer’. This ensures that Visual Studio doesn’t try to compile the file as code or include it in your Content repository. It will simply copy the text file to the TitleLocation of your game – just what you want so that you can read it from within your title.

Code Listing

The following code listing shows how we have implemented a simple text file reader for an Xbox XNA Project;

function String[] readStageTitles( String filePath ) {
  ArrayList stageTitles = new ArrayList();
  String[] returnData = null;

  // Both Windows and Xbox - Ensures we are looking in the game's folder.
  String StageIndexPath = StorageContainer.TitleLocation + "\\" + file;

  try
  {
    StreamReader streamReader = new StreamReader(StageIndexPath);
    String line;

    while ((line = streamReader.ReadLine()) != null)
    {
      String[] data = line.Split(';');

      if ( data.Length == 2 ) {
        stageTitles.Add(data[1]);
      }
    }

    streamReader.Close();
  }
  catch( Exception ex )
  {
    // Do things here incase it can't read the file
  }

  returnData = (String[])stageTitles.ToArray( typeof(String) );
  return returnData;
}

Hope this helps someone out there.

After a few searches on Google and many failed attempts, I found that the following command instantly fixed my problem;

netsh interface tcp set global autotuninglevel=disabled

I’m afraid I have no real idea what other impact this might have on your machine / server. I understand that this disables the built in network ‘tuning’ that Vista uses to try to improve your bandwidth usage so that all software on your machine is guaranteed a solid minimum Quality of Service (QoS). I suspect that it’ll have no noticable impact at all, it’ll just perform more like XP than Vista (which was fine).

If it does screw things up, you can reverse this action by;

netsh interface tcp set global autotuninglevel=normal

You’ll have to run this from a cmd.exe shell and will probably need to run cmd.exe with the ‘Run as Administrator…’ command. I have UAC disabled, so it runs fine anyway. You should just get a simple ‘Ok’ response from the software if it’s run ok.

I hope that this helps some people. It’s been running perfectly fine ever since.

This week, I’ve mostly been playing with the Print Screen options / Screen Capture options. Previously, I’ve only used a couple of the plethora of screen capture options that OSX offers, but I thought it time to get a definitive list of the (hard to remember) key combinations available, mostly for my own reference.

So, putting Windows to shame, you can actually save a screen capture as a JPEG file with a mouse click. This would be a great addition to windows and would definitely stop me from receiving emails that are 5Mb with 2 BMP screen caps in that I’ve been receiving a lot of recently. An overview of the commands are;

Saving a Screen Capture Direct to a JPEG File

⌘ ⇧ 3: Capture the entire screen to a jpeg file on the desktop.

⌘ ⇧ 4 (Followed by Drag): Capture the selected area of the screen to a jpeg file on the desktop.

⌘ ⇧ 4 (Then Spacebar, Then click on a window): Capture selected window (and sometimes a border) to a jpeg file on the desktop.

Saving a Screen Capture to the Clipboard

⌘ ⇧ Ctrl + 3: Capture the entire screen to the clipboard.

⌘ ⇧ Ctrl + 4 (Followed by Drag): Capture the selected area of the screen to the clipboard.

⌘ ⇧ Ctrl + 4 (Then Spacebar, Then click on a window): Capture selected window (and sometimes a border) to the clipboard.

Using these Commands

It’s important to push all of the auxiliary keys for your command before pushing the number key. So if you want to capture the screen to the clipboard, ensure that you are holding down Cmd (⌘), Shift(⇧) and Ctrl first, and then hit the 3 key. If you are copying to the clipboard, OSX should still make the camera-snap sound effect, but will not leave a file on your desktop. You can then paste the item from your clipboard into a Pages or Keynote document.

I’m not sure how many of you are aware, but Microsoft’s .NET languages such as Visual Basic and C# don’t actually compile into windows specific executable code but they instead get compiled into an ‘intermediate’ code similar to Java. This is why you are required to download 80Mb of .NET Framework files to run them on XP.

So, what the clever guys on the Mono Project have done is rewrite the .NET Framework so that it runs on other operating systems. That means that you are able to run software that was compiled for Windows as .NET Managed Code in other operating systems as if it were a native application. Now the system is far from perfect, so you’re not able to just pick any application and guarantee it will work – but the project is improving all the time and making more and more programs compatible.

Again, something which is not stated, is how easy this is. Download the Mono application for your machine. And then type: ‘mono MyApplication.exe’ and wait for the application to run. Hassle free (when it works).

While this may not seem significant to many people, I found it amazing that I could run a bunch of .exe files on my mac directly from my Windows Partition with no problems what-so-ever. My only issue with this technology at the moment, is the inability to have ‘browser windows’ in the application run on OSX. They run on Linux apparently, but not on a Mac.

I really hope that .NET developers start making their applications Mono compatible, and I look forward to the browser window component being accessible on a Mac. I’ll definitely be trying my C# programs on Mono and I may even release some of them soon!

My usual reflex didn’t insert a #, so my eyes headed south. A minute passed and I scanned every key afore me. No sign of a hash – I must have missed it, so I look again. Nothing! Luckily, a friend of mine has a mac, so knows that the ‘intuitive’ short-cut is infact Alt-3.

However, had I not had that support there, I would’ve been rather aggravated. I hope this saves someone some hair-pulling at a later date!Otherwise, my experience with the MacBook has been sterling. It runs very smooth, and most interestingly – everything integrates exceptionally well – even integrating with windoze. If I click on Network Shares, the drives appear instantly, and doesn’t freeze my entire PC just to browse these shared folders. PDF’s no longer freeze my browser, and I can use Firefox just to remind me of my old laptop.

More to come at a later date – but my current mission is to program a Dashboard Widget and some Cocoa demos to see what Mac Development is like.

This was interesting, as the first thing I did when I got the item was stick my 3 Mobile Sim card in it to find that it worked fine. I also did a bit of net searching to find conflicting reports on fairly serious questions: Will my phone get blocked by 3? Will I be able to access Planet 3? Will I ever be able to make video calls?Well, to date, I’ve had no problems what-so-ever. No angry text messages from 3 telling me this isn’t my regular phone, no problems accessing Planet 3 to see how many minutes I’ve got left, and I must confess, I’ve not tried to make a video call yet. So, in order to aid any other people that are having these worries, this is what I’ve done;I flashed the ROM and installed the ‘Black Satin’ version of Windows Mobile 6.0. I then downloaded the 3.cab from XDA Developers, put this on my device using Active Sync and then ran the .cab file. Now, this certainly isn’t necessary, and all of the settings worked without doing this, but I like upgrading this and having more buttons. Now, some tips for the 3 Mobile UK Owner.3 Internet Connection Settings (Settings / Connections)

Modem:	Cellular Line (GPRS, 3G)
Access Point Name (APN):	three.co.uk
Username / Password / Domain:	Blank

MMS Settings (Messaging / SMS/MMS / New Message / Message Options / Servers)

Gateway:	mms.three.co.uk
Port:	8799
Server Address:	http://mms.um.three.co.uk:10021/mmsc
Send Limit:	300k
WAP Version:	2.0

Last but not least, if you want to access Planet 3 you can simply fire up Internet Explorer and visit mobile.three.co.uk. One final warning – if you want to check if you’re on 3G or not, look at the icon at the top of the screen. I believe, if you try to use GPRS when you’re not in a 3G area (your network will be displayed as “3″ for GPRS, or “UTMS 3″ for the full ’3G access’) then you’ll be considered to be roaming, which means you’ll be charged money, where as, if you’re in a UTMS 3 area, you’ll not be charged. However, if your network just comes up as ’3′, then you can still make calls / send SMS messages on your free credit.

Constant Streaming Data: In the beginning, you would request a page once, and read it. With Web 2.0, you often request a page for a section / specific use application, and use it. Thus, I suggest that with Web 3.0, you will visit the homepage of a site that will provide the majority of the functionality of the site without a page refresh – the site will change to suit your needs, like a real world application.

Syndication and Aggregation of Sites and Functionality: Where Web 2.0 has seen the syndication of data across multiple websites, I propose that Web 3.0 might present the possibility to syndicate web applications / entire pages or sites or even just specific functions of a website. As bandwidth becomes cheaper, it will be easier to syndicate applications from a single source than to have multiple copies dotted around the web.

Mobile Web to reach ‘Web 2.5′: In the current day, the majority of websites based at Mobile Phones aren’t quite Web 2.0, due to the limited capacity of features and memory available to mobile devices. As they improve however, they will take a very important role in the way the web moves forwards. People will expect to access their favourite sites as easily from their mobile phone as they can from their PC. Non-Geeks will blog from their phone and update data whilst walking to work.

Complete Microformat Integration with Real Devices: No longer will some sites support specific microformats that a small selection of specially made tools can make use of, but microformatted data will be exchanged directly between websites keeping all of your often visited sites synchronised, as well as your mobile phone, and even your microwave and your fridge (with a shopping list and todo list etc).

Further Abstracted Design: CSS will be cleaner and cross-browser incompatibilities will (hopefully) be a thing of the past. New XHTML objects and new layout languages may come into use to allow for advanced features to be built directly into the web (auto-complete combo boxes, hover-over boxes, trees, expanding and movable divs etc). Designers will have to worry even less about how things will work, and programmers will have to worry even more about the complex points of programming.

Programmable Open Source Platform: The web will become a place where you cannot only just add data to wiki’s, but program how they function and add applications to other websites. Simple drag and drop programming models will even allow for standard web users to add functionality to their own pages/blogs/other sites without danger of breaking the server or disastrous consequences. People will even login to their own customized (web-based, or web-attached) applications to access their files online, because they’ve added functionality to their applications themselves.

Just my logical prediction. Some of this will undoubtedly be wrong, but I look forward to matching it up in a few years time.