Onirix Escape Room

With the Onirix Escape Room module you will be able to create interactive games, in which you can define a story, rules and a series of steps that lead the user to solve the game in the shortest possible time. This module has interactive elements such as key, lock, code, decision and mechanism. Each of them allows the user to unlock puzzles and progress through the game. These Data Structures allow, apart from solving puzzles, to modify the visibility of elements and execute sounds depending on the answers obtained.

This module allows you to implement Escape Rooms in a simple and intuitive way. Just add Data Sheets to the Studio elements and Onirix Escape Room Module will process them and display their data according to the Data Structure type when you click on one of the elements.

Try yourself

First of all, if you want to try the experience An agent of risk, you can do it by accessing this experience: Escape Room: An agent of risk.

Escape room configuration

The Onirix Escape Room module is configured through data sheets and data structures assigned at the scene level and at the element level. These objects are part of the Onirix Studio Datastore. The data structures represent a series of artifacts that allow the module to relate the elements of the scene with concepts such as clues, keys, locks... Onirix Escape Room reads the data sheets associated with the experience and acts on the scene according to the user's actions.

These are the data structures that Onirix Escape Room works with:

Escape Data Structure

The ox-escape Data Structure is the main structure, in it you can define the name of the game, rules, history, etc. in general, information that gives an initial context to the user. Without it, no game will be initialized independently of the rest of the added Data Sheets. It is associated at scene level. The structure has the following fields:

• Name (required): name of the game (Input)
• Seconds per penalty (required): penalty seconds that will be added to the total time when the game is failed (Input)
• Rules (required): information about the game rules (Textarea)
• Final congratulation (required): text that will appear at the end of the game as a congratulation (Textarea)
• History (required): texto to put the user in context (Textarea)
• Image (optional): image for the init and final pages (Image)
• Background sound (optional): alias assign to the element of type sound that will be heard when the game starts (Input)

Alias Data Structure

The ox-escape__alias data structure allows to assign several names to a scene element. The module uses these data sheets to show and hide elements in response to other actions.

For example in “An agent of risk” the cup placed in the left corner has this data sheet assigned to it. These names must be entered in the Activate alias and Deactivate alias fields of the rest of the Data Structures depending on whether you want to show or hide. For the case of the cup its alias has been entered in the Deactivate alias field of the Data structure ox-escape__decision assigned to the cup itself, which makes that when that decision is resolved the cup will be hidden.

It is associated at element level. Its structure is as follows:

• Identifiers (required): the name or names to be assigned to the element separated by ';' (Input)

Key Data Structure

The Data Structure ox-escape__key indicates that it is an element that can be picked up, passed to the player's inventory, and that can be used to resolve an element that includes an ox-escape__lock Data Sheet that has the same activation code.

It should be understood that the term key represents the concept of an element that activates, unlocks or resolves another element when employed, and does not imply that physically this element must be a key in the strict sense of the word.

For example in “An agent of risk” the screwdriver is a key type element. In the Activation code field of the datasheet a code is entered that must match the code of the element that opens. In this case the cutter contains a data sheet of type ox-escape__lock with the same activation code. When the cutter is selected a list of all the keys stored will appear and it will only be considered correct if the selected one has the same activation code, in this case, the screwdriver.

It is associated at the element level. Its structure is as follows:

• Activation code (required): code that is compared with that of the lock to determinate wether this element should open the other (Input)
• Message at pickup (required): message displayed when the user picks up the element (Textarea)
• Clue (optional): message that helps to pick up the item, as long as it is ready to be picked up (Textarea)
• Name (required): name of the item that will be displayed at the moment the item is picked up (Input)
• Activate alias (optional): aliases assigned to scene elements that will be displayed when the activator is collected. Separated by ';' (Textarea)
• Deactivate alias (optional): aliases assigned to scene elements that will be hidden when the activator is collected. Separated by ';' (Textarea)
• Sound at pickup (optional): alias assign to the element of type sound that will be heard when the key is collected (Input)

Lock Data Structure

The Data Structure ox-escape__lock indicates that the element that has it assigned to it is interactive, but requires the use of an element of type ox-escape__key to be used, resulting in the activation and/or deactivation of other elements. The relationship between lock/key is realized by means of the Activation code field contained in each of the data sheets, considering that a key opens a lock if both codes are equal. When interacting with an element of this type, a list of all the keys collected will be displayed for the user to select the one he/she considers correct. If the selected option is the correct one the “lock” would be considered open.

In the case of “An agent of risk” the locked folder placed in the right corner has a data sheet of this type assigned to it. When interacting with it, a list of collected keys or triggers is displayed, in order to open it, the key of type ox-escape__key must be collected first. When selected, the lock is opened and the necessary actions are triggered, such as hiding the closed folder and showing the open folder.

It is associated at element level. Its structure is as follows:

• Activation code (required): code that is compared with that of the key to determine the element is resolved (Input)
• Message on opening (required): message that is displayed when the lock is successfully resolved (Textarea)
• Clue (optional): a message that helps the player to locate and/or solve the lock correctly (Textarea)
• Activate alias (optional): aliases assigned to scene elements that will be displayed when the lock is solved. Separated by ';' (Textarea)
• Deactivate alias (optional): aliases assigned to scene elements that will be hidden when the lock is solved. Separated by ';' (Textarea)
• Final riddle (optional): indicates if solving the lock leads to the end of the game (Checkbox)
• Sound on resolve (optional): alias assign to the element of type sound that will be heard when the lock is correctly resolved (Input)
• Sound on fail (optional): alias assign to the element of type sound that will be heard when the lock is badly resolved (Input)

Mechanism Data Structure

The ox-escape__mechanism data structure indicates that the element associated with it is interactive. It is used to give extra information to the user, in the form of a dialog, when he has interacted with the element, and it also allows to modify the visibility of other elements when it is used.

In the case of “An agent of risk” when the stool has been inspected, if it is interacted with again, it will give us information about the code, so the user can know this information throughout the duration of the game.

It is associated at the element level. Its structure is as follows:

• Message on opening (required): message displayed when interacting with the element (Textarea)
• Clue (optional): a message that helps the player to locate an element in the scene when it is already available to be used (Textarea)
• Activate alias (optional): aliases assigned to scene elements that will be shown when interacting with the mechanism. Separated by ';' (Textarea)
• Deactivate alias (optional): aliases assigned to scene elements that will be hidden when interacting with the mechanism. Separated by ';' (Textarea)
• Final riddle (optional): indicates if interacting with this element leads to the end of the game (Checkbox)
• Sound on opening (optional): alias assign to the element of type sound that will be heard when the dialog opens (Input)

Code Data Structure

The ox-escape__code data structure indicates that the element associated with it is interactive. For its operation it requires the use of an alphanumeric code. This code is defined in the data sheet in the Activation code field. When interacting with an element of this type, an input will appear in which the user must enter a code and it must match the one defined internally in the data sheet.

In the case of “An agent of risk” the number panel on the right hand side has a data sheet of this type. Selecting it will prompt the user to enter a code that must have been discovered by other elements in the game, for example the stool.

It is associated at the element level. Its structure is as follows:

• Description (required): message displayed to make a question give some hint (Textarea)
• Image (optional): can be used to give a hint (Image)
• Activation code (required): is the combination that must be entered and with which the user's text will be compared to determine if it is correct or not (Input)
• Message on opening (required): a message that will be displayed when the correct code is entered (Textarea)
• Clue (optional): a message to help the player enter the code correctly (Textarea)
• Activate alias (optional): aliases assigned to scene elements that will be displayed when the code is entered correctly. Separated by ';' (Textarea)
• Deactivate alias (optional): aliases assigned to scene elements that will be hidden when the code is entered correctly. Separated by ';' (Textarea)
• Final riddle (optional): indicates if interacting with this element leads to the end of the game (Checkbox)
• Sound on resolve (optional): alias assign to the element of type sound that will be heard when the code is correctly entered (Input)
• Sound on fail (optional): alias assign to the element of type sound that will be heard when the code is badly entered (Input)

Decision Data Structure

The ox-escape__decision data structure indicates that the element is interactive. When interacting with such a data sheet, the user must choose between two, three or four possible options to solve. Only one of these is correct and only if the correct one is selected will the necessary actions be taken.

In the case of “An agent of risk”, the open scissors contain such a data sheet. When selecting them the user will be asked what to do with them, leave them as they are or close them and save them. If the correct option is selected, close and save, the open scissors will be hidden and the closed scissors will be shown.

It is associated at the element level. Its structure is as follows:

• Description (required): message indicating the question to be answered by the user (Textarea)
• Image (optional): can be used to give a hint (Image)
• Option A (required): first option (Input)
• Option B (required): second option (Input)
• Option C (optional): third option (Input)
• Option D (optional): fourth option (Input )
• Valid option (required): indicates which of all is the correct answer (Dropdown)
• Title on opening (optional): title message to be displayed when the correct answer is selected (Input)
• Message on opening (required): message to be displayed when the correct answer is selected (Textarea)
• Clue (optional): a message to help the player locate and/or select the correct option (Textarea)
• Activate alias (optional): aliases assigned to scene elements that will be displayed when the correct option is selected. Separated by ';' (Textarea)
• Deactivate alias (optional): aliases assigned to scene elements that will be hidden when the correct option is selected. Separated by ';' (Textarea)
• Final riddle (optional): indicates if interacting with this element leads to the end of the game (Checkbox)
• Sound on resolve (optional): alias assign to the element of type sound that will be heard when the correct option is selected (Input)
• Sound on fail (optional): alias assign to the element of type sound that will be heard when select an option that is not correct (Input)

Assign Data Sheets to elements

In the Data Sheets section, inside the scene editor, is where you can associate the content with our sheet editor in an intuitive way.

Here you can relate each of the elements of the escape room with their specific content and functionality

Code editor: module import

To use this module, the minimum necessary is to import it from the code editor, and connect it with our Embed SDK. This is all the code you will need:

import OnirixEscapeRoomModule from "https://unpkg.com/@onirix/escape-room-module@1.0.0/dist/ox-escape-room-module.esm.js";
import OnirixEmbedSDK from "https://unpkg.com/@onirix/embed-sdk@latest/dist/ox-embed-sdk.esm.js";

const embedSDK = new OnirixEmbedSDK();
await embedSDK.connect();

const oxEscapeRoom = new OnirixEscapeRoomModule(embedSDK);

Customize

Use your own texts

This module allows you to customize the general texts of the game such as the initial screen, the final screen or the button texts.

This information must be passed as a second parameter in the constructor and must be complete, it does not get the original values by default.

The texts are the following:

const CUSTOM_UI_TEXTS = {
    init: {
        rules: 'Rules of the game',
        start: 'Start!',
        record: 'Current record:',
        title: "History and rules",
        ar: "AR ESCAPE ROOM"
    },
    rules: {
        rules: 'History and rules'
    },
    clues: {
        clues: "Clues"
    },
    question: {
        answer: "Answer"
    },
    activators: {
        header: "Inventory of activators",
        headerSelect: "Activator required",
        subheader: "Use some of your inventory.",
        empty: "You have not yet collected any activators",
        use: "Use this activator"
    },
    final: {
        header: "Congratulations! you have completed the game",
        time: "Your time",
        end: "Play again",
        completed: "AR ESCAPE ROOM COMPLETED",
        record: "Current record:",
        new_record: "New record!"
    },
    decision: {
        answer: "Answer"
    },
    unlock: {
        resolved: "Resolved!"
    },
    dialog: {
        button: "Continue playing",
        button_mechanism: "OK, I understand",
        button_activator: "+ Add to inventory",
        success: "Resolved!",
        fail: "Wow! it doesn't work",
        fail_desc_1: "You receive a ",
        fail_desc_2: " second penalty for failure."
    }
};

const oxEscapeRoom = new OnirixEscapeRoomModule(embedSDK, CUSTOM_UI_TEXTS);

Use your own styles

The body has a css class called ox-escape-room. From this selector the style of any part of the escape room can be modified.

To make this customization easier, each element has its own css class assigned to it:

• ox-escape-room-init: assigned to the initial screen
• ox-escape-room-header: assigned to the clock at the top
• ox-escape-room-bottom: assigned to the buttons at the bottom
• ox-escape-room-question: assigned to the dialog to enter a code
• ox-escape-room-activators: assigned to the dialog that shows the list of activators
• ox-escape-room-final: assigned to the final screen
• ox-escape-room-dialog: assigned to the general dialogs
• ox-escape-room-decision: assigned to the dialog that shows a decision
• ox-escape-room-clues: assidned tot he dialog that shows the list of clues
• ox-escape-room-rules: assigned to the dialog that displays the rules

By employing these selectors, you will be able to customize the style of individual elements under them in the DOM.

Let's add some code to change the white background of the top clock and the text color.

.ox-escape-room .ox-escape-room-header > div {
    background-color: rgba(0, 0, 0, 0.46) !important;
    color: white;
}

You can make infinite changes to the interface by adding the appropriate CSS selectors. Through your browser's development tools you can explore the names of the css classes used by the library and add your own custom selectors and rules.

Use your own code

The OnirixEscapeRoom class includes three listener triggering client actions:

• onInit: this will be trigger when the escape room starts. You can hear it in your code in this way:

  oxEscapeRoom.onInit = () => {
  /**
  * Your code here
  */
  }

• onIsFinal: this will be trigger when the game finish and includes the total duration of the game as a param. You can hear it in this way:

  oxEscapeRoom.onIsFinal = (time) => {
  /**
  * Your code here
  */
  }

• OnFinish: this will be launched when the user leaves the escape room. You can hear it in this way:

  oxEscapeRoom.onFinish = () => {
  /**
  * Your code here
  */
  }

In addition, the class allows the user to know at all times how long he/she has been playing the game. To do so, the following must be included in your code:

const time = oxEscapeRoom.getCurrentTime();