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

// Establecer color y dibujar
draw.color = 0xFF0000
draw.circle(100, 100, 50)

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). El color activo se establece mediante la propiedad draw.color y se aplica automáticamente a todas las funciones de dibujo.

Color	Valor	Ejemplo
Rojo	0xFF0000	draw.color = 0xFF0000
Verde	0x00FF00	draw.color = 0x00FF00
Azul	0x0000FF	draw.color = 0x0000FF
Blanco	0xFFFFFF	draw.color = 0xFFFFFF
Negro	0x000000	draw.color = 0x000000

Propiedades

color

Establece u obtiene el color de dibujo por defecto. Este color se usa en todas las funciones de dibujo.

// Establecer color
draw.color = 0xFF0000

// Obtener color actual
var c = draw.color

colorBG

Establece u obtiene el color de fondo por defecto. Este color se utiliza con cls() cuando no se especifica un color explícito.

// Establecer color de fondo
draw.colorBG = 0x000080

// Obtener color de fondo actual
var bg = draw.colorBG

Funciones

cls

Borra la pantalla con el color especificado o con el color de fondo (colorBG) si no se indica ninguno.

draw.cls()           // Borra con colorBG
draw.cls(0x000000)   // Borra con negro

Parámetro	Descripción
color	Color de borrado (opcional, usa colorBG por defecto)

---

setPixel

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

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

Parámetro	Descripción
x, y	Coordenadas del pixel

---

getPixel

Lee el color del pixel en las coordenadas indicadas.

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

Parámetro	Descripción
x, y	Coordenadas del pixel

---

line

Dibuja una línea entre dos puntos usando el color actual.

draw.line(x1, y1, x2, y2)

Parámetro	Descripción
x1, y1	Coordenadas del punto inicial
x2, y2	Coordenadas del punto final

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

---

circle

Dibuja un círculo, con contorno o relleno, usando el color actual.

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

Parámetro	Tipo	Descripción
x, y	entero	Coordenadas del centro
radio	entero	Radio del círculo
fill	bool	true para relleno, false para contorno (opcional, por defecto false)

draw.color = 0x00FF00
draw.circle(160, 120, 50)        // Contorno verde
draw.circle(160, 120, 50, true)  // Relleno verde

---

rect

Dibuja un rectángulo, con contorno o relleno, usando el color actual.

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

Parámetro	Tipo	Descripción
x, y	entero	Coordenadas de la esquina superior izquierda
ancho	entero	Ancho del rectángulo
alto	entero	Alto del rectángulo
fill	bool	true para relleno, false para contorno (opcional, por defecto false)

draw.color = 0xFFFF00
draw.rect(50, 50, 100, 80)        // Contorno amarillo
draw.rect(50, 50, 100, 80, true)  // Relleno amarillo

---

ellipse

Dibuja una elipse, con contorno o relleno, usando el color actual.

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

Parámetro	Tipo	Descripción
x, y	entero	Coordenadas del centro
radioX, radioY	entero	Radios horizontal y vertical
fill	bool	true para relleno, false para contorno (opcional, por defecto false)

draw.color = 0xFF00FF
draw.ellipse(160, 120, 80, 40)        // Contorno magenta
draw.ellipse(160, 120, 80, 40, true)  // Relleno magenta

---

polygon

Dibuja un polígono definido por una lista de vértices, con contorno o relleno.

draw.polygon(listaVertices [, fill])

Parámetro	Tipo	Descripción
listaVertices	lista	Coordenadas en formato [x1, y1, x2, y2, x3, y3, ...]
fill	bool	true para relleno, false para contorno (opcional, por defecto false)

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

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

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, usa draw.color si no se especifica)

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

---

font

Obtiene o establece la fuente actual para el texto.

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

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

Fuente	Descripción	Alto	Caracteres
0	Fuente pequeña (mapa de bits 6x8)	8 px	ASCII completo
1	Fuente por defecto (alias de 0)	8 px	ASCII completo
2	Fuente mediana	16 px	96 caracteres ASCII
4	Fuente grande	26 px	96 caracteres ASCII
6	Fuente para relojes	48 px	0-9 : - . a p m
7	Fuente de 7 segmentos	48 px	0-9 : - .
8	Fuente enorme	75 px	0-9 : - .

Rango válido

El rango es 0 a 8. Cualquier otro valor lanza ERR_INVALID_VALUE. Los índices 3 y 5 existen por compatibilidad y son un alias de la fuente 0.

Fuentes 6, 7 y 8

No contienen el alfabeto: están pensadas para relojes y marcadores. Cualquier carácter que no esté en la lista se dibuja como un espacio, no da error. En la fuente 6, la barra vertical | es un espacio estrecho, útil para alinear la hora.

---

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

---

bitmapBatch

Dibuja el mismo bitmap en múltiples posiciones con una sola llamada. Más eficiente que llamar a draw.bitmap en un bucle cuando se necesita pintar muchas instancias del mismo gráfico.

draw.bitmapBatch(bitmap, posiciones)

Parámetro	Descripción
bitmap	Objeto Bitmap a dibujar
posiciones	Array plano con las coordenadas en formato [x0, y0, x1, y1, ...]

use Bitmap

var moneda = Bitmap.load("moneda.bmp")
var pos = [10, 20, 50, 20, 90, 20, 130, 20]

draw.bitmapBatch(moneda, pos)  // Dibuja 4 monedas de una sola vez

Rendimiento

bitmapBatch es especialmente útil en ESP32, donde agrupa todas las operaciones SPI y solo lee los pixels del sprite una vez, reduciendo considerablemente el tiempo de renderizado.

---

sprite

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

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

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

use Sprite

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

draw.sprite(s)

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 spin. Solo se dibujan los sprites con el flag isActive = true y que tengan al menos una imagen asignada.

---

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 en píxeles
objetoBytes	Objeto Bytes con los índices de color (uno por pixel)
paleta	Array con los colores de la paleta (hasta 256 entradas en formato 0xRRGGBB)

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

---

gridBitmap

Dibuja un bitmap en cada celda de un GridMap cuyo valor coincida con el indicado. Útil para renderizar elementos concretos de un mapa 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 tener la celda para que se dibuje
bitmap	Bitmap a dibujar en las celdas coincidentes
x0, y0	Posición en pantalla de la celda (0, 0) del grid
pasoX, pasoY	Distancia en píxeles entre celdas

use GridMap, Bitmap

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

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

---

tilemap

Dibuja un GridMap completo usando un sprite sheet (tileset). Soporta scroll, culling de tiles fuera de pantalla y wrap en ambos ejes.

draw.tilemap(gridMap)
draw.tilemap(gridMap, tileset)
draw.tilemap(gridMap, tileset, emptyTile)

Parámetro	Descripción
gridMap	Objeto GridMap con los índices de tiles y la posición de scroll
tileset	Bitmap con el sprite sheet (opcional si el grid tiene uno asignado con grid.tileset)
emptyTile	Índice de tile que se considera vacío y no se dibuja (opcional, usa el del grid por defecto)

use GridMap, Bitmap

var mapa = GridMap.new(20, 15)
mapa.setTileSize(16, 16)

var tileset = Bitmap.load("tiles.bmp")
mapa.tileset = tileset

// Con tileset vinculado al grid
draw.tilemap(mapa)

// Con tileset explícito y tile vacío personalizado
draw.tilemap(mapa, tileset, 0)

Scroll

La posición de scroll se controla mediante las propiedades grid.x y grid.y. El tilemap aplica culling automático para renderizar solo los tiles visibles.

---

scene

Dibuja una escena completa: el GridMap de fondo (si existe) seguido de todos sus sprites activos aplicando culling y transformaciones de cámara.

draw.scene(scene)

Parámetro	Descripción
scene	Objeto Scene a renderizar

use Scene

var escena = Scene.new()
// ... configurar escena, cámara y sprites

draw.cls()
draw.scene(escena)
Display.update()

tip

La cámara de la escena (scene.cameraX, scene.cameraY) se aplica automáticamente tanto al GridMap como a todos los sprites. Solo se dibujan los sprites marcados como activos y visibles dentro del área de la cámara.

---

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.colorBG = 0x000020

while (true)
    // Limpiar pantalla con el color de fondo
    draw.cls()

    // Rectángulo relleno rojo
    draw.color = 0xFF0000
    draw.rect(20, 20, 80, 60, true)

    // Círculo con contorno verde
    draw.color = 0x00FF00
    draw.circle(160, 120, 40)

    // Círculo relleno azul
    draw.color = 0x0000FF
    draw.circle(260, 60, 30, true)

    // Línea amarilla
    draw.color = 0xFFFF00
    draw.line(0, 200, 319, 200)

    // Texto
    draw.text(10, 220, "JARU Graphics Demo", 0xFFFFFF)

    // Actualizar pantalla
    Display.update()
    pause(16)
end

Display.close()