gfx2-iconAn exciting new addition to Corona SDK’s Graphics 2.0 engine is the ability to fill and stroke any graphic object, including the new polygon shape, with images, gradients, and over 25 Photoshop-style composite effects. In addition, the new graphics engine features over 50 filter and generator effects.

In this tutorial, we’ll show you how to apply fills and strokes, generated effects, and filter effects to display objects in Corona.

The following can be used to fill or “fill the stroke” of other objects:

solid color

image

image sheet

gradient

composite

Basic Fill and Stroke

This creates a 200×150 orange rectangle. To add a red stroke, code the following:

shape-rect

Image Fills

Vector shapes can easily be filled with images — just create the base object and apply the .fill table:

empty-circle + labrador labrador-circle

Composite Fills

Two images can be combined together for the fill, but because the images are drawn in layers, the second image will simply overlap the first. So, this will not be useful until you begin applying effects to the fill. Composite effects blend two images together based on various techniques, including:

  • “composite.add”
  • “composite.average”
  • “composite.colorDodge”
  • “composite.darken”
  • “composite.difference”
  • “composite.exclusion”
  • “composite.multiply”
  • “composite.negation”
  • “composite.overlay”
  • “composite.screen”

If you’re familiar with blend modes from popular image editing software like Photoshop™, you’ll recognize effects like screen, multiply, difference, overlay, etc. Just as those effects blend layers together in image editing software, Corona can now blend two images together and apply it as a fill to another display object. Conveniently, you can apply these to either the fill, the stroke, or both.

In the example from above, let’s combine two fills and add a “composite.overlay” effect. Each layer must be defined as paint1 and paint2 respectively. Note that you must also include the type key set to “composite”.

empty-circle + texture labrador labrador-composite

Generators

Generators produce automatically-generated effects like marching ants, checkerboard, noise, stripes, and more. The marching ants effect is particularly handy when applied to the stroke. For those unfamiliar with this effect, it’s what most image editing tools use to mark the selection on a shape, where alternating black and white dashed lines “march” in an animated effect.

labrador labrador-ma

Filter Effects

Filter effects provide various Photoshop-like effects including huelevels, duotone, posterize, sepia, saturation, crystalize, etc. For instance, you can easily change the hue of an image:

labrador labrador-hue

In this case, we provided an additional parameter to the filter: angle. This parameter is specific to hue and it represents the position around the “color wheel” from 0 to 360 degrees. 180 results in a direct “flip” of the hue, while neither 0 or 360 will result in a change because they’re effectively the same hue angle.

You can see a list of all generator, filter, and composite effects in the Effects documentation.

In Summary

Using these advanced fills and strokes, you can achieve a myriad of interesting effects in Graphics 2.0. If you’re a Pro or Enterprise subscriber with access to Graphics 2.0 Daily Builds, please read the documentation and download the Shape sample project.

From: 

Tutorial: Fills and Strokes in Graphics 2.0