Jump to content

Search the Community

Showing results for tags 'filter'.

  • 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





  1. i am new to canvas+pixi world, so pardon me for mistakes, well i applied bloom filter on svg with blur = 20, now how i can elemenate this rectangular cut? any smoothing or expand this rectangle to upto faded edges?
  2. Hello. I'm trying to make a filter to transition between the current texture of a Sprite and a new one. I've put together a barebones example here: https://www.pixiplayground.com/#/edit/KozVneSNjCuVZKi_fgNJa When you click on the blue sprite, a filter is applied. Currently, this filter takes a new texture as uniform and uses it to sample the fragment color (I have removed all the blending code to make it clearer). And it seems as this texture is being upscaled? Both textures have the same size. As a reference, I have added a second sprite with the new texture being applied.
  3. Seemingly simple task, yet so unclear and confusing in Pixi. After searching for a while, found this and that is exactly what I need https://gameofbombs.github.io/examples-heaven/#/picture/displacement-backdrop.js And that is for Pixi 4. Once I copied the code into pixi examples window and fixed the method names, I saw this (Attachment) const shaderVert = ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; varying vec2 vTextureCoord; varying vec2 vFilterCoord; void main(void) { gl_Position = vec4((projectionMatrix
  4. I'm looking to generate a basic grid using a shader, and I've came across this Codepen which fits what I'm looking for. Only issue is: it's using Pixi v3, I've been looking into the documentation to port this code to work for a v5 filter, with no success so far. I'm still in the process of learning about shaders and filters, and the original code is already 2 versions outdated. Any help would be greatly appreciated. Cheers!
  5. I made a playground example to illustrate my issue. When setting the output values of the fragment, the alpha seems to be ignored when I use a constant value instead of the sampled one. If you uncomment the last line of the shader you will see my issue - how can I avoid showing the colour where alpha is zero ?
  6. I have a displacement filter using an radial map you can find attached to the post. This filter is bound to a sprite which is following the cursor. In addition to this displacement filter, I'm trying to also include an RGB split at the cursor's position. To do so I installed the type `RGBSplitFilter` and tried to use it the way I use the displacement filter: initDisplacement = () => { this.displace = true; new PIXI.Loader().add("/dis.png").load(((loader, resources) => { this.posX = window.innerWidth / 2; this.posY = window.innerHeight / 2; thi
  7. I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?
  8. Hi, so currently i'm working on personal game with RPG Maker MV and i'm trying to recreate vision limitation with shader, some thing like this This example is created with PIXI 5.2 and working with mouse position After this i'm went back to RPG Maker MV(Using Pixi 4.5.4) and use the shader code, alter it a bit and got it's kinda working with position (0,0) But when I change to position (0.5,0.5) - hopefully the light will go to center of the screen it got offset like this: This is what I come up with shader code for this effect precision mediump float; c
  9. ZebraRoy

    Filter Buffer

    How can I use the buffer function in filters? I want to do something like this
  10. Hello. I'm making example filter with custom fragment shader. This is what I have in terms of shader code so far: //fragShader struct SomeInfo { vec4 color; }; uniform SomeInfo c; void main() { gl_FragColor = c.color; } The idea is to (eventually) make c into an array of Infos, which would be then operated on by the shader. What I'm struggling with is the definition of filter: how do I declare the uniform to be of type SomeInfo in Js code? I assume in plain WebGL, I'd have to bind uniform location (of c's property) by calling gl.getUniformLocation(progra
  11. I have a huge sprite that contains many sub sprites, I want to add mosaic to a specific area of this sprite. I have tried the PixelateFilter but it takes effect on the whole sprite. The attachment is what I want (see top-right corner)
  12. In phaser 2, I applied to an image two filters to make a blurred image (Blur X and Blur Y, with the two of them a complete Blur). I wanted to use the same filter system to apply this two shaders, but I don't find the filter class anywhere. But I found the Pipeline system, so I combined both blurs and made this complete blur shader. Everything fine now. My questions are... There is some way to apply two pipelines in one image/sprite? and, There is an alternative for filters in phaser 3?
  13. Hello, I'm trying to create a custom Filter in Phaser to make dithering. I used this great resource as a reference: http://alex-charlton.com/posts/Dithering_on_the_GPU/ Here is my code (I modified the DotScreenFilter code): PIXI.DotScreenFilter = function() { PIXI.AbstractFilter.call( this ); this.passes = [this]; // set the uniforms this.uniforms = { scale: {type: '1f', value:1}, angle: {type: '1f', value:5}, dimensions: {type: '4fv', value:[0,0,0,0]}, indexMatrix4x4: {type: '16i',value:[0, 8, 2, 10, 12, 4, 14, 6,3,
  14. Is there already a way to make a displacement filter in p3? something like that: https://pixijs.io/examples/#/filters/displacement-map.js would like to use it for explosions (shockwave effect) any idears on implementing this effect into p3.? regards
  15. I have simple Filter and need to make access in shader to data: - position of sprite / mesh of Stage - textureRegion rectangle info How to do this? var fragSrc = ` precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 dimensions; uniform vec4 filterArea; uniform vec4 texRegion; vec2 mapCoord( vec2 coord ) { return coord * filterArea.xy; } vec2 unmapCoord( vec2 coord ) { return coord / filterArea.xy; } void main() { vec2 coord = vTextureCoord; coord = mapCoor
  16. I played a ludem dare game a few years ago and finally re-found the game http://deepnight.net/games/last-breath/ I loved this beveled pixel effect and have been trying to use it in phaser. Deepnight referenced this one Reddit post on how to implement the style, but I have not been able to successfully do anything with it yet. I've tried desperately to use the following shader example by Rybar but always seem to fall a little bit short. I wanted to render the effect on the entire game.world instead of having to add everything manually to a group like Rybar did i
  17. Hi, i have a problem with a custom filter. I notice that the result of this simple custom filter change when the sprite are moved from js. Seems to be that vTextureCoord are affected by the position.x value: when i change its value, the filter render a different image. precision mediump float; uniform float frequency; uniform float amplitude; varying vec2 vTextureCoord; uniform sampler2D uSampler; float upDown(float v) { return sin(v) * .5 + .5; } void main (void) { vec2 uv = vTextureCoord; float t1 = frequency * 0.2; float t2 = frequency * 0.35;
  18. Hi there - I'm going down a rabbit hole trying to implement a color grading / LUT shader for PIXI. Color grading is where you can you use a sprite as a lookup table to quickly transform one set of colors to another - this is handy for applying realtime contrast and color adjustments. I'm using this as a reference: https://www.defold.com/tutorials/grading/ I've created a filter/shader using the code in the link above: var ColorGradingShader = function(LUTSprite) { var my = this; var code = ` precision lowp float; uniform vec4 filterArea; varying vec2 vTextu
  19. I've been working with PIXI filters recently. If I apply the filter to a sprite with alpha, I've noticed that somewhere along the line the alpha gets premultiplied. For example, I have a test texture with a pixel saved as [255, 255, 255, 128]. When I sample the texture, in a filter Instead of [1.0, 1.0, 1.0, 0.5] the result is [0.5, 0.5, 0.5, 0.5]. How can I turn off this premultiplying behaviour? I've tried 'transparent: false' and 'transparent: "notMultiplied" ' in the webGL renderer settings, but neither of those seemed to make any difference?
  20. I'm experimenting with GLSL shaders in Pixi 4.4, and was trying to make some that would take in two images, the base and an overlay. The shaders would then replace either the Hue, Saturation, or Value of the pixels in the base image with the H/S/V of the corresponding pixel in the overlay image. Transparency on the overlay means "no change." For my tests, I used a 100x100 red square, and the following 100x100 "striped" overlays: That's the Hue overlay, Saturation overlay, and Value overlay respectively. Results were only partially consistent, and all wrong. Here are the
  21. I use a custom filter in pixi.js for blur https://github.com/louisatome/pixi.js/tree/dev-atomeV4/src/filters/triangleblur 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 appl
  22. 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 this.game.load.image('logo', 'assets/images/preload_bg.png'); this.game.load.script('gray', 'https://cdn.rawgit.com/photonstorm/phaser/master/v2/filters/Gray.js'); var logo = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'logo'); logo.anchor.setTo(0.5, 0.5); var gray = this.game.add.filter('Gray'); logo.filters = [gray]; The sprite is added but it's not affected by filter at all... I checked: that
  23. 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
  24. 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
  25. 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: https://phaser.io/examples/v2/filters/fireball 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
  • Create New...