Seb Lee-Delisle

UPDATE – HTML 5 Canvas version now online

During my session at the Flash Gaming Summit, I showed a very simple 3D particle renderer to attempt to demystify the process of converting 3D into 2D.

The actual code that converts from 3D to 2D is easy! First you have to figure out how much you have to resize things depending on how far away they are. (ie what their z position is).

newscale = f/(f+z);

Where f is a notional field of view. Changing this will change how wide the (virtual) camera is. A good starting point would be 250. Then you multiply the 3D x and y positions by the newscale to get their 2D x and y positions.

x2d = x3d * newscale; 
y2d = y3d * newscale;

So that’s where we put our particle, in this case represented by a MovieClip that we also need to resize by our new scale :

clip.scaleX = clip.scaleY = newscale;

And then the final thing we need to do is sort by the z position so that particles in front appear above particles in the background.

particles.sortOn("z", Array.DESCENDING | Array.NUMERIC); 
for(var i:int = 0; i< particles.length;i++)
{
	particle = particles[i];
	particleClip.setChildIndex(particle.clip, i); 
}

There’s some other stuff in there too, to create the depth of field blur and also the bitmap trails, but have a look and see what you can do with it.

Download the source code for simple 3D engine.

* I haven’t actually counted the number of lines. I’m guessing it’s about 10.

It was great to catch up with Pablo and the ActionScriptHero crew in Amsterdam, and we had a good chat about the future of Flash, the exciting changes in digital and what inspires me.

FITC Amsterdam 2010 – Seb Lee-Delisle Interview Part 1/2 from ActionScriptHero.org on Vimeo.

FITC Amsterdam 2010 – Seb Lee-Delisle Interview Part 2/2 from ActionScriptHero.org on Vimeo.

I’ve just finished my Brighton training courses which were seriously good fun, and everyone seemed to enjoy themselves, I’ve certainly got excellent feedback so far!

My next training course is short notice; it’ll be a Papervision course in San Francisco on the 9th March particularly aimed at 3D games. It’ll coincide with the Flash games summit so if you’re interested, let me know and I’ll make sure to get in touch with more information as I have it.

Then it’s on to Cologne for FFK in April, where I’m running both a Papervision3D course and a Flash games training course! More info on the FFK website.

And back to NYC for Flash and the City in May, and I’ll be running courses around the conference. Again, mail me if you’re interested and I’ll send you the details as they are announced.

And finally in FlashBelt in June, I’ll be teaching a one day Flash games workshop. Teaching you maths by stealth – who knew that you could learn trigonometry from Asteroids and vector maths from platform games? It’s a fantastic conference and I’m really looking forward to coming back for my fourth year in a row!

Can’t make any of these events? Then help me organise one near you! Mail me.

Pete Hellicar and Joel Gethin Lewis put me on to this iPhone app that creates a Lego portrait of you which is awesome. But I thought it’d be fun to do it in Flash in realtime.

(more…)

Anyone playing my Lunar Lander game won’t know it, but we’re spying on them! The game gets around 20,000 hits a month, which is very roughly one a minute or so, so I thought it’d be the perfect vehicle to test out some real-time gaming techniques.

I’ve replaced the original game with one that transmits your position to ElectroServer, although you won’t notice any difference at all. The only way to see the all the current players is via the swf below :
(more…)

In preparation for my upcoming Flash game programming training courses, I’m getting my head back into game physics, and I so I thought I’d share some useful collision detection methods I’ve discovered over the last few years.

Reactive collision detection

Collision detection in Flash games often occurs after things have moved. So you have a circle (usually a 2D representation of a ball) and you’re moving it towards a vertical line on the side of the screen (representing a wall). Every frame, you update its position and check whether it’s overlapping the wall.

Which is great, but of course if the ball is moving fast it may go from one side of the wall all the way to the other side between frames and no collision is detected. One way to get around this is to split up the movement of the ball into small segments and run this check several times between frames. This seems pretty inelegant to me so I have always strived to use predictive collision detection methods where my maths knowledge has allowed me! (This is also known as sweep testing, frame independent or continuous collision detection (CCD)).

Predicting when things will collide before you move them

So rather than just check whether the ball is intersecting with the wall between renders, we actually check the velocity of the ball to see at what point in time it would hit the wall if it continued in the direction it’s going.
(more…)

What else to do in the Christmas holidays but finally get my head around ElectroServer? Of course the first (sometimes significant) hurdle in getting started with any multi-user technology is just installing the server on your machine! ElectroServer4 (ES4) is Java based so it should work on OSX, but most of the documentation is for Windows, so I spent today installing it on my MacBook and thought I would share what I learned.

ES4 runs on Java 1.6 and OSX is shipped with 1.5. You can find instructions on getting the update here, but whatever you do don’t complete the steps to make 1.6 the default Java Virtual Machine (JVM), otherwise FlexBuilder won’t work any more!

Now you need to download the Unix package (the one marked “without JVM”) on the ElectroServer downloads page, and unzip it somewhere suitable (I put it in my documents folder).

Then open up a terminal window and navigate into the folder where you unzipped it. (Handy shortcut : type “cd” followed by a space and then drag the folder from the finder onto your terminal where the full path name will be inserted).

There’s a file in here called ElectroServer that you run but you need to tell it where to find the latest JVM. According to this rather useful thread you can do this by typing :

export INSTALL4J_JAVA_HOME=/System/Library/Frameworks/JavaVM.framework/Versions/1.6/Home/

And then start the server normally by typing :

./ElectroServer

At which point you should see the happy message :

16:28:08,523 [main] INFO  DisplayLogger  - 
-=-=-=-=-=-=-=-
Starting ElectroServer 4.0.6
Go to http://www.electro-server.com/ for the newest version.
-=-=-=-=-=-=-=-
Computer Information
	Operating System: Mac OS X
	Operating System Architecture: x86_64
	Processors Available: 2
	Memory Available: 682Mb
-=-=-=-=-=-=-=-
Virtual Machine Information
	Virtual Machine Vendor: Apple Inc.
	Virtual Machine Version: 1.6.0_17
 
 
16:28:14,863 [pool-1-thread-1] INFO  DisplayLogger  - 
-=-=-=-=-=-=-=-
ElectroServer has started successfully

After several hours of fiddling around this was somewhat of a relief.

The next problem was that I couldn’t navigate to the admin panel which by default you can find at 127.0.0.1:8080/admin. But whenever I pointed my browser at it all I got was an empty binary file in my downloads folder. Thank goodness for Twitter where Matt Bolt saved the day with his tweet :

@sebleedelisle Make sure you’re using https, not http – I run into this constantly

Thank you Matt! I have no idea how I would have figured that one out without you! So I just navigated to https://127.0.0.1:8080/admin and it worked.

I expect to be furthering my adventures in ElectroServer over the next few days so I’ll keep you informed of how I get along.

I resisted the urge to title this post What the swc?

For some unknown reason Flash just stopped exporting swc files properly. FDT could no longer see what was inside them. FDT guru Alan Klement kindly offered to help me troubleshoot the problem and he discovered that the catalog.xml file inside had empty script tags.

I’ve heard anecdotal evidence from my friends Owen and Richard that exporting your .swc to the same folder as your .fla file can cause problems.

So I subsequently tried publishing the swc (and swf) to a different folder, and no swc would even appear! I also tried making a new fla and copying everything into it and this didn’t work either. Then I made a new fla and created a symbol, exported it for actionscript, set it to create a swc, and that broke too!

It’s such a weird thing. It basically killed most of my productivity yesterday. And the terrifying thing is that I don’t even really know how I fixed it.

I just came in this morning, and did everything with a new fla directory and a new swc directory, copied the assets into the library and it worked.

Anyone else had this?

I’ve just set up a brand new 2 day training course to teach you everything I know about making Flash games! It’s in Brighton (of course) on the 8th and 9th of February (the week after the Papervision training).

We’ll be covering all the fun stuff, collisions, physics, optimisation, actionscript animation and working with graphical assets and sound. I’ve just put the first draft of the itinerary together and I’m really excited about it – it’s all of my very favourite things about programming ActionScript.

And of course we’ll be using my portfolio of games as case studies, including Jambuster (BBC), Extreme Pamplona (Sure for Men), The Simple Game (Philips) and we’ll even be diving into the code for LunarLander3D in detail.

Early bird pricing is only £250 for 2 days and there are 4 student places, so please book early to ensure your space.

Flash Games Programming in Brighton information and booking.

Just in case you missed it, there’s a 3 page article in this month’s .net magazine all about how we made Big and Small.

I’m so pleased that we’re starting to get some recognition for this site : we’ve just earned our very first FWA Site of the day award, and we’re also a finalist in the Adobe MAX awards!

And we’ve just won another project for BBC, and we went to Pinewood studios yesterday to check out the set. This will also be an immersive Papervision3D project, but we’re not allowed to talk about it yet.