Posts

Showing posts from 2008

Code you can believe in! Vote Iain on 25lines.com!

Here's my entry - Trigonometry Wars (requires Flash Player 10). Thanks to everyone who has voted for me so far, I'm about 5th out of 12 at the moment, which is cool by me. Here's the source code.



Here are my thoughts on the process and the contest:
  • Keith is dead right that we need to put the Flash back into Flash.
  • Flash is the perfect technology for this contest. I can't imagine many other languages where you could do something like this. JavaScript? Processing? Lingo? (if you know any more, post in the comments).
  • Having a constraint was a great spur to creativity, but I think I spent more time squeezing the code than making something cool.
  • Lines aren't a good metric for measuring amount of code written. There are too many little tricks for squeezing things onto one line. A 3k of ActionScript challenge, for example, would have been more fair.
  • Limiting how much code you write encourages bad coding, so reading the posted source code isn't the best way to learn the techniques each demo uses. I'm tempted to rewrite my demo in an OOP style and post the source code, to show how it should be done.
Well done to Keith for organising a really fun little contest, and thanks to everyone who took the time to enter - the finalists are all pretty awesome and I bet they'll also be some gems in the other 70ish entries when they get posted.

5 tips for Flash developers in 2009

I've got lots of unused holiday to take this December, so I'm starting the end-of-the-year posts early. I have consulted my magic crystal ball, and here are my tips for Flashers in 2009
  1. Get out of the Flash ghetto. While I predict that Flash will own the plug-in space until at least 2011, it still seems like an exciting time to learn something new. One place to start might be learning C# - which you can use with Flash competitor Silverlight, XBOX360 game development framework XNA and the amazing Unity3D plug-in (which also lets you target Wii and iPhone). The spirits tell me that Java will also be having a renaissance, with the emergence of Flash rival JavaFX finally bringing native sound, video and vector graphics to the Java plug-in, along with a new scripting language JavaFX Script - which is spookily similar to ActionScript. If you really want to try something different (and you own a Mac) you could check out iPhone development and its scarily alien language Objective-C where square brackets are function calls! [yikes]! Not scary enough? With the mind-boggling Alchemy tool for Flash, could it even be time to learn C or C++?
  2. Learn some 3d modelling, animation and maths. PaperVision3D skills will still be in high demand throughout 2009, and of course CS4/FP10 brings limited native support for 3D, so expect even more gratuitous cover-flow interfaces on websites. I expect both Away3D and PaperVison3D to gain some new APIs for character animation, like the new bones support for Away3D. I'm increasingly of the opinion, however, that Adobe should not rely on Flash developers to do their work for them, and that an ActionScript-powered 3D solution will never be good enough compared to next-gen engines like Unity3D. The next versions of both Silverlight and JavaFX are going to have native 3D, and if Adobe doesn't pull their finger out soon, and beef-up the player with support with native 3D models, they are heading for an old fashioned ass-whooping.
  3. Listen to Grant.
  4. Learn Regular Expressions. When I say you should learn regular expressions, what I really mean is I should learn them - they've been taunting me ever since AS3 launched, but I've never got round to it, other than a quick /n here and there. Of course, you should use, not abuse, regex.
  5. Be a better engineer. As both the scope of Flash projects and the size of Flash teams get bigger, it is increasingly important to write readable, well-structured code, and in 2009 we should all take the time to try and improve our understanding of the core principals of object oriented programming - while not forgetting the creative side that makes Flash so much fun.
Have an awesome 2009 everyone! Remember to leave comments if you (dis)agree with me.


Creative Commons image by ambergris

Cool free and open source software for creating Flash games

You can do so much these days using only free and Open Source tools (although I couldn't surive without the Flash IDE). I've been collecting a list of the best ones - apologies to Mac users, some of these are Windows only.
  1. FlashDevelop. Up there with FDT and FlexBuilder as one of the best ways to write ActionScript. I use it together with the Flash IDE (using the IDE for layout, animation and compiling), but it also works with the official free Flex SDK and with unofficial free alternatives MTASC, swfmill and haXe, so you can create Flash games without spending any money at all. If you've ever used Microsoft's excellent Visual Studio, this is the closest thing for Flash developers. FlashDevelop knows the contents of all your classes and provides amazing code completion that seems to know what you want to do before you know yourself. This also gives another good reason to use static typing if you're not already.
  2. Paint.NET. Lots of people know that Gimp is a popular free alternative to PhotoShop, but I much prefer the simplicity and ease of use of Paint.NET - it's easily as good as PhotoShop for doing simple tasks like cropping an image. UPDATE! For a open source tool for creating vector graphics, check out Inkscape - it looks pretty handy if you don't have Illustrator or the Flash IDE. It exports SVG, which I believe you can include directly in Flex SDK projects.
  3. Audacity - for recording and editing your game's sounds. UPDATE! To create wicked retro sound effects check out sfxr!
  4. Blender - a powerful free alternative to 3D Studio Max and Maya. Plug-ins are available to export directly to PaperVision3D and Away3d - sweet!
  5. Subversion, Tortoise SVN and WinMerge - invaluable tools for managing your source code. As a recent convert, I highly recommend you do this!
  6. Easy PHP and Red 5 free server-side environments for developing high score boards and multi-user games, etc.
  7. Eclipse or NetBeans - primarily Java development IDEs (useful when developing SmartFox Server extensions), they also support a range of other languages, such as PHP. The notepad days are truly over - get an IDE!
  8. FileZilla - you'll want to upload your game at some point - I recommend using this!
  9. Firefox. Firefox is a great place to test Flash games, thanks to useful plug-ins like FlashTracer, LiveHTTPHeaders and Tamper Data.
  10. Open Office - use the word processor to spell check your instructions screen, and the spreadsheet application to count your piles of money!

Creative Commons image by KarraMarro

That's your lot! More open-source Flash projects can always be found at OS Flash.

The Princess Rescuing Application - a great lecture on game design


If you've got 15 minutes to kill and you want to get inspired, head of over to Lost Garden and download the pdf (or click here) of Danc's awesome presentation about how the principles of game design can be applied to creating usable applications. It's relevant whether you make games or applications, or like many of us, both.

Bio-bak, the best Flash website I have ever seen?


I'm not normally into just posting links, but the website I just went to - bio-bak.nl - is so cool, you gotta see it!

Meta4orce nominated for a BAFTA!



When I launched this blog back in August with a post about BLOC's animation / gaming crossover Meta4orce, I had no idea how positive the response would be. Thanks to [draw.logic], PaperVision3D Blog, Flash Bookmarks and Richard Legget my post picked up thousands of views and loads of great comments, including a "congratulations" from PaperVision teamer Ralph Hauwert. I've also had the honour of fielding game-design questions about the project over at Adventures in Primetime and the awesome Brainy Gamer blog.

British Academy of Film and Television Arts

Anyway, I've just found out that Meta4orce is nominated for a children's BAFTA! I'm dead chuffed; this is great news for a project that looked for a while like it would sink without a trace. With competition like Little Loud/Channel 4's Bow Street Runner, and Amanita Design's awesome BBC educational game Questionaut, we have no chance of winning, but just to be nominated is a great feeling. UPDATE - Bow Street Runner won it - well done!

no joy

By the way, don't forget to support my NO JOY? campaign to get joystick support into Flash!

The Wrong Door: creating PaperVision3D character animation with the Flash timeline

NOTE: I am now a freelance developer, and no longer an employee of Bloc.

Over at my employers, BLOC, we recently put the finishing touches on a new website to support BBC3's mad comedy show The Wrong Door. The site has lots of silly toys, interactions and animations to amuse you, but I thought the best one to document would be the experimental method I used to get some basic character animation into PaperVision3D.



The animation in question is of a giant robot walking around an asteroid on the site's homepage. My unorthodox approach was to make a side-on animation of the walk cycle using a set of MovieClips on the Flash timeline, then at runtime update the positions of the 3D robot's limbs based on the positions of these MovieClips.



The obvious drawback of this method is that all movement can only happen in 2 dimensions - so the effect will never look as cool as true motion capture and bones - but the advantages are that editing the movement is very easy, and you have a lot of potential for runtime control. This technique was fine for animating a robot, because it's OK if he looks a bit stiff, but for general character animation it's definitely not recommended, so I'm going to keep exploring new ways to bring animation into PaperVision3D. UPDATE! - as Away3D now supports Collada Bones, maybe that's the way to go.

Anyway, these were my steps. I started with one of Eadweard Muybridge's famous motion captures, of an old naked guy:



I used the walk on the bottom row. Based loosely on this movement, by eye I positioned a load of rectangular MovieClips on the timeline, representing the upper arms, lower arms, thighs, shins, torso and head. I used Muybridge's photos to set my keyframes, but also added tweens so that I could alter the speed of movement. It's important to put the rotation/pivot point at the end of the limb or none of the tweens will work. In the halcion days of banner-ads I made monster timeline's like this all the time, so it was a fun bit of nostalgia! (This kind of animation should get a lot easier with Flash CS4 and its native bones and inverse kinematics - but we'll see...)



With the walk animation complete, I then set about another timeline animation, for the robot's path around the asteroid. 3D artist Matt supplied me with a cut-away of the robot's path - I drew around this with the pen tool and set up a motion guide. Oldskool!



With the 2D animation complete, Matt 3D supplied me with the robot's body parts as seperate ActionScript classes, plus the texture bitmap. With these added to the PV3D scene, it was just a matter of updating the positions on the ENTER_FRAME listener. The MovieClip containing the animation is created but never added to the stage - the timeline animations still run, even though it is not rendered by the Flash player. It took a bit of trial and error to work out which 2D dimensions to map to which in 3D space, and I used A LOT of nested containers to simplify this process. Nesting a DisplayObect3D inside another is very useful PV3D feature.

I guess I'm the only person to have attempted this madness - I'd love to hear otherwise though so please leave comments!

NO JOY? My campaign for joystick and gamepad support in Flash starts here!

Joypads, gamepads, joysticks, game controllers... call them what you will, Flash doesn't support them. Why should you care? Well, you only have to look around at Kongregate, MiniClip or TheGamesList to realise that Flash is a proper gaming platform now - you could even say FLASH IS THE NEW CONSOLE! (don't actually say that).



As I'm sure you already know, Flash has some great features for games development: great 2D graphics and animation, sound, video and a decent programming language with AS3. When it comes to input devices though, it's less than ideal.

While the keyboard support is great for games, the mouse support is not perfect - it doesn't let you "wrap" the cursor, so true FPS movement is impossible, and right-click can only be used for the Flash context menu. You also have the seldom-used option of supporting microphone and webcam (but more on that in another post). Anyway, any of these methods is obviously going to be second best to an input device specifically designed for gaming.

I can guess at why it's not supported yet - most users don't keep a gamepad plugged into their computer, so it can hardly be regarded as a critical update, and it probably would require a fair amount of engineering to make it work on both Mac and Windows. But anyway, I don't care what Adobe's reasons are - gaming with a joypad IS A JOY!

I've been doing a fair bit of XNA recently, so I have an Xbox 360 controller plugged into my machine most the time, and your game design options are just so much richer - you have 2 analogue sticks, a D-pad, triggers and whole bunch of buttons. Ok, maybe some of the success of Flash gaming is down to the fact that the controls are so simple, so it's probably not a good idea to use all those buttons, but it would be nice to have the option.

Local multiplayer (on one computer) in Flash would also be massively improved. On the keyboard you can only press a maximum of about 4 or 5 keys at once, then additional presses stop registering - this can make even 2 player games behave unresponsively (the best way around this at the moment is to have one player on mouse and one on keys, as I did with on Bloc's HeadSpace game for Sony). With multiple game controller support, you could have 2 players on joypads, or have a mix of joypad, keys and mouse.

Well, Andre et al's very successful Make Some Noise campaign and Tink's suggestion for sensible package names, both went down very well, so here's my plea for some JOY! This issue has already been filed multiple times on the bug database (but they keep closing them, so how are you supposed to vote?!) Here's a funny one that someone wrote (I promise you it wasn't me), and here's one that's still open for now.

no joy

I've made a silly little button too which you can stick on your blogs etc to show your support (I bet nobody does - prove me wrong!) Oh and Silverlight needs to support joysticks too, if only to give Adobe a kick up the bum.

Meta4orce: creating 3D Flash games with PaperVision3D

NOTE: I am now a freelance developer, and no longer an employee of Bloc.

Over at Bloc we recently launched Meta4orce, a unique interactive sci-fi TV show which was broadcast on BBC2 and is also available globally via the website. With a story created by legendary comic-book writer Peter Milligan, it's a project I'm very proud to have worked on. When viewed online, the show integrates broadcast quality animation with high quality interactive games. (Please note, it's very much a broadband only site as it features a lot of video, and the games do require a decent PC or Intel Mac to run smoothly). UPDATE: If you want to know even more about the project, I've been answering game design questions over at the excellent Brainy Gamer blog.

We wanted the site to invoke the gritty, futuristic feeling of the show, and also offer a gaming experience that resonated with console gamers. To this end we made extensive use of PaperVision3D, specifically version 2.0, dubbed Great White (at the moment this can only be downloaded via a subversion client, but these are free and fairly easy to set up). As we did some fairly unusual things with PV3D, I thought it might be useful to document some of the solutions and work-arounds we came up with:

Mako User Interface



The main user interface is implemented in Papervision3D, and makes extensive use of the MovieMaterial class to map 2D animations onto 3D planes. Developer Mat applied a custom displacement map to the Viewport to create the cool glitch effect. We found that setting the stage quality to LOW is a good way to get a bit of extra performance out of PV3D.

Deadsphere Pt. I



This first-person perspective maze game uses a custom Model View Controller framework to link a 2D maze game mechanic to a Papervision3D view. I initially created the game in a 2D top-down view, then added another View to display the game in 3D. This is probably one of the few times it's actually sensible to use MVC on a Flash game (I think I'll cover this topic in more detail in a future post).

The main technical challenge was to stop PV3D from clipping the walls when they are close to the camera - basically it seems that planes are not drawn if PaperVision thinks any one of their 3 corners is outside the viewing area. I got around this by switching low polygon, 2 triangle plains for high polygon plains when the camera is close to them. I also used a lower resolution texture to render far-away walls. To improve memory usage and general performance, all the animated textures in the maze are created by swapping the BitmapMaterial of a plane every frame, rather than using MovieMaterial - this eliminates a lot of costly copyPixels operations. Again to try and reduce the amount of memory PV3D was using, I implemented a custom object pooling system for textures and geometry - so that walls are re-used between different levels. The levels were created in a simple editor which saved out strings of 1s and 0s, so a basic 4x4 square level might look like "11110011001111".

Shock to the system



This tower defence game uses PV3D to render a 3D view of a 2D game mechanic, again using MVC to separate game logic from graphics rendering. The main technical challenge was to stop the towers and enemies clipping strangely with the floor – when 2 polygons are close together they will flicker wildly as PV3D cannot decide which to draw on top of which. I got around this by rendering 2 separate PV3D scenes into 2 separate viewports – one for the interactive (clickable) floor grid, and one for the towers and enemies on top. As this slowed the frame rate dramatically, it only renders the scene every other frame, so while the game logic and user interface run at 30 frames per second, the 3D graphics effectively render at 15fps.

3D artist Matt modelled the defence towers in Maya and then opened in Blender and exported to ActionScript classes. PaperVision models have to be very low polygon if you want your game to run at all smoothly! To improve performance, the enemies are pre rendered animations mapped onto transparent 2 triangle plains, which are set to point at the camera every frame using PV3D's "lookAt" function (I couldn’t find a native “billboard” or “sprite” class in PV3D to handle this effect – I’m sure one must exist somewhere though - I know Away3D has them).

Under the surface



In this game the player looks for clues beneath the waves of a flooded London street. For this game, developer / 3D guy Mark modelled a scene in Blender and exported the parts as AS classes. Unlike some of the other Meta4orce games, we didn’t use an MVC pattern – we directly control the camera in the scene using PV3D's built-in functions like moveForward, pitch, roll etc. This game also uses MovieMaterial for animation and 2D planes pointed at the camera to create the illusion of 3D objects. The built-in virtual mouse in PV3D makes it really easy to add interaction such as rollovers to 3D objects. This is one of PV3D's best points. Camera clipping was again a problem on this game, so we don’t allow the player to get too close to the walls or floor.

Deadsphere Pt. II



This 3rd person perspective maze game is implemented in a similar way to Deadsphere Pt. I and Shock to the system, with an MVC pattern, and all the game logic separated from the PV3D view. One cool thing on all the MVC games is that the sound is all handled as if it were another "view" onto the game "model", so none of the game classes need a reference to the sound code, or even know that sound exists. This kind of "loose coupling" is considered good practice in object oriented programming.

The avatar you control is very subtly animated by swapping between 10 separate models representing the frames of animation. This is a very inefficient method of animation that we wouldn’t recommend anyone else use (especially as it’s almost too subtle to notice anyway!). For future projects I definitely look forward to a work flow where 3D animation can easily be brought from Maya to Flash, maybe with "bones" (I’m sure someone is working on this if it doesn’t exist already).

Pandora



This is really just an extension of the Mako user interface, with simple 2D mini-games rendered onto PV3D planes using MovieMaterial. We made sure to use the “animated” property very sparingly, to stop PV3D redrawing materials unnecessarily, as that was the main source of slow down. Also, when the games are full screen, they are removed from PaperVision and added to the main stage, as interactivity is more stable and fully featured this way.

Pier to Piers



A hovercraft chase through the flooded remains of London! Just a note here to say that this game doesn’t use Papervision3D at all, but our own custom mode7 engine, created by developer Mat, which we like to call Samuri7!

Summary

We did some neat things on this project - one cool thing is that while you're playing the game we're buffering the next video in the background, so it's ready to watch when you finish playing. Please go and play with the site and tell me what you think - personally I love it, but understand that it's not to everybody's tastes (some people don't like sci-fi, some people don't like websites that use a lot of CPU and memory, etc etc). Either way, we achieved a lot and made PaperVision3D do some things it didn't want to, so it's all good!

If you want to read more about the project there are interviews with Peter Milligan, with the Director and Executive Producer and with the design and development team at the excellent "Adventures in Primetime" blog. The BBC site also has the full cast and crew credits for Meta4orce.

Biography

Iain Lobb

Hello, I'm Iain. I've set up this blog so I can tell you what I know about designing and developing games with Adobe Flash. Here are my career highlights:

Companies

In January 2009 I embarked on a career as a freelance Flash developer. Before this I was the Head of Interactive at Bloc, an award-winning digital studio. During my time at Bloc I co-created some of the best-loved games on the web, including ZW0K!, Stackopolis and Pop Pirates and Meta4orce. Before joining Bloc in 2004 I worked on factual broadcast television for TwoFour, including several programmes for BBC1 and Channel 4. Before that I was a Flash-focussed designer/developer at specialmoves where I worked on many great interactive projects, including The Osbournes' award-winning site.

In print

My work has been featured in a few magazines, including Creative Review, Computer Arts, Computer Arts Projects, .net and The Daily Mail, and in two books: Web Design Studios 2 and Web Design: Music Sites, both published by Taschen. I've also been interviewed in .net magazine.

On the net

Projects I developed have been featured on a number of high profile sites including Kotaku, Jay is Games and theFWA, and I've worked on multiple projects which have made the digg.com front page.

Awards

My work has won awards from BIMA, theFWA, Cannes Lions, Webby, IMA, MiniClip, Kongregate and NewGrounds and received nominations from BAFTA.

Education

In 2003 I graduated with First Class Honours from the highly respected MediaLab Arts BSc at the University of Plymouth. I also have A-Levels in English, Maths, Physics and Photography.

Speaking about Flash and/or games

This is something I'm quite new to but really enjoy - so far I've given talks at the London Flash Platform User Group, FlashBrighton and Brunel University. If you'd like me to talk at your Flash or games related event, conference or user group, just drop a mail to iainlobb[at]googlemail[dot]com and I'll see what I can do!

Community
I try to stay involved with the UK Flash community, and you're likely to bump into me at LFPUG, Flash on the Beach and Poker Coder events - on the final table of course ;) I have also created NO JOY? - an informal campaign to get joystick support into Flash.

no joy