shape appearance

This tutorial present the shape appearance property.
appearance property define the shape color, texture, ...

Shape {
  SFNode appearance NULL
  SFNode geometry NULL
}

Appearance {
  SFNode material NULL
  SFNode texture NULL
}

Note:
See Draw shapes tutorial to draw a shape.
See Appearance node documentation.

In 2D scene, material is define via a Material2D node.

Material2D {
  SFColor emissiveColor 1 1 1
  SFFloat transparency 0
  SFBool filled TRUE
}

With:

emissiveColor: Color (with red/green/blue float component)
transparency: Transparency. Float value between 0.0 (opaque) and 1.0 (transparent)
filled: Filled shape... or not filled shape.

We try to draw 2 shapes.
1st shape: rectangle / blue / opaque / not filled.
2nd shape: circle / green / transparent (10%) / filled / over the 1st shape.
Final result

1st shape

Shape {
  appearance Appearance {
    material Material2D {
      emissiveColor 0.0 0.0 1.0
      transparency 0.0
      filled FALSE
    }
  }
  geometry Rectangle { size 40 40 }
}

2nd shape

Shape {
  appearance Appearance {
    material Material2D {
      emissiveColor 0.0 1.0 0.0
      transparency 0.1
      filled TRUE
    }
  }
  geometry Circle { radius 20 }
}

Final code:

Group {
  children [
    Transform2D {
      translation 10 10
      children [
        Shape {
          appearance Appearance {
            material Material2D {
              emissiveColor 0.0 0.0 1.0
              transparency 0.0
              filled FALSE
            }
          }
          geometry Rectangle { size 40 40 }
        }
      ]
    }
    Transform2D {
      translation -10 -10
      children [
        Shape {
          appearance Appearance {
            material Material2D {
              emissiveColor 0.0 1.0 0.0
              transparency 0.1
              filled TRUE
            }
          }
          geometry Circle { radius 20 }
        }
      ]
    }
  ]
}

With MeMo, we can apply a image (or a video) on shape.
texture field can be set to an ImageTexture or a MovieTexture.
See ImageTexture node and MovieTexture node documentation.

Following example draw a square with a picture:

Note:
Picture file is in "src" folder.

Final result

Group {
  children [
    Shape {
      appearance Appearance {
        texture ImageTexture {
          url ["img_32x32.png"]
        }
      }
      geometry Rectangle { size 32 32 }
    }
  ]
}

See Draw picture tutorial for more examples.

And, an MovieTexture example:

Group {
  children [
    Shape {
      appearance Appearance {
        texture MovieTexture {
          url "http://localhost/arte.mpg"
        }
      }
      geometry Rectangle { size 160 120 }
    }
  ]
}

Note:
MovieTexture node is not supported by the micro emulator (default SDK emulator).
Install the Sun Wireless ToolKit to test video (MPEG video only).

See video tutorials for more informations.