BlitzCoder - Blitz Basic Game Development Resources

Blitz2D Intermediates: Z-Ordering by Krylar

Introduction:

The term Z-Ordering can mean something different depending on context. In the realm of 3D graphics, I've seen it described as "...to derive closed-form relations for the difference between the node indices, which can be used to browse the tree in constant time." That's NOT the way we'll be using it in this article ;)

Since we'll be applying Z-Ordering to a 2D graphics plane, I'll define the term as "the drawing of graphical elements in order of their height in respect to graphics plane." Look at the image below and you'll see that we have three planes of drawing. Each overlaps the other.

These are the planes of drawing. Anything that you draw on plane -1 will be "under" anything drawn on plane 0 or plane 1, as anything on plane 0 will be "under" anything drawn on plane 1. To further demonstrate, I've colored that image in here:

Note that the only plane completely visible is plane 1.

Why Would I Want to Use Z-Ordering?

There are a ton of reasons you'll wanna use this concept. If you take the standard space game, for example, you would probably want your ship to look as if it's hovering over a planet. Or maybe you'll have a neat little code that let's you hide behind planets (in multiplayer maybe?). How are you going to visually do that? The only way is to control the order in which you draw the planet and the ship.

Let's say that you're doing a football game (which kinda sparked this tutorial in the first place...thanks to "msephton" on the BlitzBasic board for starting the discussion ;)). You'll need to have a way to show the ball if front of the players, or behind...heck, you'll need a way to show the players to the front or back of other players in or it'll look REALLY weird. Z-Ordering handles that.

Another example would be a side-scroller. Pretend you have this little character running along a grassy, er, tile set, and behind him is a line of trees. Up ahead is a water fall...but wait...it's flowing IN FRONT of the grassy tile set! Your character gets up to that point and nearly disappears through the waterfall... he's BEHIND the waterfall! In order to do this...we'd draw in this order:

Draw the trees
Draw the grass
Draw the player
Draw the waterfall

So the grass is on top of the trees, and the player is on top of the grass, and the waterfall is on top of the player. Since we can use transparency in our images, it gives us the illusion of depth!

Okay, Quit Teasing...How Do I Use This?

No idea. JUST KIDDING! It's actually quite simple. One way is define certain images ahead of time to have a certain plane. This works great in the case of the side-scroller. You define either an Array or Type (depending on your preference) that contains all of the Plane 0 elements. Then others that contains all the Plane -2, Plane -1, Plane 1, Plane 2, etc...(however many you want, really). Next you simply start at the lowest Plane and draw it, then move up to the next, draw it, and then continue that cycle until they're all drawn.

Sometimes you'll want to be more dynamic (as in the case of the football game). In this case, you'll need to have the ZOrder for each Image dynamic. This way, depending on comparisons in your game, you'll be able to change the value of ZOrder in your "Update" phase and watch that change take effect in your "Render" phase.

Here is a piece of code that simply grabs three images and moves them over each other based on ZOrder. With only 3 images, this is REALLY unnecessary, but it gets the point across of HOW to use this technique.

Click Here to get the code with graphics and such.

; setup our graphics mode
  Graphics 640,480

; set the Backbuffer as the drawing surface
  ; for page flipping
  SetBuffer BackBuffer()

; load up our dummy images
  Wall_Image = LoadImage("graphics\walltile.bmp")
  Stoop_Image = LoadImage("graphics\stoop1.bmp")
  Knight_Image = LoadImage("graphics\knight.bmp")

; create a type that has which image to use, where
  ; to draw it, a direction to show the ZOrdering in
  ; action, and the ZOrder of the image
  Type Images
       Field ImageToUse
       Field X,Y
       Field iDir
       Field ZOrder
  End Type

; create an instance of the Images Object, starting it
  ; moving from right to left, and starting it
  ; as being "behind" the baseline plane.  Make this
  ; one the "wall" (or big blue square)
  NewImage.Images = New Images
  NewImage\ImageToUse = 0
  NewImage\X = 125
  NewImage\Y = 100
  NewImage\iDir = -1
  NewImage\ZOrder = -1

; create an instance of the Images Object, no movement, 
  ; And starting it as being ON the baseline plane.  
  ; Make this one the "Knight" image
  NewImage.Images = New Images
  NewImage\ImageToUse = 1
  NewImage\X = 100
  NewImage\Y = 100
  NewImage\iDir = 0
  NewImage\ZOrder = 0

; create an instance of the Images Object, moving from
  ; left to right, and starting it as being "In Front of" 
  ; the baseline plane. Make this one the the little rock
  ; image
  NewImage.Images = New Images
  NewImage\ImageToUse = 2
  NewImage\X = 75
  NewImage\Y = 100
  NewImage\iDir = 1
  NewImage\ZOrder = 1

; quit only if the user hits ESC
  While Not KeyHit(1)

; clear the screen
   Cls

; Use this FOR...NEXT loop to cover each ZOrder plane of
   ; drawing.  So, if we're at -1, that will be the bottom. 
   ; 0 will be the middle (or baseline), and 1 will be the top.
   For Planes = -1 To 1

; run through each of our images
       For NewImage.Images = Each Images

; see if the current image is on the Plane we're on
           If NewImage\ZOrder = Planes

; if so, see what image we need to draw
              Select NewImage\ImageToUse

; it's the wall image
                     Case 0        
                          DrawImage(Wall_Image,NewImage\X,NewImage\Y)

; this is just for looks, but it moves the
                          ; wall back and forth
                          Select NewImage\iDir
                                 Case 1
                                      NewImage\X = NewImage\X + 1
                                      If NewImage\X > 125
                                         NewImage\iDir = -1
                                      EndIf 
                                 Case -1
                                      NewImage\X = NewImage\X - 1
                                      If NewImage\X < 75
                                         NewImage\iDir = 1
                                      EndIf 
                          End Select

; it's the Knight image
                     Case 1
                          DrawImage(Knight_Image,NewImage\X,NewImage\Y)

; it's the rock image
                     Case 2
                          DrawImage(Stoop_Image,NewImage\X,NewImage\Y)

; this is just for looks, but it moves the
                          ; rock back and forth
                          Select NewImage\iDir
                                 Case 1
                                      NewImage\X = NewImage\X + 1
                                      If NewImage\X > 125
                                         NewImage\iDir = -1
                                      EndIf 
                                 Case -1
                                      NewImage\X = NewImage\X - 1
                                      If NewImage\X < 75
                                         NewImage\iDir = 1
                                      EndIf 
                          End Select
              End Select
           EndIf
       Next
   Next

; put up a little text telling the user how to change the ordering
   Text 0,300,"Press the spacebar to change the ZOrder"

; if the user hits the spacebar
   If KeyHit(57)
      ; run through the image list again
      For NewImage.Images = Each Images

; determine the ZOrder value and change it accordingly
          ; -1 will change to 1, 0 to -1, and 1 to 0...again, this
          ; is just so the user can see it in action
          Select NewImage\ZOrder
                 Case -1
                       NewImage\ZOrder = 1
                 Case 0
                       NewImage\ZOrder = -1
                 Case 1
                       NewImage\ZOrder = 0
          End Select
      Next
   EndIf

; flip the pages so the user will see the animation's effect
   Flip
  
  ; end of the While loop
  Wend

; end the program
  End

For fun you could hook up a function that puts a bunch of these images up in Random x,y locations, with Random Z-Orders. Should be a pretty simple thing to do and it could help you get your hands dirty in this coding practice ;)

Conclusion

Hopefully this gave you a basic idea on how 2D Z-Ordering works, why it's useful, and how to use it.

Until next time...cya!

-Krylar

For a printable copy of this article, please click HERE.