Calculadora de UI

Calcula dimensiones, posiciones, colores y propiedades de UI para Roblox

Configuración de UI

Dimensiones
Colores
Tipografía
Posiciones
Avanzado
Selecciona el tipo de elemento de UI que estás creando
En píxeles (0-100%)
En píxeles (0-100%)
Define cómo se interpretan las dimensiones
R
G
B
Colores recomendados para interfaces Roblox
Transparente (0) Opaco (1.0)
En puntos (8-72)
1
2
3
4
5
6
7
8
9
10
11
12
Sistema de 12 columnas para diseño responsivo
6 columnas
360°
Cuadrado (0) 0px Redondeado (50px)
Relación
16:9

Vista Previa y Resultados

Container (400×300)
UI Element
200×50

Propiedades Calculadas

Tipo de Elemento
Frame
Dimensiones (UDim2)
UDim2.new(0, 200, 0, 50)
Posición (UDim2)
UDim2.new(0.25, 0, 0.4167, 0)
Color (Color3)
Color3.new(0.231, 0.51, 0.965)
Anclaje (Vector2)
Vector2.new(0.5, 0.5)
Relación de Aspecto
4:1

Código Lua Generado

Lua - Roblox Script
local element = Instance.new("Frame")
element.Name = "UIElement"
element.Size = UDim2.new(0, 200, 0, 50)
element.Position = UDim2.new(0.25, 0, 0.4167, 0)
element.AnchorPoint = Vector2.new(0.5, 0.5)
element.BackgroundColor3 = Color3.new(0.231, 0.51, 0.965)
element.BackgroundTransparency = 0
element.BorderSizePixel = 0

-- Propiedades adicionales
element.ClipsDescendants = false
element.Visible = true
element.ZIndex = 1
element.Rotation = 0

-- Insertar en el juego
element.Parent = game.Players.LocalPlayer:WaitForChild("PlayerGui")

¿Cómo Usar la Calculadora de UI?

1

Configura las Dimensiones

Define el ancho y alto de tu elemento UI en píxeles, porcentaje o escala. Usa el selector de resolución para diferentes dispositivos.

Tip: Para botones, usa proporciones de 2:1 a 4:1 para mejor usabilidad.
2

Personaliza Colores y Tipografía

Selecciona colores de la paleta Roblox o define personalizados. Ajusta fuente, tamaño y estilo de texto.

Tip: Usa contraste alto entre texto y fondo para mejor legibilidad.
3

Define Posiciones y Anclajes

Establece la posición X/Y y puntos de anclaje para que tu UI se adapte a diferentes resoluciones.

Tip: Usa AnchorPoint 0.5,0.5 para centrar elementos fácilmente.
4

Genera y Copia el Código

Obtén el código Lua listo para usar en Roblox Studio. Copia y pega directamente en tus scripts.

Tip: Guarda tus configuraciones como presets para reutilizarlas más tarde.

¿Listo para Crear tu UI?

Comienza a diseñar interfaces profesionales para Roblox con esta herramienta.

Descargo de Responsabilidad

La Calculadora de UI es una herramienta de diseño y cálculo. El código generado puede requerir ajustes para funcionar correctamente en tu juego específico. Siempre prueba tu UI en diferentes dispositivos y resoluciones. Esta herramienta no está afiliada con Roblox Corporation.