Paint-like app: Graphics, interactivity and me

[multiplegeorges]

Hey all,

 

I am trying to make a very basic prototype of a Paint-like applications.

 

Is it possible to bind a mousemove event to the Stage that I create?

If I bind an event like this:

el = this.renderer.view;el.addEventListener('mousemove', function(e){ console.log('move); });

I don't get a log event, so I assume that Pixi is catching and squashing the event.

 

What's the Pixi way of binding mousedown, mousemove, and mouseup events to a Stage instance?

Do I need to create an interactive, but transparent Graphics instance to cover the entire thing and have it handle the events?

 

Thanks!

[thearchitect]

You probably need to bind your event directly to the canvas element and then map the mouse movement event's coordinates to your stage.

 

But I could be wrong. I also just started using PIXI. 

[thearchitect]

Ok, me again

 

Today I implemented mouse interactions.

 

What I did:

var MyGame = {  cursor: {     x: null,     y: null   },    init: function(){    this.bindEventListeners();  },  bindEventListeners: function(){    this.target.addEventListener('mouseenter', function(e){      this.cursor.x = e.offsetX;      this.cursor.y = e.offsetY;    }.bind(this));      this.target.addEventListener('mouseleave', function(e){      this.cursor.x = null;      this.cursor.y = null;    }.bind(this));      this.target.addEventListener('mousemove', function(e){      // do as little as possible here!      // just save the coordinates so the game loop can use them to do it's thing      this.cursor.x = e.offsetX;      this.cursor.y = e.offsetY;    }.bind(this));    },  // this is one of the methods which is called around 60 times per second  update: function(){    // do something with this.cursor      }};

Since I have a game loop that runs roughly 60 times per second. I will use the coordinates when I need them.

If you do too much stuff in the mousemove handler, it will hurt performance because there are potentially a lot of events firing.

 

Hope this helps

[achexi]

You can, you first need to set your stage to interactive mode 

stage = new PIXI.Stage(0xFFFFFF, true) // second parameter indicates interactivity

then you can simply do:

stage.mousemove = function(mouseData) {  console.log("move");};

you can also then bind mousedown mouseup click etc. Have a look here for a list: http://www.goodboydigital.com/pixi-js-gets-interactive/

[thearchitect]

Oh nice! Thank you! 

I was wondering why global.x and global.y were -10000 in the console and didn't bother with it. But it works!

[multiplegeorges]

Awesome, thanks for your input guys.

 

It turns out that Chrome stopped emitting mousemove events. Once I restarted Chrome, it all started working again.

 

I ended up with this solution, in coffeescript:

// In the initializer for the [email protected] 'mousedown', (e) => @start(e)@el.addEventListener 'touchstart', (e) => @start(e)@el.addEventListener 'mousemove', (e) => @move(e)@el.addEventListener 'touchmove', (e) => @move(e)@el.addEventListener 'mouseup', (e) => @end(e)@el.addEventListener 'touchend', (e) => @end(e)@el.addEventListener 'touchleave', (e) => @end(e)// Each event then gets remapped to the right relative coords with:_position: (e) ->      x = e.clientX || e.targetTouches[0].clientX      y = e.clientY || e.targetTouches[0].clientY      absx = x - @el.offsetLeft      absy = y - @el.offsetTop      {x: absx, y: absy}