Stardust Particle Effects – X-Wing Demo

Standard

Stardust X-Wing demo

The aim of this demo was to update John Grden’s legendary Papervision3D X-Wing model – as seen in this classic papervision demo – and really bring it to life with some nice animated 3D particle effects.

The demo combines Papervision3D and the Stardust Particle Engine to add particle effects to the existing 3D model. I used Stardust’s built in Papervision extension to add the classic red glow of the X-Wing engines and then animate those engines as the ship accelerates away from camera. It’s quite a subtle effect, but if you look closely you can see a kind of red heat haze, I also like the way the white flames fade in and out as the ship speeds up and slows down.

I know this kind of effect could easily be done in something like Unity but I think it’s pretty cool to see it done in real-time in Flash. The original Papervision3D X-Wing demos were a real inspiration to me, and it’s amazing just how much a little effect like this can add to what is already an amazing 3D model.

Click here to view the demo and source code.

Stardust Particle Effects – 2D Spaceship Demo

Standard

demo8-screenshot

This demo is another example of the cool effects that can be made in Flash and ActionScript 3 using the Stardust Particle Engine.

By combining a simple particle effect with lots of Flash filters and some BitmapData processing, it’s possible to create some pretty abstract looking flame effects. The initial idea was to make something similar to the neon particle systems seen in games like Geometry Wars and Grid Runner, but after playing around with the Flash bitmap filters for a while I ended up with this cool looking flame effect instead.

The code is actually fairly similar to my earlier tutorial on using the Stardust engine, but this time I’m setting the velocity of the particles based on the speed and direction of the spaceship to create a nice engine flame effect that reacts to the ship’s movement.

Click here to view the demo and download the source code.

Creating a simple particle effect using the Stardust Particle Engine

Standard

The Stardust Particle Engine is a great new addition to that long list of open source AS3 projects out there on the web. While Stardust can look like a fairly complex system to get started with, this tutorial will hopefully show you how to setup a simple particle effect using the library and give you enough understanding of how it works to start making your own effects as well.

Stardust has a lot of cool features, and much of its structure and functionality will be familiar to people who have already used the Flint particle effects library or the Box2DFlash physics engine.

What makes this engine different is the way it brings all these features together in a modular and well designed package. It supports 2D and 3D particle effects (via its own internal 3D engine and through plugins for Papervision3D, ZedBox or ND3D), particle masking to help create more complex logic, and even the option to configure your effects using external XML files.

In addition to this great list of features is an excellent set of documentation, a nice introductory user guide, lots of really good code examples and even some FlashDevelop class templates that make it much easier to extend the core classes for your own effects. All of these extras are available from the links on the Stardust project home page.

So anyway, on with the tutorial, what we’re going to do is create a very simple multi-coloured smoke effect that will follow the mouse around the screen. It’s nothing too amazing I guess, but hopefully it will work as an intro on how to get started using the Stardust particle effects engine.

Continue reading

AS3 Quick Guides – Frameworks and Toolkits

Standard

As part of my series of quick guides to open source AS3 projects I thought it would be interesting to look at the range of code frameworks and toolkits that are currently available for Flash website development.

If you’ve ever tried developing a website completely in Flash then you will know just how much work it can take to setup the initial project structure and make Flash behave in a similar way to a standard HTML website. From asset loading and memory management to deep linking and browser history support, chances are that there is a site framework or code toolkit that makes building websites in AS3 that little bit easier.

Continue reading

AS3 Quick Guides – Open Source 3D Engines

Standard

This post is the first in a series of quick guides for programmers new to Flash and ActionScript development.

While much of what is covered will probably be familiar ground to many ActionScript developers, for Flash newbies these guides will hopefully offer a good introduction to the code libraries available for use in your projects. This one will focus on the range of 3D engines that are now available for Flash, highlighting the key features of each engine and hopefully help make it a little bit easier to choose one to use.

Continue reading

3D Ribbon class for Flash Player 10

Standard

Following on from my previous post about the new 3D features of Flash Player 10, I decided to take a look at a more advanced way of drawing 3D graphics in AS3, using the new drawTriangles method of the updated Graphics class.

This demo was my attempt at creating a version of Soulwire’s Papervision3D Ribbon class using native Flash Player 10 code, and while the demo doesn’t support the more advanced features of the Papervision version, the final result does look quite similar. In fact, if you take a look at the code you’ll see just how simple 3D can be when using Flash 10.

Using drawTriangles to render 3D graphics is fairly straight forward, requiring you to pass in a number of different Vectors to describe the geometry of a 3D mesh. A Vector is Flash 10’s new typed array class, and is very useful for making sure that an array contains only one type of data. The drawTriangles method accepts four parameters, three of them Vectors, but I won’t go into this in detail here as there are many good articles that explain it far better than I can, such as this excellent introduction to drawTriangles by Ryan Taylor.

What I will note is that from my tests and what what I have read, it seems that drawTriangles (while very useful) is best suited to quick and simple 3D effects. If you’re looking to render light sourced materials with proper z-sorting, or more than one texture map per object, then you will probably need to write your own classes to do just that, much as this post by Neuro Productions explains.

In fact, what really makes 3D in Flash 10 shine are the new utility classes such as Matrix3D, Vector3D and Utils3D. If you look at the code for the demo below you will see that there is really not much complex maths being used, instead it is mostly taken care of with these new classes.  And it is these classes which new engines like PapervisionX or Away3DLite will most likely be using to boost speed and improve visual quality in Flash Player 10.

demo6-ribbons3d

Click here to view the demo and source code

Music Visualizer with Flash 10 3D effects

Standard

So I finally got around to setting up Flex 4 with FlashDevelop 3 and thought I would have a go at making another music visualizer, this time using some of the new features in Flash Player 10.

Setting up Flex 4 turned out to be much easier than I expected (was just a case of swapping it for Flex 3 in the FlashDevelop compile settings), and while you don’t get code completion for the new Flash 10 classes everything else runs fine.

While there’s lots of great new features in Flash 10, the one thing I wanted to try out was the new built in 3D transforms and drawing API. So I set about trying to make some kind of 3D sound tunnel, the aim was to get something that looked like an old Llamasoft game, although I’m not sure quite how successful that was.

Anyway, the code turned out to be surprisingly easy to write, it seems that Adobe have gone to some real effort to make sure that the new 3D effects in Flash 10 are as easy to use as possible. In many ways it’s actually quite similar to how Five3D works, you can rotate any display object on any axis, move the vanishing point of the scene and even adjust things like camera focus and field of view, although as far as I know you cannot actually move the camera itself.

While this is all great, there are a few limitations to these new 3D effects as Keith Peters has pointed out in his posts about the visual quality of 3D in Flash 10 and the effect this has on nested display objects with 3D transforms. Some of this, such as the lack of anti-aliasing, you will be able to see in the demo below.

Despite these issues, I think the Flash 10 3D effects will come in very useful on some future project where low file sizes and simple code might be more important than higher visual quality.

Check out the demo and source code below, as usual the music (or you could just call it noise) was made using the Hobnox AudioTool ToneMatrix, which is their version of the Yamaha Tenori-On.

demo5-soundvisualizer

Click here for demo and source code