Sign in to follow this  

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?



Share this post

Link to post
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(){'mouseenter', function(e){      this.cursor.x = e.offsetX;      this.cursor.y = e.offsetY;    }.bind(this));'mouseleave', function(e){      this.cursor.x = null;      this.cursor.y = null;    }.bind(this));'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 :)

Share this post

Link to post
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:

Share this post

Link to post
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 object.@el.addEventListener '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}

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.