Jump to content

Interactions question, based on Checkers


Recommended Posts

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);

// Add some pieces
var pieces = new PIXI.Container();
gameState.forEach(square => {
  var piece = new PIXI.Sprite(/*...*/);
  piece.interactive = true;

// 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?

The answer should be yes, but the InteractionManager does not currently implement bubbling. (I opened #2342 on github.) It's an easy fix.

Link to comment
Share on other sites

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>
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.

Link to comment
Share on other sites

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


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! ;)

Link to comment
Share on other sites

  • 11 months later...

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...