mveteanu / p5.scenemanager Goto Github PK

Currently if you have rectMode(CENTER), the button rectangles are drawn correctly relative to the center, however the "hitbox" for the button is still in the normal position, rather than centered

mouseClicked and windowResized aren't handled by the scene manager, likely among other functions. I've temporarily worked around this in my own project by using mgr.scene.oScene.mouseClicked() to reference the function in the scene object. I'll probably try adding support for these functions later when I've looked into it more.

There seems to be some major issues when using this lib in conjunction with p5.play and using it's sprites. Scenes get mixed together, collisions start to break, etc. Here's an example of this from a project I'm working on:

This lib doesn't seem to currently be able to handle the Group image/sprite structure that p5.play exposes. The only fix for this that I have found is to clear all p5.play groups of all sprites and then re-calling the setup function on the scene before transitioning. However this causes some intense lag as p5.play loads in new assets for the different scenes and creates all the sprites. To get around the lag of loading assets per-scene, you could load in every single asset at the very beginning, but that causes intense lag right from the start, and is a massive waste of resources.

If draw() or a function that calls draw() like windowResized() is called in the setup() function defined in a scene object, setupExecuted will not have yet been set to true and setup will again be called, resulting in runaway recursion. The workaround I'm using is to set setupExecuted to true before calling a function that calls draw(), as demonstrated here:

this.setup = function() {
     this.sceneManager.scene.setupExecuted = true;
     this.windowResized(); //NOTE: Requires setupExecuted override above to prevent infinite recursion
    }

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

I am having lots of trouble using this in my project. I am not directly importing in browser, so I have to import as additional library. I am having hard time exporting main function for babel/snowpack setup.

Can someone make this an exportable Class?

i am getting a hang of using scenemanager and P5. is there a way to call to the preload() in individual scene?

Really loving this p5 library. Great work!

Something I've been wanting in a few of my projects is an ability to easily execute code when changing away from a scene, something like an exit() to complement enter().

I find it's useful when interacting with the DOM, e.g. in this pattern:

class MyScene {
  enter() {
    select('#html-form').show()
  }

  exit() {
    select('#html-form').hide()
  }
}

Thoughts on if this is a worthwhile feature? If so, happy to send you a pull request.

Event handling needs to pass arguments that p5js supports itself