Playcanvas Lasergun effect

Hi there!

Iam wondering if Playcanvas also supports some kind of lasergun effect in general? I was looking through some projects and could not find something that fits our needs. Iam wondering if its possable in general to achieve something like this clip (the beam is created in unity3d):

Of course PlayCanvas has no shader Graph but would something like this still be achievable? Does somebody has some ideas / hints?

Thank you very much!

Personally I would just have the “beam” be a texture and scroll it

Hmmm yea - i also thought about this kind of visualization - some kind of sprite sheet animation would also be possible. The thing is, that this beam would have a fixed length in terms of distance - (the distance of the obstacles will variate) so im not sure if this is the best approach for this.

multiply the tile of the material by the distance of the object every frame

Good approach - i think i will try to setup a prototype for this

I was wondering if someone else had the same intention to achieve some cool beam effect in PlayCanvas - could not find any resources about this

Hello :wave:

I heard little about Effekseer which is baseically used to create different types of effect (used in THE KING OF FIGHTERS XV game as well and some others too)

PlayCanvas with EffekseerForWebGL

https://github.com/effekseer/playcanvas-effekseer

Sample project:

https://playcanvas.com/project/649529/overview/effekseersimplesample

Or Run Output directly: (Click space bar to play the effect again)

https://playcanv.as/p/4ecf29b8/

Official Site:

https://effekseer.github.io/en/index.html

Please Note: I never tried it personally… So Unsure about its current status… :mask:

Hi Ketan!

Wow - thanks for this input - i will take a look into it - looks promising!

Best regards!

I actually just discovered an effect that you might be interested in.

Copy this script:

var Thebeam = pc.createScript(‘thebeam’);
Thebeam.prototype.update = function(dt) {
this.entity.setLocalEulerAngles((Math.random()*10)-5, (Math.random()*10)-5, (Math.random()*10)-5,);
};

The 10 is the maximum rotation and can be whatever value you want. Just make sure the 5 is half of the maximum.

Then in the editor create a new entity, give it the script, then add a long box as a child and shove it all the way to one side until the end of the box is on the new entity.

Then copy that object and paste it back into the original entity as a child (of the new entity, not the box), and shove it all the way to the end of the first box.

Then do that again with a third entity:

Continue to do this for as long as you want. the boxes can be of any thickness and length really.

The result should look something like this:

This doesnt look that impressive because its a 2 dimensional view from an orthagonal camera. When the beam is placed into a 3d environment it looks like this:

A random spray of electricity that randomizes every frame. Not sure if thats exactly what you were going for but I thought it would help.