Bitmap Parallax Techniques

OK so it’s go go GO on this huuuuge platform game – 9 levels and a 1st March deadline. Yes, Christmas is cancelled. So I suspect that I may go a little quiet on the blog for a bit…

But… I thought you may like to know, I’ve been doing a little test on the best way to do parallax scrolling. What I wanted to avoid is having assets that come off the edges of the screen. If you make a parallax tile that’s one screenwidth, you pretty much always have to have two copies of it on screen because the join will always have to be in the middle of the screen somewhere.

So what I thought I'd try is convert the parallax layers into bitmaps, and then do bitmap fills for each one. The bitmap fill is the size of the screen, and the beauty of this method is that the tiles automatically repeat, because you can do that with bitmap fills.

So having got that working, sadly it seems that the original way is faster, assuming you cacheAsBitmap the layers. Ho hum.

Examples are here :

Using bitmapFill()

Using big tiles that go off the edge of the screen

The number in the top left hand corner is the number of ms per frame (average over 100 frames).

Now I'm going to try drawing the layers into a single bitmap instead. Wish me luck!

Artwork by Plug-in's creative genius Dominic Minns, if you wanna see the (old) Christmas game that these assets are from : Red Nose Racer

XML parsing in Actionscript made easy with Flash XPath – who knew?

Every now and again you find something in Flash that you can’t believe you’ve ever lived with out. Thank goodness Tom Kennett (one of the FlashCodersBrighton) showed me the FlashMX XPathAPI. Never will I have to custom write an XML parser again!

To use the XPathAPI, first you import the library :

import mx.xpath.*;

Let’s say you have the XML file containing this :

<code>
<news>
   <swf_file>C0201.swf</swf_file>
   <options>
      <format>html</format>
      <textcolour>red</textcolour>
   </options>
   <stories>
      <story>
         <heading>PLUG-IN-O-VISION IS REVEALED</heading>
         <summary>GEE-WHIZZ Plug-in's all new website
         has launched!</summary>
      </story>
      <story>
         <heading>FLASH FORWARD in Texas SPEAKER SHOCKER!</heading>
         <summary>Plug-in's technical director presents 3D
         in Flash at FlashForward Texas.</summary>
      </story>
      <story>
         <heading>Plug-in Media Directs Sony Video Nasty!</heading>
         <summary>Sony called upon Plug-in Media to produce EyeToy
         Next Generation promotional film.</summary>
      </story>
   </stories>
</news>
</code>

First of all we need to extract the main node out of the XML object:

var mainnode : XMLNode = myXMLObject.firstChild;

Now using XPathAPI we can get any subsequent node value easily! To get the contents of the tag, we use:

textcolour = XPathAPI.selectSingleNode(mainnode, "news/options/textcolour").firstChild.nodeValue;

You can see there that we can access nodes within the XML structure in the same way that we would access files in a directory tree : “news/options/textcolour”. As the selectSingleNode function returns (unsurprisingly) an XMLNode, we get the contents of that node using .firstChild.nodeValue.

But an even better feature of the XPathAPI is the selectNodeList() method which returns an array of nodes!

For a fuller explanation, check out this informative post at Last Actionscript Hero.

Flash on the Beach (and belly dancer)

Mario steals Dom's ukulele

Well it’s been a week, and I’ve been sooo busy I haven’t even had a chance to post a quick review of Flash on the Beach! We’re just at the negotiation stages of a HUGE Flash game, so watch this space for more information.

Mario steals Dom's ukuleleMario steals Dom’s ukulele (photo: Marc Thiele)

It was an awesome conference, and I had a great time! John did an amazing job and the venue and speakers were all spot on. It was such a privilege to have this conference here in Brighton, and it was great to see my home town in the eyes of new visitors! Thankfully, you all seemed to like it :-).

On the first day we had the Adobe guys doing pretty much the same presentation they did at FlashForward, but hey I only had to travel down the road to see it this time! (I live in Brighton 🙂 )

Then I saw Craig Swann, who’s doing great work with tactile interfaces in Flash, and he’s certainly inspired me to start playing around with webcams again!

Craig enjoying our unique eco-systemCraig enjoying Brighton’s unique eco-system. (photo:Keith Peters)

And then I was called back to the office, so gutted cos I missed my good friend Aral Balkan‘s session. And just when I needed his explanation of how to run a huge software project. Damn it! And then I missed Eric Natske’s session!!! I saw him at Flash Forward in New York in 2005, and he was awesome. But at least I got to finally meet him at the Plug-in party (more below).

The next day, I just about made it in time to see Brendan Dawes – a great session as ever. I really must get a copy of his book… and then off to Marcos Weskamp, who somehow makes boring data look really beautiful!

Then a sneaky look at MS Expression, and then made it to Keith Peters’ session who gave us a quick lesson in AS3 (not a moment too soon!)

Day 3! Up early for my session, which seemed to go down well! Then back to the office again! But thankfully I managed to see Hoss Gifford (nutter) and Mario Klingemann (crazy genius).

But we were all gearing up for the Plug-in Media end of conference party! Which was a bit of an event (to say the least!) Everyone who was anyone in the Flash world was there, and we even had Dom’s ukulele band, and our new friend Zamira the belly dancer. (AKA Michelle Yaiser from Boston)

Really excited about how it went, let’s look foward to the next one! And MASSIVE kudos to John Davey, great work mate!

Snowing screensaver – happy Christmas from Plug-in Media!

As a special Christmas gift, I’ve made a snowing screensaver for Plug-in Media to give away!

I’ve been working on edge detection in images, so now the snow settles on the surface of objects in any bitmap :

Photo - Jorg Mueller

So I thought it'd be fun to make a screensaver that makes the snow land on the windows and icons on your desktop:

Plug-in Media Snowing screensaver

I built it using Zinc, which I picked up at Flash on the Beach. It's only a PC screensaver at the moment, but I should hopefully get a mac version working soon!

UPDATE : I'm having some serious problems with Zinc, and the screensaver is unreliable, so it's been removed for the time being. I'm working with Zinc to fix the problem.

FOTB Flash 3D source files

My Flash on the Beach session went really well, I had a great time and a good turnout despite the early hour (and it was the morning after the official FOTB party!)

As for the 3D Flash source files, I promised them so here they are!

FOTB06 – 3D in Flash source files
[Files no longer available, sorry!]

Send me your experiments and I’ll post them all up here!

(These files are provided under a creative commons share-alike agreement, full details are in the package)

Cool Flash 3D (on the beach)

Wednesday 9.30am – Flash on the Beach

Unbelievably, December has hit us with all the force of a runaway train, and Flash on the Beach is upon us!

And even more unbelievably, I’ve actually got my whole presentation planned and ready to go!

BRING YOUR LAPTOPS! we’ll be working through the exercises there and then, and you’ll all have the chance to play with the examples.

It’ll be a much more hands on session than the 3D presentation for FlashForward and I’ll be taking you through, in small, easily digestible chunks, everything you need to know to render 3D objects in Flash Actionscript.

First up, how to store a point in 3D space, and more important, how to render it, and rotate it:

Then we'll move on to applying an image to each point to make 3D sprites :

And we'll use exactly this technique to make a photo carousel :

And then, break up a photo and turn it into 3D :

Enough messing around with flats, let's actually start making shapes! Set up the points :

And now make a plane for each side :

Fill the planes with a colour, and only render the planes that are facing us (back-face culling) :

And finally, let me explain how to do texture mapping! (It's not that scary 🙂 )

As, you can see, I'll be breaking up bit by bit, and showing you, in the simplest terms, how to program the basics of 3D. Full source code will be provided (I'll upload it tomorrow).

And I'll see you on Wednesday!