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.

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

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:

Main screen & Menus (Blue)

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

• Settings
• Bank
• Equipment bonuses

Overlays

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

• Godwars kills
• Bounty hunter info
• Wilderness level

Chat screen & Dialogues (Green)

The chat screen is where communication and input interfaces are displayed

• Chat
• Quick chat
• Text input

Tabs & Side interfaces (Orange)

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

• Inventory
• Spellbook
• Logout

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.

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)