📰Getting Started | ⭐**Updates |** 📝 Guides | 🔢 API | ❓FAQ

Guides Overview

• Web Editor Basics

• HoloLens

• Mobile

• Meta Quest

• Chapter Series Documentation

• Assets

• Scripting

• Enklu Embedded

• API Reference

  Scripting Overview

  VineML

• Release Notes

  Release Notes

• FAQ

  FAQ

• Contact

VineML is a powerful markup language designed to be very familiar to anyone that has used HTML. It is useful for creating any type of element hierarchy in a scene and assigning values to those elements. A combination of VineML and Behavior scripts can be used to create rich applications in Enklu.

Language QuickStart

<?Vine>
/* A vine header is optional, but helps with code readability.*/

/* Documents can have only a single root element. */
<Float>
    /* Tags can be self closing like this button. */
    <Button label='Hello World!' />
</Float>

Note that VineML supports C-style block comments.

VineML files are called documents. These documents are made up of a hierarchy of nested tags, starting from a single root element. Each tag can have zero or more attributes. To create your first VineML document, it's easiest to jump right in with an example.

<aside> ⚠️ Warning: All vines must start with < so put any comments below that starting line

</aside>

This is not valid VineML.

/* This will create an error*/
<?Vine>

This is valid VineML.

<?Vine>
/* This will work fine*/

Tags

This is not valid VineML.

<Container>

These are both valid options.

<Container></Container>
<Container />

This is not valid VineML.

<Text>Hello World</Text>

Instead, we use attributes.

<Text label='Hello World' />

Tags follow XHTML conventions, i.e. every tag must be closed. In HTML, we can write <br>, but in VineML this is invalid. Every tag must have a closing tag or it must be a self-closing tag.

In addition, tags may not have raw text inside of them. All values are passed to tags through attributes.

Attributes

<Text
    label='Hello'
    font.size=100
    width=1000.5
    position=(0, 1, 1)
/>

While tags define the object structure, attributes define the object properties. VineML has support for string, boolean, number, and vector literals. Any property of an element may be passed through element attributes.

Embedded Vines

Vines can be embedded into Behavior scripts with the use the of the global app object found throughout every project. Here is an example of creating an array of vines inside a Behavior script. You can create and control more complex vine systems using this style. Check out the public Button script for another reference.

var self = this;
var text = "hello";
var arrayElements = [];
var numberOfElements = 5;

function enter() {
  
  var position = vec3(0,0,0);
    
  for(let i=0; i<numberOfElements; i++){
    
    position.y +=0.05;
    
		//create array of vines
    arrayElements[i]  = app.elements.createFromVine(self,   
      '<Text id="myVineID" label="' + text + 
        '" fontSize= 50"' +
        '"position=' + position +
      '"/>'
    );
  }
}

function exit() {
 
  for(let i=0; i<numberOfElements; i++){
		//destroy vines to prevent a memory leak
    app.elements.destroy(numberOfElements[i]);
  }
}

module.exports = {
  enter: enter,
  exit: exit
};

Built-In Tags

VineML supports several built-in elements that you can use to build complex interactions for your experience. All tag elements share a core set of attributes.

<Container>

An invisible element used for organization, often as the root tag of a VineML script.

<Text>

An element for displaying text.

  <Text 
    label='Hello'
    fontSize=200
    position=(0,0.5,0)
    fontColor='#2DCCD3'
  />

| --- | --- | --- | --- |

<Button>

Basic button element.

A <Button> element contains a <Text>, so the attributes of a <Text> element may also be applied.

| --- | --- | --- | --- |

<Image>

Displays an image.

| --- | --- | --- | --- |

<Menu>

A paginated display for menu options. The menu options are comprised of the tag's children.

| --- | --- | --- | --- |

<SubMenu>