Este tutorial explica como manipular imágenes bitmap desde Lingo con las nuevas funciones que incorpora Director 8. Está escrito para programadores iniciados aunque los ejercicios y ejemplos son bastante elementales. Al final de la página, dispones de un enlace para bajarte el curso completo con los archivos de ejemplo (D8).

Indice

Funciones Image

Con Lingo, podemos crear, editar y copiar un gráfico a partir de uno existente o crear uno totalmente nuevo. Para esto se usa la función Image que, básicamente, lo que hace es crear un puntero a un gráfico bitmap. Este puntero será el objeto image que una vez creado podemos editar con una serie de comandos. También podemos dibujar nuevos pixels, copiar parte de él o su totalidad, aplicar efectos de transparencia y otras operaciones que explicaré más adelante.

Crear una imagen

Hay 3 formas de crear un objeto image:

1. Objeto image de un bitmap member ya existente.

miImage = member(ìgrafico.bmpî).image

2. Objeto image del Stage. Los cambios efectuados en el objeto se reflejarán directamente sobre el Stage.

miImage = (the stage).image

3. Objeto image autocontenido. No está tomado de ningún gráfico. Permanece invisible en la memoria mientras no se copie al Stage o dentro de un "member".

Image(): Hay que fijar el tamaño ( en pixels ) y la profundidad de color ( en bits). Opcionalmente, también se puede especificar un canal alfa y la paleta de colores.

Sintáxis: Image ( ancho, largo, profundidad de color {, canal Alfa }{, paleta})

La profundidad de color puede ser 1, 2, 4, 8, 16, 32 bits. Si es 32 se puede especificar un canal Alfa poniendo un 8:

miImage = image (320,240,32,8)

Para profundidades 8, 4, y 2 bits se puede especificar la paleta entre las propias de Director o una personalizada. Si se intenta dibujar con un color que no existe en la paleta Director tomará el más cercano.

Ejemplos:

miImage = image (320,240,16)

miImage = image (100,100,8,#systemWin)

miImage = image (100,100,2, member "paleta")

Truco: Para asignar un objeto imagen a un cast member, creamos desde la ventana Paint un gráfico cualquiera ( por ej: un punto negro ) y lo nombramos "vacio". Entonces:

member("vacio").image = miImage

En los tres casos, salvo errores, la variable miImage contendrá el objeto image. Realmente, miImage guarda la dirección de memoria reservada para ese gráfico. Si, por curiosidad, hacemos "put miImage" desde la ventana message el resultado será algo como esto:

-- < image: 4e2380>

PRACTICA 1

En el archivo image1.dir se crean tres objetos image de diferente forma. Más adelante, cuando conozcamos funciones de dibujo, manipularemos los objetos.

Editar una imagen

Existen varias funciones para editar una imagen. Podemos dibujar puntos, líneas y fíguras y copiar regiones o toda la imagen aplicando efectos de transparencia y tinta. Estas funciones son:

Draw(): Dibuja una línea o figura dentro de un objeto imagen. Podemos fijar el grosor y el color del trazado.

Sintáxis: ObjetoImagen.draw ( x1,y1,x2,y2, parámetros de tipo de figura o grosor de línea o color )

#ShapeType: Tipos de figura posibles #oval, #rect, #roundRect, o #line.

#LineSize: Grosor de línea

#Color: Hay dos formas de seleccionar el color, valor entero o RGB. Para imagenes 16 o 32 bits es m·s r·pido (y mejor) utilizar el color rgb(). Para imagenes 8 bits o menos, es m·s rapido (y m·s exacto) utilizar el valor entero del indice (dentro de la paleta).

Ejemplo:

member("migráfico.bmp").image.draw(0, 0, 25, 25, [#shapeType:#oval, #lineSize:2, #color: rgb(0, 0, 255)])

Fill(): Dibuja una línea o figura dentro de un objeto imagen con relleno. Su uso es muy parecido a Draw.

Sintáxis: ObjetoImagen.fill ( x1,y1,x2,y2, parámetros de tipo de figura o grosor de línea o color )

#ShapeType: Tipos de figura posibles #oval, #rect, #roundRect, o #line.

#LineSize: Grosor de línea

#Color: Color del relleno

#bgColor: Color del borde

Ejemplo:

member("migráfico.bmp").image.fill(0, 0, 25, 25, [#shapeType:#rectl, #color: rgb(0, 255, 255)])

PRACTICA 2

Image2.dir: dibujar directamente sobre el Stage con las funciones Draw y Fill.

GetPixel(): Devuelve el valor del color de una imagen en una coordenada concreta. El formato del resultado puede ser en RGB o en valor entero

Sintáxis: ObjetoImagen.getPixel(point(x, y) {, #integer})

Si omitimos el parámetro #integer, el formato será RGB para profundidades de 16 y 32 bits y para profundidades de 1, 2, 4 y 8 bits la respuesta será en modo "índice de paleta".

Para 32 bits, si la imagen incluye canal alfa, es mejor usar el modo entero para no perder su información.

Ejemplo:

put member("migráfico.bmp").image.getPixel(point(1, 1) )

Dará como resultado algo así:

-- rgb( 0, 0, 255)

SetPixel(): Fija el color de un pixel de una imagen en una coordenada concreta.

Sintáxis: ObjetoImagen.SetPixel( x, y, color)

Ejemplo:

member("migráfico.bmp").image.setPixel ( 1, 1, rgb ( 0,0,255) )

Esto pinta de color azul el pixel de la posición (1,1), del bitmap "migráfico.bmp".

PRACTICA 3

Image3.dir: ejemplo completo del uso de SetPixel y GetPixel.

Copiar una imagen

copyPixels(): Copia un objeto imagen o una parte rectangular de él a otro objeto imagen.

Sintáxis: ObjetoImagenDestino.copyPixels(ObjetoImagenFuente, destinoRect, fuenteRect {, Parametros})

La lista de Parámetros es opcional. Podemos jugar con el nivel de transparencia, efectos de tinta, colores, etc. Ver la ayuda de Director para más detalles.

Ejemplos:

(1)

member("Destino.bmp").image.copyPixels(member("Fuente.bmp").image, rect(0, 0, 25, 25), rect(0, 0, 25, 25))

Copia un rectangulo de 25x25 de la posición 0,0 del gráfico "fuente.bmp" al gráfico "destino.bmp" en la misma posición y tamaño.

(2)

member("Destino.bmp").image.copyPixels(member("Fuente.bmp").image, member("Destino.bmp").rect, member("Fuente.bmp").rect)

Copia por completo el gráfico "fuente.bmp" en el gráfico "destino.bmp". Si el tamaño fuera diferente se ajustaría al tamaño destino.

(3)

member("Destino.bmp").image.copyPixels(member("Fuente.bmp").image, member("Destino.bmp").rect, member("Fuente.bmp").rect, [#blendLevel: 50])

Copia por completo el gráfico "fuente.bmp" en el gráfico "destino.bmp" aplicando un nivel de transparencia del 50%.

Duplicar una imagen

Es recomendable hacer una copia de una imagen antes de maipularla si queremos restaurarla o dejarla como al principio. En algunos casos, hacer determinadas operaciones sobre la misma imagen puede tener efectos imprevistos por lo que es mejor realizarlas sobre un duplicado. Tenemos varias opciones: (1) duplicar un miembro de reparto ( cast member ) ó (2) copiar un objeto imagen en otro nuevo, vacio o con cualquier imagen que será reemplazada por la copia.

duplicate(): Hace un duplicado de un miembro de reparto.

Sintáxis: member(originalMiembro).duplicate()

Ejemplo:

member("migráfico.bmp").duplicate()

member("otrográfico.bmp").duplicate(15)

La primera orden copia "migráfico.bmp" en el primer cast libre y la segunda copia "otrográfico.bmp" en el cast 15.

Es posible asignar a un miembro de reparto un objeto imagen. Ejemplo:

member ("migráfico.bmp").image = ObjetoImagen

PRACTICA 4

Image4.dir: uso de CopyPixels.

Canales Alfa

Desde programas de retoque fotográfico se pueden crear imágenes con canales alfa. El canal alfa es una capa adicional de una imagen que se usa para crear máscaras de transparencia. Las operaciones que nos permiten las funciones image para canales alfa son: aislar este canal y crear una nueva imagen de 8 bits con él, visionar o no la información alfa, añadir a una imagen el canal alfa de otra imagen y variar el nivel de transparencia.

Aquí tienes la descripción de las funciones Alfa:

extractAlpha(): Esta función copia el canal alfa de un gráfico de 32 bits y devuelve un nuevo objeto imagen. El resultado es un objeto imagen de 8 bits en escala de grises conteniendo el canal alfa.

Sintáxis: ObjetoImagen.extractAlpha()

Ejemplo:

miAlfa = member("migráfico.bmp").image.extractAlpha()

member("nuevo.bmp").image=miAlfa

Esto crea un objeto imagen conteniendo el canal alfa y lo salva dentro del gráfico "nuevo.bmp".

Si tenemos un gráfico de 32 bits con un canal alfa, resulta útil extraerlo para preservar el canal alfa porque si bajamos la profundidad de color de la imagen, pierdes la información del canal alfa.

setAlpha(): Fija el nivel de transparencia del canal alfa entre 0 y 255. Valores bajos, más transparentes y valores altos, más opacos.

Sintáxis: ObjetoImagen.setAlpha(nivelAlfa)

member("migráfico.bmp").image.setAlpha(50)

useAlpha(): Habilita o no, la información de un objeto imagen con canal alfa.

Sintáxis: ObjetoImagen..useAlpha

Ejemplo:

ObjetoImagen1.useAlpha= TRUE

ObjetoImagen2.useAlpha= FALSE

PRACTICA 5

Image5.dir: uso de canales Alfa.

Colorear imágenes

La versión de Director 9 contará, entre otras novedades, con la función FloodFill para relleno de fíguras ( similar en comportamiento al bote de pintura del Paint ). Mientras no salga la nueva versión, mFlood(), rutina escrita por Jakob Hede Madsen, basada en el uso de getPixel y setPixel, permite rellenar figuras de color.

PRACTICA 6

Image6.dir: uso de mFlood(); función para colorear de Jakob Hede Madsen.

Enlaces Interesantes

Muy buenos ejemplos y tutoriales de Imaging Lingo:

http://www.setpixel.com

http://www.simtek.dircon.co.uk/deight/index.html