Skip to content

Intro

The following set of tutorials are not designed on individual widget use, but rather on a specific use case: how to use gooey to build a UI for a real game, focusing on application of all the techniques covered before. The UI code is explained step by step and the full project is available to download, as well as embedded to play.

This chapter assumes basic knowledge of gooey and fundamental understanding of the widgets (and basic Gamemaker knowledge, mind you!). Please review the site documentation and especially the Widget tutorials before browsing this section, unless you are comfortable with learning as you go.

The base game project

The project we will work with is a small farm game prototype I created. I chose this because it lends itself to needing basic HUD, a toolbar, inventory, textboxes etc.

For art I used the fantastic Sunnyside World Asset Pack by Daniel Diggle, which contains everything we need to build this test game.

Premise

You play as a villager. You can do several things:

  • Walk around;
  • You can dig the dirt, plant seeds of different types and water crops in your designated farm zone;
  • You can chop down trees with your axe to gather wood;
  • You can take down some animals with your axe (poor guys!) to gather their related resources

To plant seeds, you first dig a hole, then plant the seed and then water it several times until you can gather the corresponding crop (note that there is a day-night cycle, but there's no time-based plant growing as there would normally be in a normal farming game, for the sake of making the demo shorter and more controllable).

There is an NPC in a house below yours (they are outside their house except at night). If you interact with them, they will give you a random gathering quest. Once you gather the required ingredients and have them in your inventory, you can return and interact with them again to complete the quest.

Note that trees and animals respawn at midnight.

Controls

Do test the project out to get a feel of the game. You can use:

  • WASD / arrow keys / gamepad to move
  • E / left mouse button / gamepad A (cross) or X (square) to use the current tool
  • R / right mouse button / gamepad B (circle) or Y (triangle) to interact with something on screen
  • I / select to check out your inventory
  • Mouse wheel up/down / triggers/shoulders to cycle between tools

Also you can use:

  • SPACE / thumbstick down to toggle time speedup
  • F to toggle fullscreen
  • ESC / start to pause

The game

This is the embedded starting state of the game. You can also download the 1.0 release from the repository to play with it and follow along.

Included libraries

The game project uses the following extensions, which you will find inside the game project, with credit to their respective authors:

  • ScribbleDX by JujuAdams - Efficient text renderer. This is included by default on the gooey package
  • Input by alynne and JujuAdams - For normalizing and facilitating player input handling
  • Retro Palette Swapper by PixelatedPope - Palette swapping library

as well as many of my own, which I include in almost every project (feel free to poke around, but keep in mind these are largely undocumented):

The plan

gooey versions

The snippets of code in the use case tutorial take advantage of some methods only available on gooey 2025.11+. It is strongly recommended to update gooey to 2025.11 or later before trying to replicate this tutorial.

Currently, everything UI-related is being drawn with plain text on the screen. In the following articles we will use gooey to easily create a beautiful UI with the following:

  • A general HUD to display the time of day
  • The player inventory
    • We will create both a basic version and an advanced version that allows for drag-drop, reordering etc.
  • A toolbar that displays the tools and lets you select one
  • A quest progress UI
  • NPC textboxes
  • A custom cursor, animation and sound effects
  • Pause & options menu

Each tutorial page describes how to create the corrresponding UI features with the exact code you need to replicate it, modify it or basically do anything you want. Remember you can click on the copy icon in each of the code blocks to quickly copy the code and paste it in your project.