• Content count

  • Joined

  • Last visited

About westy

  • Rank

Contact Methods

  • Twitter
  1. @ivan.popelyshev Thanks! I'm not having much luck as I am struggling to understand both why such clipping is necessary (Does PIXI bleed textures internally or something to overcome some webgl issues?), as well as where the (0.5, 0.5, w-0.5, h-0.5) / (w,h) comes from. I also can't find any documentation on the texture transform that the sprite mask example uses, and how that factors in here.
  2. @Exca that looks great! However, I notice there's still some margin/bleed around the edge of the sprite, any idea what's causing this and if I can prevent it?
  3. 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.
  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. How to draw an infinitely zoomable SVG file?

    Thanks Ivan! using PIXI SVG Graphics is giving me great results, cheers.
  6. How to draw an infinitely zoomable SVG file?

    @ivan.popelyshev Thank you for your reply! The texture will be full screen and will need to update at 60fps, so pushing a brand new huge texture to the GPU each frame sounds like it would be too expensive. Sadly I'll need multiple colours (I guess I could use multiple meshes though!) Thankfully I don't need gradients (well, what I really need is a signed distance field texture, but from what I've seen this can be generated at some cost in a fragment shader). I'll give you some more details as to my intended application: The game world is a large map composed of multiple provinces. The player can zoom in/out of this map to a big degree. I want the map to have animated details, e.g. coastal waves, and fun textures etc. It strikes me that the best way to do this without loading in huge textures would be to generate the detail dynamically in a fragment shader. My end goal is to have a full-screen fragment shader with access to the following information per pixel (besides simply x/y): Which province (or ocean, if no province) Distance from the border (Using a signed distance field technique, e.g. Jump Flooding) My idea so far is to use an SVG image that would look like this: And then, if PIXI is able to render it zoomed in at arbitrary resolution (this is where I'm stuck), that could be used as input for a fragment shader with the required information.
  7. I have a detailed SVG file, and I want to be able to zoom in and out of it in-game, by a large factor, in realtime, while still maintaining perfectly crisp antialiased edges. From what I've gathered, PIXI's SVG support is limited to pre-rendering a raster texture on load, which wouldn't work here as the required resolution for the closest zoom level would create an unmanagably huge texture. I don't need support for gradients etc, just simple colours and paths. I could triangulate the SVG file using something like svg-mesh-3d and then render it out as a mesh, however that leaves the question of how to render out the colours properly - I'm not quite sure how a PIXI mesh object could be made to handle this. Perhaps some kind of shader? Also, the triangulation has the downside that smooth curves will have a limited 'resolution' depending on the number of triangles, but that's not a massive issue for my application. Is there a better way I'm missing? If not, any guidance on how to handle the colour rendering on the mesh would be appreciated.
  8. Thanks Ivan, that sounds exactly like what I'm after. I'll give it a try. I don't really like the idea of forking PIXI functionality but I guess in this case it's a pretty subtle change.
  9. I have a horizontally tiling texture that I want to use to create flexible ropes in PIXI. I followed the same general path as is mentioned here, and it works, however I do have a slight worry. Every different length of rope in this case means another texture in image memory with size proportional to the rope length. I want to have a large number of ropes, all of different lengths. This feels quite expensive to me - is there a more efficient way to do this that doesn't involve baking a new texture for every rope length?
  10. Advanced interaction event handling

    This is what I've been doing, however event bubbling means that the modal will close when the modal itself is clicked, which is something I don't want.
  11. Advanced interaction event handling

    All right, but how does that help? It's easy enough to listen for a click event anywhere on the stage (just make the stage interactive), what I need to do is essentially filter out the events that passed through certain specific display objects.
  12. Advanced interaction event handling

    @mattstyles Thank you for your post! Although your thoughtful statements on architecture have given me a lot to think about, I'm still looking for an answer to my question. You seem to assume that I have some sort of 'close button', which would certainly be a technically trivial problem (although, as you note, setting up a good architecure isn't trivial). I'm simply looking for a way to have a panel or something disappear when the user clicks anywhere other than the panel. The architecture is one matter however I already have certain systems in place for that aspect.
  13. Advanced interaction event handling

    @mattstyles thanks for your reply! I think PIXI implements some level of event bubbling/capturing, at least through my experiment. Could you give an example of the decoupling to which you are referring? The example I provided is a simple one would never be done like that in a real use case. I'm simply interested in knowing a not terrible way to accomplish what I need to accomplish. To give some context, the reason I want to do this is to have some UI that will go away when the mouse is clicked anywhere except on the UI itself.
  14. Let's say I click on a sprite, which might be nested in other containers and so on, each with their own onclick event listeners. Each of those objects will fire an onclick event, with the most nested object firing first. What's the best way to go about passing information about the inner nested click events to the outer objects? To put it more specifically, how can I let my outer objects know if their click event originated as a direct click to them, or as a click to another object that bubbled through? I attempted to attach a property to the nested onclick event like so: var button = new PIXI.Sprite(); button.interactive = true; button.on("mousedown", function(e) { e.originatedFromButton = true; }); This works to an extent (the outermost handler can read for the property) however it appears that the interaction manager uses a common object for event data, which means that this property hangs around on all future events. I could delete the property at the top level event handler but that is a very inelegant solution which I'd like to avoid if possible. Anyone have any suggestions as to a better way to accomplish what I need?
  15. Drag and drop without frame lag

    I looked through the code, but I couldn't see anywhere it solves the frame lag problem (or any of the other problems I mentioned) - perhaps I just missed it?