Small Hours / Practical guide

From PNG parts to your own Godot UI

A starting point using the actual files in the free library.

The free 0.2 sample contains the complete Paper style: 192 UI part/state entries, 96 icon shapes, 576 PNGs, 288 SVGs, atlases and 16 native scene examples. The full library adds 29 styles.

  1. Extract the ZIP, import project.godot in Godot 4.6 or 4.7.2 and press F5.
  2. Pick a scene. Click a control or use Tab and Enter to see its action ID.
  3. In your project, copy the supplied kit/ to res://kit/, preserving that path.
  4. Assign kit/themes/paper.tres to your root Control, then instance kit/scenes/inventory.tscn or another scene.
  5. Connect action_requested(action_id) to your own game logic. Change strings in kit/text/en.json; art contains no text.

A button from scratch

extends Control
const UISkin = preload("res://kit/lib/ui_skin.gd")

func _ready() -> void:
    theme = UISkin.make_theme("paper")
    var button := Button.new()
    button.text = "My own label"
    button.position = Vector2(30, 30)
    button.size = Vector2(240, 60)
    add_child(button)
    button.pressed.connect(func(): print("My action"))

Scale the right part

Use nine_slice/ with slice_ltrb metadata in LEFT, TOP, RIGHT, BOTTOM order. Multiply margins for 2x art. Icons in fixed/ scale proportionally. The ZIP includes a runnable minimal scene and an offline browser.

No fonts or inventory, economy, dialogue, save-file or reward systems are bundled. English docs and a partial French title example are included. The Godot showcase targets desktop windows. PNG/SVG can be imported elsewhere, but other engines and platforms are not certified.