4kbar Posted February 6, 2016 Share Posted February 6, 2016 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. Quote Link to comment Share on other sites More sharing options...
xerver Posted February 6, 2016 Share Posted February 6, 2016 Event delegation should work fine, the interaction manager bubbles events to parent objects. Quote Link to comment Share on other sites More sharing options...
4kbar Posted February 6, 2016 Author Share Posted February 6, 2016 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. Quote Link to comment Share on other sites More sharing options...
4kbar Posted February 6, 2016 Author Share Posted February 6, 2016 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! Quote Link to comment Share on other sites More sharing options...
xerver Posted February 7, 2016 Share Posted February 7, 2016 This used to be built into the interaction manager, it just bubbled events to parents until we ran out of them or stopPropagation was called. But it seems like that code is gone... Quote Link to comment Share on other sites More sharing options...
4kbar Posted February 7, 2016 Author Share Posted February 7, 2016 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 Quote We decided that since InteractionEvents are the only events where it makes sense to bubble, the interaction manager does that work instead of making the event system handle it. 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! Quote Link to comment Share on other sites More sharing options...
xerver Posted February 7, 2016 Share Posted February 7, 2016 Weird, I must have forgotten to actually implement it. I'm terrible. lol Quote Link to comment Share on other sites More sharing options...
4kbar Posted February 7, 2016 Author Share Posted February 7, 2016 Turns out it was very easy to fix from within InteractionManager.prototype.dispatchEvent. I'll move this over into a github issue. Cheers! Quote Link to comment Share on other sites More sharing options...
acbabis Posted January 30, 2017 Share Posted January 30, 2017 Was there any resolution on this? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.