Search the Community

Hi everybody, so i'm trying to create an online game using Babylon.js but have run into a problem thats got me a little stumped so hoping someone here would be willing to help me out. Please bear with me on this one, i'm a complete newbie with babylon as i've only every worked with THREE.js. Right now my game consists of a scene compromising of multiple meshes with multiple users represented as avatars (created from basic circle geometry for the moment) loaded into an environment. What I want to do is highlight the outline of these avatars ONLY when they are occluded by any other object, meaning that when they are not occluded they look normal with no highlight but when behind an object their highlighted silhouette can be seen by others (including yourself as you can see your own avatar). This is very akin to effects used in many other video games (see example below). ) Thus far, based on some googling and forum browsing (https://stackoverflow.com/questions/59807160/babylonjs-outline-through-walls & https://forum.babylonjs.com/t/highlight-through-objects/8002/4) I've figured out how to highlight the outline of objects using Babylon.HighlighLayer and I know that i can render objects above others via RenderingGroups but I can't seem to figure out how to use them in conjunction to create the effect I want. The best i've managed to do is get the highlighted avatar render above everything but I need just the silhouette not the entire mesh. I'm also constrained by the fact that my scene has many meshes in it that are loaded dynamically and i'm also trying to keep things as optimal as possible. Can't afford to use very computationally expensive procedures. Anybody know of the best way to approach this? Would greatly appreciate any advice or assistance you can provide.Thanks!

I'm all new to WebGL and Pixi.js - I started digging into this, because of this exact effect I'm trying to achieve: Demo As of now I got a scroll with multiple text object created using PIXI.Text() - this works fine, it's scrollable etc. But unfortunately I'm stuck implementing that kind of old tube tv screen bend effect on the text - don't even know where to start. Can I achieve this using pixi.js? I'm thankful for every hint! Do I need a different approach? That's how I init each text of mine: constructor($el, stage) { this.stage = stage; this.title = $el; this.text = new PIXI.Text(this.title.innerHTML, { fontFamily: "Unno", fontSize: 120, fill: "transparent", stroke: "white", strokeThickness: 1 }); this.text.resolution = 2; this.getPosition(); this.stage.addChild(this.text); this.addListeners(); const font = new FontFaceObserver("Unno"); font.load().then(() => { this.text.updateText(); }) } getPosition = () => { const {width, height, top, left} = this.title.getBoundingClientRect(); this.text.position.set(left, top); }; ...

HI everybody! Is it possible to add a rim effect on mesh like in this image : Thanks, Pichou

How to make these fantastic effect in Babylonjs (show in this picture) 1. Sword air blade (red color) 2. Slow sword and leafs motion 3. Leafs fall Thanks!

I'm using a custom material which is pretty similar to the ground material used in WorldMonger demo. The problem is that I don't get a shadows on it. Well it's not a big surprise, because I'm overriding the _effect property of the base material. The question is how can I get both my effect with a base material effect without copy-pasting the code from base material. I mean how can I get shadows while using additional effects?

Hello everybody! I am making caustics effect underwater. I see playcanvas.js engine has an example. Here: http://playcanv.as/p/Hdzeoc5P Doc: https://developer.playcanvas.com/en/api/pc.LightComponent.html#cookie I tested with editor's playcanvas.js, result just like what i need, below image. They use Spotlight with a texture. I tried search google, forum, document but does not have this attribute. How i can make this effect? Can Babylon.js's team support this attribute for Spotlight? Thanks so much!

hi, i'm trying to implement this effect : i have a circle who's animating to incite the player to click on the screen. next the player click and release a pink player who go to an enemy ( the pink rectangle). I would like to let the player the ability to click several times to release multiple players and each time the player is inactive the animation of the circle to prompt him to click. The problem is that this animation launches several times at the same time as soon as the players are dead. How to code this to avoid this behavior? thanks for your help, because me i don't see the solution https://jsfiddle.net/espace3d/zdnk9cem/ var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload:preload, create: create, update : update }); function preload() { game.load.image('circle', 'https://s3.postimg.org/bb4aql1lf/touch.png'); game.load.image('rect','https://s26.postimg.org/ci44mlog9/dalle.png') game.load.image('player','https://s26.postimg.org/ikbrd3cw9/bullet_color.png') } var player=[] var enemy var circle var tw_name var tap_ready = true var flag=true var delay_circle_timer = 1500 var counter = -1 //effect on the circle : tween start_tw = (obj,tw_action,tw_name,f) => { tap_ready = true f=true tw_action(obj,tw_name) } // declaration of tw_action tw_action= (obj,tw_name) =>{ obj.alpha=.5 obj.scale.setTo(1,1) tw_name= game.add.tween(obj.scale).to({x:1.5,y:1.5},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1) tw_name = game.add.tween(obj).to({alpha:0},700,Phaser.Easing.Linear.None,true,delay_circle_timer,-1) tw_name.onStart.add(()=> {obj.visible=true}) } //stop tween stop_tw = (tw_name,f,obj) => { if(f){ obj.visible=false game.tweens.remove(tw_name) f=false } } //launch player and start counter launch_player = (obj)=> { counter++ obj[counter].body.velocity.y=-100 } hide_player_and_start_tw = (obj) => { obj.body.enable=false obj.visible=false start_tw(circle,tw_action,tw_name,flag) } tap = () => { game.input.onTap.add(onTap); function onTap(pointer, doubleTap) { if (!doubleTap && tap_ready){ tap_ready=false //stop the tween on the circle stop_tw(tw_name,flag,circle) //launch the player launch_player(player) //delay for reset tap_ready game.time.events.add(500,() => {tap_ready = true}) } } } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); circle=game.add.sprite(400,300,'circle') circle.anchor.setTo(.5) circle.inputEnabled = true enemy = game.add.sprite(400,100,'rect') enemy.anchor.setTo(.5) game.physics.arcade.enable(enemy) enemy.body.enable=true enemy.body.immovable=true for (var i = 0; i < 10; i++){ player[i]=game.add.sprite(400,600,'player') player[i].anchor.setTo(.5) game.physics.arcade.enable(player[i]) player[i].body.enable=true } //initiate first tween start_tw(circle,tw_action,tw_name,flag) } function update() { tap(circle) for (var i = 0; i < 10; i++){ game.physics.arcade.collide(player[i],enemy,hide_player_and_start_tw) } }

i make sample for eash and i interested too share one of them 15 day for release eash first version http://www.babylonjs-playground.com/#1HECPU#4 http://www.babylonjs-playground.com/#1HECPU#5

hi, i would have this effect like my capture screen. the square when it move have two ghost squares with different opacity. But when it is stopped, the ghost squares are just beneath the square. I have try this with a particle emitter + update but after trying a lot of parameters, I can not seem to have the desired effect. have you a soluce for me ? this.ghost_player = game.add.emitter(this.x, this.y-50, 200) this.ghost_player.makeParticles("rect") this.ghost_player.minParticleSpeed.setTo(-0,-0) this.ghost_player.maxParticleSpeed.setTo(0,0) this.ghost_player.setAlpha(.1, .2) this.ghost_player.minParticleScale = 1 this.ghost_player.maxParticleScale = 1 this.ghost_player.minRotation = 0 this.ghost_player.maxRotation = 0 this.ghost_player.on=true this.ghost_player.start(true,8000, 200) first.prototype.update = function() { this.ghost_player.y=this.y this.ghost_player.x=this.x }

hello, I'm Sebastian and I'm an audio designer/producer, I have produced 2 sound effects packs that you can use for free. All sounds are licensed by CC BY-SA license. To check the 2 packs on my website: http://www.audiorhapsody.com/2016/10/07/sound-effects-pack-1/ http://www.audiorhapsody.com/2016/10/08/sound-effect-pack-2-epic-download/ Or on my Youtube channel: Best wishes with your games and projects.

Ahoy! For those of us who played games quite a bit (most of us, no doubt), we've seen plenty of (chain) lightning effects (example screenshot in the spoilers). Now, even though I've seen such effects plenty of times, I wouldn't know where to start to make such a thing. My question is: how would something like this be accomplished in PixiJS? I'd prefer a way without having to rely on WebGL, if at all possible, though, but WebGL-specific answers are welcome too, of course. Example screenshot (P.s. sorry if this image is hogging someone's bandwidth... I could not find a spoiler tag or something similar) -MikauSchekzen

Hi! I've started a tutorial about how to make HTML5 games great... Part1: http://vempiregame.com/allgemein/this-is-just-html5js-are-you-kidding-me/ tell me what you think... wolfgang...

Has anyone achieved water in their game with phaser? How could it be done? Is it possible for waves to form/it able to drain out and stuff, and what about collisions? Can you detect collisions with water/liquid in Phaser? I know it's like 3-4 questions in one! I searched a couple times for this in the forum and didn't see anything on this. Hopefully some good responses, I'd love to incorporate water into a game and do some things like Ecco the Dolphin or Sonic games did.

Hello have anyone did any lightning effect in bbabylonjs? such as lightning beam, chain lightning etc, can someone give me a push in the direction?

Hello, I'd like to add water drops on the camera lens as an effect. How can it be done? Moving drops would be nice, but static is more than enough This screenshot should explain my goal RiptideGP: http://prnt.sc/byopvq Thanks for every answer, Simon

hi how can i calculate like following image with pixi.js? rotating fire is calculating by only one image. it can be by pixi.js too. but i don't know correct calculating theory.. i wanna draw follawing image to effect like magic thx...

Hello all, Just release a script for creating a typewriter effect, using Phaser timers, and also able to mix sound in there as the typewriter is animating. Check out the source here: https://github.com/netgfx/Phaser-typewriter Or an example here: http://www.netgfx.com/trunk/games/tools/phaser-typewriter Let me know if you come across any issues or if you want something added.

Hi guys, I'm wondering if it is possible to have a "slide effect" between states. I know we can use ease in/out effects but I couldn't find a slide (tween?) effect. Any help is appreciated. Thanks

Read here http://toybrainstudio.com/?p=435

Haven't been able to find much online about strokes/glows to outline sprites. The method's I've always used involve multiple sprites/textures. I kind of dislike this approach though because it means a lot more work if I were to try and do this to say 100 different textures. So are there any good techniques any of you can share?

Hello! I need to create a glow effect on a sprite. It's possible to create it with phaser? Thanks!

Hello, I recently saw a very nice particle animation and I was wondering if someone can give me a hint of how can something like this be done with phaser particles. I have seen the examples but they don't show this kind of dynamic. http://codepen.io/netgfx/full/mlIps/ Thanks!

Hi!I have found this in forum:http://www.html5gamedevs.com/topic/3400-tinting-sprite-color/?hl=tinting I use version 1.1.5. There are any example of how to create an effect of impact sprite?

Hey all, Been messing around with some water effects. I really liked the 2.5D water effects in The Cave and wanted to see if I could get something similar in 2d, without all the baggage of Box2D. Just click or touch the screen to get the effect: http://tysonross.com/temp/waves/index.html Works pretty good on iOS and Android. Thinking of making it a snippet for Cocos2d-html5 or something I followed this tutorial. http://gamedev.tutsplus.com/tutorials/implementation/make-a-splash-with-2d-water-effects/ -Tys