Skip to content

DOM button's event handler cannot be used to change scenes #12

@bmoren

Description

@bmoren

When using a DOM button, you cannot use mgr.showScene(myScene) inside of the button's event handler to move to another scene in some situations

What's strange is that the event will fire, for example if you add a console.log() to the handler's function it will be called, but the progress function will not work.

If you move to a 'new' scene it will sometimes work, but if you try to re-visit a scene it will fail in my experience.

I believe this has to do with setupExecuted: true withing the function not being reset and thus blocking. Maybe this has something to do with the scoping of the event handlers?

I will follow up with an example of this behavior.

In the meantime, a solution is to create a custom button and render it to the canvas without using an event handler to resolve the scene change:

/*
the one caveat of this is that you should not have overlapping buttons from scene to scene (aka, dont place buttons on the same place on the next scene)

Six parameters for the function:
1: the 'text' for the button : String
2: the scene you want the button to move to : function / name of scene
3: x position : Number
4: y position : Number
5: width : Number
6: height : Number
*/

function specialButton(t,location, x, y, w,h ){
  
  //BEGIN BUTTON CUSTOMIZATION
  //(you'll likey want to clean this up for your use case) ;)
  push() // push/pop just to isolate this incase you want to do other things elsewhere to prevent interference.
    //drop shadow
    fill(0)
    rect(x+2,y+2,w,h)

    //rect
    fill(220)
    rect(x,y,w,h)

    //text
    noFill()
    stroke(0)
  //think about textSize, fonts, etc. if you'd like!
    textAlign(CENTER,CENTER);
    text(t,x,y+h/2,w)
  pop()

  //END BUTTON CUSTOMIZATION
  
  //point rect collision detection
  if (mouseX >= x && mouseX <= x + w && mouseY >= y && mouseY <= y + h) { 
      cursor('pointer') //cursor swap
    if(mouseIsPressed){
      mgr.showScene(location) // load the new scene
    }
  }else{
    cursor(ARROW) //cursor swap
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions