Search the Community

Showing results for tags 'filter'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Coding and Game Design
  • Frameworks
    • Phaser
    • Pixi.js
    • Babylon.js
    • Panda.js
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Found 70 results

  1. WebGL filter texture overlapping

    I use a custom filter in pixi.js for blur but when I use the filter on different objects, the texture of my biggest object overlaps on smaller objects. After some research, I think it's linked to the temporary RenderTarget I use to apply my filter on the 2 axis. First, it seems that the clear parameter of the function filterManager.getRenderTarget() is ignored when I read the source code of the method. But anyway, even if I manually call the clear() method of the RenderTarget at the end of the filter application the result is the same. But if my 3 objects have different dimensions (let say 100x100, 200x200 and 400x400) in order to get a different RenderTarget for each, the rendering is OK. Any idea ? Thanks
  2. Water shader approach?

    I'm struggling with an approach to add a water effect to an area of container. I'd like to have the area in green distort the area below it via a shader, but also have the ability for this water area to "rise/fall". The rise/fall is of no problem when it's just a sprite I can move up and down as necessary - but being able to apply a shader to just that specific area is throwing me for a loop. Adding a filter directly to the sprite won't distort anything since it's not accounting for the pixels behind it.. Is there are way to capture this particular area, save it to a buffer, and apply a filter, and put it back in place? RenderTexture seems like it might be in the right direction, but I can't see where I can grab an area of an existing container... Any help would be much appreciated!
  3. I am trying to do the following: draw some shapes to a Graphics object render those shapes to a RenderTexture without clearing it first, so that the shapes are "painted onto the texture" apply a filter (a blur, for example) to the RenderTexture without ever clearing it so the current blur is processing an already blurred texture from the previous frame render to the screen repeat, never clearing the previously rendered display This is basically continuously blurring the display so that the longer something has been displayed, the more blurred it gets. Here is where I am at so far: class Project { constructor() { this.renderer = new PIXI.WebGLRenderer(window.innerWidth, window.innerHeight, { antialias: true }); this.renderTexture = PIXI.RenderTexture.create(this.renderer.width, this.renderer.height); document.body.appendChild(this.renderer.view); this.stage = new PIXI.Container(); this.canvas = new PIXI.Graphics(); this.sprite = new PIXI.Sprite(this.renderTexture); this.blurFilter = new PIXI.filters.BlurFilter(); this.stage.addChild(this.sprite); this.draw(); } draw() { var mousePosition =; this.canvas.clear(); this.canvas.lineStyle(0); this.canvas.beginFill(0x666666); this.canvas.drawCircle(mousePosition.x, mousePosition.y, 50); // Somehow apply a blur to this.renderTexture without clearing it so the next line renders the // canvas on top of already blurred elements. This display will be fed into the next render // cycle without being cleared so that the blurs are "additive". this.renderer.render(this.canvas, this.renderTexture, false); this.renderer.render(this.stage); requestAnimationFrame(this.draw.bind(this)); } } Does this make sense? Am I on the right track?
  4. cannot apply gray filter to sprite

    Hello everyone, is there any special limitation for using filters? I can see from example on Phaser web site that this code should work but in my app it does not work'logo', 'assets/images/preload_bg.png');'gray', ''); var logo =,, 'logo'); logo.anchor.setTo(0.5, 0.5); var gray ='Gray'); logo.filters = [gray]; The sprite is added but it's not affected by filter at all... I checked: that Phaser.Filter.Gray exists, gray object is really filer object and logo has it within filters property. What else I can do to find issue? Thanks in advance
  5. Phaser move filter

    Dear community: We are learning about phaser and we have a doubt for this forum. We are trying to develop a simple shoot game with a plane and enemies. The goal is that when a enemy is killed, a fire animation will be showed. We did this with a spritesheet and the result is good but we want to improve the quality with this filter: The problem is that we can't move the fireball effect over each enemy. The fire is always in the same position (left-bottom corner), and we can not change it. Probably the problem is the opengl code but we are not sure. Anyone can add this fireball effect to be showed when the enemy is killed? I thing that this code will be useful for the developers as us.
  6. Displacement filter scale issue.

    Hi, I've long wanted to implement a neat looking invisibility effect for my game, tried using DisplacementFilter, but stumbled upon an issue with scale property. While it works correctly to displace areas under the displacement sprite I created, it also displaces entire container on which the filter is applied. I presume its from non existent knowledge about the subject and how those filters work, but I'm still hoping for either a fix or a reasonable explanation if anyone can help me with this please. Everything in my code follows DisplacementMap example on (one with the grass and magnifying glass). What is different is my stage tree. I have 3 containers for each layer and inside those there are separate containers for chunks that hold the map data, since it comes from the server. const playerSprite = new PIXI.Sprite(new PIXI.Texture(PIXI.utils.TextureCache['player.eyes'])); const displacementSprite = new PIXI.Sprite( new PIXI.Texture(PIXI.utils.TextureCache['player.normal']) ); let displacementFilter = new PIXI.filters.DisplacementFilter(displacementSprite); playerSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); playerSprite.scale.set(globalScale, globalScale) this.scene.addChild(playerSprite); this.scene.addChild(displacementSprite); displacementFilter.scale.x = 20; displacementFilter.scale.y = 20; displacementFilter.enabled = true; displacementSprite.position.set(16 / globalScale * fs, (8 - globalScale) / globalScale * fs); displacementSprite.scale.set(globalScale, globalScale) return { scene: this.scene, filter: displacementFilter }; the return value from this block is added to the main stage container, and filters are applied to bottom 2 layers. Should i perhaps look into filterArea? Here is the undesired effect on the edges. You can also see the slanted top layer on the trees. so 2 layers are moved by the filters scale property.
  7. I'm trying to create an effect where a shape inverts the color of everything it covers. Imagine two Container objects, one rendered behind the other, the one behind is the "main stage" with all the graphics, and the one in front of it contains my shape, I want that shape to invert the color of everything behind it on the first container, that shape is animated too. I just used containers to explain what I want to do, while it is what I have in my current code, I'm open to any solutions, thanks. P-S : Is there really no real-time chat anywhere? Irc, Discord, etc.. It's a shame such a widely use library doesn't have anywhere where to discuss and talk about everything pixijs related..
  8. Hello, I am using a DisplacementFilter to create a water ripple effect (the source & maps kindly borrowed from some other posts on this forum). I would like to be able to have the ripples 'fade' out, i.e. reduce the intensity/magnitude of the displacement. The only way I can think of doing this is by slowly reducing the intensity of the colour in the displacement map (reducing the saturation?), and replacing the filter with the new sprite. Is there a cleaner/easier way of achieving this? This is a snippet of the code I am using: Thanks for your help.
  9. Pixi custom filter access underlying pixels

    Hello. I am trying to build a sort of "Line of sight" shader. I have the a tilemap which is just a Sprite sitting inside of a container. Then I am generating another texture dynamically which represents the "light" data. I want to create a fragment shader to show/hide parts of this tilemap based on the light texture/ I am able to pass this texture into the shader, however I am seeing a problem that I think may be intended behavior, but I'm trying to figure out how to achieve my desired result. The problem is it seems the fragment shader is operating on the screen rather than the underlying pixels in my Container. The container is scaled/translated so I have no way to know which true (non translated/scaled) pixel I am operating on within the shader (vTextureCoord seems to give me coordinates relative to the screen ?). Whereas the lightmap texture I am passing in does not have this same problem. This is my first time playing around with pixi.js filters. Any suggestions ?
  10. Filter on group not working

    Hey all, I'm trying to filter an entire group, but I can't seem to succeed, where applying that same filter to a sprite instantly works. I'm working on my first Typescript project and I like it a lot! I have a MainGame class (mainGame.ts) which extends Phaser.State and I have a Container class (container.ts) which extends Phaser.Group When I apply a filter to a sprite that I simply added like: this.body = this.add.sprite(0, 0, 'bgBase'); this.body.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the blur filter is applied. Now when I try to apply the filter to a container which contains Sprites, like: this.container = new Container(; this.container.filters = [ new Phaser.Filter.BlurY(, null,'') ]; does NOT work. But when I apply the filter directly to a Sprite inside the container, like: this.container.someSprite.filters = [ new Phaser.Filter.BlurY(, null,'') ]; the filter is applied as expected. I must be overlooking something important for how I create or add the group, but I keep missing it. I hope somebody has an idea about where to look. Help will be much appreciated!
  11. Editing PIXI DotFilter - Question

    Hi all, I'm fairly new to Pixi and extremely new to fragment shaders and am trying to change the PIXI DotFilter fragment shader so that the holes are transparent (which I've done) but I want to set the foreground color to black or preferably any color. The first pic is what the PIXI DotFilter fragment shader renders without changes (i.e., by default) - which is black foreground on white background, and the second one is where I got it to now (transparency). The second picture (after I changed the color.a value to 0.0) has the color as white with the background knocked out. The fragment shader code is as follows: precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; uniform vec4 filterArea; uniform sampler2D uSampler; uniform float angle; uniform float scale; float pattern() { float s = sin(angle), c = cos(angle); vec2 tex = vTextureCoord * filterArea.xy; vec2 point = vec2( c * tex.x - s * tex.y, s * tex.x + c * tex.y ) * scale; return (sin(point.x) * sin(point.y)) * 4.0; } void main() { vec4 color = texture2D(uSampler, vTextureCoord); float average = (color.r + color.g + color.b) / 3.0; gl_FragColor = vec4(vec3(average * 10.0 - 5.0 + pattern()), color.a); } Like I say, if I change that last line's color.a to 0.0 I knock out the background (which is what I want) but I want to change the color of the fill to black or any other color. I'm not sure what to change to do that. Anyone know how to do this? Thanks in advance!
  12. function QuantizeFilter() { var vertexShader = null; //Doesn't actually quantize, just testing. var fragmentShader = [ 'precision mediump float;', '', 'varying vec2 vTextureCoord;', '', 'uniform vec4 dimensions;', //This is the variable. 'uniform vec3 palette[3];', 'uniform sampler2D uSampler;', '', 'void main(void)', '{', ' gl_FragColor = vec4(0.5, 0.5, 0.5, 1.0);', '}' ].join('\n'); var uniforms = { dimensions: { type: '4fv', value: new Float32Array([0, 0, 0, 0]) }, palette: { type: '3fv', value: [ [255.0, 255.0, 255.0], [200.0, 200.0, 200.0], [0.0, 0.0, 0.0] ] } };, vertexShader, fragmentShader, uniforms ); } QuantizeFilter.prototype = Object.create(PIXI.AbstractFilter.prototype); QuantizeFilter.prototype.constructor = QuantizeFilter; Object.defineProperties(QuantizeFilter.prototype, { palette: { get: function() { return this.uniforms.palette.value; }, set: function(value) { this.uniforms.palette.value = value; } } }); Custom (test) filter for Pixi.js V4 I'd like to make the 'uniform vec3 palette[3];' array size, size to the 'palette' uniform input. So I could set palette to 256 or so arrays of colors and the uniform will size appropriately: 'uniform vec3 palette[256];' Hypothetically, I've thought of just making the string in javascript, and prepending it to the fragment shader text, but I don't know of a way to do that. Any help is appreciated, ty.
  13. Filter not loaded on first load, mobile

    Hi, I'm currently developing a game where in the preload phase I load a few images and a shader : this.load.image('title', 'assets/images/title.png'); this.load.image('subtitle', 'assets/images/subtitle.png'); this.load.image('particle', 'assets/images/particle.png'); this.load.bitmapFont('belleza', 'assets/fonts/belleza.png', 'assets/fonts/belleza.xml'); this.load.shader('sphere', 'assets/shaders/sphere.frag'); Unfortunately it seems that on mobile (tested chrome + safari on iphone5s running iOS 10), the page requires a reload for the filter to work. Any idea what I should be looking for? Desktop browser version works fine. Thanks.
  14. The Deepnight Effect Help

    The above screenshot is from one of Deepnight's games, Delicious Cortex. I've attached it to show the effect I'm trying to achieve. I've figured out how to properly scale my game to 3x with crisp rendering, and how to apply a filter to the whole game world. I've hit a snag with the filter step though; Sebastian applies a 3px by 3px mosaic grid in overlay mode to a game that's scaled 3x. When I apply a shader to the game world it's being rendered before its scaled (as expected), but the effect I'm going for would require access to the screen post-scaling. Is this possible? I've successfully re-created the effect in my js13k entry Super Glitch Box, but that was a canvas-rendered game, and not Phaser. I would like to avoid simply scaling up all the assets in-game and leaving the game scale at 1.0, to preserve the appearance of pixel-perfect movement.
  15. hi. i'm updating 4.1.1 from 3.1.1 but i can't find outlineFilter with 4.1.1. pixi-filter doesn't have it.. where can i find it? thx
  16. var Colorize = function (game) {, game); this.uniforms.uColor= { type: '3f', value: { r: 0.5, g: 0.5, b: 0.5} }; this.fragmentSrc = [ "precision mediump float;", "uniform float uColor;", "void main(void) {", "gl_FragColor.r = uColor.r;", "gl_FragColor.g = uColor.g;", "gl_FragColor.b = uColor.b;", "gl_FragColor.a = 1.0;", "}" ]; }; It works if i pass each color channel as separate value but i can find combination of type and data structure that would do the same in single object
  17. I'm developing a game that makes generous use of camera.shake. Since I've added shaders (filters), I've noticed that camera.shake only affects some layers of the graphics, resulting in artifacts like in the attached picture. A filter is applied on the lava. Notice the misalignment of the ground tiles with the other layers -- the ground tiles got moved by the shake, but everything else unexpectedly stayed in place. When disabling the filter, camera.shake works as expected. Am I doing something wrong? Is this a bug? Panning the camera manually through the x/y coordinates does not exhibit this artifact.
  18. Create gradient filter on sprite.

    Hi, I've been struggling to create a gradient filter over an sprite using shaders. I have this and is working fine: On the other hand this code creates a nice gradient: precision mediump float; // start and end colors vec3 color1 = vec3(0.0,0.0,1.0); vec3 color2 = vec3(1.0,0.5,0.0); void main( void ) { vec2 uvs = vTextureCoord.xy; vec3 mixCol = mix( color2, color1, uvs.y ); gl_FragColor = vec4(mixCol, 1.0); } But I can't apply that gradient to the image as the first sample. I tried this, but it still generates a solid color on top of the image: precision mediump float; varying vec2 vTextureCoord; varying vec4 vColor; // start and end colors vec3 color1 = vec3(0.0,0.0,1.0); vec3 color2 = vec3(1.0,0.5,0.0); uniform sampler2D uSampler; uniform float customUniform; void main(){ vec2 uvs = vTextureCoord.xy; vec3 mixCol = mix( color2, color1, uvs.y ); vec4 fg = texture2D(uSampler, vTextureCoord); fg = vec4(mixCol, 0.5); gl_FragColor = fg; } I'm not very familiar with the Shaders specific stuff, but definitely I'm missing something here. Any help will be appreciated. Thanks, Rodrigo.
  19. How can I create a PIXI.Container with a transparent background which I can render on top of my main stage container? My goal is it to have 4 layers which contain PIXI.Sprites and PIXI.Texts: layer 1 should be rendered beneath the player layer 2 should be rendered above layer 1 layer 3 should be rendered above the player and above layer 1 and layer 2 layer 4 should be rendered above everything else for debug information In case I can cannot use multiple PIXI.Container then how else could I achieve this effect?
  20. Hi I am using a displacement map to distort three graphics lines. And since the lines have a speed, I need to move the displacement space at the same speed as the points, which define the lines. I do this, so that the line keeps it shape, and doesn't "wave" around. But it seems like there is an offset in the speeds at which they move, mostly at lower speeds, which makes the line change a bit of its shape. Is there a better way to achieve this effect, or is there some local/global positioning I'm overseeing with Pixi.js? Would It make sense to move the PIXI.Graphics themselves instead? Here is a simplified version of my project: There is also some jittering, which I'm unsure if is caused by missing antialiasing or something else... If any of you can spot how to smoothen out the graphics I'd be very happy. But the displacment + graphics offset mentioned above is my main priority so far. Feel free to ask any questions, if something needs to be clarified.
  21. hi.. following link is example i set mark of uniformsd it has like following code but it look like not have any value in fragmentshader. if change 'float dist = distance(start, makr) to following code, shader is good can you tell me where is wrong?
  22. Weird FilterArea's size on v4

    hi. i'm testing v4. and i create custom shader sprite is created by texture size is using 628x572; and filterArea is set automatically to 1024, 1024; so i can't calculate correct vTextureCoord. because end of vTextureCoord looks like 1024, 1024 if vtextureCoord has (1.0, 1.0); how can i calcaulte or get correct uv. following code is custom shader code function createShaderShadow(x, y, dist) { // smoke shader var uniforms = {}; uniforms.time = { type: '1f', value: 0 }; uniforms.mark= { type: '2f', value: { x: 0.5, y: 0.5 } }; var fragmentSrc = [ "precision mediump float;", "uniform vec4 filterArea;", 'varying vec2 vTextureCoord;', 'uniform sampler2D uSampler;', "uniform float time;", "uniform vec2 mark;", "const float max_dist = 0.2;", "void main() {", "vec2 start = vTextureCoord.xy;", "vec2 end = vec2(0.5, 0.5);", //"float dist = distance(start, end);", "float dist = distance(start, end);", //"if(vTextureCoord.x< max_dist || vTextureCoord.y< max_dist) {", "if(dist < max_dist) {", " vec4 color1 =texture2D(uSampler, vTextureCoord);", " vec4 color2 = vec4(1.0, 1.0, 0.0, 1.0);", " gl_FragColor = mix(color1, color2, 0.5);", "} else {", " gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);", " vec4 color1 =texture2D(uSampler, vTextureCoord);", " vec4 color2 = vec4(1.0, 0.0, 0.0, 1.0);", " gl_FragColor = mix(color1, color2, 0.5);", "}", "}", ]; fragmentSrc = fragmentSrc.join('\r\n'); var coolFilter = new PIXI.Filter(null, fragmentSrc, uniforms); return coolFilter; }; thx
  23. hi this shader was used on pixi.2.x and i wanna use on 3.x so i update black color line only.. but it's not operating .. regards Yun following movie on 2.x bandicam 2016-07-28 22-04-56-145.avi following movie on 3.x bandicam 2016-07-28 22-05-56-130.avi
  24. HueRotate Filter Example

    Hi, Does anyone have an example of using the HueRotate filter on a sprite? My hero sprite has a child sprite animation of a shirt that I'd like to change its color, would a HueRotate be able to change its color? Thanks!