Ir al contenido

ImageLabel

Todos los demás tipos del Particiliary renderizan en el mundo 3D o postprocesan la imagen de cámara renderizada. ImageLabel es diferente. Emite partículas 2D planas hacia la capa de GUI — el mismo overlay que dibuja tu marcador, inventario, barra de salud y cualquier otro elemento de interfaz sobre el mundo del juego.

Útil para números de daño que flotan sobre un enemigo, popups de puntuación, destellos de UI, notificaciones de “+1”, flashes de logros, animaciones de recogida de munición — cualquier momento en tu interfaz que se beneficie de un comportamiento estilo partículas en lugar de un solo tween.

El modelo arquitectónico es diferente a todo lo que hemos visto hasta ahora. La posición es UDim2 (una coordenada de UI de Roblox, no un CFrame 3D). El movimiento es polar: un único ángulo de emisión más un spread, en grados. La velocidad está en píxeles por segundo, no en studs. Las partículas se emparentan en un ScreenGui, no en workspace ni en Lighting. El sistema de flipbook tiene dos fuentes — instancias Decal hijas o una única hoja de sprites con coordenadas de cuadrícula.

Una instancia ImageLabel de Roblox.

Al plugin no le importa dónde esté emparentado el ImageLabel fuente durante la autoría — el Explorer de Studio, un ScreenGui en StarterGui, un BillboardGui en algún lugar del workspace. Transform marca el ImageLabel como un emisor de Part-Icles y lo sella con los atributos de control de emisión. En el momento de emitir, los duplicados se emparentan al EmitParent si está definido, o a un ScreenGui gestionado que el plugin mantiene automáticamente (cubierto más abajo).

Lo primero que hay que entender es que las partículas de ImageLabel no existen en el espacio 3D en absoluto. Viven en la capa de GUI relativa a la cámara. Su Position es un UDim2 — el tipo de coordenada de UI estándar de Roblox que combina un componente de escala (una fracción del tamaño del padre, de 0 a 1) y un componente de offset (un valor fijo en píxeles).

Un Position de UDim2.fromScale(0.5, 0.5) (el valor predeterminado) coloca la partícula en el centro del padre — la mitad del ancho de lado a lado, la mitad de la altura de arriba a abajo. Un Position de UDim2.fromOffset(100, 200) la coloca 100 píxeles a la derecha y 200 píxeles hacia abajo desde la esquina superior izquierda del padre. Los valores mixtos combinan ambos: UDim2.new(0.5, 50, 0.5, -20) significa “centro, más 50 píxeles a la derecha y 20 píxeles hacia arriba.”

Cada partícula comienza en el Position de la fuente (lo defines en el panel, o en el editor de UI de Studio) y se desplaza en espacio de píxeles desde ahí a medida que se acumula el movimiento. El componente de escala nunca cambia durante la vida de una partícula; solo cambia el Offset.

Los tipos de Workspace usan movimiento cartesiano: un cono SpreadAngle, un gráfico de magnitud Speed, vectores de movimiento en 3D. ImageLabel usa movimiento polar: un único ángulo de lanzamiento y una magnitud.

Dos propiedades definen la dirección de lanzamiento:

  • EmissionAngle — un único ángulo en grados. es a la derecha (X positivo). 90° es hacia arriba (Y negativo en coordenadas de GUI, donde Y crece hacia abajo). 180° es a la izquierda. 270° es hacia abajo. Esta es la dirección central en la que se lanza cada partícula.
  • SpreadAngle — un único número en grados que da el spread aleatorio alrededor del EmissionAngle. Cada partícula elige un ángulo aleatorio dentro de EmissionAngle ± SpreadAngle/2. Un SpreadAngle de 0 produce un haz estrecho; un SpreadAngle de 360 produce una ráfaga completamente omnidireccional.

El gráfico Speed está en píxeles por segundo. Un Speed de 100 mueve una partícula 100 píxeles a lo largo de su ángulo de lanzamiento cada segundo. Un gráfico que va de 200 a 0 es una partícula que se lanza rápido y desacelera hasta detenerse durante su vida útil — útil para popups de números de daño que “suben y se frenan.”

Acceleration es un Vector2 en píxeles-por-segundo-al-cuadrado, aplicado a ambos ejes. Un patrón común es (0, 200) para una “caída tipo gravedad” — la velocidad descendente de cada partícula crece 200 píxeles por segundo cada segundo. Combinado con una velocidad inicial hacia arriba, esto produce una trayectoria en arco.

Drag funciona igual que en los tipos de workspace: un decaimiento exponencial aplicado a la velocidad cada fotograma.

La superficie completa, agrupada por sección del panel.

Etiqueta del panelAtributo de datoTipoPredeterminadoQué hace
ModeEmissionModeenumEmitEmit (clones por emisión) o Animate (singleton, en bucle)
LoopAnimateLoopbooleanfalseSi el modo Animate repite el ciclo
EnabledEnabled (attribute)booleanfalseActivar/desactivar principal
RateRatenumber10Partículas por segundo
LifetimeLifetimeNumberRange1Segundos que vive cada partícula
RotationImgRotRangeNumberRange0Rotación inicial aleatoria en grados
RotationImgRotSpeedNumberSequence0Gráfico de giro durante la vida
Rotation ModeImgRotModeenumOverLifeSi RotSpeed es por vida o por segundo
Etiqueta del panelAtributo de datoTipoPredeterminadoQué hace
ImageImagestring""ID de asset de Roblox para la textura
ImageColorImageColor3ColorSequenceblancoTinte RGB durante la vida de cada partícula
TransparencyImageTransparencyNumberSequence0Opacidad de la imagen durante la vida de cada partícula
BG ColorBackgroundColor3ColorSequenceblancoGráfico de color de fondo (para fondos no transparentes)
BG TransparencyBackgroundTransparencyNumberSequence1Gráfico de opacidad del fondo (predeterminado completamente transparente)
ScaleTypeScaleTypeenumStretchCómo encaja la Image dentro del Size de la partícula — Stretch/Slice/Tile/Fit/Crop
ResampleModeResampleModeenumDefaultFiltrado de textura — Default (suavizado) o Pixelated (vecino más cercano)
Etiqueta del panelAtributo de datoTipoPredeterminadoQué hace
PositionPositionUDim2(0.5, 0, 0.5, 0)Posición base de generación — Escala + Offset por eje
SizeImgSizeUDim2(0, 100, 0, 100)Tamaño base de la partícula — píxeles por defecto
SizeScaleSizeScaleX, SizeScaleYdos NumberSequence1Multiplicadores de tamaño por eje, animados durante la vida
AnchorPointAnchorPointVector2(0.5, 0.5)Dónde en la partícula ancla el Position (centro por defecto)
ZIndexZIndexnumber1Orden de dibujado dentro del ScreenGui padre
Etiqueta del panelAtributo de datoTipoPredeterminadoQué hace
SpeedImgSpeedNumberSequence0Gráfico de magnitud de velocidad, en píxeles por segundo
EmissionAngleEmissionAnglenumber90Ángulo de lanzamiento central en grados (90° = arriba)
SpreadAngleImgSpreadAnglenumber0Spread aleatorio alrededor del EmissionAngle en grados
AccelerationImgAccelerationVector2(0, 0)Aceleración 2D constante en píxeles/seg²
DragImgDragnumber0Decaimiento exponencial de velocidad
Reverse MotionImgInvertMotionbooleanfalseReproduce la trayectoria en reversa
Etiqueta del panelAtributo de datoTipoPredeterminadoQué hace
SourceImgFlipbookSourceenumDecalsDe dónde vienen los fotogramas — carpeta Decals o Spritesheet
PlayModeImgFlipbookModeenumLoopCómo se reproducen los fotogramas — Loop, OneShot, PingPong, Random
GridGridCols, GridRowsdos number(8, 8)Dimensiones de la cuadrícula del spritesheet (solo se muestra si Source = Spritesheet)
FramerateImgFlipbookFramerateNumberRange10Fotogramas por segundo
StartRandomImgFlipbookStartRandombooleanfalseFotograma de inicio aleatorio por partícula
ReverseImgFlipbookReversebooleanfalseSe reproduce al revés
Etiqueta del panelAtributo de datoTipoPredeterminadoQué hace
Anim. StepsTotalKeyFramesnumber100Resolución de pre-muestreo para los gráficos
LingerPartLifenumber0Segundos que la partícula persiste tras Lifetime
Emit IntoEmitParentInstancenilDónde se emparentan las partículas — reemplaza el ScreenGui predeterminado
PreloadTexturePreloadTexturebooleanfalseCarga forzada del asset Image antes de que comience la emisión

Prosa por propiedad para los aspectos distintivos

Sección titulada «Prosa por propiedad para los aspectos distintivos»

Un UDim2 para la posición base de generación. La entrada del panel es un formato separado por comas "sx, ox, sy, oy" — Escala-X, Offset-X, Escala-Y, Offset-Y. Así, "0.5, 0, 0.5, 0" (el predeterminado) es “centro del padre.” "0, 50, 1, -50" es “cincuenta píxeles desde la izquierda, cincuenta píxeles desde la parte inferior.”

Las partículas se generan en este Position y acumulan su movimiento como un delta al componente Offset. El componente de escala permanece constante — las partículas no se redistribuyen con los cambios de tamaño del padre durante su vida.

Un UDim2 para el tamaño base de cada partícula. El predeterminado es (0, 100, 0, 100)100 píxeles de ancho y 100 píxeles de alto, sin dimensionamiento relativo a la escala. Para hacer que las partículas tengan un tamaño relativo al padre (de modo que crezcan cuando la pantalla sea más grande), usa valores de escala: (0.1, 0, 0.1, 0) es “10% del padre en cada eje.”

El Size base se multiplica por los gráficos de SizeScale cada fotograma; el resultado es el tamaño renderizado en cualquier momento dado.

Dos gráficos NumberSequence independientes (SizeScaleX y SizeScaleY) que multiplican el Size base cada fotograma.

Una partícula que se ensancha a mitad de su vida usa un SizeScaleX oscilante mientras mantiene SizeScaleY en 1.0. Una partícula que se estira verticalmente usa lo opuesto. Una partícula que pulsa (crece y se encoge juntos) usa gráficos idénticos en ambos ejes.

Así es como las partículas 2D consiguen esa sensación de “impacto de anime” — estiramiento horizontal exagerado en un flash de golpe, aplastamiento vertical para un popup de daño recibido.

Un único número en grados. La dirección central en la que se lanza cada partícula.

es a la derecha (eje X positivo en espacio de pantalla). 90° es hacia arriba (Y crece hacia abajo en coordenadas de GUI, así que “arriba” es la dirección Y negativa — el plugin gestiona la inversión internamente). 180° es a la izquierda. 270° es hacia abajo. El predeterminado es 90° — las partículas se lanzan hacia arriba por defecto, que es el patrón más común (los números de daño flotan hacia arriba, las chispas suben).

Para efectos laterales como un splash de impacto direccional, usa o 180°. Para ráfagas omnidireccionales, deja el EmissionAngle como está y aumenta el SpreadAngle a 360.

Un único número en grados. El ángulo de lanzamiento real de cada partícula se elige aleatoriamente de EmissionAngle ± SpreadAngle/2.

0 produce un haz estrecho y paralelo — cada partícula se lanza exactamente en la dirección del EmissionAngle. 30 produce un abanico moderado. 90 produce un spread de un cuarto de círculo. 360 produce una ráfaga completamente omnidireccional.

Combinado con EmissionAngle, este es el modelo de dirección completo. No hay offsets de Position por eje como en los tipos de workspace — si quieres que las partículas aparezcan en lugares diferentes, configura múltiples emisores en diferentes Positions, o escribe en el Position antes de cada llamada Particle:Emit().

Un gráfico NumberSequence para la magnitud de velocidad en píxeles por segundo. Se multiplica contra el vector unitario de dirección de lanzamiento cada fotograma.

Un Speed constante de 100 mueve una partícula 100 píxeles a lo largo de su dirección de lanzamiento por segundo. Un gráfico que decae de 200 a 0 es un patrón de “subir y frenar” — lanzamiento rápido, parada gradual. Un gráfico que aumenta progresivamente es un “deriva y acelera” — útil para animaciones de escombros de explosión.

Un Vector2 en píxeles-por-segundo-al-cuadrado. Se aplica a la velocidad de cada partícula cada fotograma, independientemente de la dirección de lanzamiento.

Dado que el Y de la GUI crece hacia abajo, (0, 300) es “gravedad que arrastra las partículas hacia la parte inferior de la pantalla” — útil para números de daño que flotan brevemente hacia arriba y luego caen. (50, 0) es “una brisa lateral que empuja las partículas a la derecha.” (0, -100) es “una fuerza constante hacia arriba” — partículas que ganan altitud con el tiempo independientemente de la dirección de lanzamiento.

Decaimiento exponencial aplicado a la velocidad cada fotograma. Mismo rol que en los tipos de workspace. Un Drag de 1 reduce la velocidad a aproximadamente el 37% por segundo.

Para efectos 2D, el drag es especialmente útil para partículas que deben asentarse en lugar de simplemente volar — un popup de número de daño que deriva hacia arriba brevemente y luego se detiene en el aire usa Drag para reducir su velocidad sin un gráfico de Speed descendente.

Tres propiedades controlan juntas la rotación:

  • RotRange — un NumberRange para la rotación inicial aleatoria. Cada partícula elige una rotación aleatoria dentro de este rango al generarse. (-30, 30) da una orientación aleatoria de ±30°; (0, 0) da a cada partícula la misma rotación inicial (cero).
  • RotSpeed — un NumberSequence para la velocidad de rotación durante la vida. La semántica depende de RotMode.
  • RotMode — un enum: OverLife (el valor del gráfico en el tiempo t es el ángulo absoluto en grados — un gráfico que va de 0 a 360 hace girar cada partícula una vez durante su vida, independientemente de su duración; un gráfico constante mantiene una rotación fija) o Speed (el valor del gráfico en el tiempo t es la tasa de rotación en grados-por-segundo; el motor acumula valor × dt cada fotograma, así que un 360 constante gira una vez por segundo).

Mismo modelo que la rotación de los tipos de workspace, solo que sobre el único eje 2D (rotación alrededor de la normal de pantalla — las partículas giran como monedas sobre una mesa).

Un enum que determina de dónde vienen los fotogramas del flipbook. Dos opciones:

  • Decals — mismo modelo que los flipbooks de malla para Part y Beam. El plugin lee instancias Decal hijas de una carpeta ImageFlipbooks bajo el ImageLabel fuente, ordenadas numéricamente por nombre. La Texture de cada Decal se convierte en un fotograma.
  • Spritesheet — un único asset de Image dividido en una cuadrícula. El plugin calcula un Rect para cada fotograma basándose en GridCols y GridRows y anima las propiedades ImageRectOffset e ImageRectSize de la partícula. La cuadrícula predeterminada 8×8 (cuadrado de 64 fotogramas) cubre la mayoría de la autoría de spritesheets; también funcionan tiras horizontales de 8×1, tiras verticales, cuadrículas cuadradas de 4×4 o cualquier otra disposición.

Para la mayoría de los trabajos de autoría, el modo Decals es más sencillo (una imagen por fotograma, sin matemáticas). El modo Spritesheet es más eficiente para efectos con mucha animación ya que una textura se carga una sola vez.

Cómo avanzan los fotogramas. Cuatro opciones. La misma idea que el Mode del flipbook de malla, pero con dos modos adicionales que los flipbooks de malla / beam no admiten actualmente.

Loop (predeterminado) — los fotogramas se reproducen continuamente a Framerate FPS durante toda la vida de la partícula. Casos de uso:

  • Destellos o brillos de UI que se animan continuamente detrás de un botón.
  • Pulsos de power-up en bucle superpuestos en un HUD.
  • Patrones de brillo en ciclo en popups de números de daño para que el popup siempre esté “vivo.”

OneShot — los fotogramas se reproducen una vez de forma lineal a lo largo del Lifetime. El primer fotograma aparece en el tiempo 0, el último fotograma en el tiempo 1, manteniéndose el último fotograma durante cualquier tiempo posterior a que la secuencia se complete. Casos de uso:

  • Un popup de recogida “+1” cuyos fotogramas son: aparecer → expandirse → asentarse → desvanecerse. La progresión de fotogramas es el ciclo de vida del popup.
  • Números de daño cuyo primer fotograma es un efecto de impacto nítido que luego se suaviza progresivamente.
  • Flashes de logros de UI cuyos fotogramas trazan el arco de bloom-y-desvanecimiento una vez por emisión.

PingPong — los fotogramas se reproducen hacia adelante, luego hacia atrás y luego hacia adelante de nuevo, oscilando. La animación tiene un fotograma de “reposo” en cada extremo del ciclo y un fotograma “pico” en el centro. Casos de uso:

  • Efectos de respiración o pulsación donde la textura debe expandirse y contraerse repetidamente. Un pingpong de 5 fotogramas (pequeño → mediano → grande → mediano → pequeño → mediano → grande …) se percibe como una respiración orgánica.
  • Marcadores de UI que se balancean — una flecha flotante cuyos fotogramas barren hacia arriba y hacia abajo.
  • Un spinner de carga que no hace salto brusco al reiniciar el bucle. Donde Loop se lee como “fotograma N+1 justo después del fotograma N → salto al fotograma 1,” PingPong se lee como una ola suave de ida y vuelta sin salto visual.

Random — cada 1 / FlipbookFramerate segundos, cada partícula elige un fotograma aleatorio nuevo de forma independiente. A diferencia del avance lineal de Loop a través de la secuencia de fotogramas, Random produce una secuencia de fotogramas por partícula con sensación irregular. Casos de uso:

  • Texturas de interferencia estática donde el orden no importa — polvo de chispas, overlays de grano de pantalla, efectos de señal rota.
  • Energía crepitante donde cualquiera de N fotogramas es un aspecto válido en cualquier momento.
  • Cualquier situación donde quieras que una población parezca desincronizada sin necesidad de programar offsets por partícula.

Dos números: GridCols (fotogramas por fila) y GridRows (número de filas). Solo significativo cuando Source = Spritesheet. El plugin calcula:

  • Ancho del fotograma = imageWidth / GridCols
  • Alto del fotograma = imageHeight / GridRows
  • Total de fotogramas = GridCols × GridRows
  • Para el fotograma i: ImageRectOffset = ((i % GridCols) × frameWidth, floor(i / GridCols) × frameHeight)

Una cuadrícula 8, 8 es un cuadrado de 64 fotogramas (el predeterminado). Una cuadrícula 4, 4 es un cuadrado de 16 fotogramas. Una cuadrícula 8, 1 es una tira horizontal de 8 fotogramas. El plugin guarda en caché las dimensiones en píxeles de la imagen en la primera emisión, por lo que la primera emisión puede renderizar la imagen completa sin recortar durante uno o dos fotogramas mientras se completa la obtención de dimensiones.

El padre predeterminado para las partículas emitidas es un ScreenGui gestionado que el plugin crea de forma perezosa bajo CoreGui. No necesitas preocuparte por esto — aparece la primera vez que un ImageLabel emite y se destruye cuando desactivas el plugin.

Reemplaza Emit Into para apuntar a tu propio ScreenGui (o cualquier contenedor de UI) cuando quieras partículas dentro de un frame específico, por encima de otros elementos de UI específicos, o bajo la gestión de Z-index de tu juego. Un patrón común es poner un ScreenGui llamado Effects dentro de PlayerGui y apuntar los emisores de ImageLabel a él, de modo que los efectos participen en el orden de renderizado de UI de tu juego.

Un booleano. Mismo rol que en Beam/Trail: fuerza la carga del asset de textura antes de que comience la emisión, evitando que las primeras partículas se rendericen sin imagen mientras el asset se va cargando.

Para una sincronización cinemática precisa, actívalo. Para la mayoría de los usos, déjalo desactivado.


Algunas peculiaridades específicas de ImageLabel.

El seguimiento de 3D a pantalla es tu responsabilidad. Las partículas de ImageLabel no siguen automáticamente a los objetos 3D. Si quieres que un número de daño aparezca sobre un enemigo que está en algún lugar del mundo 3D, tienes que calcular tú mismo la coordenada de espacio de pantalla del enemigo (normalmente con Camera:WorldToScreenPoint) y escribirla en el atributo Position del emisor ImageLabel antes de activar la emisión. No hay ningún toggle integrado de “seguir este punto 3D.”

ImageColor3 multiplica, no reemplaza. Un ImageColor3 rojo no repinta la textura de rojo — multiplica el RGB de la textura por el RGB del color. Si tu textura es blanca, el resultado es rojo. Si tu textura es azul, el resultado es negro (rojo × azul = sin superposición). Para partículas de tinte sólido, empieza con una textura de píxel blanco; para partículas con textura, diseña el color base de la textura teniendo en cuenta la multiplicación.

El Position predeterminado es el centro del padre. (0.5, 0, 0.5, 0) coloca la partícula en el centro del ScreenGui padre. Para números de daño sobre un enemigo 3D, esto no es correcto — querrás reemplazar Position antes de cada emisión. Para adornos de UI que siempre deben activarse desde la misma posición de pantalla (un icono de corazón parpadeando en la esquina superior izquierda), el predeterminado funciona bien.

La carpeta Decals está oculta durante la emisión. Cuando el plugin clona el ImageLabel fuente para la emisión, elimina la carpeta ImageFlipbooks del clon (el clon no necesita llevar consigo los Decals de los fotogramas — el motor los lee desde la carpeta de la fuente una vez, los guarda en caché y usa la lista en caché por partícula).

El modo Animate es singleton. Igual que con los tipos de espacio de pantalla — solo un duplicado en modo Animate vivo a la vez, las re-emisiones mientras está vivo se descartan silenciosamente. Funciona de la misma manera para ImageLabel que para Blur/Bloom/ColorCorrection.

El rendimiento tolera tasas altas. El renderizado de UI no pasa por el pipeline 3D (sin skinning, sin shaders, sin proyección de sombras). Valores de Rate altos como 100 o 200 partículas por segundo son viables en hardware de gama media. El costo está principalmente en la evaluación de gráficos y las actualizaciones de propiedades por partícula, no en el renderizado en sí.

El Image = "" predeterminado. Un nuevo emisor de ImageLabel con el Image vacío predeterminado renderiza… nada. Tienes que definir un asset de Image antes de que las partículas sean visibles. El campo Image del panel acepta URIs rbxassetid://... o el ID del asset directamente.


Queda un tipo por cubrir: Highlight — el overlay de contorno-y-relleno ligado a un adornee, añadido en la v38. Forma distinta a cualquier tipo anterior (sin posición, sin movimiento, sin geometría — solo color y transparencia sobre la silueta de un objetivo).