Creating color gradients

In Starling, gradients are created with the help of the Quad-class. A quad is just a rectangle with a color (but without a texture). And if you look at the interface of the Quad class, you’ll see that you can not only set one color, but four of them: one per vertex. This is a very simple and efficient way to create color gradients.

Have you seen the colorful sky background in PenguFlip1)? It was created with 5 huge quads, each with one color gradient. Here’s how one of those quads was created:

var bottomColor:uint = 0x1c1191; // blue
var topColor:uint    = 0xea0b0b; // red
var quad:Quad = new Quad(250, 150);
quad.setVertexColor(0, topColor);
quad.setVertexColor(1, topColor);
quad.setVertexColor(2, bottomColor);
quad.setVertexColor(3, bottomColor);

The vertices 0 and 1 are at the top, while 2 and 3 are at the bottom. Naturally, you can use 4 different colors for the 4 vertices, if you want to.

A color gradient

Remember that Image is a subclass of Quad — which means that you can tint a texture with a gradient, too!

Actually, PenguFlip was written with Sparrow, but it used exactly that principle.
  tutorials/creating_color_gradients.txt · Last modified: 2012/04/05 10:34 by daniel
Powered by DokuWiki