# 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="/pages/VYSU0lMyIEF1Yz2A8zNk" %}
[Registering Your Game & Generating API Keys](/publisher-flow/registering-your-game-and-generating-api-keys.md)
{% 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="/files/RoG4hFnzkeMG6ESqZ1C0" 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="/pages/dUHoZRl9AUcXzZIndPV3" %}
[Creating Ad Surfaces in the Portal](/publisher-flow/defining-placeholders-in-the-portal/creating-ad-surfaces-in-the-portal.md)
{% 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> 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](/publisher-flow/sdk-integration/phaser-3/full-implementation-code.md) for a complete working sample.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reneverse.io/publisher-flow/sdk-integration/phaser-3/phaser-quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.