2 and a half D and Graphics Layers

   first of all, let me introduce 2 and a half D, it is a technique that
draws 3D graphics on 2D spaces. I'm using VB and ActiveX controls as
sprites. However,
on the form bitmap, there are a lot of components fixed in in the bitmap,
such as the megalift (do not take it seriously if you don't know what that
is) , rackings and beams (in a warehouse literally). How do I make those
objects go in front or behind of the sprites? I know that involves graphics
layers. How do i manipulate layers in VB in order to achieve this effect? (Z-order won't work because you can't bring the 'megalift' to front without bringing the whole bitmap so)Thanks
Who is Participating?
mdouganConnect With a Mentor Commented:

If you download the Customblt.zip from the Karl Peterson site that I listed, then edit the code under the form1 in the sample project and replace it with this code you can test what I'm talking about.  You will need to place two new pictureboxes on the form, Picture3 and Picture4 (you might want to set their visible properties to false).  

Don't worry about animation for now, but put a static picture of one of your sprites into the Picture property of Picture3 making sure to color the background to black (anything that is colored black will become transparent).  Make picture4 to be the same size as picture3 but don't put any picture into it.  Then, you can paste this code over the code that is already in the form and try it out:

Private Declare Sub Sleep Lib "kernel32" (ByVal dwMilliseconds As Long)

Option Explicit

Private Sub Form_Load()
' all pictureboxes were loaded at design time.
' Picture 1 has a foreground element with a black background where there should be transparency
' Picture 2 holds the complex background wallpaper (tileable in this case)
' Picture 3 holds the sprite with a black background where there should be transparency
' Picture 4 has no picture, but it's the same size as Picture 3

   With Me
      .ScaleMode = vbPixels
      '.AutoRedraw = True
   End With
   ' Holds Foreground Image
   With Picture1
      .ScaleMode = vbPixels
      .AutoRedraw = True
   End With
   ' Holds Sprite Image
   With Picture3
      .ScaleMode = vbPixels
      .AutoRedraw = True
   End With
   ' Is used to restore the background after sprite moves.  It's the same exact size as Picture3
   With Picture4
      .ScaleMode = vbPixels
      .AutoRedraw = True
   End With
End Sub

Private Sub Form_Paint()
   Dim dX&
   Dim w&, h&
   ' Get dimensions of the foreground image
   w = Picture1.ScaleWidth
   h = Picture1.ScaleHeight
   ' Tiles a complex background image on the form
   Call TileBlt(Me.hWnd, Picture2.Picture.Handle)
    ' Preload the background restoring picturebox with the background behind the first sprite location
    Call TransBlt(Picture4.hdc, 0, 0, Picture3.ScaleWidth, Picture3.ScaleHeight, Me.hdc, 10, 10, vbBlack)
   ' Now progressively blit the sprite down from the upper left corner to the lower right corner
    For dX = 10 To 400 Step 10
            ' first restore the background at the sprites last position
            Call TransBlt(Me.hdc, dX - 10, dX - 10, Picture3.ScaleWidth, Picture3.ScaleHeight, Picture4.hdc, 0, 0, vbBlack)
            ' now, copy the background from the sprites new position to picture4 to save it for next restore
            Call TransBlt(Picture4.hdc, 0, 0, Picture3.ScaleWidth, Picture3.ScaleHeight, Me.hdc, dX, dX, vbBlack)
            ' now copy the sprite to it's new location
            Call TransBlt(Me.hdc, dX, dX, Picture3.ScaleWidth, Picture3.ScaleHeight, Picture3.hdc, 0, 0, vbBlack)
            ' now paint the foreground over the sprite
            Call TransBlt(Me.hdc, 200, 200, w, h, Picture1.hdc, 0, 0, vbBlack)
            ' now pause
            Sleep 80
    Next dX

End Sub

If you want to work with graphical elements in different controls, then probably your only choice would be to use Image controls, and have transparent gifs for your sprites and/or elements in the foreground that you may want sprites to move behind.  Then, I think, you can layer the image controls with zorder to get the effects you want.

Other than that, the approach that is most often used is custom "bitblt"ing - which is to say, copying selected portions of different pictures into the display picture.  The bitblt Windows API can allow you to create a transparency mask so that you would bitblt your sprite on top of a background picture, and then you could also bitblt some foreground element on top of the sprite.

You can get a pretty cool example of the transparent bitblt code from Karl Peterson's website:


Download the CustomBlt.zip sample
luckieAuthor Commented:
Not that kind... I mean there are some components embedded in the background images, how do I make sprites go behind those components, such as the beam (it's like Z-ordering) or something like that
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

That's what I meant about some "foreground" elements.  Anything that the sprites are going to go behind has to be in a separate layer from the "background".

How you do the layering is up to you.  You can either do it using images with transparent backgrounds (though something tells me I've tried this and it doesn't really work), or you bitblt the different layers to a picture control such that you bitblt first the background, then your sprite, then your foreground element.

This sort of animation is classical Disney style.
luckieAuthor Commented:
I understand now, but the 'foreground' elements are actually part of the background bitmap? How do I resolve that?
With a drawing package like Paintbrush or Photoshop I'm afraid.  What you will want to do is copy the background picture, color over everything in the picture that is not part of the foreground element in one specific color (the specific color doesn't matter as long as that color isn't found in the foreground element.  I usually pick something obvious like bright pink.  Then, in the transparent bitblt routine. You pick the color to make transparent, and that will be your pink color.  When the image gets drawn on the display bitmap, only the non-transparent color bits will get drawn.
luckieAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.