Posted on by

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.


Posted by . Thanks for reading...

8 Responses to “Tutorial: Fills and Strokes in Graphics 2.0”

  1. Mo

    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

    Reply
  2. Antheor

    .fill & .stroke way cooler than setFillColor,…

    Good to see that even when upgrading the system you always ty to simplify it.

    Reply
  3. Mo

    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

    Reply
  4. mike

    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?

    Reply
    • Brent Sorrentino

      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

      Reply
  5. Jacques

    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.

    Reply

Leave a Reply

  • (Will Not Be Published)