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

Crear una imagen

Editar una imagen

Copiar una imagen

Canales Alfa

Función para colorear

Enlaces interesantes

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.

Truco: Para asignar este 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:

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.image.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. Es más cómodo utilizar la forma rgb ( componente rojo, componente verde, componente azul ), sin embargo, el código se ejecuta más rápido usando la forma valor entero.

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.image.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

En image2.dir dibujamos con las funciones Draw y Fill directamente sobre el Stage.

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.image.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.image.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

En image3.dir puedes ver un 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))

(2)

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

(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:

PRACTICA 4

En image4.dir puedes ver un ejemplo del 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)

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

En image5.dir tienes un ejemplo del 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 Jordi Espuny, basada en el uso de getPixel y setPixel, permite rellenar figuras de color.

PRACTICA 6

En image6.dir hay un ejemplo del uso de mFlood(); función para colorear de Jordi Espuny.

Enlaces Interesantes

Muy buenos ejemplos y tutoriales de Imaging Lingo:

http://www.setpixel.com

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