MANEJO DE GRÁFICOS

MOSTRAR   EL   OVNI

En el explorador de archivos de la pantalla principal de KPL aparece una carpeta con el nombre Pictures en la que se encuentra el archivo OVNI.gif. Seleccionelo y haga clic derecho con el mouse, luego haga clic sobre la palabra view para ver las seis imágenes de este gif. Revise algunos archivos más como Space.png, Ship1Top.gif y Ship3.png. A partir de estas imágenes construiremos los sprites de los programas del taller. Un Sprite es una imagen o animación en dos dimensiones integrada en una escena de un videojuego. KPL tiene comandos para cargar y manipular sprites a partir de archivos con imágenes.  

Cree un nuevo programa oprimiendo el icono  y elimine las líneas de comentarios y las líneas en blanco, llámelo Ovni y digite las instrucciones del método Main para mostrar el Sprite Ovni.

El programa Ovni tiene las siguientes instrucciones de manejo de imágenes. La línea 3 le dice al computador que cargue la imagen que se encuentra en el archivo OVNI.gif y la llame OVNI dentro del programa, la línea 4 mueve la imagen llamada OVNI al punto de la pantalla de coordenadas X = 50, Y = 50, y la línea 5 muestra en la pantalla la imagen llamada OVNI.

KPL tiene reglas precisas para estas instrucciones, la primera instrucción LoadSprite requiere dos valores para que funcione. El primer valor debe ser el nombre con el cual nos referimos a la imagen en el programa, y el segundo valor debe ser el nombre del archivo que contiene la imagen. Estos valores deben estar entre comillas dobles separados por coma, debemos respetar estas reglas para que el computador entienda las instrucciones.

Después de cargar la imagen la colocamos en una posición en la pantalla con la instrucción MoveSpriteToPoint(“OVNI”, 50, 50) que requiere tres valores. El primer valor es el nombre del sprite que al cargar la imagen lo llamamos “OVNI”, el segundo la localización en el eje X para el sprite, que queremos que sea 50, y el tercero la localización en el eje Y, la cual queremos que sea 50. Observe que los valores numéricos no van entre comillas dobles, mientras que las palabras deben ir entre comillas dobles.  

Guarde el programa Ovni en un archivo llamado Ovni.

Podemos colocar varios ovnis en diferentes sitios de la pantalla usando el mismo archivo en el que se encuentra la imagen (OVNI.gif), pero debemos usar distintos nombres para los sprites. Coloque 4 ovnis en las esquinas de un cuadrado de lado 100 y esquina superior izquierda en X = 100, Y = 100.  

MOVER   EL   OVNI

Ahora que sabemos como mostrar el Ovni nos gustaría moverlo de un sitio a otro de la pantalla; por ejemplo desde la posición X = 50, Y = 50, hasta la posición X = 450, Y = 50. Para que el ovni empiece a moverse hacia la derecha por la pantalla debemos mantener fija la posición Y e incrementar en una cierta cantidad la posición X, y repetir este proceso muchas veces. KPL tiene la instrucción

                MoveSpriteByAmount(“NombreSprite”, incX, incY)

para mover el sprite desde la posición (X, Y) donde se encuentra, hasta la posición (X + incX, Y + incY). Observe que la instrucción

                MoveSpriteToPoint(“NombreSprite”, X, Y)

mueve el esprite a la posición X, Y independientemente de donde se encuentre; mientras que

                MoveSpriteByAmount(“NombreSprite”, incX, incY)

incrementa las coordenadas actuales del sprite; la posición X la incrementa en incX, y la posición Y en incY.

Para mover el Ovni a la derecha, empezamos en la posición (50, 50), lo desplazamos a la posición (51, 50), luego a la (52, 50), etc. y repetimos esto 400 veces para llevarlo a la posición (450, 50). Tendríamos que escribir un programa con 400 instrucciones para mover el sprite píxel a píxel a la derecha:                

MoveSpriteToPoint(“OVNI”, 50, 50)

MoveSpriteToPoint(“OVNI”, 51, 50)

MoveSpriteToPoint(“OVNI”, 52, 50)
……………………………………..

MoveSpriteToPoint(“OVNI”, 450, 50)

  O también  

MoveSpriteToPoint(“OVNI”, 50, 50)
MoveSpriteByAmount(“OVNI”, 1, 0)
MoveSpriteByAmount(“OVNI”, 1, 0)
MoveSpriteByAmount(“OVNI”, 1, 0)
………………………………
MoveSpriteByAmount(“OVNI”, 1, 0)

Afortunadamente existe un mecanismo que nos permite repetir un conjunto de instrucciones el número de veces que queramos, como muestra el siguiente programa:

Seleccione todas las líneas de este programa, haga clic derecho con el mouse y seleccione copiar, pegue este programa en el editor de KPL, encima del programa anterior reemplazándolo completamente. La tarea principal o método Main( ) primero ejecuta la subtarea cargar el ovni en la posición (50, 50) y lo muestra. Estas subtareas se pueden construir como otros métodos invocados desde el Main( ), de esta manera el programa es más claro y modular. La primera instrucción en ejecutarse es la invocación cargarOvni( ), lo cual transfiere el control a la línea 3, se ejecutan las líneas 4 y 5 y el control se transfiere a la línea 9.

Las instrucciones que se encuentran entre la línea 9 y la línea 12 se repiten el número de veces que aparece después de la palabra Loop. La línea 9 le dice al computador que debe repetir las líneas 10 y 11,  400 veces. Al llegar a la línea 10 la primera vez, mueve el ovni 1 píxel hacia la derecha y 0 píxel hacia abajo desde la posición (50, 50), el ovni queda en la posición (51, 50); luego detiene el programa 1000 milisegundos,  que equivale a un segundo. Regresa a la línea 10 y mueve el ovni 1 píxel a la derecha y 0 píxel hacia abajo desde la posición (51, 50) y el ovni queda en la posición (52, 50); luego detiene el programa 1 segundo, etc. Repite esto cuatrocientas veces.

Los computadores son muy rápidos y tienen la capacidad de mover el ovni 400 veces en menos de una décima de segundo. Si no colocamos la instrucción Delay(1000), al correr el programa solo vemos el ovni en la posición final, por la rapidez con la que el computador mueve el ovni. Para ver un movimiento suave del ovni, debemos decirle al computador que mueva el ovni un píxel hacia la derecha y se detenga, lo mueva otro píxel hacia la derecha y se detenga, etc. Si detenemos 1 segundo (Delay(1000)) la ejecución del programa cada vez que desplazamos el ovni un píxel, veremos una imagen del ovni cada segundo y eso no produce sensación de continuidad o animación. Recuerde que se necesitan de 14 a 25 imágenes por segundo para obtener el efecto de animación (ver el apéndice B).

Si cambia la instrucción Delay(1000) por Delay(40) el computador repite 400 veces las instrucciones mover el ovni un píxel hacia la derecha y detenerse 40 milisegundos, es decir que muestra 25 (1000/40) imágenes por segundo logrando el efecto de animación. De esta manera, la secuencia de desplazamientos y detenciones simulan un movimiento continuo a nuestros ojos.  

Ejercicios:

1. Mueva el ovni desde la posición (0, 0) hasta la posición (400, 400) en línea recta y cambie el valor del Delay a 0.05 milisegundos.

2. Mueva dos ovnis al mismo tiempo sobre un cuadrado de lado 300 y esquina superior izquierda en X = 50, Y = 50. Un ovni se mueve en el sentido de las manecillas del reloj, y el otro en sentido contrario.

ROTAR   EL   OVNI

Este programa agrega la instrucción

                                               RotateSpriteBy(“OVNI”, 1)

para incrementar la rotación del ovni un grado con respecto a su rotación actual. Esta instrucción es diferente a la instrucción

                                               RotateSprite(“OVNI”, 1)

la cual rota el sprite un grado respecto al eje X. Este programa tiene tres instrucciones que se repiten 400 veces, las líneas 10, 11 y 12; ahora no sólo movemos el ovni un píxel en X sino que incrementamos su rotación en un grado en cada una de las repeticiones.