Narrat Docs
Search…
Screens
Narrat games can have different screens which are 2D images used to illustrate the story. Screens are also interactive and can have buttons to click on elementsNarrat games can have different screens

Introduction

In narrat games, the right side of the screen has the dialogue system, while the left side has the screens.
Screens mostly serve to illustrate a scene, in the way visual novel type games do. They can also be used to provide "point and click" features with interactive buttons, or be used as choice menus (for example an interactive map)

Screens config

1
{
2
"screens": {
3
"default": {
4
"background": "narrat"
5
},
6
"map": {
7
"background": "map",
8
"buttons": ["shopButton", "parkButton"]
9
}
10
}
11
}
Copied!
  • background : This is the id of an image loaded by the engine. Images are defined in the images section of the config
  • buttons: This is an array of ids of interactive buttons that exist in the screen.

Buttons config

1
{
2
"buttons": {
3
"shopButton": {
4
"enabled": false,
5
"background": "shopButton",
6
"position": {
7
"left": 38,
8
"top": 6,
9
"width": 255,
10
"height": 226
11
},
12
"action": "shopButton"
13
},
14
"parkButton": {
15
"enabled": false,
16
"background": "parkButton",
17
"position": {
18
"left": 632,
19
"top": 86,
20
"width": 255,
21
"height": 226
22
},
23
"action": "parkButton"
24
}
25
},
26
}
Copied!
  • enabled: Whether this button is enabled by default or not (this can later be changed on and off in the game's script)
  • background: ID of the image to use as the image for that button
  • position: An object with left, top, width, height to place the button in pixels relative to the top left of the screen. The size of the screen is defined in the layout part of the config, for reference.
  • action: Defines which script label should be run when the button is clicked.
For example, with the following game script:
1
parkButton:
2
"You have reached the park!"
Copied!
This script would be triggered by pressing the parkButton in the map screen defined above.
The default screen must always exist, as it is the first screen the game gets loaded with.

Controlling screens and buttons in scripts

Changing Screen

The set_screen function switches the game to a different screen:
1
set_screen map
Copied!

Enabling and disabling buttons

The set_button function can enable or disable a button
1
set_button parkButton true
Copied!