From 7be6ed3334a55b7ba89d116905a603c625866c41 Mon Sep 17 00:00:00 2001 From: Elliot Smith Date: Thu, 15 Jul 2010 19:47:53 +0100 Subject: [PATCH] cookbook: Added a recipe about making an actor transparent Explains how to make an actor transparent so that other actors are visible through it. Also explains a bit more generally about opacity and how it's computed from the actor, container, and color; and how actor visibility is affected by depth (fog) and depth order. --- doc/cookbook/Makefile.am | 5 +- doc/cookbook/actors.xml | 229 ++++++++++++++++++ ...tors-opacity-container-affects-opacity.png | Bin 0 -> 5150 bytes doc/cookbook/images/actors-opacity.png | Bin 0 -> 5029 bytes 4 files changed, 233 insertions(+), 1 deletion(-) create mode 100644 doc/cookbook/images/actors-opacity-container-affects-opacity.png create mode 100644 doc/cookbook/images/actors-opacity.png diff --git a/doc/cookbook/Makefile.am b/doc/cookbook/Makefile.am index 30f98d635..205d64b55 100644 --- a/doc/cookbook/Makefile.am +++ b/doc/cookbook/Makefile.am @@ -27,7 +27,10 @@ XSL_XHTML_URI = $(XSL_BASE_URI)/xhtml/docbook.xsl HTML_FILES = html/*.html CSS_FILES = html/*.css -IMAGE_FILES = images/clutter-logo.png +IMAGE_FILES = \ + images/clutter-logo.png \ + images/actors-opacity.png \ + images/actors-opacity-container-affects-opacity.png EXTRA_DIST = clutter-cookbook.xml.in $(IMAGE_FILES) $(XML_FILES) diff --git a/doc/cookbook/actors.xml b/doc/cookbook/actors.xml index 02f28d9a0..4d3dcfd31 100644 --- a/doc/cookbook/actors.xml +++ b/doc/cookbook/actors.xml @@ -257,4 +257,233 @@ on_paint (ClutterActor *actor) +
+ Making an actor transparent by changing its opacity + +
+ Problem + + You want an actor to be transparent so that other + actors are visible through it. +
+ +
+ Solution + + Change the actor's opacity so that + it is partially (or even fully) transparent: + + + +/* 25% transparency */ +clutter_actor_set_opacity (actor, 191.25); + +/* 50% transparency */ +clutter_actor_set_opacity (actor, 122.5); + +/* completely transparent */ +clutter_actor_set_opacity (actor, 0); + + + + Any actor covered or overlapped by the transparent actor + should be visible through it; the Discussion section gives + some examples of how visible you can expect the covered or + overlapped actor to be. + +
+ +
+ Discussion + + Opacity is a property of every ClutterActor. + It is a float on a scale from 0 (invisible) to 255 (completely + opaque). Actors with 0 < opacity < 255 will + have a varying amount of solidity on the stage, so other actors + may be visible through them. + + For example, below are 4 yellow rectangles overlapping + a white rectangle on a blue stage: + + + + + + + + The effect of different opacities levels on + an actor's appearance + + + + + The rectangles have the following opacities: + + + + top-left: 255 (0% transparency) + + + top-right: 191.25 (25% transparency) + + + bottom-right: 122.5 (50% transparency) + + + bottom-left: 61.25 (75% transparency) + + + + Notice how both the stage and the white rectangle are + visible through the yellow rectangles. + + As opacity is a property of every actor, it can + be animated like any other GObject property, using any of + the approaches in the animation API. + + The following sections cover some other considerations + when working with actor opacity. + +
+ Container and color opacity + + If a container has its opacity set, any children of the + container have their opacity combined with their parent's opacity. + For example, if a parent has an opacity of 122.5 + (50% transparent) and the child also has an opacity of + 122.5, the child's effective + opacity is 25% (opacity = 61.25, and it is + 75% transparent). + + To demonstrate the visual effect of this, here are + three rectangles with the same color but different opacity settings, + inside parents which also have different opacity settings: + + + + + + + + How a container's opacity affects the opacity of + its children + + + + + + + The left-hand rectangle has opacity = 255 + and is in a ClutterGroup with + opacity = 255. This means it is fully opaque. + + + The middle rectangle has opacity = 255 + and is in a ClutterGroup with + opacity = 122.5. Notice that the parent opacity + makes the rectangle appear darker, as the stage colour is showing + through from behind. + + + The right-hand rectangle has opacity = 122.5 + and is in a ClutterGroup with + opacity = 122.5. Notice that the rectangle appears + to be even darker, as the stage colour is showing + through both the rectangle and its parent. + + + + Similarly, ClutterColor also contains an + alpha property which governs the transparency + of the color. Where an actor can have a color set (e.g. + ClutterRectangle) the alpha value of the color also + affects the transparency of the actor, for example: + + + + + + + +
+ +
+ Depth and depth order + + Each actor has two more aspects which affect its + apparent opacity: + + + + An actor's depth can have an + effect if the stage has fog (a depth cueing effect) turned on. + As an actor's depth increases, the actor apparently "recedes" from + view and gradually blends into the colour of the stage. This + produces an effect similar to making the actor transparent. + See the ClutterStage documentation for + more details about fog. + + Depth also needs to be considered if you want + one actor to be visible through another: the actor you want + to see through a transparent actor must be "deeper" than (or at + the same depth as) the transparent actor. + + + The depth order governs how + actors within a ClutterContainer implementation + are placed with respect to each other. + + + Depth ordering is not the same thing as depth: depth + ordering records relationships between actors at the same + depth. + + + If you have two overlapping actors actorA and + actorB in a container, and you want actorA + (opaque) to be visible through actorB (transparent), + you should ensure that actorB is "above" actorA + in the depth ordering. You could do this as follows: + + + +/* + * raise actorB so it is above actorA in the depth order; + * NB actorA and actorB both need to be in the same container + * for this to work + */ +clutter_actor_raise (actorB, actorA); + + + + clutter_actor_raise(), + clutter_actor_lower() and related + ClutterActor functions set + depth ordering on actors; see also ClutterContainer's + clutter_container_raise_child() and + clutter_container_lower_child() + functions. + + + +
+ +
+ +
+ diff --git a/doc/cookbook/images/actors-opacity-container-affects-opacity.png b/doc/cookbook/images/actors-opacity-container-affects-opacity.png new file mode 100644 index 0000000000000000000000000000000000000000..46be2e17838fffadd6bdd9fa531c0b84de28cea5 GIT binary patch literal 5150 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 HPhS5I;I8mm literal 0 HcmV?d00001 diff --git a/doc/cookbook/images/actors-opacity.png b/doc/cookbook/images/actors-opacity.png new file mode 100644 index 0000000000000000000000000000000000000000..1080c99047ad76c7b27aca0ca1f28d8794a3722f GIT binary patch literal 5029 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 literal 0 HcmV?d00001