Search the Community

Showing results for tags 'filters'.

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 42 results

  1. Hey Babylon citizens! How it can be possible to implement filters like shown here: Library mentioned in this topic is for changing pictures. What do you think is it possible to create some kind of filters in Babylon? Thank you.
  2. Hello everyone, The filter (PIXI JS) does not work correctly. It blures a whole iamge so that only the main color in it is shown code and image : var game = new Phaser.Game(1280, 720, Phaser.WEBGL, this, false, false), init = function(){}; init.prototype = { preload: function(){ game.load.script('grayX', 'filters/tiltshiftfilterx.js'); game.load.script('grayY', 'filters/tiltshiftfiltery.js'); game.load.script('gray', 'filters/tilshiftfilter.js'); game.load.image("test", "assets/test.png"); }, create: function(){ var testSprite = game.add.sprite(0,0,'test'); var tiltShift = new PIXI.TiltShiftFilter(); console.log(tiltShift); tiltShift.blurnumber = 3; tiltShift.gradientBlur = 1500; testSprite.filters = [tiltShift]; } } game.state.add('init', init); game.state.start('init'); Works great in PIXI.JS standalone, ORIGINAL POST IN PIXI.JS FORUM:
  3. Hi there! I have a problem with bitmap fonts. I want create custom bitmap font via "literra" and adjust several filters by Phaser. But I don't know what is propper way to use filters in phaser. I need something like that at result I could add filters instantly in literra, but filters apply for separate symbols only and looks terrible Two strokes and drop shadow. Is it possible to do that in Phaser? Maybe I shouldn't use bitmap fonts and phaser have other hack?
  4. Hey there, I've been trying to get a DisplacementFilter to work for my Phaser game. The idea is to create a shockwave effect using a donut-shaped displacement map image that grows over time. The issue I've been encountering is, I can't seem to get the PIXI.DisplacementFilter to statically (no growing/ no animation) render correctly for a given displacement map image My game is 320 x 240 pixels high - and my displacement map image is 64 x 64. So I'd expect for the shockwave to fill up a small portion of the screen in the middle - but instead, the filter keeps stretching to fill the entire screen. The following three images should demonstrate this (Credits for wood texture to help illustrate the shockwave better): How the game looks without any filters How the game looks like, but with the displacement map image aded as a sprite to game just for a scale comparison How the game looks like with the DIsplacementFilter applied to My questions are: How can I make the DisplacementFilter not stretch to fit the viewport, but to respect the dimensions of the displacement map image. How can I "move" the "DisplacementFilter" around (supposing I want the shockwave to begin at a specific location, rather than the center)var preload = function() {"displacement", "res/displacement.png");'displacement', 'lib/phaser/filters/pixi/DisplacementFilter.js');}var create = function() { this.displacementSprite =,0,"displacement"); this.displacementSprite.anchor.set(0.5, 0.5); this.displacementFilter = new PIXI.DisplacementFilter(this.displacementSprite.texture); this.stage.filters = [this.displacementFilter];}I've scoured all around and found this post on DisplacementFilters and Phaser, and also this post on ripple effects using DisplacementFilters and PIXI, and this PIXI3 Displacement Filter ripple effect which I also tried to replicate, but ended up with the same problem of the displacement image filling the entire screen. The PIXI3 example also doesn't work for me as moving the displacementSprite around doesn't work. Thank you so much for your help!
  5. Why are there no shadow?
  6. I can't get the DropShadowFilter to work with my images. Is this the correct way to do it? var shadow = new PIXI.filters.DropShadowFilter();shadow.color = 0x0000;shadow.distance = 5;shadow.alpha = 0.55;shadow.angle = 45;shadow.blur = 5;Spr = new PIXI.Sprite(PIXI.loader.resources.Sheet1.textures['button.png']);Spr.filters = [shadow];Only the sprite is shown -no filter attached though. Using Firefox 40.0.3, Win7, WebGLRenderer.
  7. Hey, I have another question which might be easily answered by somebody who is very familiar with the pixi sources. I'm in the progress of writing some custom classes to render a particle system. The particel rendering is all fine and working. I made some pretty good progress so far. I have a small customized PIXI.Container with a PIXI.ObjectRenderer and custom shader (it's like a sprite is rendered through the SpriteRenderer). As I said, this really works rock solid at the moment, I have learned a lot from the existing Particle/Sprite Renderer and I'm really impressed how many great examples of coding can be found in the PIXI v3 sources ) NOW: After getting so far, I want more: Post processing of my render result. I thought this would be easy, just plug in some filters and you're done. But there seems to be a problem with my rendering order. Filteres are not applied at all, filters are not behaving like normal (change over time) interfering with sprites on the parent container or I get filters running only when I combine two of them. I tried to create a very minimal example- but it's still a lot of code. See this? That rectangle is blurring over time? Or this: A gray filter is applied but its still red Try to apply both filters to the stage: Nothing happens. Try to apply both filters to the stage: Nothing happens. Let's make a sprite added to the stage visible,now both filteres are triggered My assumption: My custom renderer (RenderTester in the demos) is not called at the right position so it's getting mixed up during rendering. I couldn't find any relevant container.children checks so I don't think this is a cause. I currently override PIXI.Container#_renderWebGL, I had version where I overwrote PIXI.Container#renderWebGL, called by my own the filter Manager with push & pop but I could never get my expected result which is: 1. Render whatever there is to render in my container with custom ObjectRenderer. 2. Then take the result to apply some post processing (blurring, thresholds, alpha blending, ..)Is my filter approach correct? Or should I create my own RenderTarget workflow even that the FilterManager is basically doing exactly what I want ( managing some RenderTargets to process on ) I compared my Container/ObjectRenderer combination with the existing Sprite/SpriteRenderer and could't findanything different that would prevent my container from applying a correct filter post processing. Any advice? Did I missed something really obvious? Thanks! var RenderTester = augment(PIXI.Container, function(uber){ this.constructor = function(texture){; this._texture = texture; } //does this prevent the filteres from getting applied? this._renderWebGL = function(renderer){ renderer.setObjectRenderer( renderer.plugins.tempRenderer ); renderer.plugins.tempRenderer.render( this ); } });
  8. Is it possible to save a image that I've applied certains filters on? colorMatrix = new PIXI.ColorMatrixFilter(); colorMatrix.matrix = [0,0.0,0.5,-0.2, 0,0,1.0,-0.2, 0.0,0.0,0.5,-0.2, 0.0,0.0,0.0,1] image = game.make.bitmapData() image.load("testpicture") image.filters = [colorMatrix] game.cache.addBitmapData("testImageWithFilter", image); When I pick this up it doesn't have the filter applied abowe. Is this not possible?
  9. Hi everyone, I got several sprites that I draw on a renderTexture where I'd like apply filters. From what I tested it seems to be not possible on this object but I may be wrong. Is there a way or is it possible to apply filters to a renderTexture ? Thx, G.
  10. Are there any websites where I can find filters for Phaser? Because i'm looking for a old school CRT effect filter for my game.
  11. Hi, Just started to use filters, and I was wandering if there is a way to apply them to the area of a spite only (e.g. I have a png based spites and I would like to apply to the opaque region only). Would I need to create a matching shape mask? Any help or pointers welcome.
  12. I wanted to take a look at the filters examples, specifically 'fire' to see if I could use it in a project, but it's not showing up... (along with a number of other filters examples), I tried all my browsers (chrome, firefox, safari, mac & windows) I know I've seen this working in the past... Here's the console: "Failed to load Phaser.js from github, falling back to local copy" phaser-viewer.js:49 "Phaser v2.1.0 | Pixi.js v1.6.1 | WebGL | WebAudio |" jquery-2.0.3.min.js line 4 > eval:22715 SyntaxError: syntax error view_full.html TypeError: Phaser.Filter[filter] is not a constructor jquery-2.0.3.min.js line 4 > eval:30314 TypeError: filter is undefined jquery-2.0.3.min.js line 4 > eval:31 Thanks
  13. Hi I'm using the last stable version of Pixi (v 1.6.1), for some reason when i do: mySprite.filters = [new PIXI.GrayFilter()];The sprite 'myFilter' turns invisible. Why is that? Also, i try to apply the same filter to a Container, and all the child objects turn invisible too...
  14. Howdy HTML5 game makers! Really proud to show you guys our latest game All At Breakfast! It’s a time (mis!)management game – but certainly not your grandma’s time management game. We did it fully Goodboy style, so it’s action all the way as you keep a room full of increasingly frantic punters happy. You play as one of the three cheeky characters from the CBBC TV show All at Sea and get to run around serving customers in a sea front B&B. Add some crazy speed and a bunch of power up hats (Yes, hats… Of course!?) and you have a pretty great mix! And what game is complete without a Victorian mode and a disco helmet? We dug deep into our back-pocket of HTML5 tricks to really try to make the game run on every device but also feel native. So you can expect to see a healthy does of webGL, a sprinkle of CSS filters and even a little webaudio trick or two! Built using pixi.js it really is quite the treat on mobile and tablets! We would love to know what you think! Hope you enjoy! GO PLAY
  15. I noticed that PIXI's filters are not included in the Phaser build, but are included in the phaser.d.ts TypeScript declarations. Could the AbstractFilter be included in the Phaser build by default? Without it references to the PIXI filter types throw a cryptic error message from the TS compiler at runtime. Thanks Joe
  16. Howdy all! Thought this would be a good place to let you all know that we have finally got round to implementing realtime filters in pixi.js for the webGL renderer More info can be found on our blog: Also you can check out the fish pool demo to see filters in action: Best off all? They are hot to trot, easy to add and you can start using them right now Enjoy! Mat
  17. Hello there, everyone. I am a hobbyist game developer and earlier today I stumbled upon Pixi.js. It looks astonishing and the performance seems amazing. And as I am wanting to create a (simple) bullet-hell shooter, this is very important. Anyway, to my question: In the 'storm brewing' update, it was said that one of the new features was Filter support for Pixi.js . I would love to use some kind of 'glow' effect for most of my enemies, bullets and power-ups. However, I am having trouble finding anything about filters in the Pixi documentation. I also tried browsing the source to no avail. So: -Is there filter support right now? IF so, how do we use it? -How hard is it to accomplish aforementioned 'glow' effect? I have seen (This amazing example ) of one possible way to accomplish something like this in WebGL. When creating Filters, do we have to write this in the shader language?(To which I am completely new, unfortunately...) Or is there another, much easier way to accomplish this effect? I am confused and slightly intimidated by the obscene obscureness of the WebGL Shaders. I hope someone can help me out. Thank you, ~Qqwy