sbeam.dk
 
Blog Projects Music About me
 

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:

Untangle Deluxe

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.




Why Ubuntu (and Linux in general) makes my eyes bleed

June 12th, 2010

Time after time i hear so much talk about how nice Ubuntu looks nowadays, that i decide to give it a go again. Unfortunately i also get disapointed time after time, by seeing just how much really basic stuff just sucks. Seriously, so many talented people are working on this, and it even has commercial funding by Canonical. Can someone explain me then why the GUI and the general graphic presentation of Ubuntu just looks like a cheap dodgy shareware program?

As an example, i took not just a random screenshot, but the very first screen you are presented with when you install Ubuntu. As everyone knows, first impressions last, so this should be a pretty crucial part:

Ubuntu wrong

(Drag mouse over to see my edited version)

For everyone with just a tiny sense of layout and margins, this is just a nightmare. Everything is squeezed together, and it just looks messy and amateurish. In general the background, the colors and everything has a really nice look, so i am guessing that some kind of graphic artist must be involved, that knows what he is doing. The question is then, is it just a bunch of long haired hippie open source programmers that is messing everything up afterward? (let the flamewars begin!)

This is an issue not only in the above installation screen, but throughout the entire distribution.

Note: I am not a graphic artist, but i took the liberty of correcting (quite a few) things on the above screenshot. Everything is probably not perfect, but i think most people will agree that i has a much more straight look. It took me ~15mins to make the corrections, why haven´t anyone done this before? Come on, it´s version 10.04? :P (yes yes, i know, open source, i should do it myself)




Shadebobs on the Nintendo DS

December 15th, 2008

It’s exam time here at DTU right now, and therefore i have tons of sparetime for coding cool stuff for my consoles (someone might disagree on that statement) :P

Last night while waiting for some old QIC-80 tapes to restore on my 486, i coded this classic shadebobs demo effect for my Nintendo DS.

shadebobs 2  shadebobs 1

 

shadebobs 3   shadebobs 4

 

(Screenshots are from the DeSmuME emulator, but of course i tested it on the real thing as well)

 

Shadebos running

I have custom firmware on my DS, and using some custom drivers for my wireless network card on the PC, i can upload the code to the DS directly from visual studio :)

It’s nothing you have’nt seen before, but if anyone should want it, here it is:

Shadebobs DS source

Shadebobs DS Binary




 
 

Linux powered PHP powered Valid CSS Valid XHTML 1.1
sbeam.dk by Peter Boné -