Using Input boxes (SOLVED)

Questions
1

I am finding it a little difficult to understand how I create contols such as input fields and checkboxes in Defold. This thread states

Defold supports only the most rudimentary gui components: box nodes, text nodes and pie nodes. With these you can create complex gui components such as buttons with different states, input fields, lists, checkboxes and so on.

I need just the one input field to enable the user to type in a “Handle” in order to post their score. The above seems to imply the following

  • Create a GUI
  • Add a Box node to create a “frame”
  • Add a text node inside it to hold the actual text
  • Capture text input
  • Handle showing/hiding the virtual keyboard on touchscreen devices
  • Handle caret placement

All of that, and almost certainly more, to just show one input field? Surely, I am getting something wrong here!

1 Like
2

You got it right, but no need to do all that yourself. That’s what libraries are for!

3 Likes
3

The only thing I see there is DirtyLarry but somewhere I read that it is quick-n-dirty for debugging purposes only? That apart, I don’t quite understand from its docs just how I go about placing an input field at a specific location in a collection that I then want to load on demand via a collection proxy. I am guessing that somehow I have to add the DirtyLarry input to a GUI, initialize it from the gui_script to capture text input then add the GUI to the collection as a “Component File”…?

4

Try this one: Gooey
or
this: Druid

And yes this is how things actually works.

6 Likes
5

Thank you for this. I have to admit that for the first time since I started with Defold about a month ago I feel a slight sense of exasperation. Before I ruffle any feathers here with my critique - perhaps I am just not looking in the right place but it seems to me that the documentation on how to create and use GUIs is sadly lacking and assumes much prior knowledge.

By dint of much trial and error and some unkind thoughts I finally figured out the following

  1. To use GUI components from a library - such as Gooey: the one I choose - you have to first add the library to your project (explained)
  2. You then need to create a GUI (not really explained but obvious)
  3. You then need to add a template to the Nodes section of the GUI (not explained at all as far as I can tell)
  4. Depending on the template you add you might need to add other things. I found that to add an input field I had to

a. Add a Font (not explained)
b. Add layers named “below” and “text” (not explained)

I am still trying to figure out just where

gooey.input(node_id, keyboard_type, action_id, action, config, refresh_fn)

fits in to all of this. Reading between the lines and some guess work leads me to believe that I need to do the following

  • Attach a gui_script to the GUI (done)
  • Acquire input focus in its init method
  • In its on_input method call gooey.input

Questions that occur to me before I try

  1. Surely, I should check the action_id prior to calling the gooey.input with only hash(text) being valid input sources there. And then the node_id to be used would be the relevant input_node/text subnode?
  2. But then how should hash(touch) be dispatched - presumably to hide/show the cursor? If so, how?
  3. b.t.w it feels incorrect to label the mouse_button event touch. Surely click would be more appropriate?

I guess I could figure out even more through a bit of trial and error but this really should not be so difficult

1 Like
6

I don’t know much about Gooey. I can’t help you on that, sorry. Maybe @britzl can.
Personally, prefer to do it as you described on your first post.

Also did you check the examples:

Those seems obvious to me at the examples.

1 Like
7

Yes, there are probably a few steps that aren’t properly explained. I’ll see if I can find the time to add this to the docs.

Yes, you need a script to handle the logic for your gui.

Yes, you need to acquire input focus, Gooey will not do this for you.

Exactly, when your script receives input actions you pass those along to your Gooey components, Example:

https://github.com/britzl/gooey/blob/master/example/rpg.gui_script#L40-L53

No, you don’t need to check input before calling the Gooey functions. The gooey.input() function will handle text, buttons will handle touch etc.

What you must make sure to have setup though are the input bindings:

And as is mentioned in that section of the docs about input bindings you can change actions if you don’t like the ones Gooey expects:

local actions = require("gooey.actions")

action.TOUCH = hash("click")
8

Thanks. In the mean time I had just started spinning my own anyway. With two boxes and a text control it is not so difficult - so long as you don’t want to deal with marked text, copy/paste etc (which I can live without).

The incomplete documentation appears to be the bane of the other input libraries mentioned here, not just Gooey.