Using raycast to make flashbang

I tried to make a grenade that when it goes off it makes a big light go off, but that didn’t work like i wanted, is there a way to us raycast to detect if your in range of the grenade, and if so enable an entity on your screen? For example a big white screen that would fade out

You could apply a collisioin and rigidbody component to your grenade and do something like this:

var GrenadeTrigger = pc.createScript('grenadeTrigger');

GrenadeTrigger.prototype.initialize = function() 
    this.entity.collision.enabled = false;
    this.entity.collision.on('collisionstart', this.onTriggerEnter, this);
    }.bind(this), 2000);

GrenadeTrigger.prototype.update = function(dt) 


GrenadeTrigger.prototype.detonate = function()
    this.entity.collision.enabled = true;

GrenadeTrigger.prototype.onTriggerEnter = function(hitResult) 
        // TODO:
        // apply damage
        // trigger flashbang

And for the “big light” you could place an overlay image element inside a 2D screen and reduce its opacity over time after the player was hit.

Also maybe trigger a particle effect (or multiple effects) for the explosion.

1 Like

How would i make the 2d screen? Because it is an element attached to the player, not the grenade, so is there. Way to find the child entity of another (e.g player)

(Note non of the code here is tested).

If you don’t want to use physics for it, its possible to calculate if a point is within a 2D circle with Pythagoras:

def WithinCircle(pos, center, radius){
   return Math.pow((pos.x-center.x),2) + Math.pow((pos.y - center.y),2) < Math.pow(radius,2);

You can have a reference to a UI element in your player entity with

YOURSCRIPT.attributes.add('flashScreen', {type: 'entity',});

And then just enable it if you are within the cirkle.

if(withinCircle(this.entity.getPosition(), flashBangPos, flashBangRadius)){
   this.flashScreen.enabled = true;

   //if you are using Tweens then you can do something like this
   this.flashScreen.element.opacity = 1.0;
   this.tween = this.flashScreen.element.tween(this.flashScreen.element.opacity)
      .to(0.0, timeToFade, pc.Linear)
      .on('complete', function() {
         this.flashScreen.enabled = false;

You can read more about tweens here:


Check out the 2D screen here:

I try to tween all the time but it says its not a tween function defined somereason

Did you add tween.js to your project?
You can find it in this GitHub repo:

1 Like

Ohhhhhhhhhhh, ok, i thought it was just a function