Draw gradients

Jorj

  • Posts: 78
hi there,

I want to draw a rectangle using a vertical gradient. I searched the forums but didn't find a thing...
anyone knows if it possible ?

MrWagoner

  • Posts: 424
In my game I draw a laser beam that has a vertical gradient by stretching a 1-pixel-wide graphic across the screen via the "grow actor"-block. The gradient is defined by the color of the pixels in the 1-pixel-wide graphic. Difficult to explain in text, but look at the 1-pixel graphic and the screenshot of the game and you will get it immediately.

I think you could do the same to draw your rectangle, using the 1-pixel-graphic in the proper height as you need it.

Check out my newest game: Blowy Fish!

Jorj

  • Posts: 78
yup I got it... but the problem is that I don't want a mirror gradient... I want to go from black with no transparency to 100% transparency...

MrWagoner

  • Posts: 424
I think you could apply the same technique to a no transparency to 100% transparency gradient. You would just need a different 1 pixel graphic that has a black to transparency gradient instead of my mirror gradient.

Check out my newest game: Blowy Fish!

Jorj

  • Posts: 78
hmmm.... sorry but I am noob... how do I create a  1 pixel graphic with 100% to 0 transparency ? it should be 2 pixels...

LIBERADO

  • *
  • Posts: 2718
A 1-pixel-WIDE graphic. A line.
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

Jorj

  • Posts: 78
please post a code or something... I don't get it :(

LIBERADO

  • *
  • Posts: 2718
You must create a 1-pixel-wide gradient line, then use the "grow" block to increase its width and height to convert it in a gradient rectangle, as in this example:

<a href="http://www.filz.us/files/78145e87/dfc/Line_Gradient_to_Rectangle_Gradient.swf" target="_blank" class="new_win">http://www.filz.us/files/78145e87/dfc/Line_Gradient_to_Rectangle_Gradient.swf</a>

« Last Edit: September 14, 2014, 03:44:40 pm by LIBERADO »
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

MrWagoner

  • Posts: 424
Thanks for the cool example Liberado! That is just how I imagined it.

If the creation of the line is still troubling you, Jorj: The line needs to be created as  a graphic in any graphic editing program via a "gradient fill"-tool. You can also use the built in graphics editor of stencyl to create the graphic.

Check out my newest game: Blowy Fish!

Jorj

  • Posts: 78
thanks for the explanation.

about the line that I can draw :))

piranawrestler

  • Posts: 13
Hello, can someone put a code for the laser beam? Thank you  :)