4kbar

Members
  • Content Count

    11
  • Joined

  • Last visited

  1. Thanks; just checking! The second example does work, it just feels odd to have to cache. (And nice hack on the containsPoint!)
  2. Hi @PixelPicoSean! Quick question for you: Has Pixi's mutation of interaction events ever given you trouble? Last night, I was trying to track the distance that a user's cursor moved over a full-screen view after the mouse button had been pressed and held. Here's some code to explain: var dragSurface = new PIXI.Container(); dragSurface.interactive = true; dragSurface.hitArea = new PIXI.Rectangle(0, 0, 999999, 999999); const inputdown$ = Kefir.fromEvents(dragSurface, 'mousedown'); const inputup$ = Kefir.fromEvents(dragSurface, 'mouseup'); const inputmove$ = Kefir.fromEvents(dragSurface, 'mousemove'); // This *doesn't* work as expected, // because downEvent is mutated by future events. const drag$ = inputdown$.flatMap((downEvent) => { return inputmove$.takeUntilBy(inputup$).map((moveEvent) => { x: moveEvent.data.global.x - downEvent.data.global.x, y: moveEvent.data.global.y - downEvent.data.global.y }); }); // This *does* work as expected, // because I'm retaining reference to downEvent's original values. const drag$ = inputdown$.flatMap((downEvent) => { var ox = downEvent.data.global.x; var oy = downEvent.data.global.y; return inputmove$.takeUntilBy(inputup$).map((moveEvent) => { x: moveEvent.data.global.x - ox, y: moveEvent.data.global.y - oy }); }); This feels ... wrong ... to me. I think this mutation would also affect your examples above. Any thoughts?
  3. Turns out it was very easy to fix from within InteractionManager.prototype.dispatchEvent. I'll move this over into a github issue. Cheers!
  4. Github archaeology time: Event delegation issue was raised in #625; @xerver introduced a solution in #914, which was implemented in EventTarget.js. EventTarget.js was later ousted in favor of EventEmitter3 (#1532). In #1532, you commented that Sounds right to me! But so far, I can't seem to find any version of InteractionManager that handled bubbling. I'll poke around a little more. If I can't find anything, maybe I can contribute. Despite the fact no one seems to have missed this, I think it's an important feature!
  5. After spending some time with InteractionManager and reviewing some older discussions, I'm still scratching my head. If someone could offer an example of event delegation / bubbling in Pixi.js, I'd be grateful!
  6. My question may not have been very precise. What I'd really like to do is avoid adding event listeners to specific Sprites (beyond, perhaps, flagging them as interactive), and instead add the event listener to a parent Container. By analogy: <div id="board"> <div class="piece" id="1">0</div> <div class="piece" id="2">0</div> </div> var boardElement = document.getElementById('board'); boardElement.addEventListener('click', function (e) { // e.target points to the pieces when they are clicked }); I'd like to listen to the pieces Container in a similar way.
  7. I'm learning Pixi.js with the goal of creating a game with a lot of UI complexity (imagine something like FreeCiv). I'm starting with small projects and trying to learn good fundamentals. However, I'm struggling to handle interactions in an elegant and flexible way. (cc @PixelPicoSean) I'm creating a Checkers game. Something like this: Here is the basic setup: var gameState = [1,1,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2]; // Create some textures var boardTexture = PIXI.Texture.fromImage(/*...*/); var pieceSprites = new PIXI.Texture.fromImage(/*...*/); /*...*/ // Create and append our renderer /*...*/ // Create the scene graph var stage = new PIXI.Container(); var board = new PIXI.Sprite(boardTexture); stage.addChild(board); // Add some pieces var pieces = new PIXI.Container(); gameState.forEach(square => { /*...*/ var piece = new PIXI.Sprite(/*...*/); piece.interactive = true; board.pieces(piece); }); stage.addChild(pieces); // Render with requestAnimationFrame /*...*/ So far, so good! Now, I'd like for each of the 24 pieces to be draggable by the user. No problem: dragging is just a function of user events. But here's where I stumble. I could attach callbacks to each of the piece Sprites (this seems to be the idiomatic Pixi.js way). However, my instinct is want to listen to the pieces Container instead. In the DOM Event world, events firing on a piece would bubble up to pieces, and the resulting event.target would point to a piece. In short: Is there any way to emulate "event delegation" here? EDIT: The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.
  8. Awesome; thanks for all the examples! I may check out Kefir as well.
  9. Thanks for the pointer on fromEvent. That seems a lot more idiomatic. Can you elaborate? Personally, I find myself attracted to the idea single stream that I can fork later on. Is there a downside to starting with a single stream, and mapping out from there? I've really enjoyed the learning process. It seems that game development is often a very imperative and object oriented world (and perhaps for good reasons in some cases!). But it has been interesting to explore the Reactive style. It makes a lot more sense to my brain sometimes....
  10. Cool! Just wanted a sanity check. This method seems to be working great. I'll report back if I get around to doing a more proper integration with the InteractionManager. P.S.- If you're building an app with lots of interactions, I highly suggest watching this egghead.io series on Cycle.js. I don't use this framework, but these videos helped change how I think about building applications. Very cool patterns.
  11. First of all, let me say that I love the apparent philosophy of PixiJS: do rendering well, and let userland be userland. Awesome. I'm playing with different ways of handling interactions that originate within the scene graph. I'm not a fan of declaring interaction logic on sprites themselves (e.g., using the '.on' method and callbacks). Instead, I'd prefer something that functions more like event delegation: a single listener on my scene that pipes out all relevant events for me to slice and dice later. Currently, I'm experimenting with using the Sprite prototype to feed all events into an RxJS observable. More concretely: // Create a new observable var pixiEventStream = new Rx.Subject(); // Hack into Sprite's prototype, redirecting all 'mousedown' and 'mouseup' events into the observable var toStream = (e) => pixiEventStream.onNext(e); PIXI.Sprite.prototype = Object.assign(PIXI.Sprite.prototype, { mousedown: toStream, mouseup: toStream, // etc for all events PIXI detects }); // ... // Later, I create a bunch of sprites, some with {interactive: true} // But I *don't* specify any .on callbacks // ... // Later, I can deal with the events // Here, I'm filtering out only the mousedown events for further processing var mouseDownEvents = pixiEventStream.filter(e => e.type === "mousedown"); mouseDownEvents.subscribe((e) => { var sprite = e.target; // do something with a sprite on mousedown }); Is there a less hacky way of doing this? Has anyone tried something similar? Cheers!