Tutorial: Blends and Composite Fills in Graphics 2.0

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

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:

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.

More: 

Tutorial: Blends and Composite Fills in Graphics 2.0

« »

© 2017 SDK News.

Disclaimer: SDKNews.com only syndicates the blog entries from various SDK blogs.
We are not the creator/author of these entries (posts). Product names, brand names
and company names mentioned on this site may be trademarks of their respective owners.