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?