Mobile Games Development: 2015

Saturday, December 19, 2015

Mobile Income Report #17 - November 2015

Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports. The portfolio is regularly updated with new information (releases for new platforms, new updates, ...)

What I did in November

Jupiter, who stands behind Shards graphics and levels, prepared 10 new levels. Android version at Google Play is already updated.

I finally dived into WPF as I choose it as a technology I want to build our match-3 level editor on. I really like it and editor is now finished. So, we can finally continue our work on this game, which I believe a lot in. Here is screenshot from the tool - most of the icons are test ones just to create working tool:

trying to make one of our HTML5 games work with new Windows Store. It is really easy to make it run, but the hard part was to make Google Analytics work and we also struggled with required graphical assets (icons, tiles) - big resolution for these is required, while size limits are pretty restrictive. On making 3rd party Google Analytics SDK ("Google Analytics SDK for Windows and Windows Phone") work I wrote tutorial here,
still learning Unity. After publishing our first game we made in it (Futoshiki) I think it is time to make something more complex with it. I always loved games with pixel characters, so this may be the way...

Report

Now, for the sad part - financial data. Here is income from paid versions:

And here is percent split:

... almost all income from Shards.

Figures for free apps supported with ads:

There is decrease from $142,2 in October to $110,2. Biggest one is in AdMob income - from $42.6 to $25,6 - October was really good month for AdMob, now it returned back to regular numbers.

Still most profitable network is Chartboost.

Additionally, we got some small profit from HTML5 games - $95,80.

Total income for November is $17,1 + $110,2 + 95,80 = $223,1. It is 43,9% increase, but only thanks to income from HTML5 games.

In December I am working on our match-3 game. Thanks to finished level editor, we can move forward. Also working on preparing our first game for Windows Store. And still learning Unity.

Monday, December 14, 2015

How to make "Google Analytics SDK for Windows and Windows Phone" work with Windows 10 Javascript application.

Follow @SBC_Games

In past day I had to implement Google Analytics (GA) into Universal Windows 10 app written in HTML5/Javascript. Due to security restrictions it is not possible to add it in standard way - loading external Javascript libraries. I searched internet and found "Google Analytics SDK for Windows and Windows Phone" SDK at Codeplex. Unfortunately, making it work took me some time, so in this article I will share my findings.

Google Analytics SDK for Windows and Windows Phone

"Google Analytics SDK for Windows and Windows Phone" is available here. It comes in two flavours:

NuGet package written in C#,
vsix install package written in C++ (recommended for Javascript and C++)

As author (timgrenfield) says:

"The vsix installs a 100% native version (written in C++). The NuGet package is 100% managed (written in C#). While the C# version will work just fine in JS apps, the native version is recommended for JavaScript apps because it removes the dependency on the CLR (Common Language Runtime) and therefore will result in slightly better performance, lower memory usage, and better battery life for apps."

In case of using NuGet version you can use "Any CPU" as architecture. In case of vsix package you have to to use separate x86, x64 and ARM architectures - "Any CPU" will not work. Three separate architectures result into Windows Store package to be 3 times bigger as it contains your game or app three times (once for every architecture). Fortunately, Windows Store should be clever enough to deliver only the correct one to user, when downloading your app from store.

NuGet package

Now come the bad news: NuGet nor vsix did not work for me. I am not experienced in NuGet packages, so I would be happy if anyone could update this article if they find working solution. Problem with NuGet was: references under References in Visual Studio Community 2015 (VS) were marked with small yellow warning triangle after installation. Removing them and adding back by hand removed these warnings, but during compilation there were complains about missing win10{} in project.json file (which was missing completely). As I am not NuGet guy, I got lost.

vsix package

I focused on vsix package, as it is recommended for Javascript apps and it was my case. After vsix installation go to References in Solution Explorer (right click → Add References)

In Extensions tick Google Analytics SDK. But be sure to tick the right one – in right panel you can see properties, so choose the one with Targets UAP 10.0 (Universal application):

When compiling, be sure to set target architecture to x86, x64 or ARM:

Now, building for ARM and x86 works, while attempt to build for x64 fails:

Reason for this is missing dll library. Go to:

c:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\GoogleAnalytics.Native.SDK.Win10\1.3\Redist\CommonConfiguration\

(you can get this path if you place mouse cursor over extension name)

And you will find, that x64 directory is missing (it is missing already in vsix package – you can open it with zip and watch):

Solution is to build missing dll from source:

1) go to https://googleanalyticssdk.codeplex.com/SourceControl/latest and download latest source code.

2) open GoogleAnalytics.VS2015.sln in VS,

3) change build to Release and select Configuration Manager … at the top:

4) change platform for Google.Analytics.Native.Win10 to x64:

5) build Google.Analytics.Native.Win10 from Build menu:

6) to make things more dramatic, there is syntax error in PlatformInfoProvider.cpp – you have to delete the "=" sign and run build again:

7) in your project root, there should be now new directory x64\Release\GoogleAnalytics.Native.Win10\ with compiled dll:

8) take it and copy it into x64 directory where library is missing (c:\Program Files (x86)\Microsoft SDKs\Windows Kits\10\ExtensionSDKs\GoogleAnalytics.Native.SDK.Win10\1.3\Redist\CommonConfiguration\)

Now, when building package for Windows Store select architectures like this:

Using Google analytics in code

To use Google Analytics in your Javascript code, initialize it first with config, where most important part is your Google Analytics tracking Id:

    var config = new GoogleAnalytics.EasyTrackerConfig();
    config.trackingId = "UA-XXXXXXXX-Y";
    config.appName = "My app name";
    config.appVersion = "1.0.0.0";
    GoogleAnalytics.EasyTracker.current.config = config;

Track events and page views like this:

    GoogleAnalytics.EasyTracker.getTracker().sendView("main");
    GoogleAnalytics.EasyTracker.getTracker().sendEvent("category", "action", "label", 0);

Now you can switch to you Goole Analytics console and check if you see new users, page views and events.

Friday, November 27, 2015

Mobile Income Report #16 - October 2015

What I did in October

our Futoshiki puzzle was approved at iTunes. We were also reviewed at "Gotta solve it", which is blog related to puzzle and brain games. Another review for Futoshiki appeared at RayWenderlich.com, which is site with great tutorials.

big portion of time I spent working on reskin of one of our former HTML5 games. The reskin turned into lot of changes and for mobile version of the game I had to explore Cordova tools. Now, most of the problems is solved. Unfortunately, Cordova wraps are still very slow on some devices. But in the end, I think that game looks nice - it is full of animated farm animals and has nice country related music:

still learning WPF as I want to use it in future for making tools, like game editors.

Report

Here are figures for paid apps in October - more or less the same as in September:

Most of the income is still from Shards:

And here are free games with ads inside:

Here is decrease from $169 in September. Main decrease is in income from Chartboost.

Total income for October is $12,8 + $142,2 = $155,0. It is -13,6% decrease.

In November I will continue in working on our match 3 game - my current target is to create some level editor for it. I will also continue in my exploring of Unity.

Friday, October 23, 2015

Mobile Income Report #15 - September 2015

What I did in September

in September I took some rest from match 3 game we are working on and rewrote our former Android / iOS game Fruit Dating into HTML5 with Phaser engine. It is first finished game in which I used my Spriter animation player for Phaser.

next I was working on Futoshiki remake in Unity. Futoshiki is now released for Android and is in approval process on iOS. I had to struggle with lot of issues from simple ones to hard ones. But, at least we managed to use Soom.la libraries for IAPs (Soomla Store) and social networks (Soomla Profile) as well as ads integration and mediation with Heyzap (+ Unity Ads, Chartboost and AdMob).

Report

Figures for paid apps in September looks like this:

September earning are half of the August ones. As usually most of the income is from Shards.

Free versions with ads inside are here:

Big increase in iOS Fruit Dating downloads is because of promotion event at AppGratis. Ad network shares changed only slightly in favor of Chartboost.

Total income for September is $10,3 + $169,0 = $179,3. It is +2,4% increase - in other worlds: it is almost the same as month before.

I will continue our work on match 3 game. I have one big task ahead - to make some level editor for it. As I finally got some experience with Unity (good as well as bad), it is maybe time to think about some game bigger game in it.

Sunday, October 11, 2015

Futoshiki

Follow @SBC_Games

If you like Sudoku, then you'll love Futoshiki. Futoshiki is another popular Japanese numeric puzzle game.

On a 5x5 grid the aim is to put, in each row and column, numbers from one to five, so they do not repeat themselves. Numbers must also respect the relational signs placed between some cells. Some cells may already be filled from the beginning. They are, like the relation signs, part of the puzzle and cannot be overwritten.

To make notes, simply tap the selected cell second time. Tapping once again exits notes mode.

For solving puzzles you get "win points". You can unlock new background themes with them.

The game includes a generator offering the player three difficulty levels, from easy through medium to hard. For each generated puzzle only one unique solution is guaranteed.

Saturday, September 19, 2015

Mobile Income Report #14 - August 2015

What I did in August

in August I continued work on our new HTML5 game, which will be match-3 game. Thanks to experience from our minimalistic Android/iOS match-3 game Flat Jewels Match 3 I had good start. Currently whole core mechanics are implemented and working together with system of level targets. We can ask players to:

achieve some score,
match X gems of given type (either threes or fours),
unlock any amount of treasure chests locked with lock and chains,
collect special items,
dig in sand covering board to find hidden treasures,
release gems from spider webs and gems frozen in ice cubes,
cut your way through jungle,
fight enemy ships, rescue friends, fight bosses

here you can see two screenshots from current progress:

ships on the second image are fully animated as during development of this game I made skeletal animations player for Phaser for animations exported from Spriter. I also wrote tutorial on this topic here. It opens great opportunities how to make game much better and attractive, while keeping code clean,
you can also note, that there are some numbers upside down on second image. These are score particles flying and rotating after gems match in funny directions. These are particles and BitmapText in the same time! Phaser has particle system, but unfortunately it did not meet my current needs, so I had to write my own. As a result I can easily make particles that are animated, contains another particle emitters, contains text and so on. With this I can spawn these score particles with "fire and forget" manner and I do not need to have prerendered numbers for all possible score values,
in August I wrote one more Phaser tutorial. It is easy trick how to make fake z-order in two moving groups. In fact z-order is real, all items are in one group, but are transformed as if they were in another group,
we continued also on our work in Unity on Futoshiki game. Game is almost finished. Now we have to test in-app purchases. This time I tried to implement Heyzap mediation for ads. Now I am exploring some ways how to optimize size of the build. Here are two screenshots:

Report

Here are figures for paid apps in August:

It remains more or less on the same level as July.

Most of the income is from our brickbreaker Shards as usually.

Free version with ads are here:

There is increase by $50 compared to July. Most of the increase is from Chartboost ads and part is from AdMob.

For August we have no earnings from HTML5 licences.

Total income for August is $21,3 + $153,7 = $175. It is -84% decrease - mainly because no HTML5 license sales. But the match-3 game we are working on looks to be strong asset.

I hope we will finish and publish our new Unity version of Futoshiki. I will also continue work on our match-3 HTML5 game - all basic gameplay features are working and now we will need some level editor.

Saturday, September 5, 2015

Phaser tutorial: Breaking the (z-order) law!

Follow @SBC_Games

Previous Phaser tutorials:
Phaser tutorial: Phaser and Spriter skeletal animation
Phaser tutorial: DronShooter - simple game in Typescript - Part 3
Phaser tutorial: DronShooter - simple game in Typescript - Part 2
Phaser tutorial: adding 9-patch image support to Phaser
Phaser tutorial: DronShooter - simple game in Typescript - Part 1
Phaser tutorial: custom easing functions for tweening and easing functions with parameters
Phaser tutorial: sprites and custom properties for atlas frames
Phaser tutorial: manage different screen sizes
Phaser tutorial: How to wrap bitmap text

When building scene tree in Phaser engine the sprites added as last are rendered on top. Unlike, for example, in Unity, you cannot change order of sprites with setting its z position. You can only set z property and sort sprites within one group.

Now, take a look at following example:

You can try to achieve this with:

making two groups (walls and gems) and tween them. But, in such case all gems will be under or above walls, depending on groups order,
making one group with all the walls and gems, but to move them you will have to create 8 tweens.

There is third way which allows you to put all sprites in one group (like in 2.) and transform gems and walls at once (like in 1.).

To achieve it you have to create 3 groups: one for all the sprites and two empty. In group with sprites you will maintain your z order and empty groups will be tweened. Now comes the trick - sprites will not be transformed with their parent group, but walls will be transformed with on of the empty groups and gems with the second. In other words: when engine is transforming sprite, you give it group parent different from its original one.

Source code for this example is short and self explanatory. Sprites are created and added to spritesGroup. All sprites are MySprite class objects and they are given another group they will use as their parent when updating transform. Two empty groups are named group1 and group2. These groups are then tweened.

While the code is simple, the final effect looks like complicated pattern of sprites and groups.

// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
class Game extends Phaser.Game {
    // -------------------------------------------------------------------------
    constructor() {
        // init game
        super(640, 400, Phaser.CANVAS, "content", State);
    }
}

// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
class MySprite extends Phaser.Sprite {

    private _parentTransform: Phaser.Group;

    // -------------------------------------------------------------------------
    constructor(aGame: Phaser.Game, aX: number, aY: number, aKey: string, aParentTransform: Phaser.Group) {
        super(aGame, aX, aY, aKey);
        this._parentTransform = aParentTransform;
    }

    // -------------------------------------------------------------------------
    public updateTransform(): void {
        if (!this.visible) {
            return;
        }

        this.displayObjectUpdateTransform(this._parentTransform);
    }
}

// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
class State extends Phaser.State {

    // -------------------------------------------------------------------------
    preload() {
        // sprites
        this.load.image("Wall", "assets/Wall.png");
        this.load.image("Gem0", "assets/Gem0.png");
        this.load.image("Gem1", "assets/Gem1.png");
        this.load.image("Gem2", "assets/Gem2.png");
        this.load.image("Gem3", "assets/Gem3.png");
    }

    // -------------------------------------------------------------------------
    create() {
        this.stage.backgroundColor = 0x0F3043;

        var group1 = this.add.group();
        var group2 = this.add.group();

        var spritesGroup = this.add.group();

        for (var i = 0; i < 4; i++) {
            // wall sprite
            var wall = new MySprite(this.game, 50, 90 + i * 70, "Wall", group1);
            wall.width = 440;
            wall.z = i * 2;
            spritesGroup.add(wall);

            // gem sprite
            var gem = new MySprite(this.game, 170 + 100 * i, 50, "Gem" + i, group2);
            gem.anchor.setTo(0.5, 0.5);
            gem.z = i * 2 + 1;
            spritesGroup.add(gem);
        }

        // move groups
        this.add.tween(group1).to({ x: 100 }, 1000, Phaser.Easing.Sinusoidal.InOut, true, 0, -1, true);
        this.add.tween(group2).to({ y: 320 }, 3000, Phaser.Easing.Linear.None, true, 0, -1, true);
    }
}

// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
// -------------------------------------------------------------------------
window.onload = () => {
    new Game();
};

Tuesday, September 1, 2015

Phaser tutorial: Phaser and Spriter skeletal animation

Follow @SBC_Games

Previous Phaser tutorials:
Phaser tutorial: DronShooter - simple game in Typescript - Part 3
Phaser tutorial: DronShooter - simple game in Typescript - Part 2
Phaser tutorial: adding 9-patch image support to Phaser
Phaser tutorial: DronShooter - simple game in Typescript - Part 1
Phaser tutorial: custom easing functions for tweening and easing functions with parameters
Phaser tutorial: sprites and custom properties for atlas frames
Phaser tutorial: manage different screen sizes
Phaser tutorial: How to wrap bitmap text

Recently I was looking for some way how to play skeletal / bone animated characters in Phaser. Unfortunately, there is not too much choices if you just want to try some tool in end-to-end way (from creating animation in tool to playing it in Phaser game).

Finally, I managed to do it and it is what this article is about. So, read on...

Tools overview

First I was looking for available tools. I found four which interested me and which I decided to examine deeper:

Creature - looks very impressive. From Phaser 2.4.0 it is even supported in engine. But, it costs $99 for Basic and $170 for Pro version. In Trial version you cannot save or export your project. It can be good for artist to try the tool, but I am coder and, as already mentioned, my attempt was to try end-to-end implementation. Beside this, it looks that WebGL rendering mode is needed,
DragonBones - this tool attracted me with it price - it is free. But it looks you need Flash Pro to use it. DragonBones is supported by Adobe. So, buy Adobe Flash Pro to get DragonBones for free :-) Beside this, I did not find any documentation on tool's export files,
Spine - this tool has documentation on export format, but it does not let you to save and export in trial version. Essential version costs $89 and Professional $289. Hey, I just want to try to make simple animation, export it and implement it in Phaser. I will not blindly buy any tool that does not let me do this - what if its export is horrible mess and making the player will turn into nightmare?,
Spriter - this tool made by BrashMonkey has also free and Pro version for $59. But, finally tool, that let me try it, export my animation into .xml or .json. Has some documentation on format. Beside this, its use is simple even for programmer and there is also series of video tutorials, that will guide you through program functions. It also shows, what is only in Pro version.

From above list I selected Spriter. And if in future I wanted to go Pro with some of the tools, I would definitely do so with Spriter, as I now know it little and I invested time into making runtime for Phaser.

Runtimes

Despite some other tools, Spriter does not come with runtimes. It is up to you to find some already existing one or to write your own. Spriter has forum, where peoples using it and coder implementing runtimes meets. There you can get links to various runtime implementations. From those I found these two attracted me most:

spriter-scon-js by Dean Giberson. It is reading .scon files, which is .json export from Sprites. The implementation is minimal, but reading it helps you to find what is in export and what are relations between its data structures. Also its length encourages you to write your own!,
spriter by Trixt0r (Heinrich Reich). This one is more massive supporting Java2D, libGDX and others. I regret that I did not find it earlier. I found it with half of my implementation finished, when I was searching internet for solving reverted y axis issue. At least, I used its test character animation instead of my crappy programmer animation I was using before.

Runtime for Phaser

Before I will go further here is result: Spriter bone animation running in Phaser (press A to switch to next animation):

Runtime is written in Typescript and significant part of it is just structure of all objects needed for animation and filling these structures when loading animation data. Currently, this is first version of implementation and only tweening between two positions is linear (will add curves later), but I am happy with the result! Also some features, that are available only in Spriter Pro are not implemented (character maps, sounds, events, ...).

Second part of source is the player, that takes loaded data and tweens bones and sprites between keyframes and also transforms it from its local spaces into world space.

Phaser specific is that all visible parts are Phser.Sprite objects and whole character is Phaser.Group object. So, you can further take it and transform (scale, move, rotate) - it is part of scene graph.

Quick export structure overview

Export begins with information on folders and files. Files are in fact files with individual sprite parts. As I am using atlas I use file names as frame names. Folders can help you to organize your assets, but with atlas I am not using them.

Next part is Entity. Entity is your character and one file can contain multiple entities. Entity has one or more animations. Entity is that grey guy and animations are short sequences you can either loop or play only once.

Core of each animation is main timeline - bottom third on editor picture. Whenever you change some part (either bone or sprite) it creates keyframe on main timeline. These keyframes reference to particular timelines for individual bones or sprites. Keyframes are those small vertical rectangles on picture. It keeps information on time, position, rotation, scale, spin ... and file and folder for sprites.

Of course, during implementation, you will encounter lot of issues. My biggest problem was correct handling of y axis. In Spriter 0,0 point is in top left corner, but when rotating, 90 degrees points up. In export coordinates are exported in "OpenGL" way with 0,0 in bottom left corner, and 90 degrees points up (and after long debugging I also found, that sprite y pivots were reverted during export). In Phaser 0,0 is in top left corner again, but 90 degrees points down. It was necessary to flip all angles along horizontal axis and also correctly handle spins. Spins say in which direction bone or sprite should rotate to its target position.

Detailed information on structure can be found here and also examining other implementations can fill holes where documentation is not actual or missing.

Conclusion and download

I am really happy that I managed to make it work. I hope it will help great Phaser community. If you are interested, you can get whole project (MS Visual Studio 2015) here: SpriterExample.zip

Most of the project is the Spriter player and the rest are some small help classes necessary to run the example.

Mobile Games Development

Pages

Saturday, December 19, 2015

Mobile Income Report #17 - November 2015

What I did in November

Report

Next

Monday, December 14, 2015

How to make "Google Analytics SDK for Windows and Windows Phone" work with Windows 10 Javascript application.

Google Analytics SDK for Windows and Windows Phone

NuGet package

vsix package

Using Google analytics in code

Friday, November 27, 2015

Mobile Income Report #16 - October 2015

What I did in October

Report

Next

Friday, October 23, 2015

Mobile Income Report #15 - September 2015

What I did in September

Report

Next

Sunday, October 11, 2015

Futoshiki

Saturday, September 19, 2015

Mobile Income Report #14 - August 2015

What I did in August

Report

Next

Saturday, September 5, 2015

Phaser tutorial: Breaking the (z-order) law!

Tuesday, September 1, 2015

Phaser tutorial: Phaser and Spriter skeletal animation

Tools overview

Runtimes

Runtime for Phaser

Quick export structure overview

Conclusion and download

About Me