Connecting No-Code Events to Custom Scripts
This document provides a guide for setting up no-code events in custom scripts.
The VIVERSE no-code events can be accessed through custom scripts. The events can be found in the root directory of your PlayCanvas project in the @viverse/create-extensions-sdk.mjs file. Here's a look at the file.
export const TriggerTypes = {
Base: 'trigger:0',
Echo: 'trigger:1',
PCAppEventSubscribe: 'trigger:100001',
NotificationCenterSubscribe: 'trigger:200001',
NotificationCenterSubscribeEntityPicking: 'trigger:200002',
TheatreJSSubscribe: 'trigger:210001',
TheatreJSSubscribeSheetEnd: 'trigger:210002',
EntitySubscribeAnimationEvent: 'trigger:300001',
EntitySubscribeAnimationStart: 'trigger:300002',
EntitySubscribeAnimationEnd: 'trigger:300003',
EntitySubscribeCollisionStart: 'trigger:300004',
EntitySubscribeCollisionEnd: 'trigger:300005',
EntitySubscribeTriggerEnter: 'trigger:300006',
EntitySubscribeTriggerLeave: 'trigger:300007',
SitInSeat: 'trigger:300008',
SharePhoto: 'trigger:400001',
EnterAnyWorld: 'trigger:400002',
EnterMyWorld: 'trigger:400003'
}
export const ActionTypes = {
Base: 'action:0',
Echo: 'action:1',
PCAppEventPublish: 'action:100001',
NotificationCenterPublish: 'action:200001',
TheatreJSPublish: 'action:210001',
TheatreJSPlaySheet: 'action:210002',
EntityRigidbodyAddForceInPhysics: 'action:300001',
EntityPlayAnimation: 'action:300002',
EntityEnable: 'action:300003',
EntityDisable: 'action:300004',
EntityToggleEnabled: 'action:300005',
EntityFadeIn: 'action:300006',
EntityFadeOut: 'action:300007',
EntityPlaySound: 'action:300008',
EntityEnableCollision: 'action:300009',
EntityDisableCollision: 'action:300010',
EntityToggleCollision: 'action:300011',
InworldNpcWaitingSpeak: 'action:300012',
InworldNpcStopWaitingSpeak: 'action:300013',
EntityEnableByTag: 'action:300014',
EntityDisableByTag: 'action:300015',
EntityCheckPoint: 'action:300016',
EntityEnableById: 'action:300017',
EntityDisableById: 'action:300018',
EntityStopSound: 'action:3000019',
EntityAssetUnload: 'action:3000020',
EntityAssetReload: 'action:3000021',
EntityDestroy: 'action:3000022',
ParticleSystemPlay: 'action:3000023',
Quest: 'action:400001',
TeleportAvatar: 'action:400002',
AssignUserAsset: 'action:400003',
Vote: 'action:400004',
ShowToastMessage: 'action:400005',
TaskComplete: 'action:400006'
}Trigger usage
Calling custom code from script when the player clicks on an object
Let's say we want to give our players the ability to click on an object and when that object is clicked, we want to call a method from a custom script. This is a good use-case for the NotificationCenterSubscribeEntityPicking trigger. In this example, when the user clicks on the specific object, a door opens.
Create the ClickableObject.mjs script
A. Create the following script and name it ClickableObject.mjs.
import { Script } from 'playcanvas';
import { TriggerTypes } from '../@viverse/create-extensions-sdk.mjs';
export class ClickableObject extends Script {
/**
* Called when the script is about to run for the first time.
*/
initialize() {
const event = TriggerTypes.NotificationCenterSubscribeEntityPicking;
this.entity.on(event, () => {
this.objectClicked();
this.app.fire('DoorRotator:rotateDoor');
});
}
/**
* Called for enabled (running state) scripts on each tick.
*
* @param {number} dt - The delta time in seconds since the last frame.
*/
update(dt) {
}
objectClicked() {
console.log('Objected Clicked!');
}
}B. Add ClickableObject.mjs script to the object that the player will click on.
Create the DoorRotator.mjs script
A. Create the following script and name it DoorRotator.mjs.
import { Script } from 'playcanvas';
export class DoorRotator extends Script {
/**
* Called when the script is about to run for the first time.
*/
initialize() {
// listen for the DoorRotate:rotateDoor event
this.app.on('DoorRotator:rotateDoor', this.rotateDoor);
}
/**
* Called for enabled (running state) scripts on each tick.
*
* @param {number} dt - The delta time in seconds since the last frame.
*/
update(dt) {
}
rotateDoor() {
console.log('Rotate Door!');
}
}B. Add the DoorRotator.mjs script to an object or entity.
Tigger usage with more flexibility
Calling custom code from script when the player clicks on an object and making the script more flexible
In the previous example, we created a custom script called ClickableObject.mjs. The script added functionality that rotates a door whenever a specific object is clicked. Let's say there was another scenario where we wanted to have a 2nd object that the user could click on, but we wanted to fire a different event other than the rotateDoor method. We could easily copy our ClickableObject.mjs script, give it a different name and change the rotateDoor call inside the script. The downside here is that we now have 2 scripts that we have to maintain. As alternative, we can remove the rotateDoor event call, add an attribute to our script for the event name and then add the different event names through the PlayCanvas editor.
Update the ClickableObject.mjs script
A. Modify the code in ClickableObject.mjs script to the following.
import { Script } from 'playcanvas';
import { TriggerTypes } from '../@viverse/create-extensions-sdk.mjs';
export class ClickableObject extends Script {
/**
* @attribute
* eventToFire
* @type { string }
* @title Event To Fire
*/
eventToFire
/**
* Called when the script is about to run for the first time.
*/
initialize() {
const event = TriggerTypes.NotificationCenterSubscribeEntityPicking;
this.entity.on(event, () => {
this.objectClicked();
this.app.fire(this.eventToFire);
});
}
/**
* Called for enabled (running state) scripts on each tick.
*
* @param {number} dt - The delta time in seconds since the last frame.
*/
update(dt) {
}
objectClicked() {
console.log('Objected Clicked!');
}
}
Additional trigger usage
Calling custom code from script when a player enters a trigger area
Another common scenario that creators may face is firing an event when a player enters a trigger area. This is a good use-case for the EntitySubscribeTriggerEnter trigger. In this example, when the user enters a trigger area, a door opens.
Create the TriggerArea.mjs script
A. Create the following script and name it TriggerArea.mjs.
import { Script } from 'playcanvas';
import { TriggerTypes } from '../@viverse/create-extensions-sdk.mjs';
export class TriggerArea extends Script {
/**
* Called when the script is about to run for the first time.
*/
initialize() {
const event = TriggerTypes.EntitySubscribeTriggerEnter;
this.entity.on(event, () => {
this.triggerEntered();
this.app.fire('DoorRotator:rotateDoor');
});
}
/**
* Called for enabled (running state) scripts on each tick.
*
* @param {number} dt - The delta time in seconds since the last frame.
*/
update(dt) {
}
triggerEntered() {
console.log('Trigger Entered!');
}
}B. Add TriggerArea.mjs script to trigger area that the player will walk through.
Action usage
Calling custom code from script when an action executed
Let's say we want to give our players the ability to click on an object and when that object is clicked, we want to call a method from a custom script. This is a good use-case for the NotificationCenterSubscribeEntityPicking trigger. In this example, when the user clicks on the specific object, a door opens.
Create the DisabledObject.mjs script
A. Create the following script and name it DisableObject.mjs.
import { Script } from 'playcanvas';
import { ActionTypes } from '../@viverse/create-extensions-sdk.mjs';
export class DisabledObject extends Script {
/**
* Called when the script is about to run for the first time.
*/
initialize() {
const event = ActionTypes.EntityDisable;
this.entity.on(event, () => {
this.objectDisabled();
this.app.fire('DoorRotator:rotateDoor');
});
}
/**
* Called for enabled (running state) scripts on each tick.
*
* @param {number} dt - The delta time in seconds since the last frame.
*/
update(dt) {
}
objectDisabled() {
console.log('Object Disabled!');
}
}B. Add DisabledObject.mjs script to trigger area that the player will walk through. In this example the DisabledObject.mjs script was added to the trigger area in the previous example. Be sure to disable or remove the TriggerArea.mjs script from the previous example.
Last updated
Was this helpful?