💫Phaser Quick Start

This guide walks you through setting up the ReneVerse JS SDK in your Phaser 3 game—from installing the SDK to serving your first ad.

🔐 Step 1: Get Your API Credentials

Before using the SDK, generate your API Key and Private Key by registering your game on the ReneVerse Portal.

💾Registering Your Game & Generating API Keys

Your Private Key will only be shown once—make sure to copy and store it securely.

---

🧱 Step 2: Define Ad Surfaces in the Portal

To serve ads, you’ll first need to configure ad surfaces in the ReneVerse Portal. These act as placeholders that define where and how ads will appear in your game.

🖼️Creating Ad Surfaces in the Portal

---

📦 Step 3: Install the SDK

Install the ReneVerse Phaser SDK using npm:

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

The following code snippet shows how to initialize PhaserHooks provided in rene-sdk-phaser with your credentials, fetch ad surfaces, and serve a Smart Ad in your Phaser 3 scene.

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;

💡 Want to see the full example? Head to Full Implementation for a complete working sample.