Get Your 3D Particles Going

3D particles may sound a little scary for you, but once you get going with some basic concepts, you'll be creating mind blowing 3D effects in no time. If you didn't do so well in math or science at school... just don't worry about it so much. This tutorial will tell you everything you need to know: rendering, 3D to 2D animation, and some basic effects with boids. 

For those of you who have never seen 3D particles before, I have a little example right here.

That, is what you will be making to day. 

Outline of this tutorial:

1. bitmap rendering and why
2. abstract objects 
3. camera and 3D space
4. 3D to 2D
5. boids

Part 1: Bitmaps

In game development, bitmaps are everywhere. In most 2d games nowadays, like Super Meat Boy, Plants vs Zombies, the graphics are bitmap based. However, in this 3D tutorial we will use the advantages of bitmaps.

You have probably used Flash before, and have experienced the power of flash's vector graphical abilities. However, many developers have not explored the bitmap side of Flash. The platform does haave some really good bitmap support. Many people are still confused about the difference of bitmaps and vector graphics. Take a look at the example below.


Vector graphics are made up of geometry, while Bitmaps are made up of pixels. That means when I zoom up on bitmaps, they will become "pixelated", but vector graphics will still show me gometrical lines.

The advantages of bitmaps:

1. fast rendering for large amounts of small graphics
2. less memory consumed than vector graphics with more objects
3. less garbage collection problems

Why are Bitmaps so great? They do have advantages over vector graphics, the common type of graphics in Flash. However, they are only better when you have lots of small objects to render, such as in a game. I personally use a lot of bitmaps in my projects.

With particles, you won't have to mess with a whole buck of vector graphics, which can use a lot of vertices. Flash take time to calculate where those vertices and geometry graphics should go, thus taking up a lot of computational time. Even if you use individual raster (bitmap) graphics, a particle is still 4 vertices. With bitmaps, on the other hand, 1000 particles can take up as little as 4 vertices.

On the memory side, you can save it my using template graphics. 100 enemies on screen at the same time can share one template graphic, and some memory for the background. All you have to do is save the position for each individual enemy.

Bitmaps also give you the luxury of no worrying about removeChild for each used object.

As you can see, bitmaps make particle rendering easier. With bitmaps, you can easily optimize for maximum performance.

So...How?

To use bitmaps to render graphics, you will need to know the following classes and their APIs:

Bitmap : a display object just like Sprite or MovieClip

BitmapData : comes and goes with Bitmap, this is what is used to control the graphics of the Bitmap that it is linked to. You can't add this to the stage

Some important functions are:
BitmapData::fillRect
BitmapData::setPixel
BitmapData::setPixel32
BitmapData::getPixel
BitmapData::getPixel32
Of course there are more function, which you can checl the adobe cods for.

These functions sound pretty straightforward, but you might be asking: why is there get/setPixel and get/setPixel32? The thing is, Bitmaps in flash can be transparent. When you use the normal get/setPixel, it only works with Bitmaps that have no transparency. With get/setPixel32, you can get or set a 32bit hex code. In other words, when working with transparent bitmaps, use 32bit functions.

Note: you cans set a bitmapData transparent or not using the paremeter during instantiation. Default is transparent.

Let's see some code then

I'm assuming that most of you reading this are using Adobe Flash, but I want to recommend a really rapid growing code IDE called FlashDevelop.

I'll provide all the source files for this tutorial, but follow along

In your document class, write the code below:

No, you can't copy this code because you learn better that way

Now to explain what the code does:
lines 13 - 14: creating the bitmap and bitmap data.
line 18: instantiate the BitmapData, providing the width and height.
line 19: instantiate the actual Bitmap, and link it to the BitmapData.
line 20: finally adding them to the display list.
line 21: just to make the bitmap look nice and big.


With these steps done, we can now call particleData's functions to modufy how the bitmap looks. We want a dark background and white particles as in the example, so change the background your your flash document to back. From flash develop you can go to 
project -> properties...
and change the background color from there:


Note that the bitmap can be transparent, and that is the key to make the pixels be able to glow.


Use the code below to make some changes to the bitmap's graphics:

don't worry, you can find the source files at the end of this tutorial

If you set your document class to Particles, you should be able to see a dark screen with white pixels scattered around. That, is the basics of pixel rendering.


You can find the source class here:
__________________________________________________________________________________________
__________________________________________________________________________________________