WebStory Example

The WebStory project is a small modeling tool for telling interactive stories that run in the web browser. It uses many essential features of Cinco, but is small enough to be comprehensible for Cinco novices.

Download Project ZIP

Getting Started

We provide here only very rough step-by-step instructions to getting started. Please refer to the the user’s manual from the resources page in case more detailed instructions are required.

Prepare Cinco

• download the correct ZIP file for your OS from the download page
• extract the ZIP file
• run the cinco launcher (cinco, cinco.exe or cinco.app) from the extracted main folder cinco-2.0.1
• Confirm workspace directory (or select different location first)

Import the WebStory Project

• Right-click in Project Explorer
• Import
• General / Existing Projects into Workspace
• Click on button ‘Select Archive File’
• Click on ‘Browse’ and find the downloaded info.scce.cinco.product.webstory.zip
• Finish

Build and Run WebStory Product

• Right-click on info.scce.cinco.product.webstory/model/WebStory.cpd
• Generate Cinco Product
• Wait for completion dialog
• Right-click on project root node info.scce.cinco.product.webstory
• Run as / Eclipse Application

Test Story

• Right-click in Project Explorer of the newly launched Eclipse instance
• New / New WebStory Project
• Give it a name (we assume myProject from now)
• Finish
• Right-click on myProject in Explorer
• New / New WebStory
• Give it a name
• Create a minimal story with a ‘StartMarker’ connected to a single ‘Screen’
• Select Screen’s backgroundImage in the Cinco Proerties view (bottom)
• Save story and verify that Model Validation window says “all checks passed!”
• Press “G” button in top menu bar
• Open myProject/generated-html/index.html: Right-click, open with, System editor

First Real Story

Now try telling a story where something real has to be done, e.g., one that requires the player to find an item or secret that is later needed to reach somewhere (modeled with a variable that marks the ‘found’ state).

• Add ClickAreas to your Screen and connect them to other screens
• Use ‘Variables’ (which are just booleans) with ‘ModifyVariable’ activities to record story progress (like found items, gained information, etc.)
• Use ‘Conditions’ to branch according to ‘Variables’: The solid transition will be taken if the connected ‘Variable’ is true, the dashed transition if it is false.
• Double-click on ‘ModifyVariable’ toggles between setting the connected variable to true and false (indicated by green and red LED)

While you’re modeling the story, compare the definitions from the various specification files (cpd, mgl, style) with the behavior of the modeling tool.

Suggestions for Extensions

These extensions were given as assignments to the students attending the STRESS 2016 summer school. If you want to try out some ideas easy to realize, they might be a good start.

Additional Check

Write an additional check that adds a warning if the story contains a screen with no backgroundImage set and register it with the @mcam_checkmodule annotation in WebStory.mgl. See other checks in src/info/.../webstory/check/ for reference.

Initialized Variables

• In the MGL, add an ‘initialValue’ attribute of type ‘EBoolean’ to the ‘Variable’ node type
• change the code generator so that it initializes the variables with the set value instead of ‘false’ as it does now. You find the generator in src/info/.../generator/VariableDeclarationsGenerator.xtend.

Advanced Conditions

Add a node type ‘AdvancedCondition’ with the following behavior

• use the diamond shape of the normal ‘Condition’, but with different color
• allow multiple ‘Variables’ connected as data input
• add an enum ‘LogicConnector’ with ‘AND’, ‘OR’, ‘NOT’ values
• add this enum as attribute to AdvancedCondition
• add a check that produces an error if ‘not’ is selected and multiple variables are connected
• extend the code generator so that the generated activity looks like this:

{
  type: "condition",
  activity: 1,
  condition: "xxx",
  trueSuccessor: 2,
  falseSuccessor: 3,
}

• for the generated condition (xxx) use the following syntax:
  • AND with three input variables: a && b && c
  • OR with two input variables: a || b
  • NOT with one input variable: !a
  • etc.