Rendering

Functions for drawing text, shapes, images, gradients, and other visual elements.

render.create_font

Signature: render.create_font(font_name, size, weight)

Description: Creates a font with the specified name, size, and weight for use with text rendering functions.

Parameters:

  • font_name (string): The name of the font (e.g., "Verdana", "Arial", "Tahoma").

  • size (number): The font size in points.

  • weight (number): The font weight (thickness). Common values include 400 (normal) and 700 (bold).

Returns:

  • handle: A font handle to be used with render.draw_text().

Example:

-- Create a normal Verdana font at 14 points
local normal_font = render.create_font("Verdana", 14, 400)

-- Create a bold Arial font at 24 points
local bold_font = render.create_font("Arial", 24, 700)

-- Use the font to draw text
render.draw_text(normal_font, "Normal Text", 100, 100, 255, 255, 255, 255)
render.draw_text(bold_font, "Bold Text", 100, 130, 255, 255, 255, 255)

render.get_viewport_size

Signature: render.get_viewport_size()

Description: Retrieves the current screen/viewport dimensions.

Parameters: None

Returns:

  • width (number): The width of the viewport in pixels.

  • height (number): The height of the viewport in pixels.

Example:

-- Get the screen dimensions
local screen_width, screen_height = render.get_viewport_size()

-- Log the screen size
engine.log("Screen size: " .. screen_width .. "x" .. screen_height, 255, 255, 255, 255)

-- Center a rectangle on screen
local rect_width, rect_height = 200, 150
local x = (screen_width - rect_width) / 2
local y = (screen_height - rect_height) / 2
render.draw_rectangle(x, y, rect_width, rect_height, 255, 0, 0, 255, 2, false)

render.draw_line

Signature: render.draw_line(x1, y1, x2, y2, r, g, b, a, thickness)

Description: Draws a line between two points with the specified color and thickness.

Parameters:

  • x1 (number): X-coordinate of the starting point.

  • y1 (number): Y-coordinate of the starting point.

  • x2 (number): X-coordinate of the ending point.

  • y2 (number): Y-coordinate of the ending point.

  • r (number): Red color component (0-255).

  • g (number): Green color component (0-255).

  • b (number): Blue color component (0-255).

  • a (number): Alpha (transparency) component (0-255).

  • thickness (number): Line thickness in pixels.

Returns: None

Example:

-- Draw a white diagonal line with thickness of 2 pixels
render.draw_line(100, 100, 300, 300, 255, 255, 255, 255, 2)

-- Draw a red horizontal line with thickness of 3 pixels
render.draw_line(100, 200, 500, 200, 255, 0, 0, 255, 3)

-- Draw a blue vertical line with thickness of 1 pixel
render.draw_line(400, 100, 400, 400, 0, 0, 255, 255, 1)

render.draw_rectangle

Signature: render.draw_rectangle(x, y, width, height, r, g, b, a, thickness, filled)

Description: Draws a rectangle with the specified position, size, color, and style.

Parameters:

  • x (number): X-coordinate of the top-left corner.

  • y (number): Y-coordinate of the top-left corner.

  • width (number): Width of the rectangle in pixels.

  • height (number): Height of the rectangle in pixels.

  • r (number): Red color component (0-255).

  • g (number): Green color component (0-255).

  • b (number): Blue color component (0-255).

  • a (number): Alpha (transparency) component (0-255).

  • thickness (number): Border thickness in pixels (ignored if filled is true).

  • filled (boolean): Whether to draw a filled rectangle (true) or just the outline (false).

Returns: None

Example:

-- Draw a filled red rectangle
render.draw_rectangle(100, 100, 200, 150, 255, 0, 0, 200, 1, true)

-- Draw a green rectangle outline with 3 pixel thickness
render.draw_rectangle(400, 200, 250, 100, 0, 255, 0, 255, 3, false)

-- Draw a semi-transparent blue filled rectangle
render.draw_rectangle(200, 300, 150, 150, 0, 0, 255, 128, 1, true)

render.draw_circle


Signature: render.draw_circle(x, y, radius, r, g, b, a, thickness, filled)

Description: Draws a circle with the specified position, radius, color, and style.

Parameters:

  • x (number): X-coordinate of the center.

  • y (number): Y-coordinate of the center.

  • radius (number): Radius of the circle in pixels.

  • r (number): Red color component (0-255).

  • g (number): Green color component (0-255).

  • b (number): Blue color component (0-255).

  • a (number): Alpha (transparency) component (0-255).

  • thickness (number): Border thickness in pixels (ignored if filled is true).

  • filled (boolean): Whether to draw a filled circle (true) or just the outline (false).

Returns: None

Example:

-- Draw a filled red circle
render.draw_circle(200, 200, 50, 255, 0, 0, 255, 1, true)

-- Draw a green circle outline with 2 pixel thickness
render.draw_circle(400, 300, 75, 0, 255, 0, 255, 2, false)

-- Draw a semi-transparent blue filled circle
render.draw_circle(600, 400, 100, 0, 0, 255, 128, 1, true)

render.draw_text

Signature: render.draw_text(font, text, x, y, r, g, b, a, outline_thickness, o_r, o_g, o_b, o_a)

Description: Draws text at the specified position with the given font, color, and optional outline.

Parameters:

  • font (handle): Font handle created with render.create_font().

  • text (string): The text to draw.

  • x (number): X-coordinate of the text position.

  • y (number): Y-coordinate of the text position.

  • r (number): Red color component (0-255).

  • g (number): Green color component (0-255).

  • b (number): Blue color component (0-255).

  • a (number): Alpha (transparency) component (0-255).

  • outline_thickness (number, optional): Thickness of the text outline (0 for no outline).

  • o_r (number, optional): Red color component for the outline (0-255).

  • o_g (number, optional): Green color component for the outline (0-255).

  • o_b (number, optional): Blue color component for the outline (0-255).

  • o_a (number, optional): Alpha component for the outline (0-255).

Returns: None

Example:

-- Create a font
local font = render.create_font("Arial", 20, 400)

-- Draw white text without outline
render.draw_text(font, "Hello World", 100, 100, 255, 255, 255, 255)

-- Draw red text with black outline
render.draw_text(font, "Outlined Text", 100, 150, 255, 0, 0, 255, 2, 0, 0, 0, 255)

-- Draw green text with white outline
render.draw_text(font, "Green with White Outline", 100, 200, 0, 255, 0, 255, 1, 255, 255, 255, 255)

render.draw_triangle

Signature: render.draw_triangle(x1, y1, x2, y2, x3, y3, r, g, b, a, thickness, filled, rounding)

Description: Draws a triangle connecting three points with the specified color and style.

Parameters:

  • x1, y1 (number): Coordinates of the first point.

  • x2, y2 (number): Coordinates of the second point.

  • x3, y3 (number): Coordinates of the third point.

  • r (number): Red color component (0-255).

  • g (number): Green color component (0-255).

  • b (number): Blue color component (0-255).

  • a (number): Alpha (transparency) component (0-255).

  • thickness (number): Border thickness in pixels (ignored if filled is true).

  • filled (boolean): Whether to draw a filled triangle (true) or just the outline (false).

  • rounding (number, optional): Corner rounding radius (0 for sharp corners).

Returns: None

Example:

-- Draw a filled yellow triangle
render.draw_triangle(300, 100, 400, 300, 200, 300, 255, 255, 0, 255, 1, true)

-- Draw a blue triangle outline with 2 pixel thickness
render.draw_triangle(500, 150, 600, 350, 400, 350, 0, 0, 255, 255, 2, false)

-- Draw a filled green triangle with rounded corners
render.draw_triangle(700, 200, 800, 400, 600, 400, 0, 255, 0, 255, 1, true, 5)

render.get_fps

Signature: render.get_fps()

Description: Gets the current frame rate (frames per second) of the overlay.

Parameters: None

Returns:

  • fps (number): The current frames per second.

Example:

function display_fps()
    local fps = render.get_fps()
    local color_r, color_g, color_b = 255, 255, 255
    
    -- Change color based on FPS (red if low, yellow if medium, green if high)
    if fps < 30 then
        color_r, color_g, color_b = 255, 0, 0
    elseif fps < 60 then
        color_r, color_g, color_b = 255, 255, 0
    else
        color_r, color_g, color_b = 0, 255, 0
    end
    
    -- Display FPS in the top-right corner
    local font = render.create_font("Consolas", 16, 400)
    local screen_w, screen_h = render.get_viewport_size()
    render.draw_text(font, "FPS: " .. fps, screen_w - 100, 20, color_r, color_g, color_b, 255)
end

engine.register_on_engine_tick(display_fps)

render.create_bitmap_from_url

Signature: render.create_bitmap_from_url(url)

Description: Creates a bitmap image from a URL for rendering on screen.

Parameters:

  • url (string): The URL of the image to load.

Returns:

  • bitmap_handle: A handle to the created bitmap for use with rendering functions.

Example:

-- Load an image from a URL
local bitmap = render.create_bitmap_from_url("https://example.com/image.png")

-- In render function, display the bitmap
function on_render()
    -- Draw the bitmap at position 100,100
    if bitmap then
        -- Implementation depends on how bitmaps are rendered in your API
        -- This is a placeholder:
        render.draw_bitmap(bitmap, 100, 100)
    end
end

engine.register_on_engine_tick(on_render)

render.create_bitmap_from_buffer

Signature: render.create_bitmap_from_buffer(buffer_handle)

Description: Creates a bitmap image from a memory buffer for rendering on screen.

Parameters:

  • buffer_handle (handle): A memory buffer handle containing image data.

Returns:

  • bitmap_handle: A handle to the created bitmap for use with rendering functions.

Example:

-- Assuming we have a buffer with image data (like from a network response)
local response_buffer = net.send_request("https://example.com/image.png")

-- Create bitmap from the buffer
local bitmap = render.create_bitmap_from_buffer(response_buffer)

-- Use the bitmap in rendering
function on_render()
    if bitmap then
        -- Implementation depends on how bitmaps are rendered in your API
        render.draw_bitmap(bitmap, 200, 200)
    end
end

render.create_bitmap_from_file

Signature: render.create_bitmap_from_file(file_name)

Description: Creates a bitmap image from a local file for rendering on screen.

Parameters:

  • file_name (string): Path to the image file.

Returns:

  • bitmap_handle: A handle to the created bitmap for use with rendering functions.

Example:

-- Load an image from a local file
local bitmap = render.create_bitmap_from_file("images/logo.png")

-- Use the bitmap in rendering
function on_render()
    if bitmap then
        -- Implementation depends on how bitmaps are rendered in your API
        render.draw_bitmap(bitmap, 300, 300)
    else
        engine.log("Failed to load bitmap from file", 255, 0, 0, 255)
    end
end

render.clip_start

Signature: render.clip_start(x, y, width, height)

Description: Begins a clipping region. All subsequent rendering will be restricted to this rectangle until render.clip_end() is called.

Parameters:

  • x (number): X-coordinate of the clipping region's top-left corner.

  • y (number): Y-coordinate of the clipping region's top-left corner.

  • width (number): Width of the clipping region in pixels.

  • height (number): Height of the clipping region in pixels.

Returns: None

Example:

-- Create a clipping region for a scrollable area
function render_scrollable_content()
    -- Define the visible area
    local visible_area_x = 100
    local visible_area_y = 100
    local visible_area_width = 300
    local visible_area_height = 200
    
    -- Start clipping to the visible area
    render.clip_start(visible_area_x, visible_area_y, visible_area_width, visible_area_height)
    
    -- Draw content that might exceed the visible area
    local font = render.create_font("Arial", 16, 400)
    for i = 1, 30 do
        render.draw_text(font, "Line " .. i, visible_area_x + 10, visible_area_y + (i-1) * 20, 255, 255, 255, 255)
    end
    
    -- End clipping
    render.clip_end()
    
    -- Draw border around the visible area
    render.draw_rectangle(visible_area_x, visible_area_y, visible_area_width, visible_area_height, 255, 255, 255, 255, 1, false)
end

render.clip_end

Signature: render.clip_end()

Description: Ends the active clipping region started by render.clip_start. Restores rendering output to the entire screen or parent context.

Parameters: None

Returns: None

Example:

-- Create a scrollable text area with clipping
function render_scrollable_text()
    -- Define viewport area (visible region)
    local viewport_x = 100
    local viewport_y = 100
    local viewport_width = 300
    local viewport_height = 200
    
    -- Track scroll position (controlled by mouse wheel)
    local scroll_position = 0
    local scroll_delta = input.get_scroll_delta()
    scroll_position = scroll_position - scroll_delta * 20
    
    -- Content height (larger than viewport)
    local content_height = 500
    
    -- Limit scrolling
    scroll_position = math.clamp(scroll_position, 0, content_height - viewport_height)
    
    -- Begin clipping to viewport area
    render.clip_start(viewport_x, viewport_y, viewport_width, viewport_height)
    
    -- Draw content that extends beyond viewport
    local font = render.create_font("Arial", 16, 400)
    for i = 1, 25 do
        local line_y = viewport_y + (i * 20) - scroll_position
        render.draw_text(font, "Line " .. i .. " of scrollable content", 
                         viewport_x + 10, line_y, 255, 255, 255, 255)
    end
    
    -- End clipping region to restore normal rendering
    render.clip_end()
    
    -- Draw border around viewport (after clip_end so border isn't clipped)
    render.draw_rectangle(viewport_x, viewport_y, viewport_width, viewport_height, 
                          255, 255, 255, 255, 1, false)
    
    -- Draw scroll indicators
    local scroll_percent = scroll_position / (content_height - viewport_height)
    render.draw_text(font, "Scroll: " .. math.floor(scroll_percent * 100) .. "%", 
                     viewport_x, viewport_y - 20, 255, 255, 255, 255)
end

-- Call this function every frame to render the scrollable area
engine.register_on_engine_tick(render_scrollable_text)

render.draw_gradient_rectangle

Signature: render.draw_gradient_rectangle(x, y, width, height, r1, g1, b1, r2, g2, b2, r3, g3, b3, r4, g4, b4)

Description: Draws a rectangle filled with a four-corner gradient. Each corner has its own RGB color value, blended smoothly across the area.

Parameters:

  • x (number): X-coordinate of the top-left corner.

  • y (number): Y-coordinate of the top-left corner.

  • width (number): Width of the rectangle in pixels.

  • height (number): Height of the rectangle in pixels.

  • r1, g1, b1 (number): RGB color components for the top-left corner (0-255).

  • r2, g2, b2 (number): RGB color components for the top-right corner (0-255).

  • r3, g3, b3 (number): RGB color components for the bottom-left corner (0-255).

  • r4, g4, b4 (number): RGB color components for the bottom-right corner (0-255).

Returns: None

Example:

-- Draw a rectangle with a color gradient
-- Top-left: Red, Top-right: Green, Bottom-left: Blue, Bottom-right: Yellow
render.draw_gradient_rectangle(
    100, 100, 400, 300,
    255, 0, 0,    -- Top-left (Red)
    0, 255, 0,    -- Top-right (Green)
    0, 0, 255,    -- Bottom-left (Blue)
    255, 255, 0   -- Bottom-right (Yellow)
)

render.draw_hue_bar

Signature: render.draw_hue_bar(x, y, width, height)

Description: Draws a horizontal or vertical hue gradient bar (HSV spectrum). Commonly used in color pickers for hue selection.

Parameters:

  • x (number): X-coordinate of the top-left corner.

  • y (number): Y-coordinate of the top-left corner.

  • width (number): Width of the bar in pixels.

  • height (number): Height of the bar in pixels.

Returns: None

Example:

-- Draw a horizontal hue bar for a color picker
function draw_color_picker()
    -- Draw the hue bar
    local x, y = 100, 100
    local width, height = 300, 20
    render.draw_hue_bar(x, y, width, height)
    
    -- Draw a border around the hue bar
    render.draw_rectangle(x, y, width, height, 255, 255, 255, 255, 1, false)
    
    -- Draw a marker for the currently selected hue (example position)
    local selected_pos = x + width * 0.7  -- 70% from the left
    render.draw_rectangle(selected_pos - 2, y - 3, 4, height + 6, 255, 255, 255, 255, 1, true)
end

Last updated

Was this helpful?