Rendering2D Basics

Rendering2D is built on two halves. The first half is the scene and the second half is the spatial manager. These halves are independent. You can use either, one, or none in your game.

The spatial manager provides a way to place objects in space and perform queries on them. The scene lets you place and draw visual objects like sprites. Scenes also support some queries, mostly the ones needed in order to implement picking.

Bitmaps vs. DisplayObjects

At the fundamental level of Flash graphics, there are two ways of displaying graphics to the user. The first is to create an individual DisplayObject to represent each "sprite", or moving graphic, on the screen. The second is to create a single BitmapData canvas that you draw ("blit") all of your other images to each frame. There is no one "right way" to do this, so Rendering2D is flexible enough to support both. DisplayObjectScene lets you use DisplayObjects, and BitmapDataScene composites to a Bitmap. When you are using a BitmapDataScene, there is a direct copyPixels based path available to objects that implement and it will automatically convert it to the right kind of output. See ICopyPixelsRenderer.

Draw Layers And Sorting

An important part of the Rendering2D architecture is the draw layer system. Each renderable component is required to implement a property called layerIndex, which controls on which draw layer it is shown. This allows manual control of sorting, by grouping drawable items onto overlapping layers. Layers are drawn in ascending order, starting with layer zero. This means that anything on layer 0 will be on the "bottom", and things in higher layers will be drawn on top of lower layers. There can be any number of layers, and they do not have to be contiguous (ie you could have only layers 0, 1, and 10).

For example, in a platformer, you might assign layer zero to distant background elements, layer one to nearer background elements, layer two to platforms in the world, layer three to powerups, layer four to enemies, layer five to the player, and layer six to feedback elements like scores or damage effects. That's just an example; you can use layers however you like.

DisplayObjectScene implements no intra-layer sorting by default. The draw order of two items in the same layer is undefined. You can implement your own sorting by specifying a sort function on the layer's drawOrderFunction field.

How Rendering Works

The rendering process is very simple. At the start of each frame, the DisplayObjectScene sorts its layers, then each layer has the opportunity to update the draw order of its renderables. The DisplayObjectScene uses DisplayObjects and Flash's renderer to display the scene, so finally any necessary changes are pushed into the DisplayObjects on the stage.

If you are using the BitmapDataScene, then the main difference is that drawing is done manually onto the BitmapData using the BitmapData.draw method. In addition, renderable objects can optionally implement the ICopyPixelsRenderer interface, in which case they will be called every frame to draw themselves onto the BitmapData.

Implementing a Drawable Component

Any component which wants to be drawn should inherit from DisplayObjectRenderer or one of its subclasses.

Using The System

The best way to understand the rendering2D system is to look at the examples (RollyBallGame, PBEngineDemo, or the PBFlexlessEngineDemo) and see how they set up their entities. You can also look at the Lessons, which cover how to display and move shapes and sprites.

The requirements for rendering are simple. You need a SceneView or FlexSceneView, which is where the scene will be displayed. You need a DisplayObjectScene or related class. And you need some DisplayObjectRenderers. The renderers will have their scene field to set to reference the DisplayObjectScene, and the DisplayObjectScene will have its sceneView field set to indicate to what SceneView or FlexSceneView it should draw.

Extending The System

If you have a 3rd party library that can draw to either a DisplayObject or a BitmapData, it should be trivial to integrate into the rendering2D framework. Feed the DisplayObject or BitmapData to a DisplayObjectRenderer or a BitmapRenderer and off you'll go.