none
Get a sprite picture to blend in o transparent to the background.

    Question

  • 

    I am sure you all can see that white background in my pictureboxes, does anyone know how I can edit it either in code or paint program to change the background to make it "transparent" or "blend in" to the background?

    For example this here is how I want it to look exactly. 


    WRA

    Saturday, April 15, 2017 11:26 AM

Answers

  • Hi

    For transparent backgrounds, I use Paint.NET (a free application similar to Paint but much enhanced). With this (or many other applications), you can create Sprite images of any kind and have them all with transparent backgrounds. And, it is simple too.


    Regards Les, Livingston, Scotland

    • Marked as answer by Waliur Rahman Saturday, April 15, 2017 5:56 PM
    Saturday, April 15, 2017 5:48 PM
  • There are several ways. Here is one with a special picturebox class that allows a transparent color background. In this example I used black. But something like magenta is better then less likely to occur in the original image. ie all black is transparent.

    Public Class Form7
        Private WithEvents Picturebox1 As New TransparentPictureBox With {.Parent = Me,
            .Location = New Point(100, 100), .Size = New Size(100, 100)}
        Private tankBmp As Bitmap = New Bitmap("c:\bitmaps\tiles\tank 3.png")
        Private bgBmp As Bitmap = New Bitmap("C: \bitmaps\landscape\textures\landscape pattern lime green grass.jpg")
    
        Private Sub Form7_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Picturebox1.BackColor = Color.Transparent
            Picturebox1.ClientSize = New Size(100, 100)
            Picturebox1.BackgroundImageLayout = ImageLayout.Zoom
    
        End Sub
    
        Private Sub Picturebox1_Paint(sender As Object, e As PaintEventArgs) Handles Picturebox1.Paint
            'attribs setting for transparent using range of color 0 - 25 for shades of black
            Dim attribs As New System.Drawing.Imaging.ImageAttributes
            attribs.SetColorKey(Color.FromArgb(0, 0, 0), Color.FromArgb(25, 25, 25))
    
            'draw pic with transparent color
            Dim dst As New Rectangle(0, 0, Picturebox1.Width, Picturebox1.Height)
            e.Graphics.DrawImage(tankBmp, dst, 0, 0, tankBmp.Width, tankBmp.Height, GraphicsUnit.Pixel, attribs)
    
        End Sub
    
        Private Sub Form7_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
            'draw the background image
            e.Graphics.DrawImage(bgBmp, ClientRectangle)
    
        End Sub
    
        Private Class TransparentPictureBox
            'use to draw transparent animated gifs
            Inherits PictureBox
    
            Private Shared ReadOnly DefaultBackground As Color = Color.Transparent
    
            Public Sub New()
                Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
                BackColor = DefaultBackground
            End Sub
        End Class
    End Class


    PS The special class allows the picturebox to be transparent. So if you use that picturebox class you can use a transparent image and that's all you need. ie an image like the tank I show the black would be transparent.  However

    However, the example also produces a transparent image from a color. In the example the black part of the original tank image is made transparent and shows through to the picturebox background. Since the picturebox background is transparent in our special class we see through the picuturebox to the form.

    So you can use any image and set any transparent color range for the image. As I say the transparent color will come through any part of the image so if you use a color like black then all black lines etc become transparent. So you need a color that is not in your image.

    Saturday, April 15, 2017 12:28 PM

All replies

  • 

    I am sure you all can see that white background in my pictureboxes, does anyone know how I can edit it either in code or paint program to change the background to make it "transparent" or "blend in" to the background?

    What are you trying to do?  The comment suggests that you want the white areas in that first image to be grey

    but the second image is completely different.

    Saturday, April 15, 2017 11:42 AM
  • They are both sharing something similar they are practically a picturebox and woah how did you do that In your screenshot is what I basically want to do precisely. 

    WRA

    Saturday, April 15, 2017 12:10 PM
  • Well in theory I want to make it transparent that part of the background such as if the background is grass then the picture of the gold mine blends its background in grass etc. 

    WRA

    Saturday, April 15, 2017 12:11 PM
  • Well in theory I want to make it transparent that part of the background such as if the background is grass then the picture of the gold mine blends its background in grass etc.

    There is no point in making it transparent - just make the surrounding portion the same colour as the background.  If you really want transparency (for instance, if your background is going to change) don't use picture boxes - use images with transparency in the image.

    Saturday, April 15, 2017 12:26 PM
  • There are several ways. Here is one with a special picturebox class that allows a transparent color background. In this example I used black. But something like magenta is better then less likely to occur in the original image. ie all black is transparent.

    Public Class Form7
        Private WithEvents Picturebox1 As New TransparentPictureBox With {.Parent = Me,
            .Location = New Point(100, 100), .Size = New Size(100, 100)}
        Private tankBmp As Bitmap = New Bitmap("c:\bitmaps\tiles\tank 3.png")
        Private bgBmp As Bitmap = New Bitmap("C: \bitmaps\landscape\textures\landscape pattern lime green grass.jpg")
    
        Private Sub Form7_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            Picturebox1.BackColor = Color.Transparent
            Picturebox1.ClientSize = New Size(100, 100)
            Picturebox1.BackgroundImageLayout = ImageLayout.Zoom
    
        End Sub
    
        Private Sub Picturebox1_Paint(sender As Object, e As PaintEventArgs) Handles Picturebox1.Paint
            'attribs setting for transparent using range of color 0 - 25 for shades of black
            Dim attribs As New System.Drawing.Imaging.ImageAttributes
            attribs.SetColorKey(Color.FromArgb(0, 0, 0), Color.FromArgb(25, 25, 25))
    
            'draw pic with transparent color
            Dim dst As New Rectangle(0, 0, Picturebox1.Width, Picturebox1.Height)
            e.Graphics.DrawImage(tankBmp, dst, 0, 0, tankBmp.Width, tankBmp.Height, GraphicsUnit.Pixel, attribs)
    
        End Sub
    
        Private Sub Form7_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
            'draw the background image
            e.Graphics.DrawImage(bgBmp, ClientRectangle)
    
        End Sub
    
        Private Class TransparentPictureBox
            'use to draw transparent animated gifs
            Inherits PictureBox
    
            Private Shared ReadOnly DefaultBackground As Color = Color.Transparent
    
            Public Sub New()
                Me.SetStyle(ControlStyles.SupportsTransparentBackColor, True)
                BackColor = DefaultBackground
            End Sub
        End Class
    End Class


    PS The special class allows the picturebox to be transparent. So if you use that picturebox class you can use a transparent image and that's all you need. ie an image like the tank I show the black would be transparent.  However

    However, the example also produces a transparent image from a color. In the example the black part of the original tank image is made transparent and shows through to the picturebox background. Since the picturebox background is transparent in our special class we see through the picuturebox to the form.

    So you can use any image and set any transparent color range for the image. As I say the transparent color will come through any part of the image so if you use a color like black then all black lines etc become transparent. So you need a color that is not in your image.

    Saturday, April 15, 2017 12:28 PM
  • I gotta take a look at this and implement it into the way I would for my program. This looks fantastic!!! Thanks Tommy

    WRA

    Saturday, April 15, 2017 12:46 PM
  • Thanks for the example Tommy, I have tried it out and it works all I gotta do is apply it to my example and operate it.

     

    WRA

    Saturday, April 15, 2017 5:14 PM
  • @Tommy

    ooh getting a problem here Tommy. 

    What should I do to the image in terms of editing it. 


    WRA

    Saturday, April 15, 2017 5:18 PM
  • Tommy 

    I think you answered a part of my question to do with map designs in one of my other threads thanks man.

    I will send the link to it here. 

    https://social.msdn.microsoft.com/Forums/en-US/9cce661d-014f-4281-b36f-297afb533c6c/apply-a-background-to-game-map-using-a-picture-box?forum=vbgeneral

    What you basically mentioned here answers it. 

    I will leave a question on the other thread for you to answer its straightforward, I hope. 

    This is just a test. 


    WRA

    Saturday, April 15, 2017 5:36 PM
  • Hi

    For transparent backgrounds, I use Paint.NET (a free application similar to Paint but much enhanced). With this (or many other applications), you can create Sprite images of any kind and have them all with transparent backgrounds. And, it is simple too.


    Regards Les, Livingston, Scotland

    • Marked as answer by Waliur Rahman Saturday, April 15, 2017 5:56 PM
    Saturday, April 15, 2017 5:48 PM
  • @Tommy

    ooh getting a problem here Tommy. 

    What should I do to the image in terms of editing it. 


    WRA

    Well its right there in front of you in black and white. I even discussed it.

    But you will have to learn how the transparency works using the image attributes to set a range of argb values to make transparent in the image when it is drawn.

    Its just an example. Maybe its too advanced with everything else and you should use it in your next project.

    Saturday, April 15, 2017 5:49 PM
  • Woah I got that on my laptop downloaded. Could you provide a link or explain yourself through screenshots how would I set all my pngs to become transparent from the outside. Please

    WRA

    Saturday, April 15, 2017 5:57 PM
  • This example looks real nice and clear to understand. Im sure it is a matter of trying to understand it. 

    WRA

    Saturday, April 15, 2017 5:57 PM
  • Woah I got that on my laptop downloaded. Could you provide a link or explain yourself through screenshots how would I set all my pngs to become transparent from the outside. Please

    WRA

    Hi

    Who are you addressing?


    Regards Les, Livingston, Scotland

    Saturday, April 15, 2017 6:34 PM
  • Hey Tommy,

    I'm curious if some of those grass backgrounds came from what I sent to you a while back?

    They look familiar so I couldn't help but be curious.

    Good job as always. :)


    "A problem well stated is a problem half solved.” - Charles F. Kettering

    Saturday, April 15, 2017 6:42 PM
  • Truss me that is what I was thinking "hmm doesn't that look familiar?"

    WRA

    Saturday, April 15, 2017 7:32 PM
  • @Ieshay 

    https://www.youtube.com/watch?v=RPcYjVeA2g0

    Found a link dont worry about explaining it. 


    WRA

    Saturday, April 15, 2017 7:38 PM
  • Ieshay or Tommy

     I used a youtube video and followed its instructions, Could I be doing something wrong in terms of vb code?


    WRA

    Saturday, April 15, 2017 7:43 PM
  • Ieshay or Tommy

     I used a youtube video and followed its instructions, Could I be doing something wrong in terms of vb code?


    WRA

    Hi

    Remember to use an image format  that supports transparency - such as .png. Otherwise you will lose the transparency when you save the image.


    Regards Les, Livingston, Scotland

    Saturday, April 15, 2017 8:23 PM
  • Yeh that is the format I am using - .png

    WRA

    Saturday, April 15, 2017 8:25 PM
  • Yeh that is the format I am using - .png

    WRA

    Hi

    Are you drawing the images directly onto your background, or are you drawing them into a PictureBox and showing the PictureBox onto the background?


    Regards Les, Livingston, Scotland

    Saturday, April 15, 2017 9:07 PM
  • Nope it isn't being drawn into a picturebox 

    I made a class sprite and picturebox is an instance of the class sprite


    WRA


    Saturday, April 15, 2017 9:13 PM
  • Nope it isn't being drawn into a picturebox 

    I made a class sprite and picturebox is an instance of the class sprite


    WRA


    Hi

    Am I correct in thinking you are putting all your Sprites into PictureBoxes and putting these PictureBoxes over your background?

    If so, you need to think about drawibng the Sprites directly without PictureBoxes (using the Paine event for the container that the background is placed in (may be the Form itself, or a Panel etc))


    Regards Les, Livingston, Scotland


    • Edited by leshay Saturday, April 15, 2017 9:19 PM
    Saturday, April 15, 2017 9:18 PM
  • Ahh alright I will think about that one. Too tired now I will work on it tomorrow since alot has been done today in a days work


    WRA

    Saturday, April 15, 2017 9:24 PM
  • Hi

    Here is some code that may illustrate what I am talking about.

    The code reads the images from a Folder placed in the same place as the executable (ie Release folder)

    These images are available Dice images

    Here is the code that uses them.

    ' Form1 with Button1, Timer1 and Label1
    ' This is a quick and rough example.
    ' In use, the time of the Roll is randomly
    ' set from the range in the DiceRoll value,
    ' but can be user interupted with a mouse click
    ' on the Form.
    ' This example uses 2 die per player
    ' and could be extended for any amount
    ' of die per player, and could concievably
    ' have any number of faces per die (for D & D rules)
    ' These Dice were created from images at
    ' http://game-icons.net/tags/dice.html
    
    ' This Project images are shared at https://1drv.ms/f/s!AgEpHyV3DNo7jHkrYNl2Kc-7w9Bg
    
    Option Strict On
    Option Explicit On
    Option Infer Off
    Public Class Form1
        Dim rand As New Random
        Dim DicePath As String = Application.StartupPath & "\Dice\"
        Dim Dice As New Dictionary(Of Integer, ImageList)
    
        ' Dice Size max=256
        Dim DiceS As Integer = 100
    
        Dim DiceSize As New Size(DiceS, DiceS)
        Dim d1Loc As New Point(20, 20)
        Dim d2Loc As New Point(d1Loc.X + DiceS, 20)
        Dim d3Loc As New Point(d2Loc.X + DiceS + 40, 20)
        Dim d4Loc As New Point(d3Loc.X + DiceS, 20)
        Dim CurrDice1, CurrDice2, CurrDice3, CurrDice4 As Integer
    
        ' a rough max length of roll time
        ' or, a mouse click on Form stops roll also
        Dim DiceRollLength As Integer = 15 + rand.Next(5, 15)
    
        Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As EventArgs) Handles MyBase.Load
            DoubleBuffered = True
            Size = New Size(DiceS * 4 + 80, DiceS + 100)
            Label1.Text = Nothing
            Label1.BackColor = Color.Yellow
            BackColor = Color.FromArgb(255, 0, 0, 0)
            For i As Integer = 1 To 6
                Dim im As New ImageList
                im.ImageSize = DiceSize
                For j As Integer = 1 To 4
                    im.Images.Add(j.ToString, Image.FromFile(DicePath & i.ToString & j.ToString & ".png"))
                Next
                Dice.Add(i, im)
            Next
            CurrDice1 = rand.Next(1, 7)
            CurrDice2 = rand.Next(1, 7)
            CurrDice3 = rand.Next(1, 7)
            CurrDice4 = rand.Next(1, 7)
    
            ' speed of rolling dice -sensible minimum
            ' would be 50
            Timer1.Interval = rand.Next(90, 200)
        End Sub
        Private Sub Form1_KeyDown(sender As Object, e As EventArgs) Handles MyBase.Click
            ' mouse click on Form stops roll
            DiceRollLength = 0
        End Sub
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            ' starts rolling the Dice
            Button1.Visible = False
            Timer1.Start()
        End Sub
        Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles MyBase.Paint
            e.Graphics.DrawImage(Dice(CurrDice1).Images(rand.Next(1, 5).ToString), d1Loc)
            e.Graphics.DrawImage(Dice(CurrDice2).Images(rand.Next(1, 5).ToString), d2Loc)
            e.Graphics.DrawImage(Dice(CurrDice3).Images(rand.Next(1, 5).ToString), d3Loc)
            e.Graphics.DrawImage(Dice(CurrDice4).Images(rand.Next(1, 5).ToString), d4Loc)
        End Sub
        Private Sub Timer1_Tick(sender As Object, e As EventArgs) Handles Timer1.Tick
            Static counter As Integer = 0
            CurrDice1 = rand.Next(1, 7)
            CurrDice2 = rand.Next(1, 7)
            CurrDice3 = rand.Next(1, 7)
            CurrDice4 = rand.Next(1, 7)
            Invalidate()
            counter += 1
            BackColor = Color.FromArgb(255, counter * 8, counter * 8, counter * 8)
    
            If counter > DiceRollLength Then
                Timer1.Stop()
                counter = 0
    
                'change rough max length of roll time
                DiceRollLength = 15 + rand.Next(5, 15)
    
                ' change speed of rolling dice -sensible minimum
                ' would be 50
                Timer1.Interval = rand.Next(90, 200)
    
                Dim comb1 As Integer = CInt(CurrDice1) + CInt(CurrDice2)
                Dim comb2 As Integer = CInt(CurrDice3) + CInt(CurrDice4)
                If comb1 = comb2 Then
                    Label1.Text = "Same - Roll again (" & comb1.ToString & "-" & comb2.ToString & ")"
                Else
                    If comb1 > comb2 Then
                        Label1.Text = "Player1 prevails (" & comb1.ToString & "-" & comb2.ToString & ")"
                    Else
                        Label1.Text = "Player2 prevails (" & comb1.ToString & "-" & comb2.ToString & ")"
                    End If
                End If
                Button1.Visible = True
            End If
        End Sub
    End Class



    Regards Les, Livingston, Scotland


    • Edited by leshay Saturday, April 15, 2017 10:06 PM amended some of nthe code
    Saturday, April 15, 2017 9:30 PM
  • Ill take a look at the code thanks Ieshay

    WRA

    Sunday, April 16, 2017 11:03 AM
  • Ieshay or Tommy

     I used a youtube video and followed its instructions, Could I be doing something wrong in terms of vb code?


    WRA

    Wali,

    The image has transparency but the default picturebox control does not. So you see through the image to the picture box background but you do not see through the picture box background to the form background below.

    You have to add that transparency to a picturebox control somehow. Thats what the class in my example does.

    Try your transparent image you show here in my example. It should work as is.

    If you change the white in your other images to blackthen they will also become transparent in the example as is. That is because the example is using a color range from  

        Color.FromArgb(0, 0, 0))   to  Color.FromArgb(25, 25, 25))

    which is black to dark gray. Change the example to range of white:

    Color.FromArgb(250, 250, 250)) Color.FromArgb(255, 255, 255))

    And now your white background images will be transparent where they have white in the image.

    So you have the options use a transparent image or you can draw the image with a transparent color, some others. Either way a picturebox is not transparent to the form controls below by default so you need to use the special class.

    Leshay is correct you can draw the images directly on the form but then you will have to start over because your project is dependent on draggiing picutureboxes etc.

    PS yes Frank that grass is from you.

    Sunday, April 16, 2017 12:02 PM
  • It works like a charm Tommy Thank you so much :)

    I will send links to some of my other threads which some of you here I am sure will be able to answer.


    WRA

    Sunday, April 16, 2017 12:37 PM