quick tech demo: http://megaswf.com/serve/1148496 ty isometric/axenometric projection

Stalling

Huh, finally I've got a half decent job, and I'm just stalling. For the past 3 hours I've done basically nothing.

Time to get to work!

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:
__________________________________________________________________________________________
__________________________________________________________________________________________

Physics

Well, after a few hours of work, I managed to get some physics working. Right now the only supported collisions are AABB vs AABB and circle vs AABB. Mass is implemented. Box has more mass than the circle, so it might be a little hard to push.

Still don't know what I should name the physics engine though. It's supposed to be light weight.

My Engine

what should i call the collision engine?

I am currently developing an engine for flash, called weEngine for WorldEdit Engine, obviously. It currently consists of two parts, libQ, a rendering system, and QPS (Q Panel System), a debug and windowing system. I know this sounds really messy, and I haven't started the collision engine yet. However, I decided to finish everything, then organize the names and directories. This has always been my problem in development.

I'll start with QPS:

As you can see its really simple right now, there is only a window with a button. The window is fully re-sizable,  and you can drag it around. I really want to make it open source but that depends on whether or not I can finish it.

It's really easy to use, the code I used is:

var w:QWindow = new QWindow();
w.addButton(new QButton());
w.addEventListener(Event.ENTER_FRAME,update);

function update(e:Event)
{
   w.update();
}


Next up is libQ, which is really nothing to show, its just the same normal bitmap rendering (Only easier with more functionality). I implemented circle drawing, utils like rotation baking, and with the help of a friend, bressenham algorithms.

That's all for this post, hopefully soon I can show off some nice collision, or a paneling system with more features.

Little about me

I am a flash developer dedicated to making new innovative games. Currently I am working on an engine in AS3 to power my next game, which I don't want to give away yet :) I'll be posting demos and videos on my process of development.

My Kongregate account is qwerber. You can find me on the programming forums.


I like code;
  I like code;