If you're using NPM to manage your game's assets and packages, it might make sense for you to use the gameplay SDK via NPM, rather than using the built-in SDK injected directly into the browser on heyVR.
To do so, you'll need to take 2 steps:
It's very important to take this step before uploading your game on heyVR. Since both SDKs are identical and provide the same exact services, only one of them can be present in the game. Enabling both will cause collisions such as executing the commands twice.
To disable the built-in SDK, simply set the SDK Version to none, before uploading a build. That's all.
Next, you'll need to install the SDK via NPM, using the following command:
npm i @heyvr/sdk-gameplay
This package contains both the production SDK, and the sandbox.
Make sure to remove any files and code related to the built-in SDK, if you are migrating it to the NPM package. This includes the
@heyvr/sdk-typespackage, as SDK package comes with its own types.
The package provides exports via 3 different paths:
@heyvr/sdk-gameplay/dist # Production SDK
@heyvr/sdk-gameplay/sandbox # Sandbox SDK
@heyvr/sdk-gameplay/types # Type definitions
To start using the package, import the piece of SDK that you need to use. The name of the exports are the same (Capitalized) as the built-in SDK. For example:
window.heyVR.user.isLoggedIn().then( ... );
window.heyVR.inventory.getCatalog().then( ... );
becomes:
import {User, Inventory} from "@heyvr/sdk-gameplay/dist";
User.isLoggedIn().then( ... );
Inventory.getCatalog().then( ... );
These objects have the same signature as explained in SDK Documentation. To learn about the available methods and use cases, please consult those documents.
The package comes with built-in strong types for all of its exports, including their parameters, return types, and so on. Make sure to install TypeScript for optimal efficiency and accuracy.
One might plan to test their game locally before publishing it, as they should. You can achieve this by using the sandbox SDK. It has an identical signature as the production SDK, but comes with an additonal export that allows you to modify the state of the SDK, known as Mocking.
Start by importing the necessary SDKs from the sandbox:
// All of the code below is to be considered an example. Adjust them
// based on your game's requirements.
import {Mocker, UserSandbox} from "@heyvr/sdk-gameplay/sandbox";
// Set configuration (if needed)
Mocker.set( 'config', 'game.slug', 'something' );
// Import a json file and override the entire state (if needed)
Mocker.mock.import( { ... } );
Mocker.mock.leaderboard( { ... } );
// You can set specific data for specific SDKs
Mocker.set( 'user', 'userBalance', 250 );
// Let's try to get the user's balance
UserSandbox.getAmountCoins().then( console.log ).catch( console.warn );
// Listen to coin change events, to update the UI
UserSandbox.onCoinChange( console.log );
// Trigger coin change manually, in testing mode
Mocker.set( 'user', 'userBalance', 500 );
The sandbox comes with a set of basic mock data, which you can access via:
/node_modules/@heyvr/sdk-gameplay/dist/sandbox.json
You can use this file as a starting point, make the adjustments and then feed it to the Mocker to update the SDK's state. These data will be initially loaded by the SDK, so you don't have to start with an empty state.
You can learn more about importing the config here.