Talking about Game development, HTML5, Javascript, Monetize and Phaser.
Do you already submit your HTML5 games to Wanted 5 Games? You definitively should, because your game will be shown to – and hopefully played by – million of visitors, with an easy to integrate JavaScript API or a Construct 2 plugin.
I am going to show you how to integrate their API in your Phaser game in a matter of minutes.
I am writing this guide after the integration of the API in my actual commercial game Irresponsible Ninja, so you are about to read a detailed step by step guide to the actual integration in an actual game.
Although this guide refers to Phaser, it’s easily adaptable to any other JavaScript framework.
1 – INCLUDE WANTED 5 GAMES SCRIPT
You have to call Wanted 5 Games script before the scripts wich manage your game. Your <head> section in the index page should look like this:
<!DOCTYPE html>
<html>
<head>
<title>Irresponsible Ninja</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, minimum-scale = 1.0, user-scalable = 0, minimal-ui" />
<link rel = "shortcut icon" type = "image/png" href = "favicon.png"/>
<style type = "text/css">
* {
padding: 0;
margin: 0;
}
body{
background: #000000;
}
canvas {
touch-action-delay: none;
touch-action: none;
-ms-touch-action: none;
}
</style>
<script type = "text/javascript" src = "//wanted5games.com/js/game.js"></script>
<script src = "phaser.min.js"></script>
<script src = "game.js"></script>
</head>
<body>
<div id = "thegame"></div>
</body>
</html>
Line 21 calls the API and it has been included before Phaser (line 22) or the game itself (line 23).
2 – INITIALIZE THE API
Once your game is approved, you will receive a unique ID by email. In your window.onload callback function or in any other part of the script which is executed before the game itself, you should initialize and configure your game.
This is what I made:
window.onload = function() {
CloudAPI.init({
"id": 866,
"splash": false
});
// ...
// REST OF THE CODE
// ...
let gameConfig = {
type: Phaser.AUTO,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
parent: "thegame",
width: width,
height: height
},
scene: [preloadGame, playGame],
backgroundColor: 0x132c43
}
game = new Phaser.Game(gameConfig);
window.focus();
}
As you can see, lines 2-5 initialize the API, while the Phaser game itself is created at line 21. Remember to change the ID at line 3 with your game ID.
3 – DEFINE WHEN YOUR ACTUAL GAME STARTS
By default, Wanted 5 Games will display the first advertisement when the actual game starts, so it’s important for you to tell the API when the game starts.
When the game starts, or even better when the player presses “play” button, add a line this way:
playButton.on("pointerup", function() {
CloudAPI.play();
// ...
// REST OF THE GAME
// ...
}, this);
In the callback function of my “play” button, I tell Wanted 5 Games my game started, at line 2.
4 – DEFINE WHEN YOUR ACTUAL GAME ENDS
Following the same concept seen at step 3, you have to tell Wanted 5 Games when the actual game ends, and I did it by adding this line to the method which handles the “game over” state:
2shakeAndRestart() {
CloudAPI.gameOver();
// ...
// REST OF THE CODE
// ...
}
At line 2 I tell Wanted 5 Games it’s game over.
5 – PRELOAD WANTED 5 GAMES LOGO
You are required to display Wanted 5 Games logo and remove your own logo. Wanted 5 Games Logo isn’t provided as an image but as an object with paths to various images, and it’s up to you to choose the one which best fits in your game GUI.
In preload method, when it’s time to preload all assets, I added:
preload() {
// ...
// CODE TO PRELOAD ALL GAME ASSETS
// ...
let wanted5logos = CloudAPI.logos.list();
this.load.image("wanted5logo", wanted5logos.horizontal);
}
At line 5 we retrieve all available logos in an object with logo URLs, this way:
{
vertical: 'path to vertical logo',
horizontal: 'path to horizontal logo'
}
and at line 6 the horizontal logo has been preloaded.
6 – DISPLAY THE LOGO WHEN REQUESTED
You don’t have to just display the logo. Optionally the logo can be disabled by Wanted 5 Games. Moreover, the logo can have a link attached to it, or can be just a plain image.
Somewhere in the code which handles your game main menu, add this code:
if(CloudAPI.logos.active()) {
let wanted5logo = this.add.sprite(game.config.width / 2, game.config.height - 60, "wanted5logo");
wanted5logo.setInteractive();
wanted5logo.on("pointerup", function() {
if(CloudAPI.links.active()) {
window.open(CloudAPI.links.list()['logo']);
}
}, this);
}
Let’s see this code line by line:
Line 1: check if the logo is active, that is if you have to display a logo
Line 2: add the sprite with the logo
Line 3: set the logo interactive, trasforming it into a button
Line 4: add an input listener to logo button
Line 5: check if the logo has been set as active, that is if there’s a link attached to it
Line 6: open a new window pointing at the retrieved URL
7 – ADD GLOBAL SOUND CONTROLS
No matter if you already added “Sound on” and “Mute” buttons, Wanted 5 Games can enable or disable sounds through their API.
You will have to define two functions which will act exactly in the same way as the functions you call when you press “Sound on” or “Mute” buttons, and return true.
In my case, when I enable of disable sounds I act on a variable called gameOptions.soundOn which can be true or false.
So in my case the code to add is:
CloudAPI.mute = function() {
gameOptions.soundOn = false;
return true
}
CloudAPI.unmute = function() {
gameOptions.soundOn = true;
return true
}
It’s quite straightforward: according to the function called, I turn gameOptions.soundOn to true or false then always return true.
And that’s all, I hope this guide helps you in the integration of Wanted 5 Games API, I already submitted a game and will let you know how it’s performing.
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.