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!

The Facebook SDK (I’m still using an old 7.8 in my project), I’m about to check out if that works, wish me luck :) .

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:

      <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>

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.

Facebook Share Dialog Borked!

Checked your games with Facebook integration lately? Noticed how they no longer share the title and descriptions that you so beautifully crafted?

Ok, there seem to have been some changes over at Facebook to the share dialog from what I understand you can no longer specify the contentTitle / contentDescription of the post being shared when you share a link, instead it is populated with Facebook scraped data. This is quite devastating for game developers that would like to share a custom story of the player doing something cool in their game. There does appear to be a way around it however, the link that you supply to the Facebook dialog is scraped by Facebook and any open graph tags (OG tags) are read and used to describe the content in the Facebook share dialog. Now using a simple server script we can generate a page with the tags in based on data passed to the URL via GET. A simple such script would look something like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
	<meta property="og:type" content="article" />
<?php

	$title = $_GET["t"];
	$description = $_GET["d"];
	$icon = $_GET["i"];
	$title = htmlspecialchars($title);
	$description = htmlspecialchars($description);
	$icon = htmlspecialchars($icon);

	echo "    <meta property='og:title' content='" . $title . "' />\n";
	echo "    <meta property='og:description' content='" . $description ."' />\n";
	echo "    <meta property='og:image' content='" . $icon . "' />\n";
?>
</head>
<body>
</body>
</html>

You would obviously need to work this into some type of landing page or the page your user will be redirected to when they click the link in the shared post will be blank!

Facebook now host Games up to 500MB!

I’m usually so busy that I miss cool stuff sometimes, anyway, I’ve discovered today that Facebook will now host WebGL (including Unity) and HTML5 game content for you for free. So gone are the days of having to host your own and get a SSL certificate etc.. There are some limitations however such as 500MB max content size, 500 max files and no use of scripting languages such as PHP. Still for most uses its great.

You would not believe how m any times I had to retype that last paragraph! My son gave me a gaming keyboard and after years using tghe same keyboard, its proving very difficult getting used to one with bigger keys!

Ok, more details about this cool new Facebook feature here

Tens Maths IQ Challenge – Free Puzzle Game for Android and iOS

Train your powers of mental arithmetic to clear each level by matching up tiles that total the target value in this fun and engaging educational maths puzzler game.

Super fun and super easy to play with gradual level progression, making this puzzle game ideal for kids and young adults that need to get that quick thinking maths edge at school and college.

Get a math IQ rating at the end of each level, gradually increase your mental math IQ over time and become a mental arithmetic math genius.

Stuck? Use Freebies that you have earned from previous levels to get free math solutions.

  • Endless play
  • Increasing difficulty
  • Easy, medium and hard modes of play to fit different age / ability ranges
  • Up to 32 different users can be play on a single device, making Tens ideal for class room activities and competitions
  • Measures and reports each users math IQ giving kids and parents the opportunity to see their improvements as they play
  • Musical numbers to give an added attraction to younger players
  • Tutorial mode to help youngsters learn how to play the game easily
Two versions are available:
Tens Maths IQ Challenge
Tens Junior Maths IQ Challenge
Tens Maths IQ Challenge

Tens Maths IQ Challenge

Booty5 HTML5 Game Maker 1.9.3b out now – Droidscript support added

It has been a long while since I released an update of Booty5, but at last it is here. A good fellow over at Droidscript got in touch to let me know that they had added a plugin for their awesome app (check it out to see what I mean by awesome) which enables developers to develop games using the Booty5 API directly on an Android device and / or via a desktop browser, which to me is coolness of a higher degree. I had planned a release of Booty5 to push out the latest changes to the engine as well as support for texture packer trimmed bitmaps amongst other things so I went ahead and interfaced the Booty5 editor directly with the Droidscript app allowing games to be sent directly to Droidscript and played on the device. This provides a very rapid development environment directly on device.

The changes for this release include:

  • By setting the host in project settings to the wifi address supplied to you by the Droidscript app and checking the Droidscript checkbox, you can run your projects directly on a connected Android device
  • Updated to the very latest Booty5 engine which includes support for features like tasks, events and smaller exported scene data
  • Open in IDE no longer opens in WebStorm by default, instead Visual Studio Code is used
  • Projects no longer deploy separate source files, instead booty5_debug.js or booty5_min.js are deployed
  • Socket.io can now be exported with projects
  • New export location added to project properties that allows you to specify where deployed files will go when running / testing
  • Host project property added which allows deployed projects to launch a specific host url when running / testing
  • Added two new canvas fit modes, Fit Greatest / Fit Smallest
  • Added Body and Head properties to project properties, additional html can be added here to be exported in the body and head sections of the html file
  • Added nodejs command prompt button
  • Fixed crash bug when creating a label with no font
  • Added animation sets to brushes
  • Removed animation frames, start frame and playback speed from actors, you now specify the animation name to play as default
  • Get actor size will now get brush size if no geometry attached

Note that the Booty5 plugin for Droidscript is currently in beta (see the beta group for more details.)

The manual and API documentation have also been updated so please don’t forget to view / grab them.

The changes to the Booty5 engine v1.5.2 include:

  • Added support for events and event notification (see b5.EventsManager)
  • Added support for tasks (see b5.TasksManager)
  • Added support to brushes for animation sets
  • Added support to actors for working with brush animation sets (see b5.Actor.playAnim)
  • Bitmap based actors now support trimmed atlas images
  • Image based actors that use an atlas will use the size of the atlas frame, can be overridden by setting ignore_atlas_size to true
  • Removed support for web Marmalade
  • All booty5 scene data is now loaded into the b5.data space instead of window
  • Xoml data property names have been minified to greatly cut down Xoml datas format storage size
  • Added polyfill for RequestAnimationFrame to support older browsers
  • Some examples have been updated to fix various issues

Booty5 is a free Javascript based HTML5 game engine available on Github and a fully fledged game / app editor available for free. See the Booty5 HTML5 game maker website for more details.

Happy coding, don’t forget to leave feedback and report issues on Facebook / Google+ etc…

League of Legendary Gamers for Android available for free now on Google Play

League of legendary gamers

League of legendary gamers

The League of Legendary Gamers (not to be confused with League of Legends) is now available for Android phones and tablets. The League of Legendary Gamers is a competitive game that encourages gamers to compete for the top spots in the legendary gamers leagues, earning a well respected and honoured position at the top of the leagues. Players compete in various never ending games that are designed with difficulty that ramps up every time the player progresses, providing as constant challenge. Players submit their results to the game server where they are compared to every other player that has played, earning them a rank. Its a very simple formula, the higher you rank the more awesome you are.

Available FREE for Android on Google Play

Available FREE for iPhone and iPad on the App Store (Coming Soon….)

Need hints and tips or stuck then visit our Facebook Page

Colour Cycle Effect Unity Shader

Just added a new colour cycle effect transparent Unity shader to the free shaders collection. This shader can be used to overlay a y-axis colour cycle effect over a texture

The code for the shader is shown below:

Shader "Unlit/ColourCycleTexture"
{
	Properties
	{
		_MainTex("Color (RGB) Alpha (A)", 2D) = "white" {}
		_WaveSpeed ("WaveSpeed", Range(-1000, 1000)) = 20
		_Frequency ("Frequency", Range(0, 100)) = 10
		_Amplitude ("Amplitude", Range(0, 3)) = 0.02
		_RedScale("Red Scale", Range(0, 3)) = 1
		_GreenScale("Green Scale", Range(0, 3)) = 1
		_BlueScale("Blue Scale", Range(0, 3)) = 1
	}
	SubShader
	{
		Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
		Blend SrcAlpha OneMinusSrcAlpha
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed _Frequency;
			fixed _WaveSpeed;
			fixed _Amplitude;
			fixed _RedScale;
			fixed _GreenScale;
			fixed _BlueScale;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}

			fixed4 frag (v2f i) : SV_Target
			{
				fixed2 uvs = i.uv;
				fixed4 col = tex2D(_MainTex, uvs);
				fixed d = sin(uvs.y * _Frequency + _Time * _WaveSpeed) * _Amplitude;
				col.r += d * _RedScale;
				col.g += d * _GreenScale;
				col.b += d * _BlueScale;
				return col;
			}
			ENDCG
		}
	}
}

The shader works by adjusting the colour of the texel pulled from the texture applying a wave effect which is then scaled by red, green and blue scaling factors which can be used to change the colour of the overlaid effect. Here are a few parameters to try:

Produce a nice upwards red scroll effect:
Wave Speed – -150
Frequency – -20
Amplitude – -1
Red Scale – 0
Green Scale – 0.4
Blue Scale – 0

Produce a slow flash:
Wave Speed – 150
Frequency – 1
Amplitude – 1
Red Scale – 0
Green Scale – 0.4
Blue Scale – 0

You may need to adjust the red, green and blue scaling factors to match the colour of your texture.

Wavy Text Unity Shader

Just added a new wavy transparent shader to the free shaders collection. This shade can be used to apply x and y axis waves to textures which looks nice on bitmapped based text, e.g.:

Wavy Transparent Unity Shader

Wavy Transparent Unity Shader

The code for the shader is shown below:

Shader "Unlit/WaveTransTexture"
{
	Properties
	{
		_MainTex("Color (RGB) Alpha (A)", 2D) = "white" {}
		_WaveSpeedX ("X Axis WaveSpeed", Range(0, 100)) = 20
		_FrequencyX ("X Axis Frequency", Range(0, 100)) = 10
		_AmplitudeX ("X Axis Amplitude", Range(0, 100)) = 0.02
		_WaveSpeedY ("Y Axis WaveSpeed", Range(0, 100)) = 20
		_FrequencyY ("Y Axis Frequency", Range(0, 100)) = 10
		_AmplitudeY ("Y Axis Amplitude", Range(0, 100)) = 0.02
	}
	SubShader
	{
		Tags{ "Queue" = "Transparent" "RenderType" = "Transparent" }
		Blend SrcAlpha OneMinusSrcAlpha
		LOD 100

		Pass
		{
			CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag

			#include "UnityCG.cginc"

			struct appdata
			{
				float4 vertex : POSITION;
				float2 uv : TEXCOORD0;
			};

			struct v2f
			{
				float2 uv : TEXCOORD0;
				float4 vertex : SV_POSITION;
			};

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed _FrequencyX;
			fixed _AmplitudeX;
			fixed _WaveSpeedX;
			fixed _FrequencyY;
			fixed _AmplitudeY;
			fixed _WaveSpeedY;

			v2f vert (appdata v)
			{
				v2f o;
				o.vertex = mul(UNITY_MATRIX_MVP, v.vertex);
				o.uv = TRANSFORM_TEX(v.uv, _MainTex);
				return o;
			}

			fixed4 frag (v2f i) : SV_Target
			{
				fixed2 uvs = i.uv;
				uvs.x += sin(uvs.y * _FrequencyX + _Time * _WaveSpeedX) * _AmplitudeX;
				uvs.x = (uvs.x * 0.9) + 0.05;
				uvs.y += cos(uvs.x * _FrequencyY + _Time * _WaveSpeedY) * _AmplitudeY;
				uvs.y = (uvs.y * 0.9) + 0.05;
				fixed4 col = tex2D(_MainTex, uvs);
				return col;
			}
			ENDCG
		}
	}
}

The code works by applying a sine wave to the y-axis source texture coordinate and pumping that into the x-axis texture coordinate, a similar thing is done with the x-axis source texture coordinate, except that a cosine wave is applied to it. Note that when using this shader you should leave a little space around the bitmap text (around 10% of the image size) to prevent borders from showing.