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

{ r, g, b, a }

image

{ type="image", baseDir=, filename= }

image sheet

{ type="image", sheet=, frame= }

gradient

{ type="gradient", color1={ r, g, b, a }, color2={ r, g, b, a }, direction= }

composite

{ type="composite", paint1=, paint2= }

Basic Fill and Stroke

local myRectangle = display.newRect( 0, 0, 200, 150 )
myRectangle.fill = { 1.0, 0.5, 0.0 }

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

myRectangle.strokeWidth = 10
myRectangle.stroke = { 0.6, 0.08, 0.16 }
shape-rect

Image Fills

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

local object = display.newCircle( 0, 0, 256 )
object.x = display.contentCenterX
object.y = display.contentCenterY
object.fill = { type="image", filename="labrador.png" }
empty-circle + labrador labrador-circle

Composite Fills

If you’re familiar with blend modes from popular image editing software like Photoshop™, you’ll recognize effects like screen, multiply, vivid light, overlay, etc. Just as those effects blend layers together in image editing software, Corona can blend two images together and apply it as the fill/stroke on another display object. For details on this feature, see the Blending and Composite Fills tutorial.

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.

object.strokeWidth = 2
object.stroke.effect = "generator.marchingAnts"
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:

object.fill.effect = "filter.hue"
object.fill.effect.angle = 290
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.

  1. Great tutorial! Quick question: is it now possible to do some of those photo apps that use effects and filters? It seems to me that GFX 2.0 has now a lot of filters to play with!

    Thanks!!!

    Mo

  2. Anyway to see a 2.5D specific tutorial? I am wondering if that we will need to make a game that look like Clash of clans ( the look I mean not the game concept)?

    Thank a lot.

    Mo

  3. Hi, well I see that we can apply the photoshop filters. But since we cannot dynamically change the parameters, where’s the benefit over applying the filters in photoshop?

    • Brent Sorrentino says:

      Hi Mike,
      Many of the effects have adjustable parameters. Please see the Effects guide for a list of these:
      http://docs.coronalabs.com/guide/graphics/effects.html

      As time permits, I’m planning to clean up this page and hopefully add some sample images on there too, but in the meantime, you can preview the effects by running the sample projects in the Corona SDK local application folder:

      CoronaSDK > SampleCode > Graphics-Premium > FilterViewer
      CoronaSDK > SampleCode > Graphics-Premium > GeneratorViewer

      Sincerely,
      Brent Sorrentino

  4. Would it possible to have a ‘composite.difference’ filter but for .blendMode?
    Reason being, if i create a vector object it’s not possible to use composite.difference or any other composite filter to composite it with an image. Or is there?
    .blendMode already has an ‘add’ and ‘multiply’ would it be difficult for you guys to add ‘difference’ also?
    Cheers.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>