Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

SugarCube close UI box pause

edited September 2015 in Help! with 1.x
Whenever I close the UI box (e.g. save screen) in SugarCube I'm getting a 1 second pause between clicking close and the dark UI overlay disappearing. I want it to be faster, but can't seem to make it faster. Is there CSS controlling this I'm missing?


  • edited September 2015
    Assuming that you're referring to the built-in Saves dialog, the answer depends on the version of SugarCube you're using.

    SugarCube 1.x dialogs use a hard-coded 200ms delay via the jQuery fadeTo()/fadeOut() methods to control the display state and opacity of the overlay.

    SugarCube 2.x dialogs use CSS transitions (see: ui-dialog.css, lines 21–31) to control the visibility and opacity of the overlay.
  • edited September 2015
    SugarCube 1, but it seems more than 200ms.

    I checked it again, and what happens is it's in steps. The ui dialog takes its 200ms to disappear, then then overlay takes another step to disappear. I want it to be one flowing thing rather than distinct steps.

    If that's hard coded I suppose I can experiment with transitioning to 2.x.
  • Upon dialog close, the dialog itself is closed immediately, there is no fade or transition. If it is taking 200ms (or any amount of time, really) to close, then something is broken somewhere.
  • edited September 2015
    This is what I specifically mean:

    The UI popup goes first, then the black background goes, giving it a noticeable step effect. This happens with the save/load screen as well. I'd like both elements - the dialog and the background to disappear at the same time.

    Is that normal?

    EDIT: Time linking didn't work. It's at 40 seconds in.
  • edited September 2015
    I cannot tell when you're clicking outside the dialog box, so that not as helpful as it might be. It's also extremely dark and a video, so trying to demonstrate timings with that is also not as helpful as it might be.

    Normal? Assuming you mean, is it normal for the dialog box to simply close while the overlay fades out over 200ms? Yes. That was previously established up thread. If you really want to compare what you're seeing to what's normal, simply compile an empty project with vanilla SugarCube (i.e. sans any format hacking or library inclusions) and compare.

    As to how to get both the dialog box and overlay to close, roughly, simultaneously, then answer depends on the version of SugarCube.

    SugarCube 1.x: Since, as noted previously, the 200ms overlay fade out is hard-coded, changing it will require hacking the story format.

    SugarCube 2.x: Since, as noted previously, the 200ms overlay fade out is controlled by CSS transition (see: ui-dialog.css, lines 21–31), changing it only requires creating a style rule to do so. For example, to disable the transition completely:
    #ui-overlay:not(.open) {
    	-webkit-transition: none;
    	-moz-transition: none;
    	transition: none;
  • edited September 2015
    The moment I click is exactly when the dialog box disappears. You can then see that the background black layer disappears a fraction later than the dialog box. If you freeze frame at the right moment you can see a noticeable spot where there is no popup, but still a black opaque layer.

    I tried removing my javascript and css, and it appears to go faster.

    But I still get the slowdown even when I load a page that has no background images, nothing - just the UI. Given I haven't touched the UI except added extra time to the fadein, I'm perplexed.
  • edited September 2015
    The freeze frame at 43 seconds shows it happening. This lasts for longer than it does with css removed, and I can't really get why if this is not controlled by css.


    Though I suppose this is as good a reason to upgrade to SugerCube 2 as any. ;)
  • edited September 2015
    Well, more testing is that my custom css appears to be completely disabling the "transition", so there is no fadeout. It is turned from a transition to a step effect somehow. If I remove the css, I get the transition effect. If I put the css back in, the transition disappears.
  • edited September 2015
    Okay well found the culprit:
    #ui-overlay {
    -webkit-animation: fadeInUI 500ms 1 forwards;
    transition: all 500ms linear;

    That was screwing things up. I dunno why, but it was.

    I removed that from my CSS and all fixed now, thank you for your responses as always. :)
  • edited September 2015
    Hmm. That might do it, yes. I'm unsure why you even had that rule in place.

    Anyway, I'm glad you're back on track.

    PS: And now you've got me wanting to play your game (I'm a sucker for the Mythos). :P
  • edited September 2015
    Think I wanted to play around with the fade-in timings and opacity, but it also seemed to have affected the fade-out as well.

    Until I upgrade to SugarCube 2 I can put up with the defaults since I think all I'm doing in sugarCube 1 is coding in bugs.

    Thanks for the interest in the game!
Sign In or Register to comment.