Search the Community

Showing results for tags 'effects'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 16 results

  1. 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 Get the library on Github To create your own effects use the RevoltFX online editor Get the editor on Github
  2. 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?
  3. 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 It is the best particle editor for PIXI. Isn't it?
  4. 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). So, what do you think? Is it good enough to be the best one?
  5. Greetings!I'd like to present you the new platform where you can acquire licenses for music and sound effects: 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: also post some news, interesting stuff about sound design etc.
  6. 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 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: }); 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
  7. 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 =; 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 =, 0); me.mask.alpha = 0; me.mask.beginFill(0xFFFFFF); me.mask.drawEllipse(,, 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.bmd) me.mirror.anchor.setTo(0.5, 0.5); me.frame = me.add.image(,, 'frame') me.frame.anchor.setTo(0.5, 0.5); me.mirror.mask = me.mask;, 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); } }
  8. Hi, again ! Who know - where disappeared constructor? Or, may be right way for use this... Theoretically it must be...
  9. Hi I'm fx artist. Draw effects for game and other stuff. If you are interested contact me here: Skype: buka215
  10. 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.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(,;// 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 ;-)
  11. 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.
  12. 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
  13. 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
  14. Game Mechanic Explorer I've just launched a brand new collection of concrete examples for various game mechanics, algorithms, and effects. The examples include platformer movement, lighting, ballistics, gravity, and more. They are all implemented in JavaScript using the Phaser game engine, but the concepts and methods are general and can be adapted to any engine. Each section contains several different examples that progress in sequence from a very basic implementation to a more advanced implementation. Every example is interactive and responds to keyboard or mouse input (or touch). My goal was to provide a helpful resource for other game developers, particularly those who are just getting started. Each example focuses on one concept and includes the source code for the implementation. They are written for clarity so that it is easier to understand the underlying concepts and apply them to your own work in your own engine. The example source code is MIT licensed and the included assets are Creative Commons licensed. This is a work in progress. Contact me if you have questions, corrections, or suggestions. Please spread the word and thank you for visiting!
  15. 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?
  16. Apply shader effects to your canvas games in real time Lovely demo here: