Efecto “flash bang” – RanGE Tutorial

💥 Simulando una Flashbang al estilo Counter Strike en Range 🎮

Uno de los juegos que era muy popular hace algunos años, al menos entre colegas del trabajo, era el clásico Counter Strike 🔫.
Recuerdo que cuando jugábamos en línea, había armas que siempre me parecieron especialmente interesantes porque le daban un giro diferente al gameplay, como las granadas cegadoras o flashbangs 💡💣.

Precisamente por eso, hace algún tiempo me animé a probar mi propia versión de este efecto en uno de mis prototipos de juego.

👉 El resultado fue este:

Probablemente no se vea súper PRO 😅, pero al menos el approach que utilicé es bastante simple, directo y hasta cierto punto rudimentario, lo cual lo hace ideal para experimentar y aprender.

🧠 Analizando cómo funciona una granada cegadora

Gracias a los videojuegos, todos tenemos una idea clara de cómo funciona una flashbang, así que tomando eso como base, podemos analizar el efecto y determinar qué necesitamos para replicarlo.

🔍 Requerimientos básicos

1️⃣ Necesitamos lanzar un objeto que simule una granada 💣
2️⃣ El objeto granada “explota” y activa varias propiedades dentro del juego 💥
3️⃣ Se genera un screenshot del momento exacto de la explosión.
📸 Este screenshot se usará para simular el efecto de encandilamiento
4️⃣ El screenshot se aplica a un objeto plano llamado monitor, del mismo tamaño que la cámara, y se emparenta a la cámara 🎥
5️⃣ El material del objeto monitor deberá estar animado:

Comienza totalmente transparente
De forma abrupta deja de serlo (el flash ⚡)
Poco a poco vuelve a hacerse transparente 🌫️

A grandes rasgos, así es como podemos empezar a entender y construir este efecto.
Como casi todo en desarrollo de videojuegos, esto es prueba y error 🔁: ni siquiera trabajando con bloques de lógica te salvas de algún typo o una mala conexión entre nodos 😅.
Así que no te frustres si no te sale a la primera, es completamente normal.

🚀 Manos a la obra

Dicho lo anterior… ¡comenzamos! 😄

Para agilizar el tutorial:

❌ No haremos un escenario completo
❌ No configuraremos un personaje en primera persona
❌ No utilizaremos en esta primera parte del tutorial archivos externos (screenshot)
✅ Nos enfocaremos solo en lo funcional

Así que partiremos del cubo que aparece por defecto cuando abrimos Range Game Engine.

Este cubo será el objeto que simulará la granada cegadora, por lo que comenzaremos creando la lógica básica necesaria para lograr el efecto.

🎨 Preparando el material del efecto Flash

La base de este efecto es un material de color blanco, con el canal Alpha animado, que nos permitirá:

Aparecer de forma abrupta ⚡
Desvanecerse poco a poco 🌫️

Luego, mediante bloques de lógica, controlaremos cuándo se reproduce esta animación.

🪜 Creación del material paso a paso

1️⃣ Agrega un objeto nuevo a la escena, será un objeto plano (Plane).

Acceso rápido: SHIFT + A → Mesh → Plane
O desde el menú Add en la vista 3D
Nómbralo Flashbang

2️⃣ Agrégale un material y nómbralo FlashbangMat

3️⃣ En la sección Diffuse, cambia el color a BLANCO ⚪

4️⃣ En la sección Shading, activa el checkbox Shadeless

5️⃣ En Game Settings → Constant Values, desactiva el checkbox Material

6️⃣ Activa la sección Transparency y selecciona Z Transparency

7️⃣ Abre una ventana de Timeline y ve al frame 0

En Transparency → Alpha, coloca el valor en 0
Click derecho → Add Keyframe

8️⃣ Avanza al frame 4

Cambia el valor de Alpha a 100
Click derecho → Add Keyframe

9️⃣ Avanza al frame 250

Ajusta Alpha nuevamente a 0
Click derecho → Add Keyframe

🎥Aquí tienes un video donde puedes ver el paso a paso:

📌 Hasta aquí, ya tenemos un material con el canal Alpha animado, pero aún no tenemos control sobre cuándo se reproduce esta animación… y eso es justo lo que haremos a continuación.

🧩 Controlando la animación con bloques de lógica

Ahora activaremos la animación del material FlashbangMat usando bloques de lógica.

🔗 Configuración de bloques

1️⃣ Selecciona el objeto Flashbang
2️⃣ Abre el Editor de bloques de lógica
3️⃣ Verás las tres secciones:

Sensors
Controllers
Actuators

4️⃣ En Sensors, agrega un sensor Keyboard

Configúralo para activarse con la barra espaciadora

5️⃣ En Controllers, agrega un controlador AND

6️⃣ En Actuators, agrega un actuador Action

Tipo de reproducción: Play
Selecciona la acción correspondiente a la animación del material
- El nombre se genera automáticamente
- Algo similar a FlashbangMatAction
- Como no hay más animaciones, será la única disponible

7️⃣ Configura el rango de la animación:

Start Frame: 0
End Frame: 250

▶️ Probando el efecto

Coloca el cursor sobre la vista 3D y:

Presiona P, o
Usa el botón PLAY en la barra de la vista 3D

Como puedes ver, el efecto ya funciona correctamente 🎉.

🎥 Ajustando el objeto Flashbang a la cámara

El objeto Flashbang debe estar colocado justo frente a la cámara, por razones bastante obvias 😄:
el efecto debe superponerse a todos los objetos del escenario, sin importar qué haya delante del jugador.

Además, es importante dejar una distancia adecuada entre la cámara y el objeto Flashbang.
Esto evita que, al acercarnos demasiado a otros objetos del escenario, estos:

Se encimen con el plano del flash ⚠️
Generen errores visuales o artefactos raros 👻

📐 Consideraciones importantes

Este proceso no tiene una receta exacta paso a paso y tampoco hay una única forma correcta de hacerlo.
Puedes ajustarlo como mejor te funcione, siempre y cuando se cumplan estas condiciones básicas:

✅ El objeto Flashbang debe quedar siempre frente a la cámara
✅ Debe tener un tamaño aproximado a la apertura de la cámara
✅ No debe interferir con otros objetos del escenario
✅ El efecto debe cubrir toda la pantalla cuando se active ⚡

📌 En resumen:
Mientras el objeto Flashbang:

Esté alineado con la cámara 🎥
Cubra completamente la vista del jugador
Y no genere problemas de intersección

…el efecto funcionará correctamente.

🧠 Detalles importantes a tomar en cuenta

🔧 ¿Por qué desactivamos “Material” en Constant Values?

La sección Constant Values sirve para indicarle al motor qué valores no cambiarán durante el juego, lo cual ayuda a optimizar rendimiento.

Si no hubiéramos desactivado la opción “Material”, le estaríamos diciendo al motor que:

Las propiedades del material son constantes y no cambiarán

Esto haría que:

❌ La animación del canal Alpha fuera ignorada
❌ El efecto no funcionara al ejecutar el motor

Así que tómalo en cuenta para futuros desarrollos 👀.

🏷️ Sobre los nombres de las Actions

Cuando se crea una Action (ya sea de objetos o materiales), el nombre se asigna de forma automática.
Sin embargo, puedes cambiarlo desde el Outliner:

Busca el objeto
Ve a sus propiedades
Haz doble click sobre el nombre de la acción
Asígnale uno más descriptivo si lo deseas ✏️

✏️Y no te preocupes por el cambio de nombre, ya que este se actualiza automáticamente en donde lo hayas usado.. por ejemplo en los bloques de lógica.

En el siguiente paso ya podremos:

Integrar este efecto con la granada
Y comenzar a construir el efecto completo de flashbang 💥🎮

Continuamos 🚀😄

💣 El objeto “Grenade”

El siguiente paso es hacer que la granada sea la encargada de activar el efecto flashbang, simulando el momento en el que una granada cegadora detona dentro del juego 💥💡.

Para esto utilizaremos el objeto Cube que ya se encuentra en la escena (el cubo de color rojo).
A este objeto le haremos algunos cambios básicos antes de entrar en la lógica.

🛠️ Preparando el objeto granada

1️⃣ Renombra el objeto Cube a grenade
2️⃣ Agrégale una propiedad tipo “timer” y nómbrala grenade

Con esto ya tenemos el objeto que representará a nuestra granada dentro del juego.

🧩 Lógica de activación de la granada

Ahora vamos al panel de bloques de lógica para configurar el comportamiento de la granada.

🔗 Sensores

Agrega un sensor de tipo “Property” y renombralo “contador” y presiona el boton “Invert”
En Evaluation Type, selecciona Interval
En Property, selecciona el nombre de la propiedad que hicimos anteriormente:
```
grenade
```
En los valores del rango establece:
- Min: 0
- Max: 3.5

📌 Este sensor se activará cuando la propiedad grenade NO se encuentre dentro de ese rango, por eso usamos el boton “invert”.

⚙️ Controlador

Conecta el sensor a un controlador AND, y conecta este controlador a los siguientes Actuadores.

📩 Actuadores

✉️ Actuador Message

Tipo: Message
En To, selecciona el objeto flashbang

Esto indica que el mensaje será enviado directamente a ese objeto
En Subject, escribe el mensaje que se enviará:
```
activar flashbang
```

❌ Actuador Edit Object

Agrega un actuador Edit Object
Selecciona el tipo End Object

📌 Con esto logramos que, una vez activada la granada:

Se envíe el mensaje para disparar el efecto
La granada desaparezca de la escena 💣💨

Como puedes ver, el setup de bloques de lógica es bastante sencillo, pero cumple perfectamente su función.

⚠️ ¿Por qué aún no se activa el efecto Flashbang?

Hasta este punto, todo funciona correctamente, excepto el efecto visual del flashbang.
Esto ocurre porque, aunque ya estamos enviando un mensaje al objeto flashbang, ese objeto aún no está preparado para recibirlo.

Así que ahora toca configurar el receptor del mensaje 👇

📥 Preparando el objeto Flashbang para recibir el mensaje

Selecciona el objeto flashbang.
Puedes hacerlo de dos formas:

Directamente desde la vista 3D
(recuerda que está emparentado a la cámara) 🎥
O desde el Outliner, lo cual suele ser más práctico

🧠 Ajustando los sensores del objeto Flashbang

El proceso es muy simple:

1️⃣ Desactiva el sensor Keyboard

Basta con apagar el checkbox verde 🟢❌

2️⃣ Agrega un nuevo sensor de tipo Message

3️⃣ En el campo Subject, escribe:

activar flashbang

📌 De esta forma, el efecto:

❌ Ya no se activa con una tecla
✅ Se activa únicamente cuando el objeto flashbang recibe el mensaje enviado por la granada

Aquí puedes ver el proceso completo del setup de bloques de lógica para esta parte del ejercicio.

▶️ Probando el setup

Ahora solo queda probar que todo funcione correctamente.
Ejecuta el juego y observa el Debug Info en Range para verificar que:

El mensaje se envía correctamente 📩
El objeto flashbang lo recibe
La animación del efecto se ejecuta ⚡

Si tuviste algun problema concluyendo este ejercicio de forma satisfactoria, aquí te dejo un enlace de descarga con el archivo de ejemplo ya terminado para que lo estudies y puedas recrearlo mas fácilmente.

Con esto ya tenemos:

Una granada que detona 💣
Un mensaje que dispara el efecto visual 💡
Y un sistema desacoplado y limpio, muy al estilo Range 🧩🎮

🚀 Mejoras al efecto Flashbang

En este punto ya tenemos el efecto funcionando, así que ahora podemos pulir tiempos, distancias e incluso integrarlo mejor al gameplay 🚀.
Además, vale la pena decirlo: este sigue siendo un efecto básico, y como todo en desarrollo de videojuegos, siempre hay margen para mejorarlo 😄.

🧠 Agregando lógica más realista al efecto

Una de las primeras mejoras que podemos implementar es validar ciertos aspectos del comportamiento de la granada cegadora, para que el efecto se sienta más natural y coherente dentro del juego.

Uno de los puntos más importantes es el siguiente 👇

💡 Línea de vista y obstrucciones

Si el jugador tiene la granada de frente, o está dentro de su línea de visión, el destello debe cegarlo momentáneamente ⚡
Pero si la granada está detrás de una pared, un objeto sólido o cualquier elemento que bloquee la vista 👁️🧱
👉 entonces NO debería activarse el efecto de cegado

Esto no solo mejora el realismo, sino que también:

Hace el gameplay más justo 🎯
Evita efectos visuales “injustificados”
Le da mayor credibilidad al comportamiento de la granada

🎥 Permitiendo que la cámara gire (línea de vista)

Antes de poder validar si el jugador está viendo o no la granada, necesitamos algo fundamental:
que la cámara pueda girar libremente, tanto de izquierda a derecha como de arriba hacia abajo 👀🎮.

Esto nos permitirá cambiar la línea de vista del jugador y, a partir de ahí, realizar las validaciones que mencionamos anteriormente.

🧩 Configurando el giro de la cámara

Este paso es muy sencillo y no requiere lógica compleja.
La idea es detectar el movimiento del mouse y usarlo para ajustar la rotación de la cámara, simulando el comportamiento típico de una cámara en primera persona.

🔗 Bloques de lógica necesarios

1️⃣ Agrega un sensor de tipo Mouse

Este sensor detectará el movimiento del cursor

2️⃣ Conecta el sensor a un controlador AND

3️⃣ Agrega un actuador de tipo Mouse

Este actuador interpretará el movimiento del mouse
Ajustará la rotación de la cámara:
- Horizontal (izquierda / derecha) ↔️
- Vertical (arriba / abajo) ↕️

📌 El resultado es que la cámara:

Gira suavemente según el movimiento del mouse 🖱️
Cambia constantemente la línea de vista del jugador
Queda lista para evaluar si el flashbang está o no dentro del campo visual

Con esto ya tenemos una cámara funcional que nos permitirá seguir avanzando hacia validaciones más interesantes, como determinar si el jugador realmente vio la explosión de la granada 💥👁️.

En el siguiente paso comenzaremos a usar esta información para decidir cuándo aplicar (o no) el efecto flashbang 🚀🎮

📡 Detectando la granada con un sensor Radar

Ahora que ya podemos girar libremente la vista de la cámara en cualquier dirección, es momento de dar el siguiente paso:
detectar si la granada está frente al jugador 👀💣.

Para lograr esto utilizaremos un sensor de tipo Radar, el cual nos permite detectar objetos basándose en una propiedad específica que dichos objetos contengan.
Esto lo hace perfecto para validar si la granada está o no dentro de la línea de visión de la cámara.

🧩 Configurando el sensor Radar

A continuación vamos a armar los bloques de lógica necesarios para que la cámara pueda detectar la granada correctamente.

🔹 Paso 1: Sensor Radar (detección positiva)

1️⃣ Añade un sensor de tipo Radar a la cámara
2️⃣ En el campo Property, escribe la propiedad que vamos a buscar:

granada

(Esta propiedad se encuentra en el objeto grenade)

3️⃣ Configura los parámetros del Radar:

Axis: -Z
Angle: 50°
Distance: 20 unidades

📌 Con esto estamos creando un “cono” de detección frente a la cámara.

🔹 Paso 2: Controlador

4️⃣ Añade un controlador AND y conecta el sensor Radar

🔹 Paso 3: Propiedad de estado

5️⃣ Agrega a la cámara una propiedad de tipo Boolean llamada:

grenade_vis

Esta propiedad nos servirá para saber si la granada está o no siendo vista por la cámara.

🔹 Paso 4: Actuador Property (granada visible)

6️⃣ Añade un actuador de tipo Property

Property: grenade_vis
Mode: Assign
Value: TRUE

📌 Esto indica que si el sensor Radar detecta la granada, la propiedad grenade_vis pasará a ser TRUE.

🔹 Paso 5: Sensor Radar invertido (granada NO visible)

7️⃣ Añade un segundo sensor Radar

Usa exactamente los mismos valores que el anterior
Activa la opción Invert

8️⃣ Conecta este sensor a otro actuador Property con los siguientes valores:

Property: grenade_vis
Mode: Assign
Value: FALSE

📌 De esta forma, cuando el Radar NO detecta la granada, la propiedad se actualiza automáticamente a FALSE.

🔹 Paso 6: Sensor Property de validación

9️⃣ Añade un sensor de tipo Property

Property: grenade_vis
Value: TRUE

Este sensor nos permitirá, más adelante, disparar el efecto flashbang únicamente cuando:

La granada esté dentro del campo de visión
Y la cámara realmente la esté “viendo” 👁️💥

El setup completo deberá quedarte así, y verifica lo que está enmarcado, son opciones que deben estar activos para que funcione correctamente:

✅ Resultado

Con este setup logramos que la cámara:

Detecte si la granada está frente al jugador 📡
Mantenga un estado claro de visibilidad mediante la propiedad grenade_vis
Nos prepare el terreno para aplicar el efecto flashbang solo cuando realmente tenga sentido visual 🎮✨

En el siguiente paso usaremos esta información para decidir si el efecto se activa o no, cerrando el ciclo completo del comportamiento de la granada cegadora 🚀

🧠 Combinando decisiones: ¿se activa o no el Flashbang?

En este punto ya contamos con una pieza clave del sistema:
la variable grenade_vis, que nos indica si la granada está o no dentro de la línea de vista de la cámara 👁️💣.

Ahora simplemente vamos a utilizar el resultado positivo de esta variable, es decir cuando:

grenade_vis = TRUE

🔍 Aclarando un detalle importante

Tal vez notaste que, en el paso anterior, queda un sensor aparentemente desconectado.
Esto no es un error ❌.

Ese sensor será conectado al objeto granada, combinándose con el timer que determina el momento exacto en el que la granada se activa 💥.

De esta forma, la decisión de ejecutar el efecto flashbang no depende de una sola condición, sino de varias trabajando juntas.

🎯 Lógica de decisión final

A partir de ahora, el efecto flashbang solo se ejecutará si se cumplen ambas condiciones:

✅ La granada ya está en el momento de activarse
✅ La propiedad grenade_vis es TRUE, es decir:

La granada está frente a la cámara
Está dentro del campo de visión

Si alguna de estas condiciones no se cumple, entonces:

❌ No habrá destello
❌ El jugador no será cegado
🎮 El comportamiento se sentirá mucho más natural

🧩 Procedimiento paso a paso

1️⃣ Selecciona la cámara
2️⃣ Mantén presionada la tecla Shift y ahora selecciona el cubo rojo (grenade)
(ambos objetos deben quedar seleccionados)

3️⃣ Minimiza todos los sensores, controladores y actuadores

Esto facilita visualizar y conectar los bloques sin confusión 👀

4️⃣ Enlaza el sensor Property de la cámara:

Sensor: grenade TRUE
con el controlador del objeto grenade, donde:
El sensor de la granada se llama contador

📌 De esta forma, el controlador del objeto grenade recibe información directamente desde la cámara.

🔗 ¿Qué logramos con esta combinación?

Esta combinación de sensores hace que la toma de decisiones sea más robusta:

El efecto solo se activa cuando:
- La propiedad de la granada sale del rango 0.0 – 3.0
- Y al mismo tiempo grenade_vis = TRUE
Si la cámara:
- Mira hacia otro lado
- Tiene una pared u objeto bloqueando la vista
  👉 entonces no habrá flash, aunque la granada explote

🧠 Vista general del proceso

A continuación te muestro el flujo completo del sistema, para que quede más claro cómo se conectan todas las decisiones entre sí:

📡 Sobre el sensor Radar

El sensor Radar tiene ciertos requisitos para poder funcionar correctamente, ya que no es posible que detecte cualquier objeto ni cualquiera de sus propiedades “así nada más”.
Para que el Radar funcione, es necesario especificar que el objeto que será detectado sea de tipo Actor.

🤔 ¿Cómo determinamos que un objeto sea de tipo Actor?

Los objetos físicos dentro del motor de juegos cuentan con muchas propiedades, y cada una de ellas cumple una función distinta. En este caso específico, los objetos de tipo Actor son aquellos que pueden ser detectados por un sensor Radar o por un sensor Near.

Por lo tanto, debe quedar muy claro lo siguiente:

👉 Si estamos usando sensores Radar o Near, y los objetos que queremos detectar no son de tipo Actor, la detección no funcionará.

Lo más confuso es que el motor de juegos no mostrará ningún error. Todo parecerá estar correctamente configurado, pero el sensor no detectará nada, lo cual puede volverte loco momentáneamente mientras intentas descubrir por qué no funciona 😵‍💫.

✅ Regla clave

📌 Si usas sensores Radar o Near, los objetos a buscar deben ser de tipo Actor.

⚙️ ¿Dónde se especifica que un objeto sea de tipo Actor?

Para indicarle al motor de juegos que un objeto es de tipo Actor, sigue estos pasos:

Selecciona el objeto en la escena.
Ve al panel de físicas.
Justo debajo de la sección “Physics Type”, encontrarás el checkbox “Actor”.
Actívalo ✅ y listo.

Con esto, el objeto ya podrá ser detectado correctamente por los sensores Radar y Near en Range Game Engine 🎮✨

Con esto ya tenemos un efecto flashbang que:

Responde a la línea de visión real del jugador 👁️
Tiene decisiones lógicas combinadas
Se comporta de forma mucho más coherente dentro del gameplay 🎮✨

🧩 Consideraciones finales

A este ejercicio todavía le faltan algunas validaciones para que pueda considerarse completamente funcional dentro de un pequeño videojuego 🎮.
Sin embargo, cumple perfectamente su objetivo como ejercicio introductorio, ya que te da las bases necesarias para:

Desarrollar tu propia forma de implementar efectos
Entender cómo combinar lógica, materiales y sensores
Continuar experimentando y mejorando el sistema por tu cuenta 🚀

👁️ Validación de línea de vista (muy importante)

Una de las validaciones más importantes que puedes implementar es asegurarte de que si la granada no está dentro de la línea de vista del jugador, esta sí se active, pero sin disparar el efecto visual de encandilamiento, y posteriormente desaparezca.

Esto es clave para que el comportamiento sea correcto y coherente con el gameplay esperado.

Si no haces esta validación, el sistema no funcionará como debería.
Por ejemplo, en el estado actual, la granada se activa después de 3 segundos, incluso si no estaba en la línea de vista. Sin embargo, el problema aparece después:
si una vez cumplidos esos 3 segundos el jugador voltea a ver la granada, el efecto de flash se activa aunque ya haya pasado el tiempo de explosión 😵‍💫.

Eso rompe completamente la lógica del efecto.

🧠 ¿Cómo validamos correctamente esta condición?

La solución es bastante sencilla y se basa en dos condiciones clave:

El timer del objeto grenade ya no está dentro del rango de 0.0 a 3.0 segundos.
La variable grenade_vis es FALSE, es decir, la granada no estaba en la línea de vista.

Si ambas condiciones se cumplen, entonces:

👉 La granada debe desaparecer inmediatamente.

Esto significa que:

La granada sí se activó (explotó),
Pero no encandiló al jugador, porque no estaba siendo observada directamente en el momento de la explosión.

Con esta validación, el efecto se vuelve mucho más sólido, lógico y realista dentro del gameplay 🎮✨

📦 Archivo de ejemplo avanzado

Si quieres ir un paso más allá, te dejo un archivo de ejemplo de flashbang más completo, el cual:

Incluye más validaciones de comportamiento 🧠
Utiliza un screenshot real para mejorar el efecto de encandilamiento 📸
Presenta una implementación más cercana a un uso real dentro del gameplay

👉 Puedes descargarlo desde este enlace , ábrelo en Range y presiona WSAD para moverte y Space bar para lanzar la granada

Espero que este material te sea de utilidad y te sirva como base para seguir explorando y creando tus propios efectos dentro de Range Game Engine 😄🎮.

¡Nos leemos en el próximo tutorial! 🚀