Transparency

Definition

An Alambik graphics object is considered transparent if you can see through it (or any portion of it), making the background or any graphic objects behind it visible.

Transparency can be either binary or progressive.

1. Binary transparency
2. Progressive transparency


Binary transparency

1.1. Defining the transparency color.
1.2. Binary transparency and the Alambik Screens
1.3. Changing the transparency color.

In binary transparency mode (also referred to as full transparency), colors in an image are either fully transparent or fully opaque.

This mode applies to most Alambik 2D objects :

· Text
· Menulist
· Icon
· Picture
· Panel
· Button
· Sprite
· Viewport
· Scroll
· Mouse

1.1. Defining the transparency color:

The above-mentioned Alambik 2D AVOs supporting binary transparency can be divided into two categories:

1.1.1. The objects produced from one or several bitmaps created outside the Alambik environment.
1.1.2. The objects generated within Alambik with no outside bitmap.

1.1.1. The Objects made from one or several bitmaps:

Icon, Picture, Panel, Button, Sprite, Scroll and Mouse objects are all composed of bitmap images.

Such bitmaps can be created outside the Alambik environment using 2D illustration software.

To employ images created outside Alambik, make sure they've first been saved in either the ".gif" or the ".png" format.

The transparency color in your imported ".gif" or ".png" images will be considered transparent by Alambik when they are used within an Icon, Panel, Button, Sprite, Scroll or Mouse object.

By default, the Picture object will treat the transparency color as opaque.

For Example:

screen.resolution.set (512,384)
pattern
.display ("bubble.gif")
icon
.display ("dinosaur.png",CENTER,CENTER)

This script displays the cut-out image dinosaur.png, which was created with a transparency color around its edges, above a bubble-patterned background.

Both 2D objects get displayed in the default MID Alambik screen.


screen.resolution.set (512,384)
pattern
.display ("bubble.gif")
picture
.display ("dinosaur.png",CENTER,CENTER)  

This script displays the same image above the same bubble-patterned background, but this time the transparent color is opaque.

Both 2D objects get displayed in the default MID Alambik screen.


1.1.2. The Objects created within Alambik with no outside bitmap.

Binary transparent objects can also be directly generated within Alambik, without needing to create bitmap images outside of the scripting environment.

This applies to:

· Text, Menulist and Viewports.
· Virtual Screens.

1.1.2.1.The Text and Menulist and Viewport objects:

By default, the background color for Text, Menulist and Viewport objects is black. Their default text color is white.

For Example:

screen.resolution.set (512,384)
pattern
.display ("bubble.gif") 
text
.resize.stack(512,384,RESIZE_MAINTAIN_RATIO)
text
.display ("Hello World",CENTER,CENTER) 

This script displays the text, "Hello World," without any transparency above a bubble-patterned background.

Both 2D objects are displayed in the default MID Alambik screen.


Similarly, for Viewport objects, meshes and scenes are displayed by default against a black background.

For example :

screen.resolution.set (512,384)
pattern
.display ("bubble.gif")
@Camera = camera
.create (0.0, 0.0, -100.0, 0.0, 0.0, 0.0)
@Viewport = viewport
.create (256, 192)
mesh
.rotation.stack (-30, 30, 0)
@Cube = mesh
.cube.create (40)
viewport
.camera.set (@Viewport, @Camera)
mesh
.display (@Cube)
viewport
.display (@Viewport, CENTER, CENTER) 

1.1.2.2.The Virtual screen:

To create a Virtual Screen, use the instruction screen.set to designate a bitmap image to become the target for all graphic display.
Along with the instructions icon.create, panel.create, button.create, sprite.create and mouse.create, the Virtual Screen allows you to make use of expert level scripting in order to manage the dynamic creation of transparent bitmaps.

In this case, any pixels which have not been designated to be colored will be transparent.

1.2. Binary transparency and Alambik screens.

In a different section we have described the three Alambik screens: MID, BACK and FRONT, each of which can contain up to 65,535 layers.
Thanks to the existence of these three screens, you can handle transparency in one of two different ways.

Alambik can either display transparent pixels as transparent or clear the area that would normally have been displayed behind the transparent pixels

In the first case, transparent objects will behave in the exact manner described earlier in this section.

In the later case, anything displayed in the same Alambik screen behind the transparent object (i.e., in a lower layer) will be permanently erased.

As a consequence, any other screen(s) behind the screen belonging to the transparent object will be made visible through its transparent (erased) pixels.

Furthermore, an Alambik screen can hold persistent as well as non-persistent graphic objects. Persistent graphic objects will always erase non-persistent graphic objects.

Therefore, if you plan to display objects above one another in the same Alambik screen, it's best to use objects that are either all persistent or all non-persistent.

It's a good idea, therefore, to know the default transparency and persistence states for the different Alambik objects:

 

Default Transparency

Default Persitence

Text
OFF
OFF
TextLink
OFF
OFF
Menulist
OFF
ON
Picture
OFF
OFF
Icon
ON
OFF
Pattern
ON
OFF
Panel
ON
OFF
Button
ON
ON
Sprite
ON
ON
Video
OFF
ON
Viewport
ON
ON
Scroll
ON
ON
Mouse
ON
ON

In order to illustrate the different ways transparency and persistence work, we've included a few examples:

1.2.1. Icon object, default behavior :

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
icon
.display ("dinosaur.png",CENTER,CENTER)

This will be displayed as:

1.2.2. Icon object, transparency OFF :

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
@icon = icon
.load ("dinosaur.png")
icon
.transparency.set (@icon,OFF)
icon
.display (@icon,CENTER,CENTER) 

This will be displayed as:

1.2.3. Icon object, persistence ON :

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
@icon = icon
.load ("dinosaur.png")
icon
.persistence.set (@icon,ON)
icon
.display (@icon,CENTER,CENTER)

This will be displayed as:

1.2.4. Picture object, default behaviour:

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
picture
.display ("dinosaur.png",CENTER,CENTER) 

This will be displayed as:

1.2.5. Picture object, transparency ON :

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
@picture = picture
.load ("dinosaur.png")
picture
.transparency.set (@picture,ON)
picture
.display (@picture,CENTER,CENTER) 

This will be displayed as:

1.2.6. Picture object, transparency and persistence ON :

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
@picture = picture
.load ("dinosaur.png")
picture
.transparency.set (@picture,ON)
picture
.persistence.set (@picture,ON)
picture
.display (@picture,CENTER,CENTER) 

This will be displayed as:

1.3. Changing the transparency color:

Alambik features two color management modes:

· Pre-defined colors
· RGB True colors

1.3.1. Pre-defined colors:

When using pre-defined colors, you need only to indicate the name of a pre-defined color constant.

For example: COLOR_BLACK, COLOR_SILVER, COLOR_GRAY, COLOR_WHITE, COLOR_MAROON, COLOR_RED, COLOR_PURPLE, COLOR_FUCHSIA, COLOR_GREEN, COLOR_LIME, COLOR_OLIVE, COLOR_YELLOW, COLOR_NAVY, COLOR_BLUE, COLOR_TEAL, COLOR_AQUA, COLOR_DEFAULT, COLOR_TRANSPARENCY.

COLOR_TRANSPARENCY is one such pre-defined color.

You may dynamically modify the pre-defined transparency color in any of the following objects: Text, Icon, Picture, Panel, Sprite and Mouse.
To do so, you swap colors using the instruction object.color.swap.

For example, to change the transparency color of an icon, you first need to define the color that is to replace its current transparency color, then assign transparency to another one of its current opaque colors:

icon.color.swap.set (@icon, COLOR_TRANSPARENCY, COLOR_RED)
icon.color.swap.set (@icon, COLOR_BLUE ,COLOR_TRANSPARENCY) 

Using these two instructions, the formerly transparent areas of the icon have been changed to red, and a new transparency has been assigned to all areas that were formerly blue.

1.3.2. RGB True colors:

The second color management mode, known as RGB True colors, employs a standard convention for expressing colors in terms of their component red, green and blue intensity levels.

Each of these intensity values can be assigned a strength ranging between 0 and 255. Unlike mixing paints in the real world, RGB color values are additive.

This means, for example, that red mixed with green will yield yellow rather than brown. Pure red has the value "255,0,0", pure green "0,255,0", pure blue",0,0,255", black "0,0,0" and white "255,255,255".

There is no transparency color in this mode. To make an RGB True color transparent, you must either transform it into a pre-defined color, or clear pixels.

1.3.2.1. Converting an RGB True color into a pre-defined color:

To make this conversion, use the instruction number.color.convert

For example, if you want to make the RGB True color (97,122,155) of a sprite transparent, you would do the following:

sprite.color.swap.stack (number.color.convert (97,122,155), COLOR_TRANSPARENCY)

1.3.2.2. Clearing Pixels:

Instructions featuring the clear action allow you to erase pixels from a chosen portion of the current Alambik screen. For example,

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
box
.Clear(CENTER, 100, 50, 100)

This will be displayed as:

1.3.2.3. One exception: ".fli", ".flc", and animated gif sprites.

To define the transparency color for sprites with color pallets (FLI, FLC, or Animated gifs), Alambik script provides the instruction sprite.transparency.color.set.


Progressive transparency

Progressive transparency lets you apply transparency to all the pixels in an image according to degree.

Progressive transparency functions correctly only if all screen elements are of the same kind (either all persistent or all non-persistent). It should also be noted that this functionality, unlike that of total transparency, does not take into account other Alambik screens.

As a result,

screen.resolution.set (512,384)
pattern
.display ("bubble.gif")
@icon
=icon.load ("dinosaur.png")
icon
.transparency.level.set (@icon,70)
icon
.display (@icon,CENTER,CENTER)

This will be displayed as:

But :

screen.resolution.set (512,384)
pattern
.display ("bubble.gif")
@picture = picture
.load ("dinosaur.png")
picture
.transparency.level.set (@picture,70)
picture
.display (@picture,CENTER,CENTER)

This will be displayed as:

and,

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end() box.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
@icon
=icon.load ("dinosaur.png")
icon
.transparency.level.set (@icon,70)
icon
.display (@icon,CENTER,CENTER)

This will be displayed as:

and,

screen.resolution.set (512,384)
screen
.set (BACK)
pattern
.display ("bubble.gif")
screen
.end()
box
.color.select (COLOR_RED)
box
.fill.select (VECTOR_SOLID)
box
.display (CENTER, CENTER,320,200)
@picture = picture
.load ("dinosaur.png")
picture
.transparency.level.set (@picture,70)
picture
.display (@picture,CENTER,CENTER)

This will be displayed as: