Verge3D Puzzles — Soft8Soft
Description: Verge3D's Puzzles editor is a powerful and intuitive tool for development of rich web applications of any complexity without any programming.

# Visual Logic Editor, aka Puzzles

Verge3D Puzzles is a powerful yet easy-to-use tool for creating behavior scenarios. With Puzzles you can make your 3D content interactive and responsive to user actions.

If you are no coder (designer, marketer, engineer, teacher?), this tool will significantly extend your possibilities. But even if you are a seasoned programmer, you may find it very helpful both in prototyping and in production.

## Contents

- Running the Editor
- User Interface
- Controls
- Tabs
- Right Click Menu (Over a Puzzle)
- Right Click Menu (Over the Workspace)
- Backup
- Plugins
- Available Puzzles
- Stock Library Entries

#

## Running the Editor

You can start adding or editing Puzzles for an application by clicking the button in the 'operations' column on the main page:

... or by using the button on the right bar when on the application page:

#

## User Interface

### Layout

Puzzles are dragged out from the expandable toolbox (located on the left) to the main workspace area. The 3D rendering is contained in a floating viewport window. This window can be moved, resized, hidden, paused, and checked for FPS.

The control buttons for the Editor are located at the bottom bar. On the top, tabs are displayed (default tabs are called init and main).

The layout settings (tabs, viewport position and size) are saved individually for each project, making it possible to restore the settings if Puzzles are opened with another browser or workstation.

### Viewport Resizing / Resetting

Drag a corner or an edge of the viewport window to resize it.

You can reset the position and size of the viewport window by selecting Reset Viewport Dimensions in the context menu invoked by right-clicking on an empty spot of the workspace:

### Refreshing the Editor

Use the browser's standard refresh page button to reload the editor and the application running in the viewport.

Any unsaved puzzles or changes will be removed, and all variables and scene objects properties will be reset to their initial values. Therefore you can use this method for cleaning up application state in the course of development iterations.

#

## Controls

### Run

After clicking this button, your puzzles take effect. Under the hood, the Run button interprets the puzzles currently present in the work space (in all tabs) and produces JavaScript code from them. The code is then executed by the browser and thus applied to the application running in the background.

Most of the times, you can repeatedly click Run in order to immediately apply your tweaks for the puzzles. However, if you want to reset the state of your app and perform a clean run, simply use the browser's standard refresh page button instead. Once the page is refreshed, the puzzles automatically take effect. Be sure to save your changes before reloading the page otherwise they will be lost!

### Save

This button saves your puzzles. Similarly to the Run operator, the Save button interprets the puzzles currently present in the work space (in all tabs) and produces JavaScript code from them. However, the code is not executed. Instead, all puzzles and the generated code are saved in the application folder for persistent storage as the files visual_logic.xml and visual_logic.js, respectively.

The Save operator requires the local development server to be running. The server is launched automatically with the first instance of Blender, 3ds Max or Maya, but if it went down for some reason, a connection error will be displayed when you try to save your puzzles:

In this case you should launch Blender, 3ds Max or Maya, or, if the program is already running, start the App Manager again.

Upon saving, the Puzzles Editor generates backups for your scenarios. See here for more info.

### Undo/Redo

With these buttons you can undo or redo operations made upon your puzzles. You can also use the Ctrl-Z shortcut for undo and Ctrl-Y for redo.

### Toolbox/Libraries

Use this button to switch the Puzzles Editor toolbox to the library mode and back.

### Show/Hide Toolbox

Use this button to show/hide the Puzzles Editor toolbox. Hiding the toolbox can free some space and is useful for reviewing/refactoring existing puzzles.

### Show/Hide Viewport

Use this button to show/hide the 3D rendering viewport. Hiding the viewport can free some space and improve the Puzzles Editor performance.

### Center Puzzles

Place your puzzles at the center of the workspace.

### Open Help

Use this button to open the Puzzles Editor documentation.

#

## Tabs

You can reorder your puzzles in tabs to make them more manageable and responsive. To create a new tab, click on the + (plus) button in the top bar, and enter the tab name in the text field.

Now you can add puzzles to the new tab. To move some puzzles from another tab, use the cut and paste shortcuts Ctrl-X / Ctrl-V. All tabs share the same namespace, so you can define procedures or variables in one tab and use them in another.

To delete a tab, click on the × (cross) button near its name. Use this operation with caution as it cannot be undone except by restoring from a backup. All puzzles from a deleted tab will be destroyed!

To rename the tab, double click on its title. Type a new name in the appeared text field, then press Enter.

#

## Right Click Menu (Over a Puzzle)

The context menu can be invoked by right-clicking on a puzzle (residing in the toolbox or placed in the workspace), or on the empty workspace. The menu provides the access to a bunch of very helpful operators.

### Duplicate

Creates a copy of a group of puzzles. You can also use the copy and paste shortcuts Ctrl-C / Ctrl-V to do the same.

### Add Comment / Remove Comment

Adds a comment to a puzzle. The comment is represented with a question mark button by clicking on which a comment window is revealed. The comment may be saved persistently in both open and closed state.

A comment can be removed by selecting Remove Comment in the right-click menu.

By the way, this is not the only method to put comments in your code. You can also use the comment puzzle to add comments that are always visible.

### Inline Inputs / External Inputs

By default, a puzzle can be in its inlined or external inputs form. This menu option switches between these forms. The difference is purely cosmetic, yet sometimes transforming puzzles can make them more readable and compact.

### Collapse / Expand

A group of puzzles can be collapsed to make it more compact.

### Disable / Enable

Use this menu option to skip a group of puzzles from execution.

### Delete

Deletes a group of puzzles. Alternatively, use the Del key, or drag and drop them back to the toolbox.

### Save to Library

Saves a group of puzzles to the Library for the purpose of reusing it later.

### Help

Opens the corresponding puzzle's page from the Puzzles Reference. Available both for the toolbox...

...and for puzzles in the workspace:

You can also access the help pages from this manual's contents window (on the left), or by using the following table.

#

## Right Click Menu (Over the Workspace)

### Undo / Redo

Reverses or repeats the most recently performed action. You can also use the shortcuts Ctrl-Z / Ctrl-Shift-Z.

### Straighten Up

Repositions all the puzzles in a tab so that they form a neat line.

### Collapse / Expand

Works similarly to the single group variant, except it affects all puzzles in a tab.

### Delete

Works similarly to the single group variant, except it deletes all puzzles in a tab.

### Reset Viewport Dimensions

Resets the position and the dimensions of the viewport window to better fit the screen resolution.

#

## Backup

Every time you click the Save button, the previously saved file visual_logic.xml is copied to the folder called v3d_app_data/puzzles_backup with a time stamp added to the file name.

This allows you to restore any of the previously saved revisions of your puzzles when you need it. Simply copy a file back to the application folder root and remove the time stamp from its name. Your puzzles will be updated after refreshing the editor.

#

## Plugins

Visual Logic Editor supports plugins, which is the preferred way to extend the Editor with new puzzles. The Verge3D distribution already contains stock E-Commerce and E-Learning plugins, but you can also install more or even create your own plugins. See more information here: Plugins.

There is also a community-supported list of the plugins available from the third-party developers.

#

## Available Puzzles

Based on their function, the puzzles are grouped into the following categories:

Initialization Events Selectors Objects Materials Animation/Constraints Camera/Lights | Scenes Time HTML AR/VR Audio/Video Physics Post-processing | Logic Text Loops Numbers Lists Dictionaries Variables | Procedures System Advanced E-Commerce E-Learning/SCORM

#

## Stock Library Entries

The built-in Puzzles library contains the following entries:

Alert Message Alert Message Color Picker Context Menu | Detect Pressed/Released Hovered Cursor HTML Dialogs Inquiry Form | Keyboard Controls Performance Tweaks Preloader Prepare Sound | URL Params VR Controls

## Got Questions?

Feel free to ask on the forums!