Untangle Deluxe Developer Diary – Part 1: Backgrounds and levels
September 9th, 2010
I’m porting a game from Flash to Objective C / iPhone, and for the fun of it i wanted to document my headeaches here. The original game can be seen here:
Personally i have´nt seen this type of game before, even though i consider myself an old rat in the gaming bussiness. Unfortunally after searching the AppStore i found that there was already 4-6 untangle type games. None of them looked as good as the Untangle Deluxe though, so i am still hopefull
Step 1 - Backgrounds
I got all the graphics from Nonoba in a .fla file, so the first step was therefore to manually export every piece of graphic from the Flash file to .png.
The game starts on the ground, where your task is to follow and untangle a string to your kite. The levels are therefore pretty tall, as they progress vertically throughout the game. My first decision was therefore whether the game should run in landscape or portraitmode. I know you can make a game adaptable to booth, but that is just a road you don´t wanna walk! After looking through some of the levels in the original game i decided to go with the landscape mode. The original game was running in a 600×500 window and had an aspect ratio of 1.2, that meant i had to scale and cut the graphics to fit the 480×320 (1.5) iphone display.
I started with exporting the background graphics for world 1, which when scaled to a width of 480 pixels was still 4480 pixels tall. The maximum OpenGL texture size on the iPhone is 2048×2048, so obviously i had to split the image into several smaller images. Even though a texture that large was acceptable it would still have consumed too much memory for me (and the iPhone) to accept, so splitting it up was the only choice anyway.
There are 16 levels in each world, which leaves a vertical progression of 250 pixels for each level. Which means that everytime you complete a level the view moves 250 pixels up the tree. Instead of manually splitting the PNG file up i of course did i programatically.
( <- The picture to the left is a scaled down version of world 1)
Step 2 – Loading the leveldata
I got the level data as an actionscript file, which consisted of nothing but pure multidimensional arrays like this:
$.Init.Levels = [ [[181,174,0,218,58,0,330,117,0,318,296,0,345,336,0,383,357,0,426,357,0,472,351,0,511,363,0,540,395,0], [8,9,0,7,8,0,6,7,0,5,6,0,4,5,0,3,4,0,2,3,0,1,2,0,0,1,0,0,3,0,1,3,0,0,2,0],[],[]], [[227,200,0,359,200,0,293,423,0,406,339,0,176,342,0],[2,4,0,2,3,0,3,4,0,1,2,0,1,3,0,0,2,0,0,4,0,1,4,0,0,1,0] ,[],[]],[[290,71,0,290,270,0,293,348,0,294,421,0,224,391,0,359,387,0,224,302,0,357,301,0],
To convert it to something a bit more sane but still save space (i know, it´s only a couple of kilobytes, but i´m from the era where every byte mattered) i converted all the arrays to XML, but conserved the comma seperated strings so it looked a little like this instead:
<level id="2"> <knots>227,200,0,359,200,0,293,423,0,406,339,0,176,342,0</knots> <lines>2,4,0,2,3,0,3,4,0,1,2,0,1,3,0,0,2,0,0,4,0,1,4,0,0,1,0</lines> </level>
It just felt better.. like sorting your socks; at the end of the day it doesn´t matter, but it just makes you feel good (or am i alone on this one?). It also made it really easy to parse with the SAX based NSXMLParser.
When put together it looks like this running in the iPhone emulator:

If you didn’t get it by now the game is about untangling the strings by moving the knots around. I therefore needed to do some basic line intersection detection testing on all the strings. As stubborn as i am i of course HAD to do this manually, without using the internet. So i dug up my math formula collection “Matematik 112″, and boiled it down to the following pseudocode (Where A and B are the points of one line, and C and D are the points of the other)
(Ay-Cy)(Dx-Cx)-(Ax-Cx)(Dy-Cy) r = ----------------------------- (Bx-Ax)(Dy-Cy)-(By-Ay)(Dx-Cx) (Ay-Cy)(Bx-Ax)-(Ax-Cx)(By-Ay) s = ----------------------------- (Bx-Ax)(Dy-Cy)-(By-Ay)(Dx-Cx)
From here it is only a matter of testing whether r and s are between 0 and 1. The only problem here (which puzzled we for a while) was that the lines that are connected to the same knot of course share a common point, which makes them intersect. I solved this by offsetting the points where the lines are connected to the knots by 0.1 pixels (hey, we are in the 21′st century, we work with floating points and ride flying cars, right?)
So, after about a week of development the game is actually already playable. Miles from finished, but the basic gameplay mechanics are done.
Next up: implementing the final two level elements, the black unmovable knot and the snapping slot.


 
 
