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

Found 75 results

  1. Custom filter coord issue

    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; float v = uv.y; float h = uv.x; float off1 = sin((h + 0.4) * mix(1., 6., upDown(t1))) * amplitude * 0.5; float off2 = sin((h + 0.8) * mix(3., 8., upDown(t2))) * amplitude * 1.5; float off3 = sin((h) * mix(1., 2., upDown(t1))) * amplitude * 0.5; uv = vec2( h + off1 + off2 + off3, v ); gl_FragColor = texture2D(uSampler, uv); } How can I get the same image, even moving or scaling the sprite? Thanks in advance
  2. 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: 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 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D lut; #define MAXCOLOR 15.0 #define COLORS 16.0 #define WIDTH 256.0 #define HEIGHT 16.0 void main() { vec4 px = texture2D(uSampler, vTextureCoord.xy); float cell = px.b * MAXCOLOR; float cell_l = floor(cell); float cell_h = ceil(cell); float half_px_x = 0.5 / WIDTH; float half_px_y = 0.5 / HEIGHT; float r_offset = half_px_x + px.r / COLORS * (MAXCOLOR / COLORS); float g_offset = half_px_y + px.g * (MAXCOLOR / COLORS); vec2 lut_pos_l = vec2(cell_l / COLORS + r_offset, g_offset); vec2 lut_pos_h = vec2(cell_h / COLORS + r_offset, g_offset); vec4 graded_color_l = texture2D(lut, lut_pos_l); vec4 graded_color_h = texture2D(lut, lut_pos_h); vec4 graded_color = mix(graded_color_l, graded_color_h, fract(cell)); gl_FragColor = graded_color; } `;, null, code); my.uniforms.lut = LUTSprite.texture; } ColorGradingShader.prototype = Object.create(PIXI.Filter.prototype); ColorGradingShader.prototype.constructor = ColorGradingShader; export default ColorGradingShader; I then add this to my top level container: //relevant code from a wrapping class this.colorGradingSprite = new PIXI.Sprite.fromImage('/img/lut16.png'); this.pixiContainer.filters = [ this.colorGradingFilter ]; When using any LUT image, including the default without any color adjustments: I go from this: to this: I'm assuming there are some adjustments necessary to either the shader code, or how the lut sprite itself is being loaded - I have no clue.. Any help would be greatly appreciated! And for those curious, here's my end goal: Thanks, Sean
  3. Help with beveled pixel effect

    I played a ludem dare game a few years ago and finally re-found the game 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 instead of having to add everything manually to a group like Rybar did in his examples. I tried to use his shader and capture the world, scale it up, and render it to a sprite on top everything. Using this method causes all of the camera, and physics to be off. I've made a simple example of my closest attempt using Phaser CE and some boilerplate. I've added some debug boxes to show where the original sprites are located in the background. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Phaser - Making your first game, part 7</title> <script type="text/javascript" src="js/phaser.min.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> <script type="text/javascript"> var w = 800 var h = 600; var player; var platforms; var cursors; var renderTexture; var renderTexture2; var stageSprite; var outputSprite; var gameMatrix; var gameGroup; var game = new Phaser.Game(w, h, Phaser.WEBGL, '', { preload: preload, create: create, update: update, render: render, preRender: preRender }); function preload() { game.load.image('sky', 'assets/sky.png'); game.load.image('ground', 'assets/platform.png'); game.load.spritesheet('dude', 'assets/dude.png', 32, 48); } function create() { game.physics.startSystem(Phaser.Physics.ARCADE); game.add.sprite(0, 0, 'sky'); platforms =; platforms.enableBody = true; var ground = platforms.create(0, - 64, 'ground'); ground.scale.setTo(2, 2); ground.body.immovable = true; var ledge = platforms.create(0, 110, 'ground'); ledge.body.immovable = true; ledge = platforms.create(250, 255, 'ground'); ledge.body.immovable = true; // player = game.make.sprite(32, - 150, 'dude'); // move the player to the top platform player = game.make.sprite(0, 0, 'dude'); game.physics.arcade.enable(player); player.body.gravity.y = 300; player.body.collideWorldBounds = true; player.animations.add('left', [0, 1, 2, 3], 10, true); player.animations.add('right', [5, 6, 7, 8], 10, true); cursors = game.input.keyboard.createCursorKeys(); var fragmentSrc = [ 'precision mediump float;', 'varying vec2 vTextureCoord;', 'varying vec4 vColor;', 'uniform sampler2D uSampler;', 'uniform vec2 resolution;', 'uniform float time;', 'uniform vec2 mouse;', 'void main( void ) {', 'vec2 st = vTextureCoord.xy;', 'st *= resolution;', // this makes the box defined below tiny and repeat across the screen 'st = fract(st);', 'vec2 bl = step(vec2(0.25, 0.75) , st);', 'float pct = bl.x * bl.y;', 'vec2 tr = step(vec2(0.5, 0.00),1.0-st);', 'pct *= tr.x * tr.y;', 'pct *= 0.15;', // knock it down to gray 'vec3 src = texture2D(uSampler, vTextureCoord).xyz;', // game art 'vec3 dst = vec3(pct) + vec3(0.4);', // the overlay pattern 'vec3 color = vec3((dst.x <= 0.5) ? (2.0 * src.x * dst.x) : (1.0 - 2.0 * (1.0 - dst.x) * (1.0 - src.x)),' + '(dst.y <= 0.5) ? (2.0 * src.y * dst.y) : (1.0 - 2.0 * (1.0 - dst.y) * (1.0 - src.y)),' + '(dst.z <= 0.5) ? (2.0 * src.z * dst.z) : (1.0 - 2.0 * (1.0 - dst.z) * (1.0 - src.z)));', 'gl_FragColor.rgb = clamp(color, 0.0, 1.0);', 'gl_FragColor.w = 1.0;', '}' ] gameGroup =; gameGroup.add(platforms) gameGroup.add(player) gameGroup.add(ledge) scanlineFilter = new Phaser.Filter(game, null, fragmentSrc); scanlineFilter.setResolution(w/4,h/4);, 0, 2000, 2000); game.stage.smoothed = false; renderTexture = game.make.renderTexture(w/4, h/4, 'texture1'); renderTexture2 = game.make.renderTexture(w, h, 'texture2'); renderTexture2.renderer.renderSession.roundPixels = true; renderTexture2.baseTexture.scaleMode = PIXI.scaleModes.NEAREST; stageSprite = game.make.sprite(0,0, renderTexture); stageSprite.smoothed = false; outputSprite = game.add.sprite(0,0, renderTexture2); outputSprite.smoothed = false; outputSprite.filters = [scanlineFilter]; gameMatrix = new Phaser.Matrix(4,0,0,4,0,0); } function preRender(){ // gameGroup.visible = false; } function render(){ // gameGroup.visible = true; // renderTexture.render(player, game.stage.worldTransform, true); // renderTexture2.render(stageSprite, gameMatrix, true); // Debug game.debug.spriteBounds(player, 'pink', false) game.debug.body(player, 'red', false) game.debug.spriteBounds(stageSprite, 'yellow', false) game.debug.body(stageSprite, 'orange', false) game.debug.spriteBounds(outputSprite, 'cyan', false) game.debug.body(outputSprite, 'blue', false) } function update() { game.physics.arcade.collide(player, platforms); // renderTexture.clear() // renderTexture2.clear() outputSprite.sendToBack() renderTexture.render(, null, true); renderTexture2.render(stageSprite, gameMatrix, true); outputSprite.bringToTop() player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -150;'left'); } else if (cursors.right.isDown) { player.body.velocity.x = 150;'right'); } else { player.animations.stop(); player.frame = 4; } if (cursors.up.isDown && player.body.touching.down) { player.body.velocity.y = -350; } } </script> </body> </html> I've also tried scaling the game up then set the filter to the world but the filter is applied before it is scaled. game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE game.scale.setUserScale(4, 4) game.renderer.renderSession.roundPixels = true Phaser.Canvas.setImageRenderingCrisp(game.canvas) var scanlineFilter = new Phaser.Filter(game, null, fragmentSrc); scanlineFilter.setResolution(game.width / 4, game.height / 4) = [scanlineFilter]; Can anyone help me get this working or suggest a better approach?
  4. 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?
  5. 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 results of the Hue and Saturation shaders against a black background. Okay, so the stripes are twice as tall as they should be and the bottom-most stripe is outright missing, as though either the overlay or base were resized as some point in the process. But Value takes the cake: Not only do we have the same problem as above, but there are "teeth" that have appeared off the edge of the 100x100 image (4px in each direction, making a 108x100 image), and there are outlines around every stripe, and if you zoom in especially close you can see that some of the outlines are actually 2 pixels tall, one of near-black, and one of another dark colour, none of which is in the original Value overlay! I'm at a loss to tell if the problem(s) originates in my shader code or in Pixi, especially since tutorials around the net are mum about how to create a second shader2D uniform in any other setup but Pixi. I do want to work with Pixi for this project, however, so a fix for Pixi would be appreciated if the problem really is from there. Here's the HTML/GLSL code. Please don't mind the If statement, I've already had a few ideas on how to get rid of it: <html> <head> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <style> body { background-color: black; margin: 0; overflow: hidden; } p { color: white; } </style> </head> <body> <script type="text/javascript" src="libs/pixi.js"></script> <script id="shader" type="shader"> #ifdef GL_ES precision mediump float; #endif varying vec2 vTextureCoord; uniform sampler2D uSampler; //The base image uniform sampler2D overlay; //The overlay vec3 rgb2hsv(vec3 c) { vec4 K = vec4(0.0, -1.0 / 3.0, 2.0 / 3.0, -1.0); vec4 p = mix(vec4(, K.wz), vec4(, K.xy), step(c.b, c.g)); vec4 q = mix(vec4(p.xyw, c.r), vec4(c.r, p.yzx), step(p.x, c.r)); float d = q.x - min(q.w, q.y); float e = 1.0e-10; return vec3(abs(q.z + (q.w - q.y) / (6.0 * d + e)), d / (q.x + e), q.x); } vec3 hsv2rgb(vec3 c) { vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0); vec3 p = abs(fract( + * 6.0 - K.www); return c.z * mix(, clamp(p -, 0.0, 1.0), c.y); } void main(void) { vec4 baseRGB = texture2D(uSampler, vTextureCoord); vec4 overlayRGB = texture2D(overlay, vTextureCoord); if(overlayRGB.a > 0.0) { vec3 baseHSV = rgb2hsv(baseRGB.rgb); vec3 overlayHSV = rgb2hsv(overlayRGB.rgb); // Hue // vec3 resultHSV = vec3(overlayHSV.x, baseHSV.y, baseHSV.z); // Saturation // vec3 resultHSV = vec3(baseHSV.x, overlayHSV.y, baseHSV.z); // Value vec3 resultHSV = vec3(baseHSV.x, baseHSV.y, overlayHSV.z); vec3 resultRGB = hsv2rgb(resultHSV); gl_FragColor = vec4(resultRGB.rgb, baseRGB.a); } else { gl_FragColor = baseRGB; } } </script> <script type="text/javascript" src="replaceTest.js"></script> </body> </html> And here's the JS: var width = window.innerWidth; var height = window.innerHeight; var renderer = new PIXI.WebGLRenderer(width, height); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); var sprite = PIXI.Sprite.fromImage('flat.png'); sprite.x = width / 2;//Set it at the center of the screen sprite.y = height / 2; sprite.anchor.set(0.5);//Make sure the center point of the image is at its center, instead of the default top left stage.addChild(sprite); //Create a uniforms object to send to the shader var uniforms = {} uniforms.overlay = { type:'sampler2D', value: PIXI.Texture.fromImage('stripesVal.png') // or stripesSat, stripesHue, etc } //Get shader code as a string var shaderCode = document.getElementById("shader").innerHTML; //Create our Pixi filter using our custom shader code var rasShader = new PIXI.Filter(null,shaderCode,uniforms); console.log(rasShader.uniforms); sprite.filters = [rasShader]; function update() { requestAnimationFrame(update); renderer.render(stage); } update(); Any help would be appreciated!
  6. 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
  7. 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!
  8. 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?
  9. 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
  10. 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.
  11. 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.
  12. 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..
  13. 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.
  14. 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 ?
  15. 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!
  16. 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!
  17. 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.
  18. 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.
  19. 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.
  20. 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
  21. 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
  22. 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.
  23. 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.
  24. 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?