Search the Community

The RevoltFX effects framework now runs with the latest PixiJS version (8.1.0). https://github.com/bma73/revolt-fx We've also updated the examples https://github.com/bma73/revolt-fx-examples See a live demo: https://samples.revoltfx.electronauts.net/ To create your own effects use the RevoltFX online editor https://editor.revoltfx.electronauts.net/ https://github.com/bma73/revolt-fx-editor Stay tuned - there's more to come :-)

We have just released RevoltFX - a framework to create stunning particle effects. You can create particle emitters and time based effect sequences and nest them all together. Check out some samples https://samples.revoltfx.electronauts.net/ Get the library on Github https://github.com/bma73/revolt-fx To create your own effects use the RevoltFX online editor https://editor.revoltfx.electronauts.net/ Get the editor on Github https://github.com/bma73/revolt-fx-editor

The default bloom post process extracts all pixels brighter than a threshold, blurs that image, and overlays it onto the original render. The problem is that it simply adds the RGB values of the 2 images together, resulting in already bright areas becoming way too bright. I want to use BABYLON.Engine.ALPHA_MAXIMIZED as the blend mode for bloom. How do I do that? Do I need to write a whole new bloom shader from scratch?

Hi, guys. NeutrinoParticles plugin for PIXI is tested and released. You can download the Editor and check out video tutorials, samples and live demos at https://neutrinoparticles.com/ It is the best particle editor for PIXI. Isn't it?

NeutrinoParticles became much better for the last year. Because of workflow improvements and after Emitter Guide introduced, you can create a great effect in a few minutes from the scratch. The editor has full set of video tutorials for beginners and a lot of samples. And it is totally free for now. Canvas, WebGL and PIXI renderers are available (even C#/Unity one, but that is another story). https://neutrinoparticles.com/ So, what do you think? Is it good enough to be the best one?

Greetings!I'd like to present you the new platform where you can acquire licenses for music and sound effects: www.sounds4media.com Every file here is composed/produced/designed and owned by one person. It is a bypass for a corporative system: there are only few terms for using our products and it's definitely easier to make a specific deal with us To keep track with the new content on our site you can also follow us on Facebook. Search for Sounds4media - music and sound effects library or click link: https://www.facebook.com/SOUNDS4MEDIAcomWe also post some news, interesting stuff about sound design etc.

I have been trying to figure out a way to animate the focus distance of the depth of field post process but have come up empty handed. I have setup a click event that runs a set of animations changing the (arc) camera's alpha, beta, radius, position, and target. I would like to animate the dof_focus_distance to match that of the camera radius so that the selected object keeps focus. my click event: scene.onPointerDown = function(e, pickResult) { if (pickResult.hit ) { ArcAnimation(0, camera.upperBetaLimit, camera.lowerRadiusLimit, pickResult.pickedMesh.position, pickResult.pickedMesh, true); currentobj = pickResult.pickedMesh; } }; I set up the depth of field with the following: (this came for the docs at http://doc.babylonjs.com/tutorials/Using_depth-of-field_and_other_lens_effects) var params = { edge_blur: 1, chromatic_aberration: 0, distortion: 0, dof_focus_distance: 4000, dof_aperture: 200, grain_amount: 0 }; var lensEffect = new BABYLON.LensRenderingPipeline('lensEffects', params, scene, 1.0, camera); My animation function: var ArcAnimation = function (toAlpha, toBeta, toRadius, toPosition, obj, arc) { var keysAlpha = [], keysBeta = [], keysRadius = [], keysPosition = []; var easingFunction = new BABYLON.CubicEase(); easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); var animCamAlpha = new BABYLON.Animation("animCam", "alpha", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysAlpha.push({frame: 0, value: camera.alpha}); keysAlpha.push({frame: 300, value: toAlpha}); var animCamBeta = new BABYLON.Animation("animCam", "beta", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysBeta.push({frame: 0, value: camera.beta}); if (arc) { keysBeta.push({frame: 150, value: toBeta*0.2}); } keysBeta.push({frame: 300, value: toBeta}); var animCamRadius = new BABYLON.Animation("animCam", "radius", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysRadius.push({frame: 0, value: camera.radius }); keysRadius.push({frame: 300, value: toRadius }); var animCamPosition = new BABYLON.Animation("animCam", "target", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3 , BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT ); keysPosition.push({frame: 0, value: camera.target }); if (arc) { keysPosition.push({frame: 150, value: obj.position.add( new BABYLON.Vector3(0,obj.position.y + obj.position.y*0.5 ,0) )}); } keysPosition.push({frame: 300, value: obj.position }); animCamAlpha.setKeys(keysAlpha); animCamBeta.setKeys(keysBeta); animCamRadius.setKeys(keysRadius); animCamPosition.setKeys(keysPosition); animCamAlpha.setEasingFunction(easingFunction); animCamBeta.setEasingFunction(easingFunction); animCamRadius.setEasingFunction(easingFunction); animCamPosition.setEasingFunction(easingFunction); camera.animations.push(animCamAlpha); camera.animations.push(animCamBeta); camera.animations.push(animCamRadius); camera.animations.push(animCamPosition); scene.beginAnimation(camera, 0, 300, false, 2, function () { }); }; I attempted to animate the DOF the same but it seems that cannot be done, or I am doing it wrong. I tried like this, among other ways but this was my last attempt before wanting to rage flip my desk: var keysDofFocusDistance = [], keysDofApeture = []; var animDof = new BABYLON.Animation("animDof", 'setFocusDepth', 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT); keysDofFocusDistance.push({frame: 0, value: 4000}); keysDofFocusDistance.push({frame: 100, value: toRadius}); animDof.setKeys(keysDofFocusDistance); animDof.setEasingFunction(easingFunction); lensEffect.animations.push(animDof); scene.beginAnimation(lensEffect.setFocusDepth, 0, 100, false, 2, function () { console.log("animated DOF"); }); SO, is it possible to animate the depth of field focus (or any properties) at all? Why not allow it to use an object as a focal point? I'm new to babylon so maybe I am just missing something simple. I can modify the value using lensEffect.setFocusDistance(toRadius); but I would really like to get it animated some how. thanks, Charles EDIT: here is a playground http://www.babylonjs-playground.com/#1ENHC8#1

Demo I made a small example for the use BitmapData to smoke animation... preload: function () { var me = this; me.load.image('face', 'assets/face.png'); me.load.image('frame', 'assets/frame.png'); me.load.image('smoke', 'assets/smoke.png'); } create: function () { var me = this; me.sizeX = 198; me.sizeY = 249; me.particleCount = 30; me.seed = Date.now(); me.random = new Phaser.RandomDataGenerator([me.seed]); me.bmd = me.make.bitmapData(me.sizeX, me.sizeY); me.bmd.smoothed = false; me.face = me.make.image(0, 0, 'face'); me.mask = me.add.graphics(0, 0); me.mask.alpha = 0; me.mask.beginFill(0xFFFFFF); me.mask.drawEllipse(me.world.centerX, me.world.centerY, 120,140); me.particle = me.make.image(0, 0,'smoke'); me.particle.anchor.setTo(0.5,0.5); me.particles = []; for (j = 0; j < me.particleCount; j++){ me.particles [j] = { x: me.random.integerInRange(0,me.sizeX), y: me.random.integerInRange(0,me.sizeY), velocityX: me.random.realInRange(-2,2), velocityY: me.random.realInRange(-2,2) } } me.mirror = me.add.image(me.world.centerX, me.world.centerY, me.bmd) me.mirror.anchor.setTo(0.5, 0.5); me.frame = me.add.image(me.world.centerX, me.world.centerY, 'frame') me.frame.anchor.setTo(0.5, 0.5); me.mirror.mask = me.mask; me.time.events.loop(Phaser.Timer.SECOND/24, me.updateSmoke, me); }, updateSmoke: function() { var me = this; var rect = new Phaser.Rectangle(0,0,me.sizeX, me.sizeY); me.bmd.copyRect(me.face, rect, 0, 0, 0.5); for (j = 0; j < me.particleCount; j++){ me.particles[j].x += me.particles[j].velocityX; me.particles[j].y += me.particles[j].velocityY; if (me.particles[j].x >= me.sizeX) { me.particles[j].velocityX = -me.particles[j].velocityX; me.particles [j].x = me.sizeX; } else if (me.particles[j].x <= 0) { me.particles[j].velocityX = -me.particles[j].velocityX; me.particles[j].x = 0; } if (me.particles[j].y >= me.sizeY) { me.particles[j].velocityY = -me.particles[j].velocityY; me.particles[j].y = me.sizeY; } else if (me.particles[j].y <= 0) { me.particles[j].velocityY = -me.particles[j].velocityY; me.particles[j].y = 0; } me.bmd.draw(me.particle, me.particles[j].x, me.particles[j].y); } }

Hi, again ! Who know - where disappeared constructor? Or, may be right way for use this... Theoretically it must be... http://www.babylonjs-playground.com/#1SZUYN#3

Hi I'm fx artist. Draw effects for game and other stuff. If you are interested contact me here: Skype: buka215 http://buka215.deviantart.com/gallery/54354293/effects-2d-fx https://twitter.com/buka215 https://www.facebook.com/profile.php?id=100001281966919

Hello, I'd like to kindly ask for your help. This is the kind of effect I'd like to achieve (this was made by me in graphics program not with phaser). I manage to get this: with this code: var mainstate = { preload: function() { this.load.image('testW', 'testW.png'); this.load.image('testB', 'testB.png'); }, create: function() { this.stage.backgroundColor = '#B1FD00'; //this.tB = game.add.sprite(50, 50, 'testB'); //this.tW = game.add.sprite(0, 0, 'testB'); this.bmd = this.add.bitmapData(this.game.width, this.game.height); this.bmd.draw('testB', 0, 0, null, null, 'normal'); this.bmd.draw('testB', 50, 50, null, null, 'xor'); //this.bmd.replaceRGB(0, 0, 0, 255, 255, 255, 255, 255); this.bmd.addToWorld(); }, update: function() { } };var game = new Phaser.Game(400, 300, Phaser.AUTO, 'gameDiv');game.state.add('main', mainstate);game.state.start('main');What I would like is to change the color of that overlapping green area, but I unfortunately can't find a way. Or more precisely I wan't it green this way but I don't want other images to affect this area. Basically I have these layers: background sprite1 sprite2 spriteToOverlap1 spriteToOverlap2 And I want to get the overlapping (xor) effect between spriteToOverlap1 and spriteToOverlap2 with background behind, but I don't want in case that sprite1 or sprite2 get in the overlapping area (they are behind spriteToOverlap1/2 in layers) to see them in the overlap. I tried to change the color with replaceRGB() (commented in code) but that changed the whole bitmap not only just part of it. I hope I made myself clear :-). Thank you for any advice you can give me I'd highly appreciate it. EDIT: For now I went with this (in docs I found that other function on bitmap needs to update the buffer, so I tried it and it worked fine :-)): // create functionthis.bmd = this.add.bitmapData(this.game.width, this.game.height);// update functionthis.bmd.cls();this.bmd.draw('testB', 0, 0, null, null, 'normal'); // testB is a black rectanglethis.bmd.draw('testB', 50, 50, null, null, 'source-in');this.bmd.update(); // this line did the trick, found it in docs while checking getPixel32this.bmd.replaceRGB(0, 0, 0, 255, 255, 255, 255, 255);this.bmd.addToWorld();But doing this in the update looop is super expensive, is tehre a way to achieve this result with lower cost? Thanks ;-)

If I want to make little engine fires propelling a ship through space, would I be best using animated sprites for this or if there a way to use a Pixi created effect to displace jets streams or fire out the back of the engines? Would be cool if either method supports growing bigger when giving the ship more thrust. If it has to be sprites from image textures, can someone point me in the right direction for how to cycle these - I figure just swapping out the texture every 5 frames or so through 10 images would be inefficient. Thanks in advance.

Maybe I'm blind but is there anywhere a list of available easing effect of Phaser? such like: game.add.tween(this.pauseMenuBTNcancel).to({y:game.height - 200},0, Phaser.Easing.Bounce.Out, true);cheers

Hey, maybe I haven't catched the news but: are filters outdated in phaser 2.2? the examples do not seem to work and when I call: game.add.filter('lightBeam');I only get: undefined is not a functionThe filter was loaded before via game.load.scriptRegards

So I have a quick question about full screen power up effects. Currently, I have a full screen effect of splashing water when a player picks up a power up. However the sprite sheet for this power up has the potential to be massive depending on the device screen size. With just a couple frames in the splash animation, we're already talking about exceeding 4096 in the width which CocoonJS is not particularly happy about when attempting to put this on mobile. Also, when a player initially picks up the power up for the first time there is a hard lag that stops the game in its tracks for about a second or two before playing the animation. From then on, picking up the power up causes no similar blips at all. What's a good way of handling full screen power up effects or power up effects that either take the full game width/height?