Using raycast to make flashbang

Help & Support
1

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

2

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);
    
    setTimeout(function(){
        this.detonate();
    }.bind(this), 2000);
};

GrenadeTrigger.prototype.update = function(dt) 
{

};

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

GrenadeTrigger.prototype.onTriggerEnter = function(hitResult) 
{
    if(hitResult.other.tags.has('player'))
    {
        // 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
3

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)

4

(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:

https://developer.playcanvas.com/en/tutorials/tweening/

2 Likes
5

Check out the 2D screen here:
https://developer.playcanvas.com/en/user-manual/packs/components/screen/

6

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

7

Did you add tween.js to your project?
You can find it in this GitHub repo: https://github.com/playcanvas/playcanvas-tween

1 Like
8

Ohhhhhhhhhhh, ok, i thought it was just a function