Archive for October, 2005

Flash8.5 released

Get Flash8.5 and the Flex2 Framework from the Macromedia Labs. I am currently downloading the whole package and already read something about compiling. Most of the AS2 Classes won’t work with the new compiler. Maybe some IRC Client release today? I’ll hurry!

Do not miss the AS3 Language Reference and also the Socket documentation. And what a shame for Macromedia. This gets on my nerves.

Why is it not possible to do something like socket.onSockread = function( input: String ) { trace( input ); } where input is the next CRLF terminated string.
Now we have to write functions which combine those bytes together to a string and fire an event when there is a CRLF. Well done :-(

Update:
After some time of tests and experiments I had a lot of problems. Flex2 (and all that stuff) seems too overload to me. I never really used Eclipse because I don’t need all that tools which this IDE offers. Now it is like jumping into the cold water for me and I think I am not alone.

Ok, Flex was just installed and I created a new Actionscript3 project. The output was kinda like .NET

[as]package {
import flash.display.MovieClip;
public class IRC extends MovieClip {
public function IRC() {

}
}
}[/as]

I tried to create an instance of my Main class in that IRC() function. First I added the classpath and then a simple var main: Main = new Main( this, width, height ); and I was not able to get anything out of it. Even trace() (which is now defined in flash.util) gave no output for me. Wow, no classes worked, I got not even a trace(’hi’); out of it. Using moveTo(), lineTo() etc. did not work for me. Of course it is me who is doing something wrong. Anyway - I stopped trying to compile my classes or even to get new code working.

Now I started with a Flex project and I am not very excited about that part. It’s all like .NET. You have your states and elements you can drag on stage etc. The IDE generates some code and it is all XML. I am not an XML fan but did you ever developed an application using XML?

I stopped after having this code and a nice first form of lables and input boxes. I stopped because I was bored reading about how to include own ActionScript now into that evil XML.

It will take a long time to get into all the new stuff. But for me an updated MTASC would be enough. Maybe I can make MTASC compile with the new classes :o)

BinTree and AVLTree

According to the list classes I have some binary and AVL trees. They work the same way like the list but they have got some more functions like find() and a sorted trace() to debug the data. There is also an experiment which shows the difference between both kinds of trees.

[as]import de.je2050.util.tree.Root;
import de.je2050.util.tree.AVLRoot;
import de.je2050.util.data.*;

var bintree: Root = new Root( new NumberData( 50 ) );
var avltree: AVLRoot = new AVLRoot( new NumberData( 50 ) );

for ( var i: Number = 0; i < 10; i++ )
{
var n: Number = random( 100 );

bintree.insert( new NumberData( n ) );
avltree.insert( new NumberData( n ) );
}

// because both trace methods sort the output automatically you wont see any difference
// but the find function of the avl would be much faster
trace( 'bintree' );
bintree.trace();

trace( 'avltree' );
avltree.trace();[/as]

List and SortedList

Here are two sorts of lined lists. They are easy to use and not very hard to understand. You can simply insert() something into a list and walk() through it. If the list is an instance of SortedList it will be sorted automatically.

[as]import de.je2050.util.SortedList;
import de.je2050.util.List;
import de.je2050.util.data.*;

var simple: List = new List();
var sorted: SortedList = new SortedList();

for ( var i: Number = 0; i < 10; i++)
{
var n: Number = random( 100 );
simple.insert( new NumberData( n ) );
sorted.insert( new NumberData( n ) );
}

trace( 'unsorted' );
simple.walk( trace );

trace( 'sorted' );
sorted.walk( trace );[/as]

flIRC - Preparing for Flash 8.5 and the Flex builder

Working on flIRCAs I mentioned some days ago I am working on an IRC client for Flash 8.5. Of course there is currently no version in circulation but why not start developing a RIA which will be complete with all the new features? Of course it is only the public alpha but the use of binary sockets will be possible with 8.5 and with the Flex builder and that is so great. Because I do not know how compiling will work I started with a 100% MTASC project. On the one hand there is the possibility to build the 8.5 version with a new MTASC release and on the other hand the Flex build will hopefully compile my Main class without much problems.

I will release the whole application as an open source project here when it is done. Maybe this might be interesting for somebody. I also started to document my classes. But using components and packages of other people (the as2base for example, which does not compile with MTASC) makes it hard to comment everything understandable.

Flash 8.5 - binary sockets again

There is a thread on the FlashKit forums about the 8.5 FlashPlayer. After some speculations and rumors Mike Chambers issued a statement and revealed some interessting facts. This is the most important one for me:

“3. Binary sockets basically allow you to connect to anything, and create custom protocols. want to connect to an email, ftp or irc server directly? Go ahead. Don’t like Flash Remoting? Make your own binary protocal. Want to send images to and from the server via a socket? sure thing.”

Get the point? Instead of using PHP as a proxy between client and server you will be able to establish direct connections. Well all this featrues were of cause possible in the past but remember there is a huge difference between a real client-server connection and reloading some PHP script every second and getting XML data back into Flash.

IRC is a good example for a new possibility. It’s the same with FTP but that could be faked (cause it is no problem to navigate through the server and cache the paths and lists). A PHP script can never do what you need. Because the script can’t keep the connection to the IRC server established after it has been executed etc.

I was addicted to IRC long time ago and did a lot(!) of stuff using MSL. It is something nostalgic for me and well - maybe I can remember all that RAW events and numbers to present some IRC classes here on 17th of October :-)

Update:
Another reply on binary sockets by Mike Chambers:

“No listening socks (we have to save something for the release after 8.5!).”

No P2P games, no PASV mode for FTP clients etc. But this is not that bad. A person browsing without a firewall and/or router is very frivolous and because of that most ports will be blocked. And then try to explain to a user he has to open port 123…

I also started working on an IRC client. What I can prepare is the view and lots of utils. The only missing thing are the sockets and then the implementation. I think the sockets will work with some addListener() methods etc. so it will not be too hard. Can’t wait to test all that new stuff.

Flash8.5 - Binary sockets and E4X

Macromedia announced the upcomming release of Flash8.5 and ActionScript3.0 yesterday. Most people have read about the new key features. I will list them here shortly:

  • Actionscript3.0 and the AVM2 (Actionscript Virtual Machine 2)
  • Runtime error-reporting and improved debuging features
  • Binary sockets
  • Regular expressions
  • E4X

I won’t talk about the AVM2 and error-reporting here. You can read about this on lots of other blogs. Of course ActionScript3.0 offers more performance but this nothing new. Imagine all the other releases and the performance increase was very poor in my eyes. Now with the completly rewritten virutal machine and strict datatyping it might be more powerfull like Java is. I am not sure if I get the message but strict datatyping means to me an integer is something different from a float. This could speed up all the bitwise operators. Not sure about this - I think Macromedia does not introduce really strict datatyping. The Number is currently a native object which covers all kinds of numbers like a float, integer or byte. Same thing with Arrays and Strings. Strict datatyping would cause some Pascal/Delphi syntax like data:ARRAY[1..100] OF INTEGER (which is very ugly) or C like int data[100].

Next improvement are binary sockets. A quote from this site says:

“It includes binary socket support, allowing developers to extend the player to work with any binary protocol.”

Now how can we interpret that? UDP for example is a binary protocol. TCP/IP is also a binary protocol. Binary sockets are such a relative term. What is special about binary sockets?

Imagine the following word “telekinesis”. The binary representation would be 116 101 108 101 107 105 110 101 115 105 115. Every byte goes from 0 to 0xFF which means you can also read things like the byte 0. Imagine you have a multiplayer game and you want to submit the position and scores with every package. Using ASCII would create something like 110;234;0. Where x-Pos is 110, y-Pos is 234 and score is 0. The same information using binary data becomes nĂȘ[ZERO BYTE]. Now you were able to reduce your data from nine to three bytes. Because the 0-byte got no ASCII-representation I have to write [ZERO BYTE]. The ASCII-Data in binary representation means 110 234 0. You get the idea?
This is the special thing about binary sockets. Now what can be done with sockets and what does Macromedia mean with “any binary protocol”? Any binary protocol like HTTP, FTP, POP? Or TCP/IP, UDP etc.
Well, everything is nice! Imagine your personal site which can google for you using the HTT-protocol with a pop3 client that browses through your inbox. All that done in Flash. UDP would be so nice for multiplayer games or server-browsers for example.
And peer-2-peer games. Direct data exchange between the clients. Wow, that would be marvelous!

The regular expressions really assist the sockets. For example downloading a website and searching for information is so easy using RegExps. I hope they will be fast and easy to use.

And last but not least E4X (ECMAScript for XML). This makes the use of XML very easy and hopefully fast. Some examples can be found here. If you are firm with XML it is easy to understand and great for a lot of applications (e.g. shops).

Fast pixel-scroller

With Flash8 you have got all that nice stuff. Since every release Macromedia anounces more performance. In most cases this is true, but just try the following code in Flash7 and Flash8

[as]var i: Number = 0;
var sum: Number = 0;
var sin: Function = Math.sin;
while ( i++ < 100000 ) sum += sin( i );[/as]

You won't get much differences in speed because Flash is way to slow to handle 100000 iterations. So if you want to do draw a 100x100px image by using something like this you won't have any chance of a good framerate (even if there are just 10000 iterations).

[as]var i: Number = 0;
var j: Number;
while ( i < 100 )
{
j = 0;
while ( j < 100 )
{
x.setPixel( i , j , calculateColor(i, j));
j++;
}
i++;
}[/as]

Of course you can see the 100x100 iterations here. You get the idea. Using loops to iterate through every pixel is not fast enough. This is and was slow since the release of Flash3. So where is all that performance they are talking about? Let's try to find out.

The best example in my eyes is a tilemap engine or so called pixel-scroller. Strille developed long time ago an object-based scroller. You can find it here and read about the technique here. The framerate of about 40fps (on my machine) was a huge step forward and very impressive. Now we have all that nice filters and BitmapData stuff and it should be possible to get more fps. Of course the filters won’t help us here.

The idea of a Flash8 pixel-scroller is very simple: Load all tiles and draw them into one big BitmapData. Then scroll only this one object instead of attaching, removing and repositioning tiles every frame.

The first thing you have to do is drawing all tiles into the BitmapData. This should not be to hard, because there is the function copyPixels() which makes it easy. But there is a very silly problem. The maximum size of a BitmapData object is 2880×2880px (I think). A simple map with 16×16px tilesize and a width of 200 tiles makes 16px * 200 = 3200px which is more than 2880px. What you have to do is to split the map up into several objects.

There is a simple workaround to solve this problem. Even if the maximum size of a BitmapData object is 2880×2880px the maximum size of a MovieClip is unknown to me. So what about splitting up the map into some BitmapData objects and draw all tiles by using copyPixels. Then using attachBitmap() to draw all bitmaps into MovieClips and putting them together. I have done this in two classes called BitmapComposer and TileComposer. What you see on the figure is the composition of all bitmaps and the pink rectangle is the viewport.

The last problem is the scrolling. How to scroll for example 4 very large MovieClips without losing performance? A simpls solution is using a mask. But do not forget we are using Flash8. And there is such a great feature which is called scrollRect. You just have to use the flash.geom.Rectangle to set which area is displayed. This makes scrolling very fast.

What are the problems of this method:

  • Your map is static - no animations
  • Tiles can not be removed or attached dynamicaly
  • It might be hard to understand how to split the map

But this is very great for background-scrollers. Imagine a game which is not tile-based but has got a scrolling background which is tile-based. I would recommend you to use this technique because the performance loss is to bear. Most games I have seen do not have any animated tiles. You could also combine this scroller with another one that is able to deal with animated and dynamically created tiles.

Maybe I will write another post about this because tomsamsom asked me to automate the composition part which is a bit wired. Just a simple explanation here:
[as]var comp: Array = [[[0,1],[0,1]],[[0,1],[1,2]],[[0,1],[2,3]]];
/*
[
[[0,1],[0,1]], // first bitmap. from y 0 to 1 and x 0 to 1
[[0,1],[1,2]], // second bitmap from y 0 to 1 and x 1 to 2
[[0,1],[2,3]] // third bitmap from y 0 to 1 and x 2 to 3
];
*/
var tilemap: BitmapComposer = new BitmapComposer(
mc, // mc to draw
320, // viewport width
240, // viewport height
comp, // composition array
map, // map array
flash.display.BitmapData.loadBitmap(”blocks”), // tiles
0×80, // tiles in x-direction per bitmap-object
0×20, // tiles in y-direction per bitmap-object
4 // tilesize is 1 << 4 = 16
);

tilemap.render( 100 , 100 ); // x and y
[/as]

Speeding up your glow effects

Look at all the glow effects Because of a current project I ran into some problems because I overused the GlowFilter. There are a lot of objects flying around that glow using blendMode add. You can imagine that the framerate directly decreased. Than I came up with four methods to create a glow effect I will list here.

Traditional way:
Create one empty movieclip and attach the object two times into that movieclip. The object with the lower depth has the glowfilter applied and the blendMode is set to add. The pros of this method are that it is very exact. The cons are of course the speed. Every frame needs a new calculation of the glow. This method should be used for objects where the glow accuracy is really necessary.

Cheap way:
Draw a simple shape of your object using radial blur for example. Create again one empty movieclip and attach the shape first, then the object. Now set the blendMode of the shape to add and you are done. This is very fast and cheap. It does not look very good but for some objects it makes sense. Imagine a ball for example or a planet in space.

Caching the glow:
This is a little bit more elegant. You start with an empty movieclip. Then create another empty movieclip and at last attach the object. Now you have to apply the GlowFilter to the object and draw that into a BitmapData. That can be attached to the other empty clip and the blendMode should be again set to add. Now you don’t have to draw the shape by yourself but of course if the object is animated it does not look very good because you will see that the glow has been cached for the first frame.

Simple code example:
[as]// imagine you have got the clip character
// another clip is character.characterMain
// and last but not least character.characterEffect
// —

// initialize filter
var glow: GlowFilter = new GlowFilter(0xFF99FF, 0×10, 0×10, 0×10, 0×01, 0×06, false, false );
characterMain.filters = [ glow ];

var matrix: Matrix = new Matrix();

// translate to correct position
matrix.translate( 40, 40 );

// correct size because of transition here
var bmp: BitmapData = new BitmapData( characterMain._width + 20, characterMain._height + 20, false, 0 );
bmp.draw( characterMain, matrix );

// attach bitmap and cache clip
characterEffect.attachBitmap( bmp, 1, ‘auto’, false );
characterEffect.cacheAsBitmap = true;

// sweet blend mode
characterEffect.blendMode = ‘add’;

// reset filters
delete characterMain.filters;[/as]

The last thing I can mention here is another method I never tried. You could cache every frame into a BitmapData. A thread in the FlashKit forums describes how to use BitmapData objects for animation. This should be the best way because it is fast and dynamic.

Naobie Snake

Naobie Snake III
This was definitly the first real flashgame I developed in connection with Henning Franke. The first version “Naobie Snake I” was released in the year 2003 I think. This makes the game now about two years old and still there are people playing simple Snake. I like to show the game here because it was one of my first steps in game developement. I am also very happy to show some of Hennings excellent graphic skills here. Maybe because we will release another game with lots of eyecandy and new Flash8 effects in the next weeks. Stay tuned!

Cube transitions

Cube transition in actionA customer wanted to have his whole website on a cube. Choosing a section should rotate the cube to the new section. This is very similar to the fast user switch of Mac OS X. When I heard this from my boss I started screaming. This would be totally slow in Flash7 and for such a website is Flash8 too early. But for our presentation we used Flash8 (I also created a working version for Flash7 using other techniques).

The Flash8 cube transition is done like this:

  • Make snapshot of current section to a BitmapData object
  • Do the same with the next section
  • Create a 3D cube with the current section facing the user
  • Rotate the cube around y-axis to next section
  • Substitute the BitmapData with a movieclip

Of course the perspective is not correct. I read a something about the transformations on this very usefull page. Just look at the cube example there and you will get the idea. I will share my code when the job is done and everything is optimized. It is also very funny to have the same effect in Flash7 and Flash8. The Flash7 version uses movieclips that are skewed instead of BitmapData. This gives Flash8 users more speed and also people with Flash7 are able to see the effect.




Close
E-mail It