NarraLeaf

Interfaces at run time

What is stacked on screen while the game runs. Where pages, Game UI and layers appear, and how the screen changes when the game starts, a page opens and the game ends.

While the game runs, what is on screen is stacked in layers. From the bottom up they are the stage, Game UI, pages and layers, and each one covers the ones beneath it.

On screen, top first
  1. Confirm, prompts
    Shown over the current screen, above every page
    Layer
  2. Title, Config, Save, Log
    One at a time
    Page
  3. Dialogue, Choice, Notifications, Quick menu
    Shown automatically when the game starts
    Game UI
  4. Backgrounds and characters
    Shown when the game starts, driven by the story
    Stage
The order never changes. The stage and Game UI exist only while a game is in progress.
LayerIn the UI panelHow it appearsWhen it exists
LayerAny pageOpened by Show Layer or Show ConfirmAt any time
PageInterface Type set to PageThe entry page opens when the game launches; the others are opened by Go PageAt any time
Game UIInterface Type set to Game UIShown automatically when the game starts; nothing opens itDuring a game
StageNot in the UI panelShown by Start Game or Load SaveDuring a game

The UI panel has no separate type for layers. Any page can be opened with Go Page or shown over the screen with Show Layer.

How the screen changes during a playthrough

The steps below follow one playthrough of a project created from the Skeleton template.

The game launches

On screen, top first
  1. Title
    Took the place of Splash, the entry page
    Page

The game opens on its entry page, Splash. The UI panel marks it Entry page, and it cannot be deleted. Any page can be made the entry page with Set as Entry Page. There is no stage and no Game UI yet.

Splash shows a logo and a disclaimer, then runs Replace Page with Title. Title takes the place of Splash at the bottom of the stack, so nothing later returns to Splash.

Another page opens

On screen, top first
  1. Config
    Page
Not on screen
  1. Title
    Go back returns here
    HiddenPage

Go Page opens Config, which replaces Title on screen. Title is no longer drawn but is kept: Go back closes Config, and Title plays its enter animation and fires Surface Init again.

Each Go Page stacks one more page, and each Go back closes the top one. Go back on the bottom page does nothing. Go Page with its page set to None closes every page above the bottom one.

The game starts

On screen, top first
  1. Quick menu
    On Stage slot
    Game UI
  2. Dialogue, Choice, Notifications
    Dialog, Choice and Notification slots
    Game UI
  3. Backgrounds and characters
    Stage
Not on screen
  1. Title
    HiddenPage

A button on Title runs Start Game. Every page is hidden, the stage appears, and Game UI is drawn over the stage. No page is on screen now: the player sees the story and the Game UI.

Game UI does not need to be opened. When the game starts, each Game UI in the project appears in its slot, and all of it is removed when the game ends. A slot with no Game UI uses the built-in dialog box, choice menu or notifications.

A page opens during the game

On screen, top first
  1. Log
    Background slightly transparent, the scene shows through
    Page
  2. Quick menu
    Faded outGame UI
  3. Dialogue, Choice
    Faded outGame UI
  4. Notifications
    The Notification slot stays on screen
    Game UI
  5. Backgrounds and characters
    Stage
Not on screen
  1. Title
    HiddenPage

The Log button on Quick menu runs Go Page. A page opened during a game is drawn over the stage, and its own background is slightly transparent. While the page is on screen:

  • The story holds on the current line. Clicks, the advance key and auto-forward do not move it on.
  • Game UI in the Dialog, Choice, NVL and On Stage slots fades out and comes back when the page closes. Game UI in the Notification slot stays on screen.
  • Clicks and keys go to the page.

Go back closes Log and returns to the game. Further Go Page calls between pages opened during the game stack them as before, and Clear Page closes every page opened during the game at once.

A layer opens

On screen, top first
  1. Confirm
    Modal
    Layer
  2. Log
    Still on screen, takes no clicks
    Page
  3. Quick menu
    Faded outGame UI
  4. Dialogue, Choice
    Faded outGame UI
  5. Notifications
    Game UI
  6. Backgrounds and characters
    Stage
Not on screen
  1. Title
    HiddenPage

The Title button on Log runs Show Confirm to ask whether to return to the title. Confirm is shown over Log, and Log stays on screen beneath it. Escape closes Confirm without an answer, as its cancel button does, and Log stays open.

The game ends

On screen, top first
  1. Title
    Page

When the player confirms, Quit Game runs with Title as its page. The stage and Game UI are removed, the pages opened before the game and every layer are closed, and Title becomes the only page.

Pages

  • One page is on screen at a time. A page replaced by another is not drawn, and enters again on Go back.
  • Go back, Go Page and Clear Page never close the bottom page. When the game launches it is the entry page; after Quit Game it is the page Quit Game opened.
  • Replace Page opens a page and closes the page it replaces. Run on the bottom page, it puts the new page in its place, which is how a splash page hands over to the title page.
  • Before the game starts, nothing is drawn beneath a page. A page opened during a game is drawn over the stage with a slightly transparent background, and the story holds on the current line.
  • Start Game and Load Save hide every page. During the game, Go back and Clear Page do not bring those pages back, and Quit Game closes them when the game ends.
  • A page can also be shown inside another page through the Page component. An embedded page is part of the page that holds it and does not take part in the stacking above.

Game UI

  • Each Game UI is created into a slot: Dialog, Choice, Notification, NVL or On Stage. Each slot holds one Game UI.
  • Game UI exists only while a game is in progress. It appears when the game starts and is removed when the game ends, and is never opened with Go Page.
  • The first four slots replace the game's built-in interface for that slot. A slot with no Game UI uses the built-in one, so deleting the Game UI in the Dialog slot still leaves the game with a dialog box.
  • The On Stage slot replaces nothing. It holds what stays on the stage, such as a quick menu or a HUD. Its empty areas do not catch clicks, so a click there reaches the stage and advances the story.
  • The Notification slot is display only and takes no clicks or keys.
  • While a page is open during a game, every slot except Notification fades out.

Layers

Show Layer shows a page over the current screen and leaves what was there on screen.

  • A layer sits above every page, including pages opened after it.
  • A layer can be opened Modal: nothing beneath it takes clicks, and it takes the keys. A layer that is not modal leaves the page beneath it working.
  • A modal layer holds the story on the current line. A layer does not fade Game UI out.
  • A layer shown during a game is drawn with a slightly transparent background, as a page opened during a game is.
  • A layer closes when the page that opened it closes.
  • Go back closes the top Dismissible layer first, and closes a page only when there is none. Hide Layer closes the layer it names, and Close This Layer closes the layer it runs in.
  • Layers in the same group are shown one after another: the next one appears when the previous one closes.
  • The confirmation Show Confirm opens is a modal, dismissible layer.
  • Starting a game, loading a save and quitting the game close every layer.

Clicks and keys

Several things can take clicks at once, but keys go to exactly one place. Read the table from the top; the first row that matches applies.

On screenTakes clicksTakes keys
A modal layerThe top modal layer and any layers above itThe top modal layer
A pageThe current page and every layerThe current page
A game in progress, no pageGame UI, layers and the stageGame UI

Keys reach App logic first, then the one place in the table.

The Layers panel in Dev Mode

The Layers panel in Dev Mode lists what is on screen at this moment, from the bottom up: the stage, Game UI, the page and layers. It marks what takes clicks and where the keys go, shows faded-out Game UI and pages that are not on screen separately, and marks the dialogue box Hidden while the player has hidden it. Open it from the debug tools menu in Dev Mode by choosing Layers.

When the story ends

When the story plays its last line, the game shows the page chosen in the build variant's Page shown when the story ends, in the same way as Quit Game. With Show nothing selected, the last frame stays on screen.

See also

  • UI: creating pages and Game UI
  • Surfaces: page lifecycle and blueprint events
  • App nodes: the pins of Go Page, Go back, Show Layer and the rest

On this page

How the screen changes during a playthroughThe game launchesAnother page opensThe game startsA page opens during the gameA layer opensThe game endsPagesGame UILayersClicks and keysThe Layers panel in Dev ModeWhen the story endsSee also