npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@game8.io/sdk

v1.0.8

Published

Game8.io HTML5 SDK

Downloads

125

Readme

npm GitHub version license

Game8.io HTML5 SDK

This is the documentation of the "Game8.io HTML5 SDK" project.

Game8.io is the biggest collections of high quality, cross-platform games. We provide great games for your website within minutes!

Running into any issues? Check out the F.A.Q. within the Wiki of the github repository before mailing to [email protected]

Implementation

Implement the following snippet within your game or within the <head> section of your index.html. The G8_OPTIONS object is safe to obfuscate if needed.

Make sure that the SDK is loaded before your game starts or while your game is loaded for the best user experience. Not after, and especially not by clicking a button within the game, as then it will take too long for an advertisement to load; making the user wait. Only load the SDK once!

window["G8_OPTIONS"] = {
    "gameId": "[YOUR GAME ID HERE]",
    "onEvent": function(event) {
        switch (event.name) {
            case "SDK_READY":
                // When the SDK is ready.
                break;
            case "SDK_ERROR":
                // When the SDK has hit a critical error.
                break;
            case "SDK_GAME_START":
                // advertisement done, resume game logic and unmute audio
                break;
            case "SDK_GAME_PAUSE":
                // pause game logic / mute audio
                break;
            case "SDK_REWARDED_WATCH_COMPLETE":
                // this event is triggered when your user completely watched rewarded ad
                break;
        }
    },
};
(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.src = 'https://unpkg.com/@game8.io/sdk';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'g8sdk'));

Mandatory settings:

  1. Make sure to add your game hash (gameId), which you can retrieve from your GAME8.io control panel.
  2. Invoke a method to pause AND mute your game within the SDK_GAME_PAUSE event. Will be called every time a video advertisement is ready to play. It is important that the game is muted, as background audio through video advertisements is forbidden.
  3. Invoke a method to resume your game within the SDK_GAME_START event. Will be called every time a video advertisement is done playing.

Invoke an advertisement

Correct ad-placement is key for a higher revenue potential of your game. Before you submit, make sure that your game includes a pre-roll and mid-rolls:

Pre-roll: an ad shown before the user starts playing the game. What you basically want to do is display the pre-roll as fast as possible to the user, so they don’t have the time to change their minds and close the game. Best practice: placing the pre-roll on buttons in the loading/splash screen (Start, Play, Continue).

Mid-roll: an ad shown in between game sessions. Ideally placed on all non-gameplay buttons, to spread the chance that users will see ads. Best practice: placing the mid-rolls on each button in the Game Over/Win screen (Replay, Next, Menu).

To get the most out of your game revenue and to maintain a user friendly experience, we ask you to keep these requirements in mind when deciding on the placement of the ads:

  • Ads only display upon user input, e.g. when clicking a button
  • Ads display outside of the gameplay only, to not disrupt the game experience
  • Game audio is muted when the ad is displayed
  • The game pauses when the ad is displayed

Don’t worry about spamming users with ads by placing ad-calls on too many buttons: we regulate the ad-interval through the SDK, so users will only see an ad when the set time-frame has passed.

Now, everything should be set up for you. All you need to do now in order monetize your game is to call g8sdk.showAd() at the appropriate time in your game. This showAd() call should be behind a touchUp/mouseUp event in order to work correctly on mobile and adhere by the ad rules.

Note: Make sure to check if the g8sdk instance exists and the showAd method exists as well. In case the SDK script goes offline or when adblocker stops it for whatever reason. Its just good practice when it comes to using third-party solutions.

nextButton.addEventListener('mouseUp', function () {
    if (typeof g8sdk !== 'undefined' && g8sdk.showAd !== 'undefined') {
         g8sdk.showAd();
    }
});

A lot of developers miss out on a lot of revenue by not calling so-called mid-roll advertisements. Do know that you can call the g8sdk.showAd(); method as often as you want. We make sure its not possible to call too many ads after another in order to uphold a proper user experience and advertisement guidelines.

Rewarded Ads

Users can watch an in-game video and receive rewards (like in-game currency, premium content, extra lives and credits, etc) in return.

Debugging

Games, which include the SDK, can be easily debugged by calling the following from a browser developer console:

g8sdk.openConsole();

This will open a tiny toolbar, which allows you to call fake advertisements, making the implementation much easier and reliable. Clear your localStorage to disable debugging.

Options

The G8_OPTIONS object allows the following properties:

| Property | Description | | --- | --- | | gameId | our gameId which is unique for each one of your games; can be found at your GAME8.io account. | | onEvent | The callback function can handle events from within the SDK. |

Events

SDK EVENTS

The SDK events should be used by developers to start or pause their game or handling critical errors. Unless the errors are ad related, then they could hook into the AD_ERROR event, however; the SDK should gracefully fail, so this should not be needed.

| Event | Description | | --- | --- | | SDK_READY | When the SDK is ready. | | SDK_ERROR | When the SDK has hit a critical error. | | SDK_GAME_START | When the game should start. | | SDK_GAME_PAUSE | When the game should pause. |

IMA SDK EVENTS

The SDK events are custom ads for handling any thing related to the IMA SDK itself.

| Event | Description | | --- | --- |

AD EVENTS

The GAME8.io SDK uses the IMA SDK for loading ads. All events of this SDK are also available to the developer. https://developers.google.com/interactive-media-ads/docs/sdks/html5/

| Event | Description | | --- | --- | | AD_ERROR | When the ad it self has an error. | | IMPRESSION | Fired when the impression URL has been pinged. |

Running a game from a local server

To make development and testing easier, you can run your game from a local server.

To do this:

  • Add the game draft using the Yandex Games Console.
  • Configure the localhost server to serve content via SSL.
  • Open the game draft by adding the ?game_url=https://localhost:8080 parameter.

[!NOTE] For security reasons, only the localhost domain is supported in the game_url parameter.

Setting up a local server

There are several ways to set up a local server. One of them is described below:

  1. Install npm following the instructions on the Node.JS website. Using npm, install the http-server package:
    > $ npm install -g http-server
  2. Navigate to the game directory and create a certificate and private key via openssl:
    > $ cd path/to/game/
    > $ openssl genrsa 2048 > key.pem
    > $ openssl req -x509 -days 365 -new -key key.pem -out cert.pem
    # fill in the required information
  3. Run the game:
    > $ http-server --ssl -c-1 -p 8080 -a 127.0.0.1
    Starting up http-server, serving ./ through https
    ...
    Available on:
    https://127.0.0.1:8080
    Hit CTRL-C to stop the server
  4. Open the https://localhost:8080 page in your browser. When a security warning appears, click the confirmation button.

Running the game

Open the game draft page in the browser and add a ?game_url= parameter with the game address on the local server. For example, for a game with the id, the link will look like this:

https://ga8.io/game/test/{id}?game_url=https://localhost:8080

After the game launches on the local server, you can use all the SDK features from it.