Quick Start

Get your credentials

Your API requests are authenticated using the API key and Private Key. Any request that doesn't include this will return an error.

Follow the steps below to create a game and generate an API and private keys.

Creating Game with API Credentials

The Private Key is only visible at the time you generate the keys and after that you will never be able to see it again, so make sure you copy it.

Setting up Ad surfaces

To implement advertisements in your game, you must first define ad surfaces within the ReneVerse Portal. Follow the steps below to create ad surfaces in your games.

Creating AdSurfaces

Install the SDK

The best way to interact with our API is to use one of our official libraries:

JS

# Install via NPM
npm install --save @reneverse/rene-sdk-phaser

You can check for specific versions at https://www.npmjs.com/package/@reneverse/rene-sdk-phaser depending on your requirements.

Initializing PhaserHooks and Serving Ads

Let's initialize the Phaser hooks provided in rene-sdk-phaser with the previously acquired credentials, retrieve all ad surfaces configured in the ReneVerse portal, and serve Ads in a Phaser 3 game.

import { PhaserHooks } from "@reneverse/rene-sdk-phaser";
import { IRefPhaserGame, PhaserGame } from "./game/PhaserGame";
import { useRef } from "react";

function App() {

  //  References to the PhaserGame component (game and scene are exposed)
  const phaserRef = useRef<IRefPhaserGame | null>(null);
  
  // Initialize PhaserHooks with API Key and Private Key for ReneVerse
  const phaserHooks = new PhaserHooks({
    apiKey: '<YOUR API KEY>',
    privateKey: '<YOUR PRIVATE KEY>',
  });
  
  const serveAd = async () => {
    if (phaserRef.current) {
      const scene = phaserRef.current.scene;

      if (scene) {
  
        // Fetch Ad surfaces configured in the ReneVerse portal
        const adSurfaces = await phaserHooks.useReneVerse().getAdSurfaces();
    
        // Check if there are any ad surfaces configured in the ReneVerse portal
        if (!adSurfaces.items.length) {
          console.log("No ad surfaces found");
          return;
        }
    
        // Fetch Ad from ReneVerse
        const ad = await phaserHooks
          .useReneVerse()
          .getAd(adSurfaces.items[0].adSurfaceId);
      
        // Load Ad image
        if (ad.adId) {
          scene.load.image("dynamicAd", ad.url as string);
          
          scene.load.once("complete", () => {
            
            // Get Random Position
            const x = Phaser.Math.Between(100, 900);
            const y = Phaser.Math.Between(100, 600);
            
            //  `add.sprite` is a Phaser GameObjectFactory method and it returns a Sprite Game Object instance
            const adSurface = scene.add.sprite(x, y, "dynamicAd");

            // Set display size
            adSurface.setDisplaySize(300, 200);
            
          };
          
          scene.load.start();
        }
      }
    }
  }
  
  // Creating a button to call the serveAd function
  return (
      <div>
        <PhaserGame ref={phaserRef} />
        <button onClick={serveAd}>
          Serve Ad
        </button>
      </div>
  );
}

export default App;