CODEWITHSUNDEEP
htmleventscanvascoffeescripteaseljs
Gruff
Gruff

Reputation: 669

EaselJS mouse events not working - debug canvas appears to be catching them

I'm building an app in HTML5, using CreateJS (EaselJS), Box2D and written in CoffeeScript using Browserify (built with Gulp).

I've just spent the best part of a half a day beating my head against the keyboard trying to work out why I couldn't get my EaselJS events working. Window/document events were fine. Any and all EaselJS event just did nothing. It turns out the debug canvas was trapping them, overlaying invisibly.

I accidentally discovered this eventually by toggling the debug canvas on and off which allowed the events to get though and they started responding.

So now, my question is: what's the best way to handle events so that they will work

a) without me first toggling the debug canvas, and

b) when debug is active, how can I pass events through to the main canvas below so that it can handle them?

Is that possible? It would be ideal that even with debug draw on, mouseevents worked as normal.

HTML is this:

<body>
  <canvas id="arcade"></canvas>
  <canvas id="debug"></canvas>
    <button id="toggle-debug">Toggle Debug</button>

    <script src="compiled.js"></script>
</body>

My app class sets up events calling bindEvents from its constructor thus:

bindEvents: =>
  # Pause when window is blurred
  window.addEventListener 'blur', @setPaused
  # Play when window is focused
  window.addEventListener 'focus', @setPlay
  # Toggle showing/hiding of the Debug <canvas>
  document.getElementById('toggle-debug').onclick = @toggleDebug

toggleDebug: =>
  @showDebug = !@showDebug
  # Shows/hides Debug canvas
  Universe.debug.canvas.style.display = (if @showDebug then 'block' else 'none')

setPlay: =>
  @play = true
  createjs.Ticker.setPaused false

setPaused: =>
  @play = false
  createjs.Ticker.setPaused true

My objects (which contain box2d body in @body and easelJS display objects in @view) set up their events in a similar method, e.g.

bindEvents: ->
  @view.on "click", () =>  alert("ball #{@options.id} clicked")

Upvotes: 0

Views: 508

Answers (2)

Lanny
Lanny

Reputation: 11294

Unfortunately the DOM does not provide a good way to ignore mouse events on an object, or pass them through. You can however use the Stage.nextStage property.

  1. Create an EaselJS stage, and pass in your debug canvas
  2. Set the nextStage property on the new Stage to the stage that is below that one.

Here is a quick code sample:

var stage2 = new createjs.Stage("DebugCanvasId");
stage2.nextStage = stage1;

EaselJS 0.7.0 added the nextStage property, but the very latest NEXT version in GitHub vastly improved support for this. There is a demo in GitHub where you can see this working (TwoStages.html). Here is the online sample: http://createjs.com/Demos/EaselJS/TwoStages.html

Cheers.

Upvotes: 1

Gruff
Gruff

Reputation: 669

I've solved part a) by changing the html to 

<canvas id="debug" style="display: none;"></canvas>

I also tried doing this programmatically in the game (toggling the debug twice) but for some reason it didn't work. I don't know why.

I'd still like to get an answer to B though. How to pass mouse events though the debug canvas to the one below.

Upvotes: 0

Related Questions