Tilegame level editor in Flex

In my spare time I’ve been working on a tile-based level editor. It is still in development, but has the basics covered. The idea is to make it available for free when it is done. It will be a standalone Air application (so it can save files to the disk) and hopefully will become a full game development tool. Here a video of the basic features currently available, if you are interested to beta test the app when it is done leave a message with your email so I can contact you when the beta is ready.

I got inspired making this editor when I was reading this tile game tutorial by Mattias Stridsman. I wrote a tilescrolling script based on this tutorial that will be used for previewing and testing the levels within the editor. In my opinion this way of making game levels is more versatile than using grid based tile levels where each tile needs to be defined, where in Mattias’s example you cluster tiles in one rectangle so that you only describe the position, dimensions and graphic of the tile.

The artwork used in the video is by David Baumgart

ClickTag script for designers

For some reason I’ve been getting lots of calls and mails from friends and clients about clickTag’s and how they work. I noticed that allot of people have trouble understanding the concept of it. I get requests for a clicktag implementation and then 1 day later they send you the link it needs to refer to to be embedded in the flash file…
Then you have the 3rd party that has to place the banner on some site and who claims that the clickTag doesn’t work, then after looking at the html you see that the flashvar set is “clickTAG”, “clicktag” or “clickTag”. Because allot of people involved in this banner terror have no programming or scripting experience they don’t know that upper and lower case have a different interpretation. Then if they do get it they sometimes get misinformed by the documentation. I’ve seen multiple documents that were composed from different sources that use “clickTAG” in the HTML example then “_root.clickTag” in actionscript.. so no wonder that it doesn’t work.

I grew a bit tired of these endless discussions with people that don’t understand how it works so I wrote a small script that pleases all people involved.

The script allowes you to set a backupLink for the banner so if no link is placed in a clickTag it still redirects you to the embedded link. This you can use to please you partner company that keeps sending you links while you only need to place a clickTag.

Then we have the different notations “clickTag”, “clickTAG” and “clicktag”, the scripts runs trough all the options and uses one as soon if it finds a link in one of these variables.

Another extra thing I added is an optional flashVar that can be placed to set the target of the link, by default this is a new window (”_blank”) but ofcourse can also be set to “_self” or a different target.

So how do you use this?

Well you download the clickTag.as file, create a new layer in your Flash document on root level and paste the following code as frame action:

var backupLink:String = "http://www.somelink.com/page.html";
#include "clickTag.as"

Replace the backupLink with your own link. Then you create your button that needs to activate the link and give it the instance name “hitZone” (case sensitive).

Source files

Alpha blending CSS TextFields in ActionScript 3

The problem I encountered with CSS driven TextFields in AS3 was that I was no longer able to use “embedfonts = true” to be able to set the TextField alpha. To solve this issue you can use blendModes on the TextField object, as in the following:

myTxtField.blendMode = BlendMode.LAYER;
myTxtField.alpha = 0,5;

This also works with a mask over a textfield.

Example

Source file

Do realise that using blendmodes you increase the clients CPU load.

Arch.Maaik game

Last saturday we launched the Arch.Maaik game at his 5 year anniversary. The game is currently being prepared for online use and will be here in a few weeks.

The game was realised together with Matt Baay (in-game gfx) and Eric Weterings (intro animation & sound).

WNF Rangergame

Last month in cooperation with MediaRijk we developed a topview game for WWF that was part of the tv show and can be played online on the Jetix site.

Click the image to play the game.

You can watch the broadcasts on Jetix each sunday starting March 1st at 10:40.

Here the jetix mini site.

BitmapData/draw() and checkPolicyFile

Today I ran into the following error:

SecurityError: Error #2122: Security sandbox violation: BitmapData.draw: http://exampledomain.com/file.swf cannot access http://exampledomain.com/images/image.jpg. A policy file is required, but the checkPolicyFile flag was not set when this media was loaded.

The error was generated by a class in our util folder that we use quite much, but we never had this problem. Well as the error is mentioning, the checkPolicyFile is not set because the LoaderContext is set to null when you don’t supply one in the Loader.load(request:URLRequest, context:LoaderContext = null):void. The strange thing is that the browser is loading the images, only when I create a bitmap and want to draw() the bitmapData I get the above error. I don’t get why it doesn’t check the policyfile when I request the image from a different domain. In order to get rid of the error I did the following:  

1
2
3

var loaderContext:LoaderContext = new LoaderContext();
loaderContext.checkPolicyFile = true;
Loader(_loader).load(_req,loaderContext); 

So adding the loaderContext with checkPolicyFile on true does the trick.

onBWDone problem Flash Media Server with AS3

I ran into a small problem today while testing FMS 3, and had some problems finding the solution. I eventually found it and would like to share it with you.if you get the error:

ReferenceError: Error #1069: Property onBWDone not found on StreamTest and there is no default value.

Make sure that you map your NetConnection.client to a client class or the class you are working from. Then create the method onBWDone in the target Class. :

1
2
3
4
5
6
7
8
9
10
11
12
13

private function setConnection():void
 
{
 nc = new NetConnection();
 nc.client = this;
 nc.addEventListener(NetStatusEvent.NET_STATUS, onNetStatus);
 nc.addEventListener(AsyncErrorEvent.ASYNC_ERROR, onAsyncError);
 nc.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
 nc.connect(appURL);
}
 
public function onBWDone():void{
}

 Why is this happening?
Well if you look into the VOD application on the FMS server you will see that the application performs a BandWidth check and invokes this function on the client when it is done. You can measure the bandwidth speed in order to select a proper stream (assuming you have encoded multiple bitrates of one video). How to use this?
Take a look here.

AS3 onReleaseOutside

It seems to be that the ReleaseOutside we all know from Actionscript 2 is no more in AS3. Why? I don’t know. I noticed allot of people having problems with this lack of feature. The work around has been published all over the web, another reference here will help spread the word. The idea of an onReleaseOutside MouseEvent is that you detect if the mouse is not over the object when it is up. So what you simply need to do is relocate the MouseEvent.MOUSE_UP from the object you want to detect to the stage. So what does this look like? 

// constructor
public function MyClass()
{
	//we use this event to obtain the stage object 
	addEventListener(Event.ADDED_TO_STAGE, onAdded); 
} 
 
// stage object is now available
private function onAdded(e:Event):void
{
	addChild(_yourbutton);
	_yourbutton.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown);	
}
 
private function onMouseDown(me:MouseEvent):void
{
 	trace("mouse down");
	stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp)
}
 
private function onMouseUp(me:MouseEvent):void
{
	trace("mouse up"); 
	stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp)
}

I hope you find this useful.

Virtual Soundscape with DDR input

A friend of me called me this week that he had a problem with a assignment for school. He wanted to make an original concept for this circus poster assignment, and chose to make a poster for the blind. Earlier that week (he was also over for an assignment) he saw my DDR Dance Mat (that I bought earlier to experiment with) and proposed the concept of making an interactive poster with relief that can be pushed on different sculpted sections of the poster. After messing around with a piece of foam, trying to sculpt it in recognizable shapes we realized that that wasn’t going to work. We dumped the foam and started to think of an other concept, we ended up with a virtual soundscape that is lets the user roam through the circus environment.

Here we see the visual representation of the virtual environment (click the image to see the demo). The black dot is the user and is controlled by a DDR Dance Mat. The red dots are sound source, around the red dot you can see the range of the audio that is connected to its volume. For the Dance Mat input we used a app called ControllerMate, this is a small application for the mac that can recognize USB devices and port these trough to all kinds of output.

If you would like to see how it is done, click the following link to download the source files (Actionscript Project made in Flex)Source.zip [11.34 mb] 

LocalConnection and ExternalInterface

For my Flashden portfolio I made an example of the different ways of communicating between different SWF’s and the browser. It demonstrates the bi-directional usage of LocalConnection and ExternalInterface.

 click image for demonstration

It is written in AS3 together with a little piece of javascript and needs to be run in a webserver environment to avoid sandbox violations.