Creating a Plugin

Before creating a plugin, make sure you have gone through the preparation steps listed in the Overview.

To create a new plugin, run the command vatom plugin new and follow the on-screen instructions. This should create a new directory with this content:

It also generates a Webpack environment for your plugin, which means you are able to use any NPM package via ES6 imports. The available commands you can run within your plugin's directory are:

• npm install : Installs dependencies. Make sure to run this first.

• npm start : Starts a temporary dev server hosting your plugin.

• npm run publish : Publishes your plugin to the Vatom Market.

The BasePlugin class

This is the main class of your plugin, and the first one loaded by Spaces. This class must be exported by /src/index.js.

export default class MyPlugin extends BasePlugin {
    /** Plugin info */
    static id = "com.mycompany.myplugin"
    static name = "My Plugin"
    /** Called on load */
    onLoad() {
        // Create a button in the toolbar
        this.menus.register({
            icon: this.paths.absolute('button-icon.png'),
            text: 'My Plugin',
            action: () => this.onButtonPress()
        })
    }
    /** Called when the user presses the action button */
    onButtonPress() {
        // Show alert
        this.menus.alert(`Hello from ${MyPlugin.name} version ${require('../package.json').version}!`, 'Hello world!', 'info')
    }
}

The plugin example that is created for you simply creates a button in the bottom nav bar called "My Plugin", which shows an alert when clicked.

Sideload your plugin

When developing a plugin, you can sideload it and bypass the Vatom Market for testing. Follow these steps to test your new plugin:

• Run npm install to install dependencies if you haven't yet
• Run npm start to start a local server
• In your Space, select the Plugins button from the top menu bar
• Select the (+) icon and paste the temporary URL: http://localhost:9000/plugin.js

You should now see a "Development Mode Enabled" banner at the top of the screen if all went well.

BasePlugin lifecycle

A plugin will generally go through a couple lifecycle events, which you can use to provide functionality. These are from the BasePlugin class and include:

• onLoad() - First event called when the plugin loads. This is normally where you would register your UI menus and components.
• onUnload() - Called when your plugin is about to be removed.
• onSettingsUpdated() - Called when the settings for your plugin have changed.
• onEnter() - Called immediately after the user enters the space.

Next steps

Find out how to attach logic to an in-world object by creating a Component, or read through the API Documentation.