Mazegame solution

To day I was facing a classical problem. I wanted to build a classic maze game. The players task is to guide a charachter out of the maze with help of the arrowkeys on the keyboard .

The classic way to do this is to create MovieClips of all the walls in the level, add them to an array, then loop through the array to find if the charachter hits a wall with the hitTest function. This is a bit clumsy solution if the maze is complex with multiple walls or if I want to make many levels. I can't hitTest one single movieclip with the whole maze graphics in it, because the hitTest function tests the graphics boundingrectangle.

The solution I came up with was to check the colors around the charachter instead. So I just loaded a png image with transparent background and black lines as walls. Then I extracted the bitmapdata with bitmapdata.draw(mazeImage). After that I scanned the charachters boundingrectangle outlines for colors others then white with help of getPixel(x, y). To get the pixels around the charachter I made four loops, one loop for each side, like this one:

for(i=0; i<(player.width+1)/tolerance; i++)
{
xScan = player.x + (i*tolerance);
yScan = player.y;

controlHit(bitmapData.getPixel(xScan, yScan), xScan, yScan);
}

Then depending on where the pixel is found i bouncedback the charachter in the opposite direction.
To check if the charachter has reached the goal I just made the goal in a specifik color.

Papervision 3D hand cursor

viewport:Viewport3D's property buttonMode is what control if a hand cursor should show on ALL or NON 3D objects. If buttonMode=true the hand cursor will show whether or not the materials are interactive, or if you are listening for InteractiveScene3DEvents.

So if you need hand cursor to show all time, set viewport.buttonMode=true; and if you do not want a hand cursor anytime, set viewport.buttonMode=false;

If you need to show a hand cursor on specific target objects, you should set viewport.buttonMode=false; and then have each target object to set listeners. In those callback functions you must use CursorManager.setCursor(id:Class) | CursorManager.remove...

Font Embed

I want to share my experience with working with Flex and font embedding. Today I noticed that an embedded asset including a symbol with text that embedded the same Font as the Flex compiler did - It seemed to result in a conflict of what scope (or sandbox?) the font should belong to.

1) Flex can embed fonts from a flash-8.swf by the @font-face {} tag.
2) Flex can embed fonts in an instantiated AS3 model to a Class type using the meta Embed tag.
3) Flex can also embed or dynamically load an asset.swf that includes embedded fonts, and then have those exposed to any scope (or sandbox?) that wish to register them. And the other way around - the loaded asset.swf may register the fonts embedded by Flex.

Later I will show how. I haven't yet figured out the reason for the above mentioned problem, but let me start by sharing a simple workaround. In this case the asset.swf had some symbols in library with non-dynamic textfields in it. They where imported or pasted into Flash from an Illustrator design. When embedding/loading these symbols, all other text in the applications other scopes did not render. The solution to this was simply to redo the import from Illustrator to Flash first after I made the Illustrator textfields to outlines.

Problem removing blankspaces with split(" ").join("");

Yesterday I was playing around with Adobe Air and flex. My goal was to parse a productprice from an HTML-site by splitting the pricetag in to ”kronor” and ”oren” (pounds and cents) My only problem was that ”kronor” below 10 just contained one number, before that number was a blankspace to balance the textalign on the site.

So I built a function that was suppose to remove the blankspaces with split(” ”).join(””); , but no success. After some testing I tryed the string.charCodeAt(index:Number = 0);. This function returns a “charCode” , the numeric Unicode character code of the character ,at a specified index, this gave the result 160. After some googleing on unicode 160 I found this site http://bytes.com/forum/post1462660-5.html. This sort of blankspace-characters are called a ”non breaking space” http://en.wikipedia.org/wiki/Non-breaking_space. I also found that there are some more types of whitespace - characters that may be used by unicode but not removed by the split(” ”).join(””) – function. So to solve this problem I some how had to force the special character in to the splitjoin-function. After some reading about strings on ”livedocs” ,http://livedocs.adobe.com/flex/3/langref/String.html ,I found the String.fromCharCode(), that simply translates a list of commaseparated Unicodenumbers to a string. So instead of using split(“ “).join(“”) to remove the non breaking space I used split(String.fromCharCode(160)).join("").

3D General

Let's talk about how to optimize 3D for Flex. Keep it low poly, and simple texturing to allow more cpu and framerate. You will need the power for animation in both 3D viewport and 2D. There are several 3D API's and their offsprings for Flex/Flash developers out there. I tried Sandy, but got stucked with Papervision - in the summer of 2008 the branch GreatWhite Effects. Whether they are called GreatWhite, Away3D or anything else I believe in general that it really doesn't matter which one you choose. You should try them all, but you can't be an expert on all of them, and you should choose the one targeted to solve your specific problems or design needs.

3D on the web is not to be compared to modern 3D technology for film effects, computer games, or game consols! The open source community mentioned aboved are doing a tremendous job putting effort into making the API's both stable and effectfull, but as long as it is all about software rendering we must consider following when starting a new project:

a) From a technical point of view, keep it simple shading, low poly, and light-weight texturing!
b) From a design point of view - are you sure 3D is going to add to user experience at all?

These are two mayor considerations when first meeting your client. You don't want to end up with a disapointed client stating that you did not live up to their expectations!

... to be continued

AIR and the pitfalls of the Security Sandbox (and eternal damnation of Singletons)

For a few days now I've been working on an AIR application to generate XML for a product called Sound Manager. Sound Manager, which we built for a client of ours - DinahMoe, is a pretty nifty system which allows them to hand over a couple of as-files to their clients through which the end client's developers can dispatch events describing what's going on in the Flash app. DinahMoe can then orchestrate sounds for the app by linking the events to actions playing, stopping, pausing, transforming, jumping and so forth, in sounds.

In order to lower the complexity for the end client, we put all the code that actually does anything into the sound libraries that are compiled by the guys at DinahMoe (or is it just guy, Johan?). The objects in the sound libraries then listen for the Sound Managers events and do what has to be done... and what has to be done is off course described in XML.

So the AIR admin lets DinahMoe build the XML through a rich interface where actions can be categorized in folders, copied, edited and so on. Then it was time for the testing. In short, I wanted the AIR app to instanciate the SoundManager, tell it to load the XML and the sound libs and then fire the events I wanted to test. Here's where everything goes pear shaped. The AIR app lives in the Application Sandbox, the loaded swf:s liv in the Loca file Sandbox. So they each instanciate their own singletons and all communication is lost.

So I built a swf which instanciates the SoundManager, and let the AIR app load the SWF... but as it was placed inside the apps application directory, it was too run in the Application Sandbox. So I copied it to the same directory as the Sound libraries that were to be loaded... and now they all ended up in the same Sandbox... but still they could not communicate. And here's where I lost hope. So now I return handles through the SoundLibraries and call each and everyone of them with each event. Not pretty but It's the best I could com up with.

So what is the deal? Are SWF:s in the Local File Sandbox prohibited from talking to each other? Is there a solution? Anyone?

All Your Base Are Belong To Flex, Flash, AIR, .NET and such

Here we go. This is the official All Your Base blog for sharing our wisdom and experience in developing RIA:s with Flash, Flex, AIR, .NET and all other things cool and nerdy.