This is the testing Godot forums! All forum posts unique to this forum will be deleted! Please use the main forums here for any posts you want to keep. All forum rules still apply.

GUI Controls Redraw Badly While Resizing Window

AspiringGameDevAspiringGameDev Posts: 8Member
edited June 22 in GUI

I'm trying to build a tool with Godot, and I've created a header for a list control.

The problem is that whenever I resize the window, the header is redrawn all out of whack. It gets stretched, moved and flickers before finally drawing properly when I finish resizing the window.

It looks really bad! It's especially bad because it's doing all this redrawing needlessly: It happens primarily when the window height is being resized, which shouldn't affect the header at all because it's only allowed to resize horizontally.

I have a screen recording of it happening, but this forum isn't letting me attach it to this post. And... I apparently can't post still image screenshots of the hierarchy or how it's laid out onscreen either.

I'm using:

  • Godot 3.2.1 Stable
  • elementaryOS 5.1.5 (ubuntu 18.04) with all updates
  • Ryzen 3900X
  • Radeon RX590 8GB

Here is what my control hierarchy looks like (edit: updated with info about settings):

HBoxContainer (Layout == Top Wide)
    TextureRect
    VBoxContainer (HSizeFlags == Fill & Exp)
        TextureRect (the top hilite line.  Scale == Tile; HSizeFlags == Fill)
        HBoxContainer (HSizeFlags == Fill)
            TextureRect
            TextureButton
            TextureRect2
            TextureRect3 ("Col 1" label)
            TextureRect4 (exp rgn of "col 1". Scale == Tile; HSizeFlags == Fill & Exp)
            TextureRect5
            TextureRect6
            TextureRect7
            TextureRect8
            TextureRect9
            TextureRect10
            TextureRect11
            TextureRect12
            TextureRect13
            TextureRect14
        TextureRect2 (bottom shade line. Scale == Tile; HSizeFlags == Fill)
        TextureRect3 (bottom border line. Scale == Tile; HSizeFlags == Fill)
    TextureRect2
    MenuButton
        Icon

Edit: Trying to add a couple of stills using the "Add Images" button below.

Here is a screen shot of the control hierarchy:

Edit: Added more system info, and updated control hierarchy lists above to include info about scaling and size flags. Unless noted, all controls have their scale set to Keep Aspect, and their size flags are unset.

Here is the header I'm trying to make for my list/tree (the "Layout" option for the root item is "Top Wide"):

Comments

  • TwistedTwiglegTwistedTwigleg Posts: 2,561Admin

    @AspiringGameDev said:
    I have a screen recording of it happening, but this forum isn't letting me attach it to this post. And... I apparently can't post still image screenshots of the hierarchy or how it's laid out onscreen either.

    Strange. I'm not sure why image uploading is not working. Does the "Add Images" button work? That should use Imgur to post the images, which should work.

  • AspiringGameDevAspiringGameDev Posts: 8Member

    I had been trying to use the "Add Image" menu in the BBCode bar that's above the editing area.

    I just tried the "Add Images" button below, but uploading the gif version doesn't work because the limit is only 10MB or so, and the recording is 33.5MB. It would be nice if I could upload the mp4 version, it's only 577.3KB.

    (If the add image button above doesn't work, it really ought to be removed/disabled, just to avoid confusion.)

  • MegalomaniakMegalomaniak Posts: 2,580Admin

    I believe you can upload to gifycat and the forum should be able to embed from the link.

  • TwistedTwiglegTwistedTwigleg Posts: 2,561Admin

    Looking at the image, a few things could be causing the issue:

    How are you handling the position of the top bar? Are you using one of the layouts in the dropdown that appears when you select a Control node? Edit: nevermind, I saw it is top wide. Is there anything else attached to the top bar, script or otherwise, that could potentially be affecting the position or scaling?

    When resizing the window, Godot has to redraw the scene. This is because of how graphics APIs work, as it needs to draw the newly seen/available space, and this requires redrawing the entire window. The gap in between the non-resized image and the resized image being rendered could cause some of the jumping, though I do not think it would be as dramatic as what is seen in the video.
    What are the settings for your window mode? Have you tried setting the aspect mode to expand, keep, etc? Maybe something there is causing the issue.

  • AspiringGameDevAspiringGameDev Posts: 8Member

    I've edited the first post to add more system info, and updated the control hierarchy lists to include info about the scaling and size flags. Unless noted, all controls have their scale set to Keep Aspect, and their size flags are unset.

    The redraw looks like it's being done very inefficiently. There's plenty of layout information to allow godot to determine what actually needs to be redrawn. It seems to be first moving the entire old window content down & left to follow the bottom and right edges, and then erasing and redrawing the entire upper area. That's a really bad way to redraw a window being resized. At least that's what it looks very much like it's doing, I haven't looked at the source code for it.

  • MegalomaniakMegalomaniak Posts: 2,580Admin
    edited June 22

    Keep aspect might be the problem. You might want to have the height of the bar be relative to window height and the width to be relative to the width, but the height and width to be independent of each other. Then the contents should probably be sized according to the height.

  • AspiringGameDevAspiringGameDev Posts: 8Member

    I've tried changing the scaling factor. It doesn't change the behavior at all.

    I want the height of the bar to be fixed, not expanding/relative to the height of the window. This is for a tool, not a game.

    I just tried changing the Godot editor's window from fullscreen to resizeable, and then started resizing it. It exhibits the same problem! However, when live-adjusting control size by sliding a vertical separator up and down, no visual artifacts happen at all. That way of resizing/revealing/hiding controls within a fixed size window is smooth as glass!

  • MegalomaniakMegalomaniak Posts: 2,580Admin

    hmm, yeah then having the height be dependent on the icon size makes the mist sense.

    Are you updating/redrawing your bar in _process() or leaving it up to godot to update it?

  • AspiringGameDevAspiringGameDev Posts: 8Member

    I haven't written any code so far, so everything is being updated by godot. I've just been getting the hang of building gui layouts, making separate projects for the different aspects of the gui for the tool and working out any bugs before I try putting everything together.

Leave a Comment

Rich Text Editor. To edit a paragraph's style, hit tab to get to the paragraph menu. From there you will be able to pick one style. Nothing defaults to paragraph. An inline formatting menu will show up when you select text. Hit tab to get into that menu. Some elements, such as rich link embeds, images, loading indicators, and error messages may get inserted into the editor. You may navigate to these using the arrow keys inside of the editor and delete them with the delete or backspace key.