¿Querés monitorear temperaturas, clocks, FPS y demás sin que tu pantalla parezca un informe del INDEC? Este tutorial es para vos.
MSI Afterburner y RivaTuner te dan un overlay funcional, sí. Pero por defecto es intrusivo, desordenado y visualmente… cuestionable.
Si activás muchos indicadores, pasás de tener un monitor de rendimiento a una ensalada de números encima del juego. Y eso rompe toda la estética, más aún si sos de los que se mataron calibrando gráficos para que el juego luzca joya.
Pero tranquilo, porque con unos ajustes simples podés armar un overlay minimalista, claro y estético, sin resignar la data que importa. Y sin necesidad de instalar nada raro.
Lo básico antes de arrancar
Necesitás tener:
- MSI Afterburner instalado (vale versión final o beta)
- RivaTuner Statistics Server (RTSS), que viene junto y corre en segundo plano
Y una fuente que le sube el nivel a todo: Open Sans.
Podés bajarla desde fonts.google.com. Instalá el archivo OpenSans-VariableFont_wdth,wght.ttf (viene en el .zip).
Listo eso, abrí Afterburner (o tocá el ícono de la barra si ya está abierto) y empecemos a tunear el overlay como corresponde.
Qué marcar (y qué desmarcar) en la pestaña de monitoreo de Afterburner
Antes de tocar RivaTuner, hay un paso clave que no podés saltear.
Antes de meternos con la parte estética del overlay, necesitamos ajustar qué datos queremos que Afterburner envíe a RivaTuner.
Esta parte se hace desde la pestaña Monitoring de Afterburner. Acá vas a activar los indicadores que vas a querer mostrar en tu overlay. Te recomendamos empezar con estos:
- Framerate
- Frametime
- GPU temperature
- GPU usage
- Memory usage (VRAM)
- Core Clock
- Memory Clock
- Power
- Fan tachometer
Con eso ya tenés una buena base para un overlay completo sin sobrecargarlo.
⚠️ Aclaración rápida:
Esta guía no es para aprender a activar el overlay clásico. Damos por hecho que sabés cómo usar RivaTuner con Afterburner y que lo tenés corriendo.
Lo que vamos a hacer es mejorar la presentación visual. O sea, dejar de usar el layout default y pasar a uno más limpio y custom.
Ahora bien: si vas a usar un overlay personalizado, tenés que desactivar una opción crucial en Afterburner.
En cada gráfico que marcaste, tenés que desmarcar la casilla “Show in On-Screen Display”.
¿La razón? Si la dejás activa, se va a mostrar el overlay tradicional más el tuyo nuevo. Y eso rompe todo el laburo que hiciste.
Superposición, caos visual, y el doble de info flotando en pantalla. Evitalo.
Quedate con un solo overlay: el tuyo. Bien ordenado, claro y a tu gusto.
Primeros pasos en RivaTuner: dejalo listo para tunear el overlay
Un detalle que muchos se olvidan y después no saben por qué no aparece la fuente.
Vamos a empezar a tocar RivaTuner, pero antes te tiro un aviso importante.
Si instalaste la fuente Open Sans mientras RivaTuner estaba abierto, cerralo y volvé a abrirlo. Si no, no va a reconocer la fuente y te vas a volver loco buscándola.
¿Todo ok? Ahora abrí RivaTuner. Tenés dos formas de llegar:
- Desde Afterburner: pestaña On-Screen Display, botón More
- O desde el área de notificación (barra de tareas): hacé clic en el ícono del monitor violeta
Una vez adentro, buscá la sección On-Screen Display rendering mode y seleccioná Raster 3D. Está más o menos por la mitad de la ventana.
Eso va a abrir el selector de fuentes de Windows. Escribí “Open Sans” y elegí la variante Regular.
Con eso ya tenés RivaTuner listo para lo que importa: arrancar con la edición del overlay, a tu manera y sin limitaciones.
Explorando el editor de overlays de RTSS
Acá empieza la parte divertida. O peligrosa, si no guardás cambios.
Con RivaTuner listo, toca abrir el editor de overlays. Es donde vas a diseñar cómo se ve tu medidor en pantalla.
Hacelo así: clic en el botón azul Setup (está abajo a la izquierda del preview on-screen). Se abre la ventana RivaTunerStatisticsServer properties.
Entrá a la segunda pestaña: Plugins. Activá la casilla de OverlayEditor.dll y hacé doble clic sobre el nombre. Eso abre el editor visual.
Lo que vas a ver es una grilla negra con líneas blancas. Minimalista, sí. Intimidante también, pero tranqui que vamos paso a paso.
Lo primero que tenés que hacer es decirle de dónde va a sacar los datos. En este caso: MSI Afterburner.
Desde el menú superior, andá a Data sources > Edit. Después, presioná Add y seleccioná MSI Afterburner de la lista de data providers.
Tildá las casillas de los sensores que querés usar: GPU, CPU y la app que estés corriendo, si querés medir algo puntual.
Creación de capas
El primer bloque es el que vas a clonar como loco después.
Una vez que configuraste las fuentes de datos, vamos al paso clave: crear la primera capa del overlay.
Andá al menú Layers > Add para sumar una nueva capa. En la grilla va a aparecer un bloque rectangular. Hacé doble clic sobre él para entrar a sus propiedades.
La idea es la siguiente: vamos a armar una capa base que después vas a copiar y pegar varias veces. Cada copia mostrará un dato distinto, pero con el mismo estilo visual.
Esto ahorra tiempo y mantiene el diseño uniforme. Al final, todas las capas las vamos a agrupar y enmarcar con otra capa sin texto, que servirá como borde decorativo. Así queda como una barra alineada arriba de la pantalla.
Pero antes de todo eso, vamos a configurar esta primera capa con el dato más básico: el frame rate.
Incrustando datos en la capa
Acá es donde el overlay empieza a cobrar vida.
Vamos a meter el primer dato real en nuestra capa base. Para eso tenés dos formas de invocar sensores: usando <> o %%.
Si escribís cualquiera de los dos, se despliega una lista con todos los sensores disponibles.
Por ejemplo, para mostrar el framerate podés escribir:
<FR> o %Framerate%. Ambos hacen lo mismo: mostrar los FPS actuales.
También podés escribir solo <> o %% y elegir el dato desde el menú desplegable, sin memorizar nada.
Ahora, para que no sea solo un número flotando agregale al final:
%Framerate% FPS o <FR> FPS. Cualquiera de las dos formas sirve.
Una vez que tenemos el dato incrustado, pasamos a lo importante: dejar linda esta caja. Vamos a darle estilo, porque esta capa va a ser nuestro modelo para el resto.
Customización visual básica de la capa modelo
Un poco de estilo para que no parezca overlay de 2009.
Vamos a darle forma a esta primera capa. La idea es que quede linda, legible y fácil de replicar después con otros datos.
Primero, activá la opción “Use custom background color”. A la derecha te aparece un cuadrado negro. Hacé clic para abrir el selector de color.
Para este tutorial usamos blanco con opacidad al 25%. Eso sería:
RGB: 255 / 255 / 255 y opacidad: 25%.
Más adelante, cuando pongas otra caja al lado, te recomiendo alternar el fondo. A esa segunda caja le ponés negro puro (RGB 0 / 0 / 0) con la misma opacidad. Así creás un efecto de grilla con contraste suave entre datos.
También podés cambiar el color del texto si querés, pero en esta guía vamos a mantenerlo simple para que no se vuelva demasiado técnico. Lo visual más fino lo dejaremos para una segunda parte.
Seguimos: desactivá la casilla “Resize layer to content”. Eso libera la opción de “Manual extent origin”.
Hacé clic en el cuadrante central (de los 9 que muestra) para centrar el texto. Esto hace que, al redimensionar la caja, el texto se mantenga siempre alineado al centro.
Dale a OK para guardar.
Ahora podés estirar la capa desde los extremos. Para este ejemplo, la vamos a expandir horizontalmente hasta que ocupe unas 8 grillas. Eso ya nos deja una base sólida para seguir.
Duplicando la capa base para sumar más datos
Porque copiar y pegar también es productividad.
Vamos a agilizar el proceso duplicando la capa que ya configuraste. Esto te permite mantener el mismo estilo visual y solo cambiar el contenido.
Primero, seleccioná la capa base y hacé CTRL + C y luego CTRL + V. Con eso ya tenés una copia lista para editar.
En la casilla de texto (Hypertext), cambiá el dato al frametime. Usá %Frametime% o <FT>, y agregale un sufijo “ms” para que se entienda que son milisegundos.
A esta segunda capa alternale el fondo a negro, con la misma opacidad del 25%.
Esto mantiene el patrón blanco-negro entre cajas y mejora la lectura en pantalla.
Aplicá los cambios, colocá la caja a la derecha de la primera y duplicá otra vez con CTRL + C / CTRL + V.
Ahora vamos con el uso de GPU. En lugar de tipearlo a mano, usá el botón + que está al lado del campo Hypertext.
Ahí seleccioná “GPU usage” de la lista de sensores y marcá las opciones Add label y Add current value macro.
Cuando se inserte el texto, podés borrar la parte que dice “GPU usage” y dejar solo el número con el símbolo %. Se entiende solo.
Desde este punto, el resto de las cajas las vas a ir armando igual. Alternás colores de fondo, cambiás el dato en cada una y las alineás de izquierda a derecha.
Para este ejemplo básico usamos los siguientes sensores:
- GPU usage: %GPU usage% %
- Core clock: %Core clock% MHz
- Power: %Power% W
- Fan tachometer: %Fan tachometer% RPM
- Memory usage: %Memory usage% MB
- Memory clock: %Memory clock% MHz
- CPU temperature: CPU %CPU temperature% °C
Con eso ya tenés una barra completa, ordenada y funcional. Y más prolija que cualquier overlay default.
Cómo centrar las capas del overlay
Sí, también podés alinear todo a ojímetro. Pero no es la idea.
Una vez que tenés todas las cajas alineadas horizontalmente, es hora de centrarlas en pantalla para que el overlay quede prolijo.
Hay dos formas de hacerlo. La más práctica es esta:
- Maximizá la ventana del editor de RivaTuner.
- Hacé doble clic en la caja del medio (por ejemplo, la número 4 de 8).
- En las propiedades, activá la opción Sticky layer position y elegí top center.
Eso centra esa capa respecto al ancho total de la pantalla. A partir de ahí, colocás las otras capas a su izquierda y derecha.
¿Querés hacerlo más fino aún? Hay otra opción más manual:
- Tomá cualquier capa y llevála al borde derecho de la grilla.
- Fijate en el valor de “Pos” que aparece abajo a la izquierda.
- Dividí ese número por 2, y usá ese resultado como centro.
Por ejemplo, si tenés 140 unidades de grilla horizontal, el centro está en 70. Arrastrá la capa que querés como referencia hasta que el valor diga “Pos -70”.
Ambos métodos sirven. Elegí el que más cómodo te resulte.
💡 En este tutorial no vamos a usar tablas ni grupos, aunque son útiles si querés organizar overlays más complejos. Lo dejamos para la parte 2.
Agregando un borde exterior con una “capa boba”
No muestra nada, pero hace que todo quede más pro.
Para terminar el diseño, vamos a crear una capa vacía que actúe como borde y encierre visualmente todas las anteriores.
Sumá una nueva capa como hiciste antes. Borrá el texto por defecto (campo Hypertext) y activá la opción de borde.
En el campo del borde, escribí -1px (sí, con el signo menos). Eso indica que el borde será exterior al contorno de la caja.
Para este ejemplo, usamos blanco con opacidad del 25%. Pero podés elegir el color que mejor combine con tu setup.
Ahora redimensioná esa capa para que abarque todas las anteriores, como un recuadro general. No tiene que mostrar nada, solo cubrir visualmente los extremos.
Por último, asegurate de que esta capa quede en el fondo. En el menú superior, andá a Layers > Move to bottom.
Ahora sí: abrí el menú Layouts > Save y guardá tu overlay. Podés nombrarlo default.ovl o sobrescribir la capa default que ya viene creada.
Overlay terminado. Y lo hiciste sin morir entre gráficos horribles.
Tips extra para exprimir RTSS
Detalles que no entraron en el paso a paso, pero que te pueden salvar el overlay.
Algunos trucos útiles que te pueden venir bien cuando quieras experimentar un poco más con tu diseño:
- Agregar salto de línea dentro de una casilla de texto:
\n - Colorear texto individual (sobreescribe el color por defecto):
<C=Hexadecimal>NombreDato<C>
Ejemplo: <C=FF0000>GPU Temp<C> va a mostrarlo en rojo. - Quitar la sombra del texto:
Desactivá el toggle “On-Screen Display shadow” desde la pantalla principal de configuración de RivaTuner. - Aplicar superscript a parte del texto (por ejemplo, para mostrar unidades como m²):
<S>Texto Superscript<S> - Cambiar el orden de las capas (z-index visual):
Desde Layers > Edit list podés mover cada layer al frente, al fondo o dejarla en el medio.
Podés combinar estos tips con todo lo que hiciste hasta ahora para refinar aún más tu overlay.
¿Y ahora qué?
Ya dominás lo básico. Lo que sigue depende de vos (y de si este post la rompe o no).
Si llegaste hasta acá, ya tenés un overlay funcional, limpio y hecho a tu gusto. No más paneles genéricos. No más números amontonados sin alma.
Esto fue solo la base. En una próxima entrega podríamos meternos con overlays reactivos (que cambian de color según la temperatura), imágenes embebidas, o incluso gráficos en tiempo real. Sí, como un stream overlay de alto nivel, pero corriendo local.
Por ahora, te dejo este mensaje: abrí el editor, probá, rompé cosas, y volvé a armar. Ya sabés cómo. Y si lo usás en tus streams, más de uno se va a preguntar cómo hiciste para tener un overlay que no parece de stock.
Nos vemos en la parte dos. O antes, si te cebás y lo compartís.