CodigoGX: Codigos de programación: Capítulo 66: Moviendo figuras en Small Basic. Parte 1

Diario de un programador.- Día 164

SMALL BASIC: Moviendo figuras.

En el capítulo anterior de Small Basic, se vio un programa que permite mover un cuadrado utilizando las flechas del teclado. En esta oportunidad, se mostrará una alternativa a ese código, utilizando el objeto "Shapes". El objeto Shapes, tiene múltiples operaciones, las cuales permiten añadir formas, figuras, texto, imágenes etc. Además de permitir moverlas o animarlas. Con Shapes, me resultó un poco más sencillo crear este programa y por lo que veo, me permite trabajar de mejor forma las figuras, ya que si necesito borrar una figura, puedo utilizar la operación "Remove" a diferencia del programa anterior, que al necesitar borrar la figura, tenía que utilizar "Clear" pero eso no solamente borraba la figura, sino todo lo que había en pantalla. El código es el siguiente:

GraphicsWindow.BrushColor = "Red"

x = 0

y = 0

circulo = Shapes.AddEllipse(50,50)' Añade un circulo de 50x50

GraphicsWindow.KeyDown = presionar

Sub derecha

x = x + 2

Shapes.move(circulo,x,y)

EndSub

Sub izquierda

x = x - 2

Shapes.Move(circulo,x,y)

EndSub

Sub abajo

y = y + 2

Shapes.Move(circulo,x,y)

EndSub

Sub arriba

y = y - 2

Shapes.Move(circulo,x,y)

EndSub

Sub presionar

flecha = GraphicsWindow.LastKey

If flecha = "Right" Then

derecha()

EndIf

If flecha = "Left" Then

izquierda()

EndIf

If flecha = "Down" Then

abajo()

EndIf

If flecha = "Up" Then

arriba()

EndIf

EndSub

Al igual que el código anterior, en este se utilizó una subrutina para mover la figura:

Sub derecha

x = x + 2

Shapes.move(circulo,x,y)

EndSub

En este caso utilicé la operación "move". La sintaxis dice así:

Shapes.move(nombreFigura, posición X, posición Y)

Hablando de posición, me di cuenta que por defecto, las figuras aparecen en la posición 0,0. En otras palabras, siempre aparecen en la esquina superior izquierda. ¿Pero qué pasa si quiero que la figura aparezca en otro lugar? Una solución que encontré para esto, es cambiar el valor inicial de X e Y a la posición que quiero que aparezca la figura, luego agrego la figura que deseo. Como esta figura aparecerá en la posición 0,0, lo que hago es esconder esa figura, con la operación "HideShape". La siguiente línea se encarga de mover la figura al lugar indicado con la operación "Move" y por último, lo que hago es que la figura vuelva a aparecer con la operación "ShowShape". A continuación se muestra esta modificación:

x = 300

y = 200

circulo = Shapes.AddEllipse(50,50)

Shapes.HideShape(circulo)

Shapes.Move(circulo,x,y)

Shapes.ShowShape(circulo)

Ejercicios

1- Mejorar el programa anterior añadiendo nuevas cosas, como puede ser una especie de "visor" que indique la posición actual de la figura.

2- Añadir algún fondo.

3- Añadir un código para evitar que la figura salga de la ventana

4- Agregar otra figura en pantalla y que se mueva sola y que cambie de dirección al azar.

RESPUESTAS

1.- En mi caso agregaré un indicador sencillo que indique la posición de la figura, algo así:

POS X = 50

POS Y = 100

Esto me quedó de la siguiente manera:

GraphicsWindow.DrawRectangle(520,15,100,50)'cuadro negro

GraphicsWindow.BrushColor = "white"'

GraphicsWindow.FillRectangle(521,16,98,48)'cuadro blanco

GraphicsWindow.BrushColor = "red"

GraphicsWindow.DrawText(530, 20, "POS X: ")

GraphicsWindow.DrawText(530, 40, "POS Y: ")

GraphicsWindow.DrawText(580, 20, x)

GraphicsWindow.DrawText(580, 40, y)

Sub Posicion

GraphicsWindow.BrushColor = "white"'tuve que parchar, para no hacer clear

GraphicsWindow.FillRectangle(521,16,98,48)'con un cuadro blanco ;)

posX = Shapes.GetLeft(circulo)

posY = Shapes.GetTop(circulo)

GraphicsWindow.BrushColor = "red"

GraphicsWindow.DrawText(580, 20, posX)

GraphicsWindow.DrawText(580, 40, posY)

GraphicsWindow.DrawText(530, 20, "POS X: ")

GraphicsWindow.DrawText(530, 40, "POS Y: ")

EndSub

La subrutina "Posicion" será invocada desde las subrutinas "derecha, izquierda, abajo y arriba" para poder obtener la posición de la figura cada vez que se presione una de esas teclas.

Ejemplo:

Sub derecha

x = x + 2

Shapes.move(circulo,x,y)

Posicion()

EndSub

Al inicio de la subrutina "Posicion" tengo estas dos instrucciones

GraphicsWindow.BrushColor = "white"'tuve que parchar, para no hacer clear

GraphicsWindow.FillRectangle(521,16,98,48)'con un cuadro blanco ;)

Esta es una solución "parche" que se me ocurrió, es muy probable que existan otros métodos para hacer esto. Lo que hacen esas dos líneas es crear un cuadro blanco que se dibuja sobre los números, con la finalidad de borrarlos y permitir que los nuevos números se escriban sobre este cuadro. De esta manera, se crea una especie de "refresco". De no hacer esto, los números se escribirían uno encima de otro, creando una gran "mancha numérica."