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. Hello, I'm learning filters and I'm having an issue positioning the shockwave filter where I want it. What I have is a pixi container. Inside this container I have a sprite. That is the image I'm applying my filters to. One thing to note is that the Sprite is very large. It does not fit inside the screen. Instead it is positioned to be centered on the screen. This is intended. Next I have multiple small display objects inside the pixi container. These objects move around, after some time passes I want to check if these objects are on top of my sprite and if they are, I'd like create a shockwave on that point. Here's where the issue comes up. My understanding is that all I have to do is get the local coordinates of the moving object from the perspective of the sprite, like so: let filterCoords = sprite.toLocal(movingOjb.position, container); let filter = new ShockwaveFilter(filterCoords); But the problem is these coordinates aren't correct. More specifically the Y coordinates are correct but the X coordinates aren't which really confuses me. I've been trying to understand how exactly the filter coordinates interact with images that do not fully fit on the screen.
  2. Is there a method of using a filter that affects the entire screen, and not just the rendered sprites? (e.g. for the CRT filter, I'd want the lines to be visible across the entire background). An easy fix would be to set a rectangle graphic / sprite as the background, but I was wondering if there was a more correct way to approach this.
  3. Hello, I am new to PIXI and as a former Flash developer, I am greatly enjoying learning it, as the concepts are quite similar! 🙂 I recently came up against a stumbling block, which I hope a kind soul here may help me resolve: I'm trying to reproduce what one sees when looking through a camera's viewfinder. In order to achieve this, I am attempting to blur only a circular portion at the center of the stage. While this works as expected when I add a single blurred container and its corresponding mask, as children of the stage, the moment I add a "crisp" (non-blurred) version of the same container, I don't get what I would expect: i.e. the blurred circular portion overlaid over the non-blurred container. Instead, the masked, blurred version gets overriden and I only see the crisp version. Building off a CodePen generously provided by OSUblake from the GreenSock forums, I put together this CodePen to illustrate the problem: (Uncomment the line in question, noted in the comments, to see what I mean). What would be the proper way to achieve what I am trying to do? I have seen from examples that other filters (such as the DisplacementFilter) can be constrained to a discreet area on the canvas, so I assume the same can be done with the BlurFilter while still coexisting with other containers on the stage. What I am missing? Thank you so much for your help! Cheers! Mike
  4. jkm

    Color palette Filter

    This isn't fully pixi related, but I'm looking to swap colors, limit color palette in images. I've had some success blindly painting color palettes and using Color Map Filter but I have no idea how it actually works. Can someone point me in the right direction? How would I go about making a color palette that for example limits image's colors to 32 given ones? I was able to copy some shaders from shadertoy that also manipulate colors, but for my use case dynamically calculated/painted color map seems like the best solution.
  5. Hi community, I'm trying to add an additional filter to a sprite in Pixi v4 but somehow this only works when I add the filters at the same time like so: mysprite.filters = [new PIXI.filters.BlurFilter(), new PIXI.filters.NoiseFilter()]; My goal is to dynamically add and remove filters on the sprites at a later time. I have tried this (see below), but when I examine the "mysprite.filters" property, the debugger still tells me that there is only one filter on the sprite: mysprite.filters = [new PIXI.filters.BlurFilter()]; ... mysprite.filters.push(new PIXI.filters.NoiseFilter()); What is the correct way to add additional filters to a sprite? Thanks in advance. :)
  6. 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!
  7. 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
  8. 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?
  9. 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.
  10. 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
  11. 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.
  12. 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!
  13. 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
  14. 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.
  15. 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!
  16. 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"
  17. 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.
  18. 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
  19. 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!
  20. 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.
  21. 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?
  22. 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!
  23. 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!
  24. 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.
  25. 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!