How the “combine” attribute effects opacity and color

I’ve been asked if I could elaborate on the post about the “combine” attribute in <layer> and <merge> elements, particularly on how it can effect opacity and color.

This post will use screen shots from a Frogans site created for this purpose, which you can download in a ZIP archive here. To view the site, unzip the archive and place the “combiner” folder in the “test” folder of your Frogans Player for developers (alpha version).

Every graphic resource in FSDL has an alpha channel, i.e., a channel in addition to the red, green and blue (RGB) channels of the image. While the combined RGB channels determine the colors in the graphic resource, the alpha channel determines which areas of the resource will be transparent, and to what degree.

The “combine” attribute determines the effect of a layer’s alpha channel (transparent parts) on the alpha channels of other layers.

The four possible values for the “combine” attribute are “add,” “clip,” “cutout” and “inter.”

Let’s take a closer look at each one:

ADD

When the value of your layer’s “combine” element is “add,” then that layer’s alpha channel has no effect on the transparencies of the layers below it.

The screenshot below shows a Frogans slide that features a green circle presented in a layer above layers of a red square and a blue circle. All three layers have a “combine” attribute value of “add.” The menu at the bottom of the slide allows you to change the “combine” value of the green circle and the opacity of the green circle and the red square. Here, the green circle’s “combine” value is “add,” while the opacities of the green circle and the red square are both 100%.

add100100

When the green circle’s opacity is 50%, the areas where it overlaps the other layers will be a blend of 50% green and 50% of colors of the other layers.

add50100
On the other hand, where both the green circle and the red square have 50% opacity, then where these two layers overlap, the color will be a blend of 50% of the green with 25% of the red.

add5050

 

CLIP:

When the “combine” value of a layer is “clip,” then that layer will inherit the alpha channels of the layers below it.

In the screenshot below, the green circle’s “combine” value is “clip.” Its own alpha channel, which gives it its circular shape, has also inherited the alpha channels of the two layers below it, such that, in the areas that are transparent for the other layers, this layer is also transparent.

clip100100
When the green circle layer has only 50% opacity, then the areas where it overlaps the other layers will be a blend of 50% green and 50% of colors of the other layers. In the areas where the other layers are transparent, the green circle is also transparent.

clip50100
When the red square layer also has 50% opacity (or is 50% transparent), then the green circle will inherit that transparency in the area where it overlaps. the color will still be a 50%/50% blend of red and green, but with an overall opacity of 50%. Note that, because of the overall 50% opacity, the color will also blend with the colors of any graphics seen behind them.

clip5050

 

CUTOUT:

The alpha of the layer in front is subtracted from the alpha of the layers behind. It’s as if the layer in front were used to cut a hole in the layer behind. The layer in front is invisible, but it also makes the layer behind invisible where its alpha intersects with the layer behind.

In the screenshot below, the green circle layer’s combine value is “cutout.” Because it is rendered invisible, it has no effect on the colors of the layers behind it.

cutout100100
Where the green circle has 50% opacity, the layers behind will inherit that opacity. Their colors keep the same values, even though they are 50% transparent in these areas. Note that, because of their transparency, their colors will blend with the colors of any graphics seen behind them.

 

cutout50100
When the red square also has 50% opacity, it will show at 25% where it intersects with the green circle (that is, 50% of its original 50%). Again, the color of the green circle layer in front does not effect the color of the red square behind. Only the transparency is effected.

cutout5050

 

INTER:

When the value of “combine” attribute a layer the <layer> element is “inter,” then the content of that layer itself is invisible and that the layers behind it are only visible where they intersect with that layer. In other words, the layers behind inherit the alpha channel of the layer in front (having a “combine attribute of “inter”) and the color content of the front layer is not displayed.

In the screenshot below, the green circle, having a “combine attribute of “inter,” is invisible, but its shape serves as a mask, displaying the red square and the blue circle only where they intersect with the green circle.

inter100100
When the green circle layer in front has 50% opacity, the opacity of the layers behind are divided by 2 – or 50% each. Their colors are not otherwise be affected.

inter50100

When the opacity of the red square is set to 50%, its visible area is rendered as 25%, since the 50% opacity of the green circle has the effect of dividing the red square’s opacity by 2.

inter5050

A note about how the slides are made

In the Frogans site used for the screenshot (downloadable here), <merge> elements are used instead of <layer> elements. By merging resources together this way, “combine” attribute values effect only the merge elements, which are then used to create a single layer.

If this had been done using <layer> elements, then the checkerboard pattern behind would also have be effected by the “combine” attribute value in the green circle layer.

Here’s some example code (from cutout_50_100.fsdl) showing how this part of the slide is made:

     <!-- THE SHAPES -->

<resdraw resid='blu_cir_r' size='220,220' figure='ellipse' stroke='off' color='#0000FF' />

<resdraw resid='red_sq_r' size='220,220' figure='rect' stroke='off' color='#ff0000' />

<resdraw resid='grn_cir_r' size='220,220' figure='ellipse' stroke='off' color='#00ff00' />

     <!-- merge the shapes together -->

<resmerge resid='comb_merge_r' size='540,330' >

    <merge resref='blu_cir_r' align='left-top' pos='270,20'
    combine='add' />

       <!-- red square -->

    <merge resref='red_sq_r' align='left-top' pos='50,20' combine='add' 
    opacity='100'/>

       <!-- green circle -->

    <merge resref='grn_cir_r' align='center-top' pos='270,90' 
    combine='cutout' opacity='50' />

</resmerge>

     <!-- the merged shapes in a layer -->

<layer resref='comb_merge_r' layerid='comb_merge_l' align='left-top' pos='0,0' leapout='all' combine='add' />

Be the first to comment

Leave a Reply

Your email address will not be published.


*