[VB.NET] Gradient Rectangle - [SOLVED]

[Recoil]

Currently I have a rectangle shape I am using for a control image.  It looks flat so I would like to make it gradient instead.  So far I have pieced together this, but I'm pretty certain that the coordinates are wrong for my rectangle...New Vector2f requires 2 coordinates:

Dim col1 As New SFML.Graphics.Color(102, 102, 255, 255)
        Dim col2 As New SFML.Graphics.Color(0, 0, 255, 255)

        Dim v1 As Vertex = New Vertex(New Vector2f(0, Me.Location.X), col1)
        Dim v2 As Vertex = New Vertex(New Vector2f(Me.Location.X, Me.Size.Width), col1)
        Dim v3 As Vertex = New Vertex(New Vector2f(Me.Location.Y, Me.Size.Height), col2)
        Dim v4 As Vertex = New Vertex(New Vector2f(Me.Location.Y + Me.Size.Height, Me.Size.Height), col2)

        Dim rectangle() As Vertex = {v1, v2, v3, v4}
 

I am unable to test that because I cannot do "target.Draw(rectangle())".  I tried inserting arbitrary values, but then VS says cannot convert the rectangle to drawable.

Hoping someone has an idea of how to draw a simple gradient rectangle.  Thanks.

[Laurent]

I'm pretty certain that the coordinates are wrong for my rectangle...New Vector2f requires 2 coordinates:

The coordinates are (X, Y), so yes you're doing something wrong

I am unable to test that because I cannot do "target.Draw(rectangle())".  I tried inserting arbitrary values, but then VS says cannot convert the rectangle to drawable.

Look at the API doc. There are two functions:
- draw(VertexArray)
- draw(Vertex(), count, primitive type)

[Recoil]

The API documents are not very helpful when you don't understand C++.  I found this link also which kinda explains the same thing, and gave me a better idea of the vertices: http://en.sfml-dev.org/forums/index.php?topic=6750.0

So here is how I have them setup, but this is apparently wrong as well:

        Dim v1 As Vertex = New Vertex(New Vector2f(Me.Location.X, Me.Location.X), col1)
        Dim v2 As Vertex = New Vertex(New Vector2f(Me.Size.Width, Me.Location.X), col1)
        Dim v3 As Vertex = New Vertex(New Vector2f(Me.Size.Width, Me.Size.Height), col2)
        Dim v4 As Vertex = New Vertex(New Vector2f(Me.Location.X, Me.Size.Height), col2)
 

Here is the only way I have been able to draw them:

        target.Draw({v1, v2, v3, v4}, PrimitiveType.Quads)
 

What all that does is draw 3 varying sized rectangles (I at least got the shape down) on my render window.  This code is going in a control class, which is supposed to draw the rectangle the size/width/height of the control, in this case a button.  But this is drawing way outside of the bounds of the control.

[Recoil]

Okay, so I simplified this issue because nothing it was doing was making any sense.  Originally I was drawing 5 buttons...4 along the top of my render window, one on the right side.

So I removed all of them but one, and changed the colors that I was using to 4 different colors so I could get a better idea of what this is doing.  This worked for 1 button.  I drew the second button, but nothing happened...when I rendered the third one, an inverted gradient rectangle with the new colors was drawn underneath buttons 2 and 3.  So I am close, to something...I just don't know what.

In my button class I am drawing a normal grey rectangle shape.  All that is working, and when I use multiple instances of my button, it displays them all at the top like it is supposed to.



On that button class I am wanting to make it gradient instead.  So now I am doing this:

        Dim col1 As New SFML.Graphics.Color(255, 0, 0, 255) ' red
        Dim col2 As New SFML.Graphics.Color(0, 0, 255, 255) ' blue
        Dim col3 As New SFML.Graphics.Color(255, 255, 0, 255) ' yellow
        Dim col4 As New SFML.Graphics.Color(0, 255, 0, 255) ' green

        Dim v0 As Vertex = New Vertex(New Vector2f(Me.Location.X, Me.Location.X), col1)
        Dim v1 As Vertex = New Vertex(New Vector2f(Me.Size.Width, Me.Location.X), col2)
        Dim v2 As Vertex = New Vertex(New Vector2f(Me.Size.Width, Me.Size.Height), col3)
        Dim v3 As Vertex = New Vertex(New Vector2f(Me.Location.X, Me.Size.Height), col4)

        target.Draw({v0, v1, v2, v3}, PrimitiveType.Quads)
 

Now when I draw 1 button, here are my results:


However, when I draw all 4 buttons at the top, this is my results:


As you can see, the locations and sizes of the buttons are correct because it is still drawing the grey rectangle shapes in their respective locations.  What I am not understanding is why I am not able to draw the gradient where it is supposed to be on each of the individual buttons.

Does anything look "off" with the vertex locations I am drawing the gradient in my button class?

[Recoil]

Took me a few hours to figure out what was going on.  Nothing I did worked for changing what I was wanting, to get the gradient to draw on the rectangles in the correct location.  I moved my button's position, the gradients still drew in the exact same spot!

So then I did this, which somewhat broke down what I was doing wrong:

        v0.Position.X = My.ControlBounds.X
        v0.Position.Y = My.ControlBounds.Y

        v1.Position.X = My.ControlBounds.X + My.ControlBounds.Size.Width
        v1.Position.Y = My.ControlBounds.Y

        v2.Position.X = My.ControlBounds.X + My.ControlBounds.Size.Width
        v2.Position.Y = My.ControlBounds.Y + My.ControlBounds.Size.Height

        v3.Position.X = My.ControlBounds.X
        v3.Position.Y = My.ControlBounds.Y + My.ControlBounds.Size.Height

 

Everything is drawing like intended now.