Jump to content

Search the Community

Showing results for tags 'filters'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • 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

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

  1. Hello! This will be my first post here. RPG Maker MV is a small game engine which uses Pixi.js as it's main codebase. Because of this, pixi filters are compatible with the engine by way of this third party plugin. RPG Maker is a weird and finicky piece of software with a few strange pieces of design, so it's not entirely clear to me how far from standard pixi it is. I am looking to make a custom filter that involves both the limiting of a games palette to a set amount of indexed colors, as well as dithering those colors to create a smoother effect. You can see more details of wh
  2. Hello, fellow game makers! Last day I was wrestling with PIXI's filters, or to be more precise, with applying filter to local coordinates of DisplayObject to make it scaling-consistent. So I got a smoke shader from the bottom of this tutorial and made it work at local coordinates of an object. I even adjusted frame and vTextureCoord for resolutions other than 1. And look at this gorgeous pearl-like texture! It is even animated and looks so beautiful! But alas, not on mobile... This is Samsung A3 2016 with resolution 1280x720 and devicePixelRatio=2 I'm pretty s
  3. I'm trying to apply a series of filters to a Graphics object: const filters = [ new PIXI.filters.BlurFilter(10), colorMatrixFilter ]; Is there any way with filters to render the original graphics on top? I tried duplicating the Graphics object without filters but it's slow. In SVG it would be done like this: <filter id="myFilter"> <feGaussianBlur in="SourceGraphic" stdDeviation="10"/> <feColorMatrix mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="result"/> <feComposite in="SourceGraphic" in2="result" operator="atop"/&g
  4. 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 sho
  5. 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.
  6. 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
  7. 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? https://pixijs.io/pixi-filters/docs/PIXI.filters.ColorMapFilter.html 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 b
  8. 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());
  9. Hi, I'm trying to implement the pixi-v4 filters in phaser 2 (CE Version). I'm especially interested in this one: https://github.com/pixijs/pixi-filters/tree/master/filters/zoom-blur I've noticed this example (http://phaser.io/examples/v2/filters/pixi-filter) in phaser 2 is outdated/not working (link to pixi filter is wrong). Even when i fix the link (e.g. https://github.com/photonstorm/phaser/blob/v2.6.2/filters/pixi/RGBSplitFilter.js) 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 q
  10. Hello there, I am trying to load a pixi glow filter for a phaser project I am working on. I followed this tutorial http://phaser.io/examples/v2/filters/pixi-filter 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
  11. 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></c
  12. 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
  13. I would like to use Pixi v4 filters in Phaser node application. I´ve read this tutorial: http://phaser.io/examples/v2/filters/pixi-filter 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: https://github.com/pixijs/pixi-filters/tree/master/filters/outline 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
  14. 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.
  15. 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!
  16. 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
  17. 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.
  18. 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!
  19. 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 perform
  20. 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
  21. 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: http://dcaclab.com/en/experiments/9900-a-simple-test-circuit Thanks
  22. 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
  23. 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: https://jsfiddle.net/ybsyzko9/3/ But in v4 it reaches the "end" and repeats the last pixels: https://jsfiddle.net/oy2evb47/1/ 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.
  24. 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: PIXI.AbstractFilter.call(this, [ '#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_Fra
  25. 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!
×
×
  • Create New...