Posted on by

gfx2-iconIf you work with images by trade or simply enjoy doing so as a hobby, digitally enhancing photos and images is a common and useful process. Using popular image editing applications like Adobe Photoshop™, you can apply powerful visual effects by blending layers together. For example, you can:

  • Screen two identical layers to create a high-key effect.
  • Overlay two identical layers to create a “grunge” effect.
  • Blend multiple images into one.

These are a mere introduction to the possibilities that Corona’s Graphics 2.0 engine lets you apply via composite fills.

Here’s a comparison of Photoshop (or similar) blend modes with the equivalent Corona SDK composite effect:

  • Darken — composite.darken
  • Multiply — composite.multiply
  • Color Burn — composite.colorBurn
  • Linear Burn — n/a
  • Darker Color — n/a
  • Lighten — composite.lighten
  • Screen — composite.screen
  • Color Dodge — composite.colorDodge
  • Linear Dodge — composite.add
  • Lighter Color — n/a
  • Overlay — composite.overlay
  • Soft Light — composite.softLight
  • Hard Light — composite.hardLight
  • Vivid Light — composite.vividLight
  • Pin Light — composite.pinLight
  • Hard Mix — composite.hardMix
  • Difference — composite.difference
  • Exclusion — composite.exclusion
  • Subtract — composite.subtract
  • Divide — n/a
  • Hue — composite.hue
  • Color — composite.saturation
  • Saturation — composite.color
  • Luminosity — composite.luminosity

Discussing each of these blend modes is beyond the scope of this tutorial, so please locate an online tutorial if you need further information. To view the available properties for each of these effects, see our Effects documentation. If you’re inclined, you can also read about the math involved in these blend modes.

Creating Composite Fills

In Graphics 2.0, Corona allows you to combine two images together in a composite fill. Once you define this paint, you can use it to fill an object and then apply a blend mode to it. Let’s look at the basic code for this:

image01
texture3
local compositePaint = {
   type="composite",
   paint1={ type="image", filename="images/image01.jpg" },
   paint2={ type="image", filename="images/texture3.jpg" }
}
local object = display.newRect( 0, 0, 600, 400 )
object.x = display.contentCenterX
object.y = display.contentCenterY
object.fill = compositePaint
object.fill.effect = "composite.multiply"

Here, we begin by defining compositePaint. In this case, let’s blend two different images, defined by the type for each set to “image” plus the associated filename reference. Next, let’s create a basic newRect() object and center it on the screen. Then, we can fill the rectangle with the composite paint by referencing the existing paint in object.fill.

Since the images behave like standard layered objects, the paint1 image will always overlap the paint2 image. Thus, you won’t see any visual effect until you “mix the paint” together by applying a blend effect. In this example, we apply a “composite.multiply” blend to the object via the fill.effect parameter.

composite-multiply
composite.multiply
image01
normal (non-blended)

The following video shows the various blend effects when the texture3 image is blended with the photo:

Note that you can even blend the same image with itself:

local compositePaint = {
   type="composite",
   paint1={ type="image", filename="images/image01.jpg" },
   paint2={ type="image", filename="images/image01.jpg" }
}
local object = display.newRect( 0, 0, 600, 400 )
object.x = display.contentCenterX
object.y = display.contentCenterY
object.fill = compositePaint
object.fill.effect = "composite.overlay"
composite-multiply
composite.overlay
image01
normal (non-blended)

The following video shows the various effects when the same image is blended with itself:

In Summary

Using composite fills and blend modes, you can achieve a variety 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 sample project from DropBox.


Posted by . Thanks for reading...

6 Responses to “Tutorial: Blends and Composite Fills in Graphics 2.0”

  1. Mo

    VERY NICE! This means that we now can make all those photo editing/filter apps that seems to be popular in the app store.

    THANK YOU.

    Mo

    Reply
  2. Hendrix

    Very cool Rob

    But what if I want to use a image from my system.TemporaryDirectory, lets call the image “image01.jpg”
    The terminal throws me the error: Attempt to index field ‘fill’ (a string value)

    Reply
  3. Hendrix

    My case is:
    Making a little app where you start up taking a photo and store it in the system.TemporaryDirectory (R/W access)
    then it should fire up the G2 engine with all of the composite.fill and all the other good stuff ;D

    …good luck trying to do this
    it does not work for me
    I tried this tips from Walter :

    compositePaint =
    {
    type=”composite”,
    paint1 = { type=”image”, baseDir= baseDir, filename = “image01.jpg” },
    paint2 = { type=”image”, filename = “texture3.jpg” }
    }
    still no happy ending for me

    If you know whats wrong, please let me know

    Reply
    • Rob Miracle

      Hendrix, I would recommend posting this in the forums under the G2.0 sub-forum. You will probably need to post a bit more code too as well as make sure you’re running the latest G2.0 daily build.

      Thanks
      Rob

      Reply

Leave a Reply

  • (Will Not Be Published)