Text-Based Adventure Game Player Documentation

An explanation of the syntax

This text-based adventure game player lets you create your own text-based adventure games. You can do this by creating a custom file in a language called JSON.
It may look complicated, but is very straightforward once you learn the format.
JSON is made of objects, which start with a "{" and end with a "}". Each object contains properties, which follow the following format: "key": value
This value can be either another object or a string. A string is a bit of text surrounded by a quotation mark (' or ") on both sides.
If the property is followed by another property in the same object, it must be end with a comma like this: "key": "value",

Example Game File

{
    "name": "template",
    "screens": {
        "text": "Example",
        "options": {
            "door 1": {
                "purpose": "open door 1",
                "text": "Behind door 1 is a portal leading back to the beginning.",
                "options": {
                    "continue": {
                        "purpose": "go through the portal",
                        "goto": "screens"
                    }
                }
            },
            "Door 2": {
                "purpose": "open door 2",
                "type": "end",
                "text": "There was a lion behind the door and it ate you.",
            }
        }
    }
}

Getting Started

Download the template

Download the template. It has all the required properties.
If the template shows as "template.json" in your file manager, rename it to <your game's name>.json, or just the name of your game if the template shows as just "template" in your file manager.
Open it in a text or code editor. (Notepad is a text editor.)
The main object must have the following properties: name and screens.
Set the property "name" to the name of your game.

Properties and Usage

Properties of Main File

name

Required
Value: a string containing the name of the game

screens

Required
Contains all the screens.
Value: a screen object

pageTitle

Optional
Changes the tab title for the entire game. Can be overridden by using this attribute in an individual screen object.
Value: a string;

disableUndo

Optional
Disables the ability for the user to type "go back" for the entire game. Can be overridden by using this attribute in an individual screen object.
Value: true or false (No quotation marks)

styles

Optional
Defines the style themes that can be used for adding styling to your game. See the section on styling.
Value: a style object

Screen Objects

Example

{
    ...
    "screens": {
        "text": "Example",
        "options": {
            "door 1": {
                "purpose": "open door 1",
                "text": "Behind door 1 is a portal leading back to the beginning.",
                "options": {
                    "continue": {
                        "purpose": "go through the portal",
                        "goto": "screens"
                    }
                }
            },
            "Door 2": {
                "purpose": "open door 2",
                "type": "end",
                "text": "There was a lion behind the door and it ate you.",
            }
        }
    },
    ...
}

text

Required unless the goto attribute is set
Value: a string containing the text shown to the user

header

Optional
Value: a string containing the text shown to the user in the header. Header is not shown if blank.

purpose

Required except in the root screen object ("screen"), where it has no effect
Value: a string containing what will happen if the user chooses this path

pageTitle

Optional
Changes the tab title for the current screen. Overrides any pageTitle value set in the root object.
Value: a string;

disableUndo

Optional
Disables the ability for the user to type "go back" for the the current screen. Overrides any disableUndo value set in the root object.
Value: true or false (No quotation marks)

options

Required unless the "type" property is set to "end" or the "goto" attribute is set.
Value: an object containing one or more screen objects objects named after what the user types in to go to that screen.

Example

{
...
    "options": {
        "door 1": {
            "purpose": "open door 1",
            "text": "Behind door 1 is a portal leading back to the beginning.",
            "options": {
                "continue": {
                    "purpose": "go through the portal",
                    "goto": "screens"
                }
            }
        },
        "Door 2": {
            "purpose": "open door 2",
            "type": "end",
            "text": "There was a lion behind the door and it ate you.",
        }
    },
    ...
}

style

Optional
Value: the name of a valid style object. See the section on styling.

goto

Optional. Has no effect inside the root screen object ("screen").
Value: A path. For example, in the example game file the path for screen for door 1 is "screens.options.door 1"

Styles

Example

{
    ...
    "styles": {
        "default": {
            "all": {
                "backgroundColor": "teal",
                "color": "white",
                "textShadow": "1px 1px 2px black"
            },
            "text": {
                "fontStyle": "italic",
                "outlineStyle": "dashed",
                "fontFamily": "cursive"
            }
        },
        "death": {
            "all": {
                "backgroundColor": "red",
                "color": "white",
                "textDecorationLine": "underline",
                "textDecorationStyle": "dotted",
                "textDecorationColor": "yellow"
            },
            "choices": {
                "backgroundColor": "yellow"
            }
        }
    },
    ...
}

Styling Basics

Inside of the main object of the game file is a "styles" property. This is an object containing style objects.
Style objects can contain 4 objects: "all", "header", "text", and "choices".
These contain the styles for each section of the screen. Styles are inherited from the "all" property if present, but can be overridden by setting the same property with the same value within the desired part's styling.
Style objects are given a name, and that name is used in the "style" property of a screen object. For example, the death color scheme above would be set by putting "style": "death" in a screen object. To remove an inherited value, set it to "".

Color data type

This player uses CSS colors. it can be a hex code (#XXXXXX), an RGB color code (rgb(<r>, <g>, <b>)), or more. See this page on CSS colors for more details.

backGroundColor

A style property used to change the background color.
Value: A color

color

A style property used to change the text color.
Value: A color

fontFamily

A style property used to change the font type.
Value: A font. This is a comma seperated list of fonts. Some available fonts are serif, sans-serif, monospace, cursive, or fantasy. You can also choose fonts available on the device. A valid value could be "Comic Sans MS, cursive" or "serif". See this page on CSS font families for more details.

fontSize

A style property used to change the font size.
Value: A length, or another type listed in the following link. See this page on font size for more details.

fontStyle

A style property used to change if a font is italicized.
Value: "normal" or "italic"

fontVarient

A style property that does something.
See this page on the font varient CSS property.

fontWeight

A style property that controls the boldness of a font.
Value: "normal", "bold", a number 1-1000, "lighter", or "bolder". See this page on the font weight CSS property.

letterSpacing

A style property that controls the space between letters.
Value: "normal", or a length. See this page on CSS length values.

lineHeight

A style property that controls the height of a line of text.
Value: "normal", a unitless number, a percentage, or a length. See this page on CSS length values.

outlineColor

A style property that controls the color of the outline.
Value: A color

outlineOffset

A style property that controls how far away from the edge the outline is. Can be used with a negative length to make more of the outline visible.
Value: A length. See this page on CSS length values.

outlineStyle

A style property that controls the style of the outline.
Values: "none", "dotted", "dashed", "solid", "double", "groove", "ridge", "inset", or "outset".

outlineWidth

A style property that controls how thick the outline is.
Value: "thin", "medium", "thick", or a length. See this page on CSS length values.

textDecorationColor

A style property that controls the color of the text's line such as an underline.
Value: A color

textDecorationLine

A style property that controls the type of line used for text decoration.
Value: "none", "underline", "overline", "line-through", "blink", "spelling-error", or "grammar-error".

textDecorationStyle

A style property that controls the style of the text decoration line.
Value: "solid", "double", "dotted", "dashed", or "wavy".

textDecorationThickness

A style property that controls the thickness of the text decoration line.
Value: See this page about textDecorationThickness

textUnderlineOffset

A style property that controls how far away from the text the text decoration is.
Value: "auto" or length.See this page on CSS length values.

textShadow

A style property that adds a shadow to the text.
Value: See this page about textShadow

textTransform

A style property that controls the capitalization of the text.
Value: "none", "capitalize", "uppercase", or "lowercase".