Support for Poki and localisation added to IGX SDK

Support for the Poki web game portal SDK has been added to the IGX SDK, so you can now deploy your games to Poki using the latest release on Github.

I have also deployed a number of my Facebook Instant games to Crazy Games using the IGX SDK:

Support for collecting the users language has also been added so FBInstant.getLocale() should now return the users browser language.

Facebook Instant Games hits Personality Quizzes with the Ban Hammer

As of yesterday apps defined as personality quizzes on Facebook Instant Games have been limited to prevent their virality, which is basically the death knell for these self gratification apps. If you have written one of these apps (like me) then how will the changes affect your app? You will no longer have access to the users profile photo, their connected friends or the ability to switch to any of your other apps. As these apps rely heavily on the users profile picture being heavily featured to personalise the content it makes these apps even more useless than they were previously.

Its sad news, but developers have been enraged by these personality quiz apps appearing on Instant Games and polluting the very idea behind Instant Games. That said, there should be a place for personality quiz apps because there is huge demand for them, so please Facebook, create an Instant Apps :).

One major positive that has come out of this is that the many developers filling their personality quiz apps with unlicensed imagery will finally stop profiting off the back of other peoples work! For that reason alone it also time for celebration.

Whilst the title says “ban hammer”, I was being being a little creative. These apps are not currently banned, however Facebook are updating their policies to get rid of them, so they will be banned in due course.

MEME arrives on Facebook Instant Games platform

So I got bored with writing games for Facebook Instant Games for a bit and decided to jump on the entertainment app (NO THEY ARE NOT GAMES :D) train that seems to be doing well on Facebook Instant Games right now. I wrote a MEME generator / creator that lets users create their own MEME’s and share them to their timelines. The user can generate around 900 different MEME’s with over 500 different backgrounds. They can customise the text, text size, colour and even sign them. I don’t hold much hope out for it doing well, but its just something that I really wanted to create and really just a stepping stone to much larger more involved entertainment apps.

Coming to web and native mobile using the IGX SDK very soon.

Booty5 HTML5 Game Maker Update – Support for Facebook Instant Games Added

Facebook Instant Games Support

Finally released the latest version of Booty with support for Facebook Instant Games. Within the Booty5 engine you will find a new class called Instants which is a small wrapper around the Facebook Instants SDK. Games exported from Booty with Instants enabled in the settings will automatically initialise the Facebook Instants SDK and download all preloaded global resources, note that you will need to download any scene local resources yourself after the main download.

To make your project Facebook IG compatible simply tick the Facebook Instants check box in the projects settings then enter the local launch URL into the Host box in project settings, e.g:

https://www.facebook.com/embed/instantgames//player?game_url=https://localhost:8080/

Dragon Bones Animation Support

Unfortunately you cannot edit Dragon Bones animations within the Booty5 editor but you can add the associated PNG, skeleton and atlas JSON files that are exported from Dragon Bones to the editor as resources and access them from within code, e.g:

[sourcecode language=”js”]
// Parse dragon bone data
var factory = dragonBones.b5Factory.factory;
var skel = JSON.parse(b5.Utils.resolveResource("my_skeleton", "raw").data);
var atlas = JSON.parse(b5.Utils.resolveResource("my_atlas", "raw").data);
factory.parseDragonBonesData(skel);
factory.parseTextureAtlasData(atlas, b5.Utils.resolveResource("my_texture", "brush"));

// Create an actor containing the dragon bones armature and attach it to a parent actor
var dba = factory.buildArmatureDisplay("name");
dba.animation.play("anim");
dba.x = 0.0;
dba.y = 0.0;
ParentActor.addActor(dba);
[/sourcecode]

I will in the near future wrap the above into the engine / editor to make it more readily accessible, as well as add the same support for Spine.

Other Stuff

The editor has had a whole host of bug fixes and additional changes to keep pace with the Booty5 game engine. See the Booty5 game engine for more details on those changes.

Upcoming Demos and Documentation

Over the next few days I will be releasing the full Booty5 projects for some of my recent Facebook Instant games so you can use these as a reference / starting point. These games cover many areas of the Facebook Instants SDK including displaying ads, using in-app purchases, submitting leaderboard scores, grabbing and displaying leaderboard entries, inviting other players to play, sharing progress, switching contexts and posting updates to Messenger.

The following full projects have been uploaded thus far:

You can grab the latest version of the Booty5 Game Maker from the Booty5 website.

I am still in the process of updating documentation, I will post details here once that is finished.

Simple Messaging System with Redis and Node.js

Hey all, been a while since I posted anything constructive, I’ve been so busy wasting my time creating games for Facebook Instant Games Messenger (I will do a proper write up with my analysis and final findings / thoughts on this very soon). Not all has been lost working on Instant Games however. Two of my games required an instant messaging system that enables me to send real-time messages between players which ironically the Instant Games SDK doesn’t cater for. So I created one using Node.js and Redis (these two bad boy pieces of tech together are like sweet music). You can grab the code from Github here.

Note that you will need to install this to your own server, I like to run most of my node modules using PM2. So to get the messaging system up and running just run pm2 msys. The server looks to the /msys endpoint, but you can change this in msys.js if you need it to go elsewhere. No, I don’t answer questions on how to set up servers and mess with Apache config files because I hate all that junk, it gets in the way of my actual coding which I do enjoy :). If you cannot do this stuff yourself then you probably should be paying someone else do this for you.

Oh word of warning, any messages sent will time out after 7 days (this is to keep Redis memory usage down), but you can extend this to whatever time limit you like. Messages are queued, when you collect the pending messages it collects them all and deletes them from the database.

Ok, how to use client side? Here is a simple class (erm I mean collection of functions) with an awesome original name that I ripped out of one of my games for you guys to use:

[sourcecode language=”js”]
var Backend = {};

Backend.SendMessage = function(data, done_callback)
{
var url = "https://yourdomain.com/msys?c=s&t=<your token>";
url += "&g=1";
url += "&u=" + data.to_id;
url += "&d=" + encodeURIComponent(JSON.stringify(data));
b5.Utils.SendGetRequest(url, function(response) {
if (done_callback !== undefined)
done_callback(response);
})
}

Backend.SendMessageMulti = function(recipients, data, done_callback)
{
var users = "";
var len = recipients.length;
for (var t = 0; t < len; t++)
{
users += recipients[t];
if (t < (len – 1))
users += "_";
}
var url = "https://yourdomain.com/msys?c=s&t=<your token>";
url += "&g=1";
url += "&m=" + users;
url += "&d=" + encodeURIComponent(JSON.stringify(data));
b5.Utils.SendGetRequest(url, function(response) {
if (done_callback !== undefined)
done_callback(response);
})
}

Backend.GetMessages = function(done_callback)
{
var url = "https://yourdomain.com/msys?c=g&t=<your token>";
url += "&g=1";
url += "&u=" + Social.GetPlayerID();
b5.Utils.SendGetRequest(url, function(response) {
if (response.status == 200)
{
var data = decodeURIComponent(response.responseText);
var obj = JSON.parse("[" + data + "]");

if (done_callback !== undefined)
done_callback(obj);
}
else
{
if (done_callback !== undefined)
done_callback();
}
})
}
[/sourcecode]

There are a few functions in here that you will need to implement yourself:

  • Social.GetPlayerID() – Replaced with your players user ID, if you are using Facebook Instants SDK then use FBInstant.player.getID()
  • b5.Utils.SendGetRequest() – Performs a GET request, e.g:

[sourcecode language=”js”]
b5.Utils.SendGetRequest = function(url, callback)
{
var req = new XMLHttpRequest();
req.onreadystatechange = function()
{
if (callback != undefined && req.readyState == 4)
callback(req);
}
req.open("GET", url, true);
req.send();
}
[/sourcecode]

Anyway, that’s it, hope you find more useful than I did. Happy coding :).

Shuffle Match live on Facebook Instant Games in Messenger

Shuffle Match Facebook Instant Game
Shuffle Match Facebook Instant Game

My first HTML5 Facebook Instants games is now live on Messenger. I actually finished this games a couple of months back, but because of the Facebook privacy saga all further game reviews were put on hold, so hundreds (potentially thousands) of games have been sat in limbo. Its good to finally see a product live on the platform however.

Shuffle Match is basically a memory matching game where you are shown a bunch of numbered tiles, you memorise them then they slide off screen and you have to try and remember where they all were. The game is monetised by offering the player the ability to continue by watching an ad if they run out of lives. Its a simple, fun game that’s great to play against friends.

Play Shuffle Match on Messenger Now

Just released my latest cross platform game Idle Gangsters on iOS, Android and Facebook Gameroom. The game is an experiment o see if it was possible to mix Idle Incremental and Match-3 game play styles and it seems to have worked.

Rise through the ranks of the mafia in this fun, addictive idle incremental match-3 game.

Start out as a low life punk and work your way up through the mafia ranks to Godfather using every manner of lie, trick and scheme possible.
Muscle in on cities, launder goods, build up illegal rackets and generate cash, gaining the respect of your fellow mafians and rising through the ranks of the mafia. Hire bosses, kit them out, order hits, bribe cops, fight off rival gangs and the feds and much more.

  • Launder loot for the mob using Match-3 generating large amounts of cash and respect
  • Buy into 20 rackets to earn cash without lifting a finger
  • Free upgrades for all rackets
  • Smash your way through 10 ranks of the mafia from Punk to Godfather unlocking exciting new content
  • Muscle in on and take over 10 different cities from Brooklyn to Las Vegas
  • Hire upgradeable city bosses to increase cash flow, reduce racket costs, generate cash offline and use perks
  • Equip bosses with up to 16 perks to boost city rackets and laundering
  • 20 loot laundering boosts / hazards
  • 10 global powerups which affect time and cash flow
  • Unlimited missions for big cash boosts
  • Unlimited special missions for huge cash boosts which take place across 10 unique minigames
  • Extra 5 daily bonus minigames which generate cash, respect and diamonds
  • Stats tracking, over 150 individually tracked stats
  • Around 300 achievements to earn
  • Facebook connect with invites, gifting and leaderboards
  • Cloud save game backup and restore

Idle Gangsters is available for free on the App Store for iPhone and iPad

Idle Gangsters is available for free on the Google Play for Android

The game is also available for free on Facebook and Facebook Gameroom

Idle Gangsters Title Screen
Idle Gangsters Title Screen

Idle Gangsters Match-3
Idle Gangsters Match-3

Idle Gangsters Idle Incremental
Idle Gangsters Idle Incremental

Cookie Clicker Save the World free game for iOS, Android and Facebook Gameroom

Just released my latest mobile and Facebook game Cookie Clicker Save the World targeted at raising awareness of climate change in a fun and challenging gaming environment. Gamers playing the game are gradually introduced to various climate issues and what can be done to help, such as recycling, using wind power etc..

The game is an idle builder / tapper based in the near future where current day currencies have been replaced with a new cryptocurrency called cookies. Players have to research and buy new technology to reduce carbon emissions reducing mankind’s impact on the environment.

Game features include:

  • Bake cookies by clicking on the cookie moon, use cookies to purchase items and technology that help the climate and produce more cookies.
  • Use cookies to buy over 200 upgrades and mods to speed up carbon reduction and cookie production.
  • Earn over 200 achievements.
  • Use powerups to speed cookie cooking production.
  • Evolve your cookie mastery to gain extra benefits.
  • Daily bonus awards.
  • Login with Facebook, invite friends, share progress and compete with friends in the cookie master leaderboards.
  • Offline cookie cooking.
  • Random blessings boost your play.
  • Deal with random curses such as striking workers, maintenance shut downs and more.
  • Endless play allows you to play an indefinite amount of time

Cookie Clicker Save the World is available for free on the App Store for iPhone and iPad

Cookie Clicker Save the World is available for free on the Google Play for Android

The game is also available for free on Facebook and Facebook Gameroom

You can find out more about the game at the official Cookie Clicker Save the World website.










Upgrading from Unity 5.4 to 5.6

Recently had the need to upgrade a couple of projects from Unity 5.4 to 5.6 and after much trial and error and scouring the net for solutions I finally managed it. My project uses two plugins which do not play well with Unity 5.6, these include:

  • TextMeshPro – Do not use the version that is currently on the asset store (Version: 1.0.55.0b11) or your project will explode, instead grab it from here. If you already have a version of TextMesh Pro installed into your project then delete it (backup fist!), then install the version this link
  • Chartboost – Update to version 6.6.4 as previous versions do not compile with Unity 5.6!
  • Facebook SDK – Deleted old Facebook SDK 7.8 including the Facebook related stuff in the Plugins folder, installed latest Facebook SDK from fresh!

By the way, if you see errors appear, shut Unity down and reopen the project them allow, most of the time the errors just disappear.

From Unity 3D to Facebook Hosted!

So I decided to have a go at getting one of my mobile games up and running on Facebook’s site, chatting to other game developers they warned me to steer clear as its a pain and it will eventually break when they change to the next API release etc… Of course I didn’t heed their advice and went ahead and gave it a try. The main reason being that Facebook now host game content for you, so you no longer need to host it on your own web site using up your own meagre bandwidth and best of all you do not need to buy and manage SSL certificates, whats not to like.

Exporting to Unity WebGL

So the first thing I did was export a build to WebGL gave it a quick test. However I didn’t like the Unity logo, app name or full screen button at the bottom of the screen so I opened up the exported index.html and commented out the following lines of html to remove them and provide a clean clutter free view of my game:

[sourcecode language=”html”]
<div class="logo"></div>
<div class="fullscreen"><img src="TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
<div class="title">Tens Junior</div>
<p class="footer">&laquo; created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> &raquo;</p>
[/sourcecode]

Set the screen resolution

Ok, I wasn’t happy with the default screen resolution that Unity exported my game at so I changed it, taking into account that my game will be shown in a frame on Facebook, so I changed the canvas width and height in the Unity WebGL export settings dialog to 480×800. Lovely, it now fits on a 1080 display.

Create a Facebook App for your game

So I now have an app that I can submit to Facebook and have it hosted by them, the next thing to do is to go and create a Facebook app. To do that head over to the Facebook Developer Site and create an app. When creating the app ensure that you add the Facebook Web Games platform and in settings ensure that you have WebGL and Simple Application Hosting enabled. In general settings also ensure that you at least provide App Name, Email Address, Privacy Policy URL, App Icon (1024×1024) and select the Games category.

Uploading your game to Facebook to be hosted

In the Facebook Web Games section, locate the Simple Application Hosting section, just beneath that there is a link named “uploaded assets”, click that link, a new browser tab will open which takes you to the Manage Hosted Asset section, click the add and setup button to the top right then under Hosting Type select Unity (WebGL).

Now go to your Unity exported WebGL folder and zip up all the files, this should include index.html, TemplateData and Release folders, ensure that index.html is in the root of the zip. Go back to Facebook Manage Hosted Assets section and click the Upload Version button, select the zip you just created then upload. The file will show up as processing, after a while this will change to Standby, at this point you can push your app to production by clicking on the small Move to Production button (If you want to later replace the build with a new version, simply move the build back to Standby by clicking the Move to Standby button, delete the build then re-upload a replacement.

Once the build is live you can visit your app url (see the Facebook Web Games Page URL in the Facebook Web Games section of your apps settings). Visit this URL and you will be able to test the game. Note that your game will not go live however until it is reviewed by Facebook and approved.

Getting reviewed

I am quite lucky with my game because I do not require any extra permissions. The game only logs into Facebook, uses the players profile picture and shares the players progress via the share dialog. To get the ball rolling you need to click the Add Products button to left hand side of the screen in app settings then select “App Centre”, fill out a bunch of info about the app including short / long description, app icons / screen shots etc. Once that is added you can submit for review. Note that if you need any additional permissions such as publish_action then you will need to provide additional info during submission.

Finally don’t forget to make your app public (go to the App Review section of the apps settings and click the button at the top of the screen, this will toggle your app between live and development mode).

The end result can be seen by taking a look at Tens Maths IQ Challenge on Facebook.