Gooey tutorial for complete noobs?

Questions
1

Can someone point me at a Gooey tutorial for complete noobs? I’m just getting started with Defold and I just do not understand how to use these Gooey elements in my project.

I’ve been looking at the tutorials and the code examples and I’m not finding a code sample that really explains how to use/reuse these libraries.

Thanks!

2

Let me walk you through the button sample from the readme

Gooey is built around the GUI system that exists in Defold. The default system does not come with any predefined interaction components, only rendering configuration of boxes, texts and pies. To create a button without any libraries you would add a box node to the gui file and then inside the gui script, whenever input happens, check if the box was pressed.

function on_input(self, action_id, action)
    if gui.pick_node(gui.get_node("box"), action.x, action.y) and action.released then
        print("Box was taped")
    end
end

What Gooey does, is to hide the underlying mechanics involved in doing this. As such you first have to setup a gui file with the right nodes, then feed these to Gooey functions in a gui_script.

local gooey = require "gooey.gooey"

local function update_button(button)
	if button.pressed_now then
		gui.play_flipbook(button.node, hash("button_pressed"))
	elseif button.released_now then
		gui.play_flipbook(button.node, hash("button_normal"))
	elseif not button.pressed and button.over_now then
		gui.play_flipbook(button.node, hash("button_over"))
	elseif not button.pressed and button.out_now then
		gui.play_flipbook(button.node, hash("button_normal"))
	end
end

local function on_pressed(button)
	print("pressed")
end

function on_input(self, action_id, action)
	gooey.button("button/bg", action_id, action, on_pressed, update_button)
end

In the above example from the readme, we can see that gooey.button(...) is the function that performs the same thing from the first example. What makes it a little confusing is the “button/bg” name of the node, along with the two extra functions passed in as arguments.

The “button/bg” relates to a template node named button. Inside the template node there is a box node called bg - short for background - which is then tested for input like the first example. Gooey comes these templates which saves you the trouble of having to create them yourself and figure out how the hierarchies of nodes should be for the more complex components. All you have to do is “add template” inside your gui file and select one of the Gooey ones.

The on_pressed function is called when the user presses the button, allowing you to react in some way.

The update_button(button) is called when something in the internal state has changed. In the first example there would have been many cases where the button behaved strange compared to what users expect. For example if the user presses down somewhere outside of the button and then moved the cursor/finger inside the button before releasing, by keeping an internal state this and many other small quirks can be handled gracefully. But to give the user some sort of feedback related to pressing down on the button, hovering inside or similar you can react to these internal changes in the update_button function and change the visual state of the button. The gooey buttons comes loaded with predefined flipbook animations representing different states. So all you have to do is tell the gui which one to play.

The button example is for sure the least complicated, but the workflow is similar to use all of them. Add a template component to the gui, feed the right nodes from the templates in to corresponding gooey function. And you can find code snippets for all of the different components in the readme.

I hope this helps you and others that have gotten stuck!

5 Likes
3

If you are using the templates from gooey, they all come with themes. These automate the work done in the update_button, making the button example as simple as this.

local kenneyblue = require "gooey.themes.kenneyblue.kenneyblue"

function on_input(self, action_id, action)
	kenneyblue.button("button", action_id, action, function(button)
		print("pressed button")
	end)
end

Worth noting from the example is how the keeneyblue.button function is called instead of gooey.button, also that “button” is sent instead of “button/bg”.

4 Likes
4

Excellent write-up @DeManiac! Thanks.

@dossy: did things clear up now that you’ve read this?

5

Fortunately, I figured out what I needed to understand to use DirtyLarry (maybe incorrectly) - I had to add a Game Object inside a Collection, and inside that Game Object I used “Add Component File” to add a link (?) to the Gui object I created. To use the DirtyLarry GUI components (button, input, etc.) I go into the Gui object I created, and I Add a Template node, and point that Template at, say, /dirtylarry/input.gui … then I can position that Template node in the Gui where I want it.

This was the workflow I had not been able to figure out from any of the examples or the DirtyLarry documentation.

Once I had that, I was able to create my Gui Script and put the necessary calls to dirtylarry:button() and dirtylarry:input() in my on_input() to “wire them up” so they worked.

I seem to have run into a few bugs with Gooey:

  1. space_width variable uninitialized when using the dirtylarry theme, throws errors when pressing “space” in a Gooey/dirtylarry-themed input element

  2. gui.KEYBOARD_TYPE_PASSWORD fails trying to invoke M.mask_text() because it’s in gooey.core.input and not reachable from the gooey.theme.dirtylarry.input object.

1 Like
6

Yup! That was the key aspect of using Defold that I was totally missing, and I eventually stumbled onto it randomly trying things.

I think it would be really helpful to have a “how to reuse Gui components” tutorial that covers that step very clearly – it seems like something obvious that’s assumed in all the docs, but was totally non-obvious to me until I finally figured it out, as a complete noob to Defold.

Thanks!

1 Like
7

Thank you for the bug reports! I did a bug refactoring of the code not too long ago, and did not test properly. I’ve started writing unit tests to avoid this sort of thing in the future. I’ll post back here when I have a fix ready.

8

I’ve released a new version with the fixes. Thanks again for reporting!

2 Likes