• Content count

  • Joined

  • Last visited

About westy

  • Rank

Contact Methods

  • Twitter
  1. 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?
  2. How to draw an infinitely zoomable SVG file?

    Thanks Ivan! using PIXI SVG Graphics is giving me great results, cheers.
  3. 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.
  4. 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.
  5. 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.
  6. 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?
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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?
  12. 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?
  13. Drag and drop without frame lag

    @ivan.popelyshev I'd love to come up with some sort of general solution, but I wouldn't even know where to begin! I don't have enough knowledge of how PIXI works to make any authoritive suggestions for what to do here.
  14. Drag and drop without frame lag

    I've been trying to implement drag and drop for some of the sprites in my project. I've managed to get it working to some extent using code that I found in a tutorial/example somewhere - the exact source escapes me, apologies. (It's in typescript but should be pretty much recognisable as js) constructor() { this.on("mousedown", this.startDrag); this.on("mouseup", this.endDrag); this.on("mouseupoutside", this.endDrag); this.on("mousemove", this.onDrag); } private startDrag(e: PIXI.interaction.InteractionEvent) { this.dragging = true; e.data.getLocalPosition(this.parent, this.lastDragPos); } private endDrag() { this.dragging = false; } private onDrag(e: PIXI.interaction.InteractionEvent) { if (this.dragging) { e.data.getLocalPosition(this.parent, this.dragPos); this.position.x += (this.dragPos.x - this.lastDragPos.x); this.position.y += (this.dragPos.y - this.lastDragPos.y); e.data.getLocalPosition(this.parent, this.lastDragPos); } } However this approach seems to have a number of problems. The deal breaker here is that the object is always one (or maybe even more??) frames behind the mouse. To me this is unacceptable and leads to all kinds of nonsense like needing the mouseupoutside event to work properly. There are a whole lot of edge cases, like letting go of the dragged object when it's over another draggable object causes problems, etc, etc... I'm guessing that the first problem is caused because this is using the event system and isn't coupled to the render loop. Is there a better way to do drag and drop in PIXI? Also open to any hints on mouse interaction in general, the documentation hasn't been hugely helpful to me (i.e. what's the purpose of the interactionManager?) Thanks!
  15. The documentation shows toLocal to only take two parameters. The source code linked to in the documentation also confirms this. Is the documentation outdated? I'm using typescript, and the typings file also references the current documentation (not that you can do anything about that, but it does present a problem for me).