APIDOCUMENTATION
GENERAL
Home
Testing Link
Vatom CLI
SPACES
Overview
Release notes

World Creation

Introduction
Creating Models
Importing Objects
Adjusting Looks
Scene Limitations
Health Monitor
Recommended external tools

Using Plugins

Media: Audio
Places
PLUGINS IN SPACES
Overview
Publishing
Support & Feedback

Guides

Creating a Plugin
Creating a Component
Custom Avatars

Building & Publishing

Examples

API Reference

Globals
Audio
Hooks
Menus
Messages
Objects
Paths
User
World
SMART NFT DESIGNS
Overview

Designs

Create a New NFT Design

Views

Create a New View
Developing Your View
Publishing a View
Change LogForum

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:

FileDescription
/srcThis folder contains all the Javascript code for your plugin.
/src/index.jsThis is the entry point into your plugin. This file must export a default class which subclasses BasePlugin.
/resourcesThis contains any resource files that should be available to your plugin. During runtime, you can get a URL to a resource using the paths.absolute() API.
/iconThis folder must contain a single PNG icon, sized to 200x200. This icon will be displayed on the Vatom Market. This is required when publishing plugins.
/galleryThis folder contains the images to display on your Vatom Market listing. The images must show an example of your plugin being used and what it does. This is required when publishing plugins.
/vatom.lockContains details about your plugin to use when publishing to the Vatom Market.

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.

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

Note: When running a plugin this way, the plugin will only load for you. Anyone else who visits the space on a different machine will not be able to load the plugin.

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.
  • onSettingsUpdated(field, value) - Called when a user has changed a setting in your plugin.
  • onUnload() - Called when your plugin is about to be removed.

Next steps

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