---
description: >-
  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.
---

# Phaser Quick Start

### 🔐 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.

{% content-ref url="../../registering-your-game-and-generating-api-keys" %}
[registering-your-game-and-generating-api-keys](../../registering-your-game-and-generating-api-keys)
{% endcontent-ref %}

{% hint style="danger" %}
Your Private Key will only be shown once—make sure to copy and store it securely.
{% endhint %}

<figure><img src="https://2133953908-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2R0efebFfiw8qumiNT9v%2Fuploads%2FQjOVSt6Kmn0oxZsFCP6l%2Fimage.png?alt=media&#x26;token=59f65bb0-2db0-4f4a-a22a-8055294053dd" alt=""><figcaption></figcaption></figure>

***

### 🧱 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.

{% content-ref url="../../defining-placeholders-in-the-portal/creating-ad-surfaces-in-the-portal" %}
[creating-ad-surfaces-in-the-portal](../../defining-placeholders-in-the-portal/creating-ad-surfaces-in-the-portal)
{% endcontent-ref %}

***

### 📦 Step 3: Install the SDK

Install the ReneVerse Phaser SDK using npm:

{% tabs %}
{% tab title="JS" %}
```
# Install via NPM
npm install --save @reneverse/rene-sdk-phaser
```
{% endtab %}
{% endtabs %}

You can check for specific versions at [ ](https://www.npmjs.com/package/@reneverse/rene-sdk-phaser)[https://www.npmjs.com/package/@reneverse/rene-sdk-phaser](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.

```typescript
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](full-implementation-code) for a complete working sample.
