Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
tutorials:creating_color_gradients [2013/03/05 10:19]
127.0.0.1 external edit
tutorials:creating_color_gradients [2013/05/30 11:29] (current)
daniel
Line 1: Line 1:
 +====== How to create color gradients ======
  
 +In Sparrow, gradients are created with the help of the ''​SPQuad''​-class. A quad is just a rectangle with a color (but without a texture). And if you look at the interface of ''​SPQuad'',​ 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.
 +
 +Do you remember the colorful sky background in PenguFlip? It was created with 5 huge quads, each with one color gradient. Here’s how one of those quads was created:
 +
 +<code objc>
 +uint bottomColor = 0x1c1191; // blue
 +uint topColor = 0xea0b0b; // red
 + 
 +SPQuad *quad = [SPQuad quadWithWidth:​250 height:​150];​
 +[quad setColor:​topColor ​   ofVertex:​0];​
 +[quad setColor:​topColor ​   ofVertex:​1];​
 +[quad setColor:​bottomColor ofVertex:​2];​
 +[quad setColor:​bottomColor ofVertex:​3];​
 +</​code>​
 +
 +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.
 +
 +{{ :​tutorials:​gradient.png |A color gradient}}
 +
 +Remember that ''​SPImage''​ is a subclass of ''​SPQuad''​ --- which means that you can [[modifying_the_color_of_an_image|tint]] a texture with a gradient, too!
  tutorials/creating_color_gradients.txt · Last modified: 2013/05/30 11:29 by daniel
 
Powered by DokuWiki