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
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • 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 37 results

  1. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: I've noticed this example ( in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. the filter gives an error because pixi is not included. So I'm wondering what is the right method to do it. I guess the main questions here are: is pixi-v4 filters compatible with phaser-v2 method of importing of pixi filters? if yes, where are the new filters (interested in the zoom-blur one: if not, any pointers how to port them? Thanks!
  2. studdDev

    Pixi Glow Filter

    Hello there, I am trying to load a pixi glow filter for a phaser project I am working on. I followed this tutorial But I am a bit confused as to how to make this run on type script without the ts definitions. Any help in this regard would be much appreciated Thank you
  3. Hi, this is my first time using shaders and the new filters in pixi v4, so please bare with me First of all I'm a bit confused by the term (custom) filter.. Is that the same as the user of a shader? I assume it is. Second I tried using this example. I got it to work in pixi 3.x but somehow I can't figure out what i'm doing wrong in v4. no error messages, just a black canvas. My goal is to create custom button hovers with PIXI, using shaders, etc. I tried 2 different ways but... alas, same black canvas HTML: <a href="#" class="btn btn-one"> <canvas></canvas> <span class="title">button effect one</span> </a> shader.frag: precision mediump float; uniform vec2 mouse; uniform vec2 resolution; uniform float time; void main() { gl_FragColor = vec4( sin(time), mouse.x/resolution.x, mouse.y/resolution.y, 1.0); } JS: var btnOne = document.querySelector('.btn-one'); var width = btnOne.clientWidth; var height = btnOne.clientHeight; var app = new PIXI.Application({ width: width, height: height, view: btnOne.querySelector('canvas') }); btnOne.append(app.view); // create rect to fill the button and apply shaders to const rect = new PIXI.Graphics() .beginFill(0x00ff00) .drawRect(0, 0, width, height); app.stage.addChild(rect); // Stop application wait for load to finish app.stop(); PIXI.loader.add('shader', 'shader.frag') .load(onLoaded); var simpleShader; var uniforms = {}; uniforms.mouse = { type: 'v2', value: { x:0, y:0 } } uniforms.time = { type: 'f', value: 0 } uniforms.resolution = { type: 'v2', value:{ x: width, y: height} } function onLoaded (loader,res) { // Create the new filter, arguments: (vertexShader, fragmentShader, uniforms) simpleShader = new PIXI.Filter(null,, uniforms); rect.filters = [simpleShader]; app.start(); // bind mouse to shader effects btnOne.onmousemove = function(evt) { // Get the mouse position mousePos = { x: evt.clientX, y: evt.clientY } // Assigning a new value lets Pixi know to update the uniform in the shader // But doing something like uniforms.mouse.x = 0, won't update in this current version of Pixi simpleShader.uniforms.mouse.value = mousePos; } // apply the filter rect.filters = [simpleShader]; // Animate the filter app.ticker.add(function(delta) { simpleShader.uniforms.time.value += 0.1 }); } I read the post about creating filters in v4, but to a beginner it's just confusing as I don't understand a lot of the terminology used. Anyone can (hint how to) fix this so I can continue my explorations programming shaders?
  4. PixiWizi

    Mask issue with Webgl renderer

    Hi, All I'm relatively new to PixiJS and I'm facing an issue that I don't understand. # What I'm trying to accomplish : Basically I create a sprite based on an image and then I display a sort of black overlay over it. The idea is to let the user see through the black overlay thanks to a mask which will move according to user mouse movement. The mask texture is created using multiple graphics and filters rendered by a second webgl renderer. # The issue I'm facing Sometimes (~50% of the time) when I reload the page online, the mask is invisible. It's as if there isn't any mask applied to the black overlay whereas locally it's always working. Attached to this post you will find two pictures : The first one represents the black overlay with the mask which is not working. The second one represents the black overlay with the mask which is working. I'm using the latest release of PixiJS and the source code for this example can be found here : If someone has already solved this type of issue I would be happy to discuss with them :). Thanks.
  5. warzonak

    Pixi v4 filters in Phaser

    I would like to use Pixi v4 filters in Phaser node application. I´ve read this tutorial: and all posts about this that I´ve found, but I still don´t know, how am I supposed to load the filter script. For example the outline filter: game.load.script('filter', 'outline/src/OutlineFilter.js'); However, this is not working and I just can't figure out, how to load it correctly. (The path is correct.) Thank you
  6. I want to make a filter that uses multiple source textures. Each source texture is the same size (or, will be scaled to the same size). I've played around with a few different ways of handling this, without much success. I had a look at the guide to create filters in v4 but the documentation for this case leaves a little to be desired. I've been somewhat successful but there are still certain issues: The second texture seems to be slightly scaled up, leading to misalignment and a weird margin. Whenever the sprite goes out of bounds, the coordinate systems go out of whack. You can see the issue in action in this jsfiddle. I need a way to have the source textures line up perfectly, without the misalignment/weird margin. (we can ignore rotation!) 'autoFit' must be true for my application for performance reasons.
  7. pyre

    Filter on sprite batch

    Hi guys, I have a sprite batch containing 250+ 64x64 sprites from a single tileset / spritesheet. I need to apply a filter to the entire batch rather than per-sprite (way too slow!) I seem to only be able to add filters to the stage or single sprites. Anything else seems to do nothing. Is there any way I can do this? My original goal is to create an Overlay filter (Since the overlay blend mode doesn't work in WebGL) and apply it to all the sprites so they mix correctly with what is rendered underneath them. Thanks!
  8. yahiko

    DisplayObject.filters questions

    I have some questions about filters and how they behave in Pixi.js. 1. When settings filters on a display object like this: stage.filters = [filter1, filter2, filter3, filter4]; Is the order defined in the list is the same when rendered? 2. Does Pixi.js create brand new FrameBuffer Objects for each filter, or does it reuses the output of the previous filter as input for the next filter? Sorry if I'm not really clear or accurate since I'm not a WebGL expert ^^ Thanks for your insights
  9. koobazaur

    Bad Filter/Shader performance ?

    I recently started experimenting with Filters (shaders) and while it runs well when using a single filter on the world, applying a filter to my sprites seems to be killing performance. Even a simple filter that does nothing but output the color set on just 50 sprites is dropping my framerate from 50 to 18, even when sprites are offscreen. Is that to be expected? It makes filters virtually unusable unless very sparingly.
  10. Hello everybody, I've a simple question, forgive me, but I'm new to this world. I'm wondering if there is a "built in" solution to apply a Graphics object as filter of a BitmapText in Pixi.js 4.5. I fill like this is a super common task, and I'm not sure if I need to write a custom shader to accomplish it. Thank you!
  11. ivan.popelyshev

    Guide to pixi-V4 filters

    V4 filters are differ from V3. You can't just put there shader and assume that texture coords are in [0,1] range. I am sorry that you have to learn all of that, and I will make sure that the process will be easier for pixi-v5. Filter Area Thanks to @bQvle and @radixzz First, lets work with the AREA. When you apply filter to container, PIXI calculates the bounding box for it. We are working with bounding box. Invariant: maximal vTextureCoord multiplied by "filterArea.xy" is the real size of bounding box. Don't try to think about it: its like that because of performance reasons, its not logical in user-experience sense. Neither vTextureCoord dimensions, neither filterArea.xy are predictable, but they multiplication is what we need. Area can have padding, so please don't use it to get "displacement texture" coordinates or any second-hand textures you are adding to the shader, use "mappedMatrix" for it (see below) If you want to get the pixel coordinates, use "uniform filterArea", it will be passed to the filter automatically. uniform vec4 filterArea; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; They are in pixels. That wont work if we want something like "fill the ellipse into a bounding box". So, lets pass dimensions too! PIXI doesnt do it automatically, we need manual fix: filter.apply = function(filterManager, input, output, clear) { this.uniforms.dimensions[0] = input.sourceFrame.width this.uniforms.dimensions[1] = input.sourceFrame.height // draw the filter... filterManager.applyFilter(this, input, output, clear); } Lets combine it in shader! uniform vec4 filterArea; uniform vec2 dimensions; ... vec2 pixelCoord = vTextureCoord * filterArea.xy; vec2 normalizedCoord = pixelCoord / dimensions; Here's the fiddle: . You can see that shader uses "map" and "unmap" to get to that pixel Now let's assume that you somehow need real coordinates on screen for that thing. You can use another component of filterArea, zw: uniform vec4 filterArea; ... vec2 screenCoord = (vTextureCoord * filterArea.xy +; I dont have an example for that, but may be you need that value for something? Fitting problem Thanks to @adam13531 at github. One small problem: those values become wrong when PIXI tries to fit bounding box: here's the fiddle: Please use this line to fix it: filter.autoFit = false; Bleeding problem Thanks to @bQvle The temporary textures that are used by FilterManager can have some bad pixels. It can bleed. For example, displacementSprite can look through the edge, try to move mouse at the bottom edge of You see that transparent (black) zone, but it could be ANYTHING if it wasnt clamped. To make sure it doesnt happen in your case, please use clamping after you map coordinates: uniform vec4 filterClamp; vec2 pixelCoord = WE_CALCULATED_IT_SOMEHOW vec2 unmappedCoord = pixelCoord / filterArea.xy; vec2 clampedCoord = clamp(unmappedCoord, filterClamp.xy,; vec4 rgba = texture2D(uSampler, clampedCoord); Both FilterClamp and FilterArea are provided by FilterManager, you dont have to calculate pass it in "filter.apply", here's pixi code that takes care of that: OK, now we have "transparent" zone instead of random pixels. But what if we want it to be fit completely? displacementFilter.filterArea = app.screen; // not necessary, but I prefere to do it. displacementFilter.padding = 0; That'll do it. Why did I modify filterArea there, PIXI will "fit" it anyway, right? I dont want PIXI to have time calculating the bounds of container, because maggots are actually changing it, crawling in places that we dont see! No extra transparent space, and if you put it into , and you move mouse to bottom edge, you'll see the grass. Mapped matrix When you want to use extra texture to put in the filter, you need to position it as a sprite somewhere. We are working with sprite that is not renderable but exists in the stage. Its transformation matrix will be used to position your texture in the filter. Please use and as an example. Look for a mapped matrix: this.uniforms.filterMatrix = filterManager.calculateSpriteMatrix(this.maskMatrix, this.maskSprite); maskMatrix is temporary transformation that you have to create for the filter, you dont need to fill it. Sprite has to be added into stage tree and positioned properly. You can use only texture that are not trimmed or cropped. If you want the texture to be repeated, like a fog, make sure it has pow2-dimensions, and specify it in baseTexture before its uploaded on GPU/rendered first time! texture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT; If you want to use an atlas texture as a secondary input for a filter, please wait for pixi-v5 or do it yourself. Add clamping uniforms, use them in shader and make better mapping in "filterMatrix"
  12. Ozakifumbari

    Pixi.js simple lightmapping

    Hello all, Since a week now I try to implement a simple lightmap system by myself for my game following this tutorial for libgdx. I've learned tiny bits of OpenGL API when I was coding "for fun" in C++ and I think I can implement this code with the raw WegGL api. However, I would like to do it with Pixi.js. The "ambient light" filter is really simple. But, for the lightmap I need to bind 2 framebuffers : the texture one and the lightmap one. How do I achieve this with Pixi? I've dig into the code of pixi.js, pixi-lights and pixi-extras-filters to try to figure how I can do. For the moment, I render my lightmap on a RenderTexture of the same size of my tilemap. I've found that textures are bound in FilterManager.prototype.applyFilter but I don't see any way in Pixi.js API to bind a second texture. Am I missing something or looking at the wrong place? What is the good way to go if I want to bind another texture for some filters? Extend the filter manager used by Pixi.js? Here is a very messy codepen where I make my tests. There is maybe a very simple solution to this problem but I'm beginner to GLSL/WebGL and I may not understand how to use the exposed API.
  13. hopewise

    Glowing sprite?

    I have an openFL project that renders to a canvas, I am planning to use pixijs as a top layer to show glowing filters on top of openFL canvas. I already have the pixijs Canvas on top of openFL canvas. But are there examples to achieve glowing effect on pixijs Sprite? Here is an example in Adobe Flash Player of what I am trying to do: Thanks
  14. Hi! I'm trying to apply one filter to a large number (~256) of small (32x32 px) sprites. Within the filter, I'm using vTextureCoord to get the current sprite's coordinates, to draw borders on it. vTextureCoord breaks, apparently referring to the containing canvas's coordinates instead of the individual sprites' coordinates. BUT if I apply that same filter twice (two elements in .filters[] array), in one of the copies vTextureCoord actually does point to the sprite coordinates, and borders are drawn correctly. The other copy still points to the canvas coordinates, and the whole thing becomes laggy for some reason, and filters don't get removed when they should, too. Live version (hover over the individual sprites to apply filter second time): All the sprites are white-tinted because of the first filter invocation, with incorrect vTextureCoord coordinates. Code: Shader First filter application Second filter application Hover is just for the sake of illustration, if I apply filter twice statically to all sprites, the behavior is still the same. Thanks for your time!
  15. Hi everyone, and happy v4! I am having some problems with my DisplacementFilter, after updating from v3 to v4. In v3 when I moved the displacement sprite, it would loop just like a TilingSprite, when incrementing the x-position: But in v4 it reaches the "end" and repeats the last pixels: So now I'm unsure whether I've been exploiting a bug... Hope not. But I am looking for ways to reach the v3 effect in v4, and any help is appreciated! All the best.
  16. Iavra

    Converting a filter to PIXI v4

    In PIXI v2, i was using the following fragment filter to convert a texture from rectangular to polar coordinates, as part of a process to create a shadowmap:, [ '#define PI 3.14', 'precision mediump float;', 'varying vec2 vTextureCoord;', 'uniform sampler2D uSampler;', 'void main(void) {', ' vec2 norm = vTextureCoord * 2.0 - 1.0;', ' float theta = PI + norm.x * PI;', ' float r = (1.0 + norm.y) * 0.5;', ' vec2 coord = vec2(-r * sin(theta), -r * cos(theta)) / 2.0 + 0.5;', ' gl_FragColor = texture2D(uSampler, coord);', '}' ]); The first 2 pictures in this thread show an example of how the filter works: However, with PIXI v4 (and maybe v3, i skipped that one), the resulting image looks like this: Furthermore, the result changes, depending on the position of the sprite on the screen, which is something i don't think v2 did. Has anyone tried to do something similar in v4 and can point me in the right direction?
  17. MichaelD

    Error when trying to apply filter

    I'm using filters as follows: background = game.add.sprite(0, 0); background.width = 800; background.height = 600; filter = game.add.filter('Gray', game.width, game.height); //error here filter.alpha = 0.0; background.filters = [filter];I get: Uncaught TypeError: undefined is not a function Firefox gives a bit more info: TypeError: b.Filter[a] is not a constructor Anyone has any ideas? Thanks!
  18. I've been working recently on a lighting system for my game, and I've noticed something awkward when passing render textures to fragment shaders. TL;DR: Why does uSampler act normally when any other RenderTexture passed into a shader needs vTextureCoord.y *= -1.0 to prevent it from being inverted on the Y axis? I'll try to explain with the code as concisely as I can, but I don't have a demo I can show for this issue. I'm drawing a game world to a render texture a little like this: // When booting the renderer: var diffuse = new Phaser.Sprite(game, 0, 0, new Phaser.RenderTexture( game, game.width, game.height, null, Phaser.scaleModes.NEAREST )); var cameraMatrix = new Phaser.Matrix(1, 0, 0, 1,, ); // Outside the renderer, after booting it: var filter = new Phaser.Filter(game, { diffuse: { type: 'sampler2D', value: diffuse.texture } }, game.cache.getShader('diffuse')); = [filter]; // Later on in the rendering pass: // Retain existing filters filters =; // Render the world to the texture without filters = null; diffuse.texture.render(, cameraMatrix, true); // Set back the filters = filters; It's part of a sprite because that makes it easy to output on the stage for debugging (to view it, really). If I do this, it renders fine. Now, my lighting system acts on this diffuse texture to apply some shaders. I've finally got my system working, but unfortunately with a lot of uv.y *= -1.0; hacks to get around this Y inversion issue I've been finding when running a render texture through a shader sampler. I would rather remove these hacks and have the shaders read more cleanly. When I use a Filter to draw the resulting lit texture over the game world, it is inverted on the Y axis. This can be demonstrated with the following fragment shader and Phaser Filter: precision highp float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D diffuse; void main() { gl_FragColor = texture2D(diffuse, vTextureCoord); } filter = new Phaser.Filter(game, { diffuse: { type: 'sampler2D', value: diffuse.texture } }, game.cache.getShader('diffuse')); world.filters = [filter]; Why is it flipped here and uSampler isn't? For example, if I change the fragment shader to use uSampler: void main() { gl_FragColor = texture2D(uSampler, vTextureCoord); } It doesn't render upside down. I've tried looking for the reasoning behind this but can't find much. A pixi bug perhaps? Or should I just pass all textures to my shaders with flipY set to true? new Phaser.Filter(game, { diffuse: { type: 'sampler2D', value: diffuse.texture, textureData: { flipY: true } } }, game.cache.getShader('diffuse')); Is uSampler flipped automatically? That might explain. Cheers!
  19. weavejester

    Filters that require a margin

    I've written a simple outline shader that adds a single pixel border around a sprite. It works well, except because sprite textures are commonly cropped, the outline is missing at the edges of the image. I've included a blown up image to show you what I mean. See how the border is missing at the tops of the ears and at the extremities of the limbs? What's the common way of dealing with shaders (like outline, blur, glow, etc.) that go over the edge of a cropped texture? Is there an easy way of adding a transparent margin around a texture? Or do I need to write a vertex shader to expand the size? I'm a little new to this, so I'd be grateful to learn of any solutions people might have.
  20. climber

    Change texture color

    Total pixi noob here. I'm loading in a texture from an image file and need to dynamically change its color. The image is basically a flat wave-like shape that I want to be able to make different colors dynamically. I tried tinting a sprite but that only tints and doesn't make the color 100% opaque. What's the proper way to do this? Some sort of filter? I figure the answer to this is really simple, but I've poked around the API and am not seeing it. Thanks for any help!
  21. roman_44

    WebGL color filters

    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.
  22. 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:
  23. 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?
  24. 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!
  25. coter

    Graphics and DropShadowFilter

    Why are there no shadow?