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.

let's make a small tiny part of a ui - to see how easy this would be

map based tacticsmap based tactics Posts: 24Member
edited December 2019 in GUI

so looks like first thing we need is -->

  • so that we actually know what the actual 'code' is that we can use
  • that should be the first thing any learning sites/youtubes and any 'code sites' tells us right? ofc it should be, how else are we gonna know what the 'code' is??

so let's do something incredibly simple and see it'd work or/and loook in gds

  1. when you click + hold the right mouse button,
  2. and drag it up
  3. and let go
  4. then the screen shows a white box that covers the entire screen

simple ?

what are the full complete steps to do this simple thing, so we can see how simple or complex a simple thing is to do


  • cyberealitycybereality Posts: 928Moderator

    Did you see my reply in the other thread you made?

    There are some good resources for you to check out if you want to learn.

    These two books are also really good and you should consider picking them up.

  • the youtube linked whoever did that was not very helpful

    this questoin -->

    comes exactly from that confusing youtube

    i dont see how that youtube answers this question asked here, is the question asked here really that difficult? im assuming it's extremley simple? i dunno

  • cyberealitycybereality Posts: 928Moderator

    Yes, it is very simple. I have made an example project for you to take a look at. I'll explain how to do it, if you want to follow along and I also uploaded the project so you can play with it.

    1) First, create a new project in Godot.

    2) Click on "2D Scene" as the root node from the pop-up menu.

    3) Click Node2D and then press the "+" icon on the upper left. This will add a new child Node. You can also right click the Node2D and select "+ Add Child Node".

    3) In the pop-up that appears, start typing "ColorRect". You should see a green icon that says "ColorRect" in the middle. You can double-click it, or you can select it and press the "Create" button on the bottom right.

    4) You'll see a small white box now in the editor viewport. Click it, then on the Inspector on the right, click "Rect" and set Size x to 1024 and Size y to 600 (the default window resolution). You can also click the white color on the Inspector and make this black.

    5) Click Node2D on the left Scene panel, then add a new script by pressing the button above with the paper and green plus icon. You can also right-click Node2D and click "Attach Script".

    6) In the script pop-up window you can leave the defaults and press "Create".

    7) Select all the code in the window and press back-space to delete it. Then paste in the following:

    # script inherits from Node2D, which is a good root node for a 2D project
    extends Node2D
    # variable stores the mouse y position on press to calculate swipe distance
    var last_y = 0;
    # _input(event) is a built-in function which fires every time some input happens
    func _input(event):
        # the event "right_click" was custom made in the project settings input tab
        # when the user presses down the right mouse button this event fires
        if event.is_action_pressed("right_click"):
            # save the mouse down y position
            last_y = event.position.y
        # same as above, but fires when the mouse is released
        elif event.is_action_released("right_click"):
            # find the difference in y values to see if user swiped up or down
            var moved =  event.position.y - last_y
            # more than 100 pixels up, so user swiped up
            if moved < -100:
                # change the full screen color rectangle to white
                get_node("ColorRect").color = Color(1.0, 1.0, 1.0)
            # more than 100 pixels down, so user swiped down
            elif moved > 100:
                # change the full screen color rectangle to black
                get_node("ColorRect").color = Color(0.0, 0.0, 0.0)

    8) Finally, set the input event for right-clicking in the project settings. Click "Project" on the top menu bar, then "Project Settings". Click the tab named "Input Map". On the top text box next to "'Action:" type in "right_click" (without quotes). Then scroll down to the bottom and next to "right_click" press the "+" icon. Choose "Mouse Button". In the pop-up window choose "Right Button" under the "Mouse Button Index:" Click "Change" and then click "Close" to close the window.

    9) Press the Play (>) icon on the top right. It may ask you to save the scene. Just click "Okay".

    10) You will see a black window. Swipe up or down with the right mouse to see the color change.

    It may seem like a lot of steps, but I was trying to explain everything as clear as possible. Once you start working in Godot, you'll see things are very quick and easy to do, just spend some time learning. Cheers.

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.