Interfaces - GregHib/void GitHub Wiki

Interfaces are used to display information to a player, whether that's a picture, rectangle, line of text, or a button to click, each interface is made up of a list of different types of components.

Component types

Name Description
Container Parent to a group of child components.
Rectangle Filled or just the outline.
Text Line or paragraph of text.
Sprite Image, picture or icon.
Model Rendered model of a character, object or item.
Line Thin or thick with a colour.

Due to the nested nature of containers, interfaces can be inserted into one another to create a hierarchy. The majority of interfaces are used inside one another, one that are not we will refer to as full-screen interfaces.

Screenshot 2024-02-16 175117

Fullscreen

Full-screen interfaces as the name suggests, take up the entire client screen, there can only be one full screen interface displayed at a time.

Examples of fullscreen interfaces would be:

  • Login interface
  • Fixed or resizable Gameframe
  • World map

Screenshot 2024-02-16 174825

Gameframe interfaces

The majority of gameplay resolves around the fixed and resizable "gameframe" interfaces, known by jagex as toplevel and toplevel_full respectively.

The Gameframe interface is split up into multiple areas to place other interfaces into:

Screenshot 2024-02-16 174118

Main screen & Menus (Blue)

The main game screen is used primarily for displaying large interfaces which block the players view.

  • Settings
  • Bank
  • Equipment bonuses

Screenshot 2024-02-17 172526

Overlays

Overlays are smaller interfaces for displaying contextual information during activities and minigames.

  • Godwars kills
  • Bounty hunter info
  • Wilderness level

Screenshot 2024-02-17 173211

Chat screen & Dialogues (Green)

The chat screen is where communication and input interfaces are displayed

  • Chat
  • Quick chat
  • Text input

Screenshot 2024-02-17 173310

Tabs & Side interfaces (Orange)

Tab interfaces are always avaiable for players to use and interact with their player

  • Inventory
  • Spellbook
  • Logout

Screenshot 2024-02-17 173446

Context menus

The pop-up menu displayed when right click on interfaces is known as the context or right-click menu, it is the list of potential actions the player can take.

Screenshot 2024-02-17 175012

Implementation

Interfaces are defined in interfaces.yml and types in interface-types.yml.

price_checker:                # Name of the interface to be used as an id
  id: 206                     # The interface id
  type: main_screen           # The type of interface - location to attach the interface - interface-types.yml
  components:                 # List of named components
    overall: 20               # Text component name and it's id
    total: 21
    limit: 22
    items:                    # A container component
      id: 18                  # Components id
      inventory: trade_offer  # The id of the item container linked to this component
      options:                # Item right click options
        Remove-1: 0           # Option and the index in the context menu
        Remove-5: 1
        Remove-10: 2
        Remove-All: 3
        Remove-X: 4
        Examine: 9

Clicking

Execute code when a player clicks on a certain components option

//               Option, component, interface
interfaceOption("Remove-5", "items", "price_checker") {
  // ...
}

Opening

Interfaces can be opened for a player using the interface id

player.open("price_checker")

You can also subscribe using events in order to do things when interfaces are opened

interfaceOpen("price_checker") {
  // ...
}

Closing

Closing an specific interface can be done, however it's normally done by type

player.close("price_checker")
player.closeMenu() // Close whatever menu is open (if any)
player.closeDialogue() // Close any dialogues open
player.closeInterfaces() // Both menu and dialogues

Code can also be executed on closing an interface

interfaceClose("price_checker") {
  // ...
}

Modifying

  • Model Animations
  • Text
  • Visibility (show/hide)
  • Sprite
  • Colour
  • Item
// Interface, component, hidden
player.interfaces.sendVisibility("price_checker", "limit", false)
  • Send inventory
  • Unlock inventory options
  • Lock inventory options
// Interface, component, item slot range
player.interfaceOptions.unlockAll("price_checker", "items", 0 until 28)