
Poki.com is a curated discovery platform for free, high-quality online games. You can reach millions of players around the globe and get a revenue share from advertising when your game is played.

This documentation explains how to transform an existing Babylon.js game to make it available on Poki.com

## Useful links

- [Poki.com](https://poki.com/)
- [Poki developers page](https://developers.poki.com/)
- [Poki SDK documentation](https://sdk.poki.com/)

## Some Babylon.js games on Poki

- [Minecraft Classic - By Mojan](https://poki.com/en/g/minecraft-classic)
- [Temple Run 2 - By Imangi Studios](https://poki.com/en/g/temple-run-2)
- [Tunnel Rush - By Deer Cat](https://poki.com/en/g/tunnel-rush)
- [Shell Shockers - By Blue Wizard Digital](https://poki.com/en/g/shell-shockers)

## The process

### 1) Include the Poki Javascript SDK

Add the following HTML within the `<head>` tags of your game HTML:

```html
<script src="//game-cdn.poki.com/scripts/v2/poki-sdk.js"></script>
```

### 2) Initialize the SDK

At the start of your game, initialize the SDK with the following JavaScript:

```javascript
PokiSDK.init()
  .then(() => {
    console.log("Poki SDK successfully initialized");
    // your code to continue to game
    continueToGame();
  })
  .catch(() => {
    console.log("Initialized, but the user likely has adblock");
    // your code to continue to game
    continueToGame();
  });
```

### 3) Integrate the Poki API into your game

Use the gameplayStart() event to describe when users are playing your game and the gameplayStop() event every time the gameplay halts, like in the case of a level finish, game over or when going back to a menu, pausing the game etc.
Use commercialBreak() to display video ads. It should be triggered on natural breaks in your game.
Use rewardedBreak() to allow for a user to choose to watch a rewarded video ad in exchange for a certain benefit in the game (e.g. more coins, etc.).

You'll find more details on the [Poki SDK Implementation guide for HTML5](https://sdk.poki.com/html5/).

### 4) Submit your game on Poki

On the [Developers page of Poki](https://developers.poki.com/), you can get in touch with Poki team or directly submit your game.



## How to useBabylon.js with React

For anyone interested, it is not difficult to integrate Babylon.js into a React application.

## What you need

It's up to you if you choose Create React App or a custom project; only how to load Babylon.js in a component will be discussed here. This example uses the newer `@babylonjs/core` ES6 NPM, but can also be modified to work with the `babylonjs` NPM.

## Component

We are going to build a reusable React component that takes care of starting up Babylon.js for us!

In a working React project you first need to install the package `@babylonjs/core` using npm or yarn:

```bash
npm install @babylonjs/core
```

```bash
yarn add @babylonjs/core
```

Create a file called `SceneComponent.jsx` and add this:

```jsx
import { useEffect, useRef } from "react";
import { Engine, Scene } from "@babylonjs/core";

export default ({ antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest }) => {
  const reactCanvas = useRef(null);

  // set up basic engine and scene
  useEffect(() => {
    const { current: canvas } = reactCanvas;

    if (!canvas) return;

    const engine = new Engine(canvas, antialias, engineOptions, adaptToDeviceRatio);
    const scene = new Scene(engine, sceneOptions);
    if (scene.isReady()) {
      onSceneReady(scene);
    } else {
      scene.onReadyObservable.addOnce((scene) => onSceneReady(scene));
    }

    engine.runRenderLoop(() => {
      if (typeof onRender === "function") onRender(scene);
      scene.render();
    });

    const resize = () => {
      scene.getEngine().resize();
    };

    if (window) {
      window.addEventListener("resize", resize);
    }

    return () => {
      scene.getEngine().dispose();

      if (window) {
        window.removeEventListener("resize", resize);
      }
    };
  }, [antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady]);

  return <canvas ref={reactCanvas} {...rest} />;
};
```

> In 45 lines we have:
>
> - Reusable React Component for Babylon.js.
> - Will resize the engine when window is resized.
> - Cleans up resources automatically when unmounted.
> - Any extra props you add to this component will flow to the canvas (ie: style/className).
> - We only need to add this component to a page and specify a method to run when the scene is ready. A `<canvas />` element is created and a Babylon.js engine and scene are created and started.
> - If you want more control of the runRenderLoop, just remove it from here and add it in your `onSceneReady` prop.
> - TypeScript source can be copied from [here](https://raw.githubusercontent.com/brianzinn/babylonjs-hook/master/src/babylonjs-hook.tsx).

The above component is available in NPM, if you prefer:

```bash
npm add babylonjs-hook
yarn add babylonjs-hook
```

Here is a page using our component:

```jsx
import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from "@babylonjs/core";
import SceneComponent from "./SceneComponent"; // uses above component in same directory
// import SceneComponent from 'babylonjs-hook'; // if you install 'babylonjs-hook' NPM.
import "./App.css";

let box;

const onSceneReady = (scene) => {
  // This creates and positions a free camera (non-mesh)
  const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);

  // This targets the camera to scene origin
  camera.setTarget(Vector3.Zero());

  const canvas = scene.getEngine().getRenderingCanvas();

  // This attaches the camera to the canvas
  camera.attachControl(canvas, true);

  // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
  const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);

  // Default intensity is 1. Let's dim the light a small amount
  light.intensity = 0.7;

  // Our built-in 'box' shape.
  box = MeshBuilder.CreateBox("box", { size: 2 }, scene);

  // Move the box upward 1/2 its height
  box.position.y = 1;

  // Our built-in 'ground' shape.
  MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
};

/**
 * Will run on every frame render.  We are spinning the box on y-axis.
 */
const onRender = (scene) => {
  if (box !== undefined) {
    const deltaTimeInMillis = scene.getEngine().getDeltaTime();

    const rpm = 10;
    box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
  }
};

export default () => (
  <div>
    <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id="my-canvas" />
  </div>
);
```

## A few notes on the code

This will show the basic playground in your website! A rotation has been added in the render loop (and the sphere changed to a box, so you would notice).

If you would like to see this in action, there is a boilerplate project using the original NPM `babylonjs`, which you can clone from

- [Reactjs +Babylon.js + Electron](https://github.com/blurymind/babylon-react-electron-app)

There is a boilerplate using above component with ES6 NPM `@babylonjs/core` here

- [Reactjs +Babylon.js](https://github.com/brianzinn/babylonjs-cra-vanilla-ts)

## Adding otherBabylon.js NPMs

If you start with the `@babylonjs` [ES6 NPMs](/setup/frameworkPackages/es6Support) (as we have done) then add those ones only.

> For GUI use `@babylonjs/gui` instead of the NPMs that don't start with `@`.

## Conclusion

Integrating Babylon.js into a React site turns out to be not so tough. SinceBabylon.js 3.1 we can use ES6 imports not only forBabylon.js, but also for supported libraries (GUI/loaders/etc).

If the above component we created does everything you need then that's all you will need and you are all set! If you want to take it a step further you may want to take the `react-babylonjs` renderer for a spin.

## react-babylonjs renderer

A renderer is a next-level React integration that lets you use JSX to build your scenes and GUI. State changes will flow automatically to yourBabylon.js components (and persist through HMR) and you can maintain your scene graph in a declarative syntax and through components.

There is an NPM project called `react-babylonjs` that is a react renderer for Babylon.js.

What you are able to easily do is powerful, because inside the Scene component you can declare Babylon.js objects like Cameras/Meshes/Lights/Materials/Textures/3D Models/etc, using familiar JSX. Meanwhile there are escape hatches that allow you to work imperatively as well.

> Babylon.js ES6 + CRA (Create React App) project examples:
>
> - JavaScript (examples for 3D models, GUI, VR, behaviors, props/state management)
>   - [source](https://github.com/brianzinn/create-react-app-babylonjs)
>   - [demo](https://brianzinn.github.io/create-react-app-babylonjs/)
> - TypeScript (GUI + physics + shadows)
>   - [source](https://github.com/brianzinn/create-react-app-typescript-babylonjs)
>   - [demo](https://brianzinn.github.io/create-react-app-typescript-babylonjs/)
> - [Electron](https://github.com/brianzinn/react-babylonjs-electron) (Electron added to above TypeScript project)
> - [PWA](https://github.com/brianzinn/create-react-app-babylonjs-pwa) (Progressive Web App)

`react-babylonjs` (https://github.com/brianzinn/react-babylonjs) links to many live storybook code examples (skybox, CSG, dynamic terrain, behaviors, GUI, react hooks, integrations (PIXI, react-spring, gsap, chroma-js), 3D models, physics, shadows, layers (glow/highlight), textures, fresnel parameters, PBR, etc.



Pixi.js is a fast, lightweight, open source 2D library with full support for webGL with a very fast rendering speed. It is great to use as a UI in combination with Babylon.js, making a perfect duo for your web game world.

## Setup Pixi.js rendering

```javascript
const pixiRenderer = new PIXI.WebGLRenderer({
  context: engine._gl,
  view: engine.getRenderingCanvas(),
  clearBeforeRender: false,
  autoStart: false,
});
```

## Add Pixi.js Sprites to Stage

```javascript
const stage = new PIXI.Container();
const sprite = PIXI.Sprite.from("https://i.imgur.com/1yLS2b8.jpg");
sprite.anchor.set(0.5);
sprite.position.set(canvas.width / 2, canvas.height / 2);
stage.addChild(sprite);
```

The _clearBeforeRender_ and _autoStart_ are two very important properties that must be used and set to _false_.

## Rendering Sequence

The render sequence of Babylon.js and Pixi.js is also very important, Babylon.js must be rendered first.

```javascript
engine.runRenderLoop(function () {
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage);
});
```

[Working JSFiddle Example Pixi.js in Front](https://jsfiddle.net/y5q7Lb1v/40/)

It is possible to place a Pixi.js stage behind a Babylon.js scene provided you use

```javascript
scene.autoClear = false;
```

to make the background of the scene transparent. In this case render Pixi.js before Babylon.js.

```javascript
engine.runRenderLoop(function () {
  pixiRenderer.reset();
  pixiRenderer.render(stage);

  scene.autoClear = false;
  scene.render();
  engine.wipeCaches(true);
});
```

It is also possible to combine these and have Pixi.js stages behind and in front of a Babylon.js scene.

```javascript
engine.runRenderLoop(function () {
  pixiRenderer.reset();
  pixiRenderer.render(stage);

  scene.autoClear = false;
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage1);
});
```

[JSFiddle Example Multiple Pixi.js Stages](https://jsfiddle.net/y5q7Lb1v/42/)

## WebGL1 Problems

When your browser is running webGL1 then you need to reset the Pixi.js context first for each rendering as below.

```javascript
engine.runRenderLoop(function () {
  if (engine.webGLVersion === 1) {
    pixiRenderer.reset();
  }
  scene.render();
  engine.wipeCaches(true);

  pixiRenderer.reset();
  pixiRenderer.render(stage);
});
```

## Spine animation with pixi.js

![image info](https://raw.githubusercontent.com/pixijs/examples/gh-pages/examples/assets/pixi-spine/spineboy-pro.png)

Running 2D spine animation is now easy using the pixi spine extension @https://github.com/pixijs/pixi-spine
Here's a sample code of how to run a simple spineboy animation

```javascript
loader.add("spineboy", "https://raw.githubusercontent.com/pixijs/examples/gh-pages/examples/assets/pixi-spine/spineboy-pro.json");

loader.load((loader, resources) => {
  let spineboy = new PIXI.spine.Spine(resources.spineboy.spineData);
  spineboy.scale.set(0.4);
  spineboy.state.setAnimation(0, "portal", false);
  spineboy.x = 1000;
  spineboy.y = 650;
  spineboy.state.getCurrent(0).onComplete = () => {
    spineboy.state.setAnimation(0, "shoot", true);
  };
  pixi.stage.addChild(spineboy);
});
```

[Working playground with spine animation](https://www.babylonjs-playground.com/#DX6LWQ)
For more api info as regards spine animation, visit [github](https://github.com/pixijs/pixi-spine)

## Pixi.js Versions

Always use the [latest released version of Pixi.js](https://github.com/pixijs/pixi.js/releases)


Babylon.js and Poki

Useful links

Some Babylon.js games on Poki

The process

1) Include the Poki Javascript SDK

2) Initialize the SDK

3) Integrate the Poki API into your game

4) Submit your game on Poki