In this longer piece I will outline the history and process of making Rectangulous, a puzzle game for Flash and iPhone. I will talk about the creative and design decisions as well as the technical implementation details in chronological order.

Inspiration and concept

After seeing the Van Doesberg exhibition at the Tate Modern I was thrilled by the persistence of the De Stijl movement in their investigations of such simple elements
and strict rules. Having recently got into the Rubik's cube again, I had an idea to devise a puzzle game based on the patterns and dynamism of really basic
geometry explored in the paintings of Van Doesberg and Sophie Taeuber.

Counter-Composition V by Theo van Doesburg

I am a fan of simple puzzle games on the iPhone like Trism, reMovem, Flood-it!, Unify, Bejeweled and LineUp. I like them best of all when I can play as quickly as possible. SameGame is perhaps the grandfather of many of the games mentioned. I prefer the games that are more like toys, the way the Rubik's cube is. There may be a goal, there may be scoring, and you may choose to play competitively, but there are no penalties built into the Rubik's cube. I like that I can spend as long as I want thinking about a move, be that very short or very long. I like games in general that I can enjoy thoughtfully, exploratively and playfully without the stress of impending imperatives - perhaps the very opposite of twitch gaming. I'm also very attracted to the way these games have simple, visual mechanisms that satisfyingly slot together in their consistent internal logic.

I wanted to make a puzzle game that combined all of these values: utterly simple, with a limited colour palette; a rigorous, clean visual logic; very quick to launch; no time limits, no penalties. Ideally I wanted to capture the feeling of the minimal De Stijl paintings - the feeling that I wanted to manipulate those shapes - push around those adjacent rectangles held in mutual tension. Ideally the game would equally be a kind of interactive painting, and the user would want to take a screenshot when the composition was particularly attractive.

Some months later, after playing a lot of these games and reclining to dream, I came up with the basic idea for Rectangulous: a grid of colours, where the user can move coloured squares into empty squares, and so combine "joined" areas into larger shapes. The working title was "Stijl".

...

First prototype

First, I decided to make a prototype in Open Frameworks C++, as I knew I could get started quickly and would have a lot of options for deployment or porting and would be able to continue work on whatever OS I happened to be working on. After a couple of days I had a working prototype.

For this I store the grid of colours in a multidimensional array. At the start of the game, the array is randomly filled with the index of one of the five colours. I calculate the width and height of each rectangle by dividing the window by the number of rows and columns. When the screen is to be drawn, a loop goes through the grid array and draws a rectangle in that colour, at the position calculated as the width/height of a rectangle multiplied by the loop counter. This way the internal logic and drawing is separated and I can consider each independently.

The player uses arrow keys to move rectangles around and the mouse to click on a block to remove it and any adjoining blocks of the same colour. The counter, top-left, shows the number of clicks the user has performed. So the object of the game at this point is to clear the board in the least number of clicks. I can win in 7.

The hard part building this was working out how to assess if coloured rectangles are joined to the one clicked on. My first attempt checked along the row and column from the chosen rectangle, incrementing from the rectangle to the first non-matching rectangle or to the edge, then checking again for every matching rectangle found. The code was quite inelegant and had some error that meant in some cases rectangles were not properly matched. On reflection, it was also quite inefficient. The solution used was to iteratively check the rectangles immediately up, down, left and right of the clicked rectangle, and if they are found to match, colour that rectangle black and then check again from the new position.

Now that I had a functioning game, I could test on some users and see whether this was a workable concept. I was pleased to find that every user tested understood the game mechanism very quickly, even with the very minimal graphics. Some had difficulty with understanding the goal of the game without explanation. I decided to continue development, and that I should provide a scoring mechanism where a larger score is better, as is more conventional.

I wanted the game to be available for iPhone and playable for free in Flash on an (ad-supported) web page, after the success of CANABALT and Bejeweled, where the free browser versions serve as both demos and promotional tools for the paid iPhone versions. I also decided at this point that social network features should be incorporated to help promote the app.

iPhone development begins

Although I could have continued to use Open Frameworks for the iPhone version, I felt that Open Frameworks included too many modules that would go unused and would be overkill for this essentially very simple project. I also wanted to learn Objective-C. Porting the main logic from my prototype was very easy since it was written in C, but it took several days to learn Objective-C syntax, how View-based applications work on iPhone and how to draw custom things in a view. I later found this article, which would have helped understanding immensely.

After about a week the first iPhone version was testable on users. This proved more convenient than the PC version since I could whip out the iPhone whenever someone was around and show them immediately. In this version, touches replaced clicks, swipes replaced cursor keys and I had added a scoring mechanism.

Having experimented with various combinations of grid size and number of colours, I chose a 9x8 grid and four colours. The four colours were based on Van Doesberg's red, yellow, blue and white. At first these were chosen directly from an image of a Van Doesberg painting but after testing on the device in different lighting conditions I devised a more vibrant palette.

The scoring mechanism was devised as a by-product of the colour-matching algorithm. When a matching colour was found, the score total was added to the previous total, beginning with 1. So the multiplier of removing larger groups of rectangles followed the fibonacci sequence. This lead to some really giant scores that soon threatened the readability of the one-line score display and to seemingly un-earned points rewards. I knew I had to revise the scoring. I also realised that the initialisation of the grid sometimes lead to uneven numbers of each colour, which would lead to some starting configurations potentially scoring more than others.

Flash version

To get back to easier problems and widen the scope of testing, I ported the code to a Flash version in about a day and put it up on my website. The ActionScript 3 compiler seems to be a lot more picky, and I found a couple of small errors in my array-manipulation code thanks to the often elusive null-object reference exception.

In Flash I was able to spend more time directly tweaking the graphics, since I could draw everything myself and didn't have to use any built-in controls.
I fine-tuned the colours using Adobe Kuler, where I was able to import the palette directly into Flash. I then converted the hex colour values back in Objective C using a convenience macro. I also made my own equivalent of the iPhone "Alert" popup for consistent interaction between the versions, but making it fit the visual style of the game.

Since I could iterate rapidly and share my results quickly with friends over the internet, I used the Flash version to experiment with the number of rectangles and different scoring mechanisms. When settled on a change, I immediately ported the change back to the iPhone version for "in-field" testing when I went out.

Replacing the entirely random initialisation of the grid with a random placement of an equal number of each colour took half a day by itself as I investigated the mind-bending back-to-basics problem of shuffling arrays. I needed a method I could precisely re-implement in both languages and rely upon to be exactly equivalent in each version of the game. I eventually found the Fisher-Yates shuffle which is beautifully simple and efficient.

I replaced the scoring mechanism first with a simple counter of the number of rectangles joined in a single move, which meant every game ended with the same score. This proved there were no errors in counting. Then I made the count add to itself, essentially making the score algorithm 2 to the power of the number of joined rectangles. This satisfied my love of 2^n numbers, the need to have a sharply rising score as a powerful encouragement to the player to join more rectangles, and provided a score mechanism which could be deduced fairly easily by the player.

Name, Logo, Icon

Although I had visions of the name Stijl being very hip and cool and indicating the artistic origins and homage of the concept, I knew it wouldn't search very well and wasn't easily pronounced or memorable outside of art/architecture/design lovers and the Dutch. A single session of brainstorming with my mate Stu produced the name Rectangulous, which seemed to fit and made us both laugh.

Deciding on the name gave me something to start making letter-forms and logos for, which I always love to do. I decided to focus on the initial R for the logo/icon and drew several iterations of letters built out of squares in the colour palette. I like the idea that the R might not be immediately apparent to everyone in the arrangement of squares, but that the relationship with the game graphics is firmly established. I also wanted it to look like the letter had emerged from the game itself, or been built by a skilled player.

Social Networking

I decided that the minimum requirement of social networking features to be implemented should be the sharing of scores. I chose to implement Twitter and Facebook as the leading, dominant social networking tools of the moment, to save the paralysis of choice for users and to gain experience using these platforms.

After much investigation of the Twitter API docs, searching revealed Shaikh Aman's TwitterAgent which made things a lot easier (UPDATE: I since switched to Twitter+OAuth by Ben Gottlieb). I didn't get FacebookAgent to work, but had begun to make progress with the Facebook iPhone SDK and Actionscript API. This took a long time to get right - more than a week in total - as I learnt about Facebook's expected authentication transactions and the different ways of using the platform. I was slowed greatly until I found a workaround to some bug with the Facebook iPhone SDK where I had to introduce a small delay before proceeding to the next step of each transaction, like so:

[NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(fblogin) userInfo:nil repeats:NO];

I was developing simultaneously for iPhone and Flash, swapping back and forth when I hit problems or found a solution. I found the Flex for Facebook tutorials from Adobe very helpful, but I had to strip a lot of stuff out as I was using the full Flash IDE. The tutorials were especially useful when building the authentication in the html page for the Flash version. Additionally, I had to add a callback from Flash to Javascript for the Facebook permission dialog, which you can view the source for on the Rectangulous page.

It was quite a thrill when I could finally write to my Facebook wall from the properly registered Rectangulous Facebook App page. I installed the iPhone version on Stu's iPhone and he very helpfully spammed all his Facebook friends with loads of score updates for testing.

Symmetry Bonus

I had the idea to add a symmetry bonus early on in the game concept, when I was thinking of the game as an interactive painting, and perhaps rewarding beautiful compositions. I thought it would be a cool hidden feature that would add a new gameplay dimension for those that discovered it.

Checking for symmetry was not so hard, since I could just compare one half of the array with the other for corresponding entries. For convenience and to avoid a potential cheat I changed the grid size to 8x8, since odd numbers mean the central row or column would always be symmetrical (compared with themselves). What proved much harder was giving worthwhile score bonuses, since the more shapes and colours used in a symmetrical pattern, the harder it is to have achieved that pattern in the game. This meant I had to count the number of each colour in the array, which necessitated first sorting a copy of the array.

Revisions

Bugs aside, there were plenty more revisions after this, based on people's reactions and play-testing.

To better match the visual style of the Flash version, I found out how to override UIAlertView and make a custom-drawn background.

I re-drafted the instructions and score announcement text many times, to try and get across as simply and immediately as possible how to play. Despite this, many users simply did not read instruction text in an alert, preferring to investigate by trial and error.

Not wanting to interrupt the taskflow of instant-action gameplay with an extra screen, I considered putting visual instructions in the splash screen. However, this could equally be ignored or even missed. Users were mainly stumbling over the concept of moving the rectangles, and the "hidden" interaction of swiping to do this. It was also impossible to play the Flash version using only a touchscreen, as no swipe gesture was implemented. I realised these problems could very simply be overcome by adding arrow buttons for users to press, as a prompt for the interaction required. This also meant moving the rectangles around lots of times was a bit more comfortable on the iPhone.

Since the user cannot use the arrows until at least one block has been removed, it made sense to hide them at the start of gameplay. In their place I put instructions for the first move, and a short description of the aim of the game: "Tap a shape to remove it. Remove bigger shapes for higher scores". After tapping, the text disappears and is replaced by the buttons. This tiny piece of context-sensitive progressive disclosure prompts the user to pay attention to the new element and the new possibilities they open up. In testing on a few users completely fresh to the game, the barriers to understanding were evidently lowered even further, with everyone grasping the game with no extra instruction much more easily and in the fastest time yet.

Users also found it easy to ignore or not notice the score display at the top of the screen while they were engaged in actively clearing the screen of shapes. The last addition before submitting to the app store was to add a score indicator that appeared at the place of the last tap to show the relationship between a particular tap and the score obtained.

I did this on iPhone by animating a single UILabel through alpha and transformation after each tap:

//animate a "growing" score label that fades out
//format the score with thousands separators:
NSNumberFormatter *numberFormatter = [[[NSNumberFormatter alloc] init] autorelease];
[numberFormatter setNumberStyle: NSNumberFormatterDecimalStyle];
		
lastScoreLabel.text = [numberFormatter stringFromNumber:[NSNumber numberWithInt: multiplier]];
lastScoreLabel.center = [touch locationInView:self]; //put the label at the touch point
lastScoreLabel.center = CGPointMake(lastScoreLabel.center.x, lastScoreLabel.center.y - 24.0); //move it up a bit so the finger doesn't cover it
lastScoreLabel.transform = CGAffineTransformMakeScale(0.3,0.3); //scale it down (I used a large font for smoother text)
[lastScoreLabel setAlpha:1.0];  //make the label visible

//now animate from those starting conditions to full-size and fully transparent
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[lastScoreLabel setAlpha:0.0];
lastScoreLabel.transform = CGAffineTransformMakeScale(1.0,1.0);
[UIView commitAnimations];

The future

Since the game is so simple, making variations of it should be quite easy. Development took less than 1 month in total. I also have the idea to add high-score tables for the player's friends like Bejeweled Blitz, since competition is a powerful incentive to better scores while not disinclining users exposed to huge worldwide scoreboards.

Making Rectangulous has been immensely fun and educational, and I can't predict what users are going to make of it worldwide. I just hope everyone enjoys it as much as I do!