Tutorial

Prefer to learn by following along a tutorial? Well this is for you.

Writing your first scene

Make sure all the steps from Getting Started has been done successfully. At this point, your browser should display the example game through localhost

Open src/game/allParagraphs.ts. You will be greeted with the demo game content inside function getParagraph(). Delete all content inside

Currently, Visual Studio Code users can quickly generate VeinIF code snippets. type paragraph and press TAB or Enter for a new paragraph object.

Snippet!

{
  name: "",
  content: ``,
  choices: [
    {
     id: 1, 
     content: ``, 
     nextName: `` 
    },
  ],
},

For other IDEs, this function is not supported yet. Simply copy the above code into getParagraph()

The first paragraph object should has property name: "start"

The nextName property of a choice and name property of a paragraph must match to successfully "branch" them together.

Example:

{
   name: "start",
   content: `This is the content of the first paragraph`,
   item: [
     {
      itemName: `flower`,
      itemQty: 1,
      description: `A single purple flower.`,
       itemCode: `purple-flower`,
     },
          
   ],
   choices: [
     {
      id: 1, 
      content: `Nice. Let's go to the next one.`, 
      nextName: `next-p` 
     },
   ],
 },
 {
   name: "next-p",
   content: `This is the next paragraph!`,
   choices: [
     {
      id: 1, 
      content: `Content Content!`, 
      nextName: `start-1` 
     },
   ],
 },