Jump to content

Paint-like app: Graphics, interactivity and me


Recommended Posts

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?



Link to comment
Share on other sites

Ok, me again :D


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

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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}
Link to comment
Share on other sites

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