[RESOLVED] image layering with transparent gifs question

I'm using VB.NET 2003 and I want to use gif files with transparency on a form. I'm trying to layer it on top of another picture box. If I use a new image box, the background of the gif is transparent, but it shows the grey or beige background of the picture box. I want it to just layer on top of the image under it. I've tried the transparent color in web colors and it doesn't work. I've tried changing it to that form's transparency color, but the I just see the stuff under the form. Any suggestions? Please help. Do I have to use GDI+?

PIctureboxes them selves are not transparent. Transparent controls a re a major point of contention in .Net.

Just use 1 picturebox and use GDI+ code to draw the images in the right order onto the picturebox. Here's a demo (see attachment). The background is passed to the picturebox during the load event so this means you only need to draw the foreground (transparent) gif manually. You can draw as many transparent gifs like this as you want they'll just pile up on top of each other.

Please look at the two images in the Bin folder before you run this demo, then you'll understand whats going on.

GDI+ is your friend, don't be afraid of it :)

Thanks. It works great!

Your welcome.

The effect works, but I run into another problem. I plan to have a different reaction based upon which layer or item in the picture box the user clicks on. For example, we have a background checkers board and each checkers piece. Different reaction depending on the piece that's clicked. Would I have to make long, drawn out code about the coordinates of the cursor, or is there an easier way? Or should I just scrap it in VB and start learning DirectX and DirectDraw?

On a checkerboard lets say you are using a 8x8 array to represent the board.

If you want to know which square was clicked on just use a little math...

VB Code:

'put this in the mouseUp event of your picturebox...
Horiz = e.x \ (width/8)
Vert = e.y \ (height/8)
 
Messagebox.Show("You clicked on: Square(" & Horiz & ", " & Vert & ")")

If your picturebox is 300 x 300 pixels and you clicked on (120, 271) then your chosen square would be (3, 7), which is the correct array index for that square.

this is a very rough illustration (not to scale), 3,7 is the chess square of the square that the red dot (click) falls in

It would be 100000000 times harder in DX. There is just so much setting up to be done. To do all that jsut for a little chess game is a bit crazy. VB is easily capable of this.

It would be best to design a ChessPiece class that handles all of the common operations like drawing the piece on the board at its internal coordinates, then for each of your specific types create a derived class...

VB Code:

Class Pawn
Inherits ChessPiece
...
End Class
 
Class Knight
Inherits ChessPiece
...
End Class
 
Class Bishop
Inherits ChessPiece
...
End Class
 
 
...
...
...

These derived clases can handle all the things specific to each type of piece, like pawns can only move forward and attack diagonally...Knights can only move in a dogleg and so on.

Thank you so much. That makes a lot of sense. Actually, I was just using checkers as an example. I'm trying to develop a computer version of this old viking game. Thank you, though. You answered it perfectly.

Is there a way to take more than one file, in my case gif files, and compile them into a single file that my program can later pick apart? The reason I'm asking is because I would prefer it if my users didn't have the ability to mess with my images before runtime. Plus, it'd be nice because I may end up with 6 images and if I could just reference one file, that'd be better. Or, is there a way to compile the images in with my program without using a picture box? Because I'm using GDI+ instead. Please help.

You could do this in at least 2 ways...

1. Serialize all your images to 1 binary file. (Means you have to include an extra file wherever your EXE goes)
2. Add your images to your project as "Embedded Resources" (will make your EXE bigger)

I'd prefer to include them in the exe, but once I change them to embedded resources, how do I reference them in the code?

Look in MSDN for the Bitmap Constructor that lets you load from a resource.

(ie,. Search for "Bitmap Constructor" and then look down the list of overloads until you see a link to the one that handles resources)

:)

In the original example code, I have a question about a subroutine. The part I'm referring to is equivalent to this:

VB Code:

Private Sub Field_Paint(ByVal sender As System.Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Field.Paint
        e.Graphics.DrawImage(_Board, 0, 0)
        e.Graphics.DrawImage(_Blue, 534, 281)
        e.Graphics.DrawImage(_Red, 483, 27)
    End Sub

In this example, "Field" is a picture box and "_Board", "_Blue", and "_Red" are all seperate images.

Is there a way that I can have such events not happen on load and instead occur when a button is clicked or similar event?

I'm still coping with the image controls for my program and I haven't even started working with mouseUp events.

Thank you so much for your helpful code.

Bumpity bumpity bump bump...
[Sorry.]

VB Code:

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click
 
    Dim temp As Graphics = Field.CreateGraphics
    temp.DrawImage(_Board, 0, 0)
    temp.DrawImage(_Blue, 534, 281)
    temp.DrawImage(_Red, 483, 27)
 
End Sub

You just move the cod into a button and use a reference to that picturebox's graphics object (because no PaintEventArgs object is available).

That isn't working for me.

Edit: Nevermind. It only doesn't work when I have it occur onLoad.
Just out of curiousity, why not?

Onload only happens once at the start of your program, usually before your form shows.

By default, graphics are not persistent, so anything moving in front of your form will erase your previous drawing. If you want persistent drawing either do everything in your paint event or draw to a memory bitmap (only when required) and use the paint event to copy that image to the screen.