How to handle appropriate UI controls separate from "playable" area

cowhand214cowhand214 Posts: 7Member
edited October 2016 in GUI

I've been playing around with some basic Godot things. Reading/writing files, basic mouse input, basic GUI, etc. Primarily this has been to give me a little familiarity with Godot and GDScript without worrying too much about assets, resources and things but just focusing on a couple very basic aspects.

One question I've been dealing with is how to structure a UI where there is a section of command items (say a toolbar at the top) that would allow you to save, load, or clear items on the screen for example and then an area that accepts mouse input to draw lines or circles. The save/load functionality stores that and reads it back.

How would this be structured? Would the area accepting mouse inputs (draw a line when button is pressed) be a separate viewport for example? I've tried to set this up and visually it looks OK but behind the scenes my input handler draws another line when a toolbar button is pressed and I want this to only occur on the main drawing area.

I feel I'm having trouble expressing this question well. I'm happy to clarify if I can.

This question here is certainly similar and any answer may be related:
https://godotdevelopers.org/forum/discussion/17684/how-to-handle-inputs-outside-buttons


Tags :

Answers

  • indicainkwellindicainkwell Posts: 9Member
    Answer ✓

    The recommended way is to have your game nodes implement _unhandled_input that way the gui will catch the events and stop their propagation if it can handle it.

    Here is an example structure of a basic main scene:

    main_node
      gameplay_canvas_layer
        drawable_node -- implements _unhandled_input
      gui_canvas_layer
        toolbar_control_container
          button_control -- implements _input_event
    

    The canvas layers are optional in this case, but they may be good to have if you want to change the transform of the gameplay node. Then the gui will do what a gui is expected to do.

    Check the input event diagram, it helps with thinking of how to structure your input code.

  • cowhand214cowhand214 Posts: 7Member
    edited October 2016

    Thank you for the reply @indicainkwell! I'm sorry for the delay, I haven't had a chance to do much in Godot since I posted the original question. I hope to get to trying this approach shortly and will let you know how it goes!

  • AvencherusAvencherus Posts: 49Member

    I would say the same as above, but would add, if you're using a camera that you may want to use a CanvasLayer node for the GUI nodes to be children of, so they can rest above the other nodes.

    You can't really put them above the viewport, since the node above your scene is a parent viewport that acts a root. Even if you would do that, then it would all be invisible, since the viewport's job is the render what is in it's view.

  • cowhand214cowhand214 Posts: 7Member

    Thanks to you both and I apologize for the delay in marking an answer. Work kind of took over my life for the last few weeks and I had to ditch my Godot experiments.

Sign In or Register to comment.