Módulo Draw

El módulo Draw es la biblioteca en JARU encargada del dibujado en pantalla de primitivas gráficas, textos y bitmaps. Este módulo es dependiente del módulo Display y se accede a través de la propiedad Display.draw.

Uso

use Display

Display.open(320, 240)
var draw = Display.draw

// Dibujar primitivas
draw.circle(100, 100, 50, 0xFF0000)

El módulo Draw proporciona funciones para dibujar formas geométricas, texto, imágenes y sprites en la pantalla. Todas las operaciones de dibujo se realizan sobre el buffer actual (backbuffer o pantalla directa según el modo configurado en Display).

Colores

Los colores en JARU se representan como valores enteros de 24 bits en formato RGB (0xRRGGBB):

Color	Valor	Ejemplo
Rojo	0xFF0000	draw.circle(100, 100, 20, 0xFF0000)
Verde	0x00FF00	draw.rect(10, 10, 50, 50, 0x00FF00)
Azul	0x0000FF	draw.line(0, 0, 100, 100, 0x0000FF)
Blanco	0xFFFFFF	draw.text(10, 10, "Hola", 0xFFFFFF)
Negro	0x000000	draw.cls(0x000000)

Funciones

color

Establece el color de dibujo por defecto. Este color se utilizará en todas las funciones de dibujo cuando no se especifique un color explícitamente.

draw.color(0xFF0000)  // Establece rojo como color por defecto
draw.circle(100, 100, 30)  // Se dibuja en rojo

backColor

Establece el color de fondo por defecto. Este color se utiliza con la función cls() cuando no se especifica un color.

draw.backColor(0x000080)  // Azul oscuro como fondo
draw.cls()  // Limpia con azul oscuro

cls

Borra la pantalla con el color especificado o con el color de fondo por defecto.

draw.cls()          // Borra con el color de fondo
draw.cls(0x000000)  // Borra con negro

setPixel

Dibuja un pixel en las coordenadas indicadas usando el color actual.

draw.color(0xFFFFFF)
draw.setPixel(100, 50)      // Dibuja pixel en (100, 50)
draw.setPixel([150, 75])    // También acepta una lista [x, y]

getPixel

Lee el color del pixel en las coordenadas indicadas.

var colorPixel = draw.getPixel(100, 50)
println("Color: ", colorPixel)

line

Dibuja una línea entre dos puntos.

draw.line(x1, y1, x2, y2 [, color])

Parámetro	Descripción
x1, y1	Coordenadas del punto inicial
x2, y2	Coordenadas del punto final
color	Color de la línea (opcional, usa color por defecto si no se especifica)

draw.line(0, 0, 319, 239, 0xFFFFFF)  // Diagonal blanca
draw.line(160, 0, 160, 240)          // Línea vertical con color por defecto

circle

Dibuja el contorno de un círculo.

draw.circle(x, y, radio [, color])

Parámetro	Descripción
x, y	Coordenadas del centro
radio	Radio del círculo
color	Color del contorno (opcional)

draw.circle(160, 120, 50, 0x00FF00)  // Círculo verde

fillCircle

Dibuja un círculo relleno.

draw.fillCircle(x, y, radio [, color])

Parámetro	Descripción
x, y	Coordenadas del centro
radio	Radio del círculo
color	Color de relleno (opcional)

draw.fillCircle(160, 120, 50, 0xFF0000)  // Círculo rojo relleno

rect

Dibuja el contorno de un rectángulo.

draw.rect(x, y, ancho, alto [, color])

Parámetro	Descripción
x, y	Coordenadas de la esquina superior izquierda
ancho	Ancho del rectángulo
alto	Alto del rectángulo
color	Color del contorno (opcional)

draw.rect(50, 50, 100, 80, 0xFFFF00)  // Rectángulo amarillo

fillRect

Dibuja un rectángulo relleno.

draw.fillRect(x, y, ancho, alto [, color])

Parámetro	Descripción
x, y	Coordenadas de la esquina superior izquierda
ancho	Ancho del rectángulo
alto	Alto del rectángulo
color	Color de relleno (opcional)

draw.fillRect(50, 50, 100, 80, 0x0000FF)  // Rectángulo azul relleno

ellipse

Dibuja el contorno de una elipse.

draw.ellipse(x, y, radioX, radioY [, color])

Parámetro	Descripción
x, y	Coordenadas del centro
radioX	Radio horizontal
radioY	Radio vertical
color	Color del contorno (opcional)

draw.ellipse(160, 120, 80, 40, 0xFF00FF)  // Elipse magenta

fillEllipse

Dibuja una elipse rellena.

draw.fillEllipse(x, y, radioX, radioY [, color])

Parámetro	Descripción
x, y	Coordenadas del centro
radioX	Radio horizontal
radioY	Radio vertical
color	Color de relleno (opcional)

draw.fillEllipse(160, 120, 80, 40, 0x00FFFF)  // Elipse cyan rellena

polygon

Dibuja el contorno de un polígono definido por una lista de vértices.

draw.polygon(listaVertices [, color])

Parámetro	Descripción
listaVertices	Lista con coordenadas en formato [x1, y1, x2, y2, x3, y3, ...]
color	Color del contorno (opcional)

// Triángulo
var vertices = [160, 50, 100, 150, 220, 150]
draw.polygon(vertices, 0xFFFFFF)

// Pentágono
var penta = [160, 40, 200, 80, 185, 140, 135, 140, 120, 80]
draw.polygon(penta, 0xFF8000)

info

La lista de vértices debe contener un número par de elementos (pares de coordenadas x, y).

text

Muestra texto en la pantalla en las coordenadas indicadas.

draw.text(x, y, texto [, color])

Parámetro	Descripción
x, y	Coordenadas donde mostrar el texto
texto	Cadena de texto a mostrar
color	Color del texto (opcional)

draw.text(10, 10, "Hola Mundo", 0x00FF00)
draw.text(10, 30, "Score: 100")  // Usa color por defecto

font

Cambia o devuelve la fuente actual para el texto.

// Obtener la fuente actual
var fuenteActual = draw.font()

// Establecer una nueva fuente
draw.font(2)

Fuente	Descripción
0	Fuente pequeña
1	Fuente por defecto
2	Fuente mediana
4	Fuente grande

bitmap

Dibuja un objeto Bitmap en las coordenadas indicadas, con rotación opcional.

draw.bitmap(x, y, bitmap [, rotacion])

Parámetro	Descripción
x, y	Coordenadas donde dibujar
bitmap	Objeto Bitmap a dibujar
rotacion	Ángulo de rotación en grados (opcional, 0 por defecto)

use Bitmap

var img = Bitmap.load("imagen.bmp")
draw.bitmap(100, 50, img)        // Sin rotación
draw.bitmap(100, 50, img, 45)    // Rotado 45 grados

sprite

Dibuja un sprite o una lista de sprites. Los sprites gestionan automáticamente sus animaciones y transformaciones.

draw.sprite(sprite)
draw.sprite(listaSprites)

Parámetro	Descripción
sprite	Un objeto Sprite individual
listaSprites	Una lista o array de sprites

use Sprite

var miSprite = Sprite.new()
miSprite.addImage(Bitmap.load("frame1.bmp"))
miSprite.addImage(Bitmap.load("frame2.bmp"))
miSprite.x = 100
miSprite.y = 100

draw.sprite(miSprite)

Animaciones

El sprite gestiona automáticamente la animación de frames según las propiedades animSpeed, animRepeat y animPingPong. La rotación automática se controla con la propiedad spin.

bytes

Dibuja un bloque de bytes como imagen usando una paleta de colores indexada.

draw.bytes(x, y, ancho, alto, objetoBytes, paleta)

Parámetro	Descripción
x, y	Coordenadas donde dibujar
ancho, alto	Dimensiones de la imagen
objetoBytes	Objeto Bytes con los datos de la imagen
paleta	Array con la paleta de colores (hasta 256 colores)

var paleta = [0x000000, 0xFF0000, 0x00FF00, 0x0000FF]
var datos = Bytes.new(16)  // 4x4 pixels
// ... llenar datos con índices 0-3
draw.bytes(100, 100, 4, 4, datos, paleta)

gridBitmap

Dibuja un bitmap en cada celda de un GridMap que coincida con un valor específico. Útil para renderizar mapas de tiles.

draw.gridBitmap(gridMap, valor, bitmap, x0, y0, pasoX, pasoY)

Parámetro	Descripción
gridMap	Objeto GridMap con los datos del mapa
valor	Valor (0-255) que debe coincidir para dibujar
bitmap	Bitmap a dibujar en las celdas coincidentes
x0, y0	Posición inicial en pantalla
pasoX, pasoY	Distancia entre cada celda

use GridMap, Bitmap

var mapa = GridMap.new(10, 10)
var tile = Bitmap.load("pared.bmp")

// Dibujar el bitmap "pared" en cada celda con valor 1
draw.gridBitmap(mapa, 1, tile, 0, 0, 16, 16)

Ejemplo completo

use Display

Display.open(320, 240)
Display.mode(2)  // Doble buffer

var draw = Display.draw

// Establecer colores por defecto
draw.color(0xFFFFFF)
draw.backColor(0x000020)

while (true)
    // Limpiar pantalla
    draw.cls()
    
    // Dibujar formas
    draw.fillRect(20, 20, 80, 60, 0xFF0000)
    draw.circle(160, 120, 40, 0x00FF00)
    draw.fillCircle(260, 60, 30, 0x0000FF)
    draw.line(0, 200, 319, 200, 0xFFFF00)
    
    // Dibujar texto
    draw.text(10, 220, "JARU Graphics Demo", 0xFFFFFF)
    
    // Actualizar pantalla
    Display.update()
    pause(16)
end

Display.close()