Monday, September 26, 2016

Mobile Income Report #26 - August 2016






previous parts
  Mobile Income Report #25 - July 2016
  Mobile Income Report #24 - June 2016
  Mobile Income Report #23 - May 2016
  Mobile Income Report #22 - April 2016
  Mobile Income Report #21 - March 2016
  Mobile Income Report #20 - February 2016
  Mobile Income Report #19 - January 2016
  Mobile Income Report #18 - December 2015
  Mobile Income Report #17 - November 2015
  Mobile Income Report #16 - October 2015
  Mobile Income Report #15 - September 2015
  Mobile Income Report #14 - August 2015

                                  :
                                  :
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)

 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports.


What I did in August

  • most exciting point first. My first book is finished and is available for purchase. Name is "Create procedural endless runner in Phaser with TypeScript". Book is one long tutorial, that guides reader through process of creating endless runner. Final game can be seen and played here. In individual topics reader will go through creating very flexible generator, skeletal animations for main goblin character, adding new features into game (like spikes, bonus jumps), adding sounds and music, etc. Of course, popular questions on handling different screen sizes are also covered. Book can be purchased here at Gumroad.
Create procedural endless runner in Phaser with TypeScript

  •  we finished exclusive reskin of our Flat Jewels Match 3 game for Famobi. It is named Jewel Jungle and I think Tomas from Littlecolor made really nice graphics. You can play final game Jewel Jungle,
  • did some other work for clients - next month I will publish screenshots from very crazy game,
  • purchased book "Unity Games by Tutorials" from RayWenderlich.com site. They are making very quality tutorials and I learned a lot from it. Book is still in early access, but will be finished soon.




Report

 Here is report for mobile games in August:


 There is $25 increase, compared to July ($90,6), which was very weak month. But, it is still behind figures from the first half of the year. All earnings are determined by Shards, as usual.

 Most of the income still comes from ads - 85% (84% in July).

 Income from HTML5 hired work and HTML5 licences for August is $1 958,60. 

 Total income for August is $2 074,40. It is 9,1% decrease, compared to July ($2 282,80) and not all the earnings are mine (I have to share with other team members), but I am happy with it.



Next

 In September I am still working on some client works. I hope, I will finally return back to Pirates!






 

Wednesday, September 21, 2016

Phaser book on making procedural endless runner finished






 After a few months of work I finally finished my first Phaser book. Its name is "Create procedural endless runner in Phaser with TypeScript".

 Create procedural endless runner in Phaser with TypeScript

 In the book you develop procedural endless runner game "Goblin Run". You can see and play final result at http://sbc.littlecolor.com/goblinrun. It is using popular HTML5 engine Phaser and code is written in TypeScript. TypeScript is superset of JavaScript and if you are JavaScript programmer you should have no problems to follow. 


  Game features procedural level generation, spikes, in-air bonus jumps and gold to gather. Whole book is one big tutorial from setting up project to finishing polished game.
 Book is accompanied with complete resource files as well as with folders with source project for every chapter. All source code in book and in files is well documented.

 You can get it at Gumroad, as well as see there detailed table of  contents.


 This book is not for absolute beginners, who are learning what is variable and how to make loop. It is for people who have some basic knowledge what is Phaser, how to make something simple with it and now want to make something “bigger”, what will be beyond simple how-to examples. Book is one big tutorial that does not end with working prototype, but ends with complete game.




Thursday, August 25, 2016

Mobile Income Report #25 - July 2016






previous parts
  Mobile Income Report #24 - June 2016
  Mobile Income Report #23 - May 2016
  Mobile Income Report #22 - April 2016
  Mobile Income Report #21 - March 2016
  Mobile Income Report #20 - February 2016
  Mobile Income Report #19 - January 2016
  Mobile Income Report #18 - December 2015
  Mobile Income Report #17 - November 2015
  Mobile Income Report #16 - October 2015
  Mobile Income Report #15 - September 2015
  Mobile Income Report #14 - August 2015
  Mobile Income Report #13 - July 2015
                                  :
                                  :
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)

 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports.


What I did in July

  • worked on two small games for Gamee platform. One of them, Rio Sprint, was already released  and you can play it here:
 

  • did some small work on levels for "Pirates! - the match-3", but not too much. I was negligent of it lately which I would like to change,
  • most of the time I spent on writing my first book. Currently I have over 140 pages and I am almost finished. Books theme is how to write procedural endless runner with Phaser and Typescript. Reader following steps in book will create game like this:




Report

 

 Income from mobile games in July is simply tragic:


 There is decrease from $143,1 in June to $90,6. From what I can see from August data, there is return back to better figures.

 Share of income from ads is stable. There is almost no income from in-apps this month.

 Income from HTML5 hired work and HTML5 licences for July is $2 192,20. 

 Total income for July is $2 282,80.



Next


 In August I am still working on some client works. In the end I would like to return to Pirates! Also work on book continues and I hope I will finish first draft soon.






Sunday, July 17, 2016

Mobile Income Report #24 - June 2016






previous parts
  Mobile Income Report #23 - May 2016
  Mobile Income Report #22 - April 2016
  Mobile Income Report #21 - March 2016
  Mobile Income Report #20 - February 2016
  Mobile Income Report #19 - January 2016
  Mobile Income Report #18 - December 2015
  Mobile Income Report #17 - November 2015
  Mobile Income Report #16 - October 2015
  Mobile Income Report #15 - September 2015
  Mobile Income Report #14 - August 2015
  Mobile Income Report #13 - July 2015
  Mobile Income Report #12 - June 2015

                                  :
                                  :
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)

 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports.


What I did in June

  • in the very end of June finished Football Star game for Gamee platform. You can play it here
  •  during month we did small adjustments requested by customers to HTML5 version of Shards. It is now published by Famobi and you can play it here:
  •  started work on levels for our big game "Pirates! - the match-3". We build Cordova version with Google Analytics for testing. In Google Analytics we collect data on how difficult it was to finish levels. Currently, we have levels for half of the first world:
  •  in the end of June I started work on HTML5 version of our older Android/iOS game Flat Jewels Match 3. It is now finished and we are looking for sponsors. Game is very simple, but fast paced match 3 game. You are given simple tasks in 150 levels or you can target highest score in Time Attack mode:
  •  during work on Flat Jewels I wrote small tutorial, that was published in beginning of July. In it I explain how to add images into font definitions, so you can print them along with other text,
  • started to write book! Its theme is how to make complete procedurally generated horizontal infinite runner in Typescript with Phaser engine. First 5 chapters (about 50 pages) is finished.



Report


 Here is income from mobile games:

 It is better, than previous month ($119,6), which was really weak. I am afraid, that July will be bad month again.

 More income from paid apps and from in-apps decreased Ads share from 91% in May to 83%. But still, most income is from ads.

 Income from HTML5 hired work and HTML5 licences for June is $2 440,20. 

 Total income for June is $2 583,30. It would be great if I managed to keep it on this level in future.




Next


 In July we will try to get next sponsors for Shards and for Flat Jewels Match 3. I will continue to build new levels for Pirates! - the match-3 and to fine tune older ones. I will also continue work on my first Phaser book. Beside this, I have some client work to do.







Saturday, July 2, 2016

Phaser tutorial: Fun with bitmap fonts

 





Previous Phaser tutorials and articles:
Phaser tutorial: Using Spriter player for Phaser
Phaser tutorial: Merging fonts into sprite atlas
Phaser: Typescript defs for Phaser Box2D plugin
Phaser tutorial: Spriter Pro features added to Spriter player for Phaser
Phaser tutorial: Using Phaser signals
Phaser tutorial: Breaking the (z-order) law!
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


Introduction


 Very often I need to display some information for player in GUI in my games. It is usually composed of some text and icon. And it also often takes some time to fine tune positioning of text and icon. Things get complicated if part of it can change width like number on following image:


 Then, if you update number, you also have to update position of icon. Making some longer text, like the one on image bellow, with small images inside of it, is tedious work and usually needs lot of code.



Solution


 Fortunately, solution is easy. We can add images as special characters into font and then print whole text, including images, in one call in code.
 Let's say you have font called "Font" and atlas called "Game". Font is made of texture with characters and xml metadata file. It can be font made with Littera or any other font tool. Atlas is standard atlas with your game images.
 After these are loaded in your preload function - for example like this:

            this.load.atlas("Game", "assets/Game.png", "assets/Game.json");
            this.load.bitmapFont("Font", "assets/Font.png", "assets/Font.xml");

 you can start your adjustments in create function. First we get reference to our loaded assets:

            let atlas = this.cache.getImage("Game", true);
            let font = this.cache.getBitmapFont("Font");

 Next we get reference to loaded font xml data and also reference to capital "A" character. Reason for this is, that we will center added images on the same level as center of "A" is.

            let fontData = font.font;
            let charA = fontData.chars[65];

 Now, in my case, I have 7 gem images in atlas with names Gem1 ... Gem7. I will add them as special characters. First, I have to choose character code for them. Here I chose 5000 for Gem1, 5001 for Gem2 ...

            for (let i = 0; i < 7; i++) {
                let f = this.cache.getFrameByName("Game", "Gem" + (i + 1));

                fontData.chars[5000 + i] = {
                    x: f.x,
                    y: f.y,
                    width: f.width,
                    height: f.height,
                    xOffset: 1,
                    yOffset: charA.yOffset + Math.floor((charA.height - f.height) / 2),
                    xAdvance: f.width + 2,
                    kerning: [],
                    texture: new PIXI.Texture(atlas["base"], new PIXI.Rectangle(f.x, f.y, f.width, f.height)) 
                };
            }

 First, we get Phaser.Frame from atlas, so we will have access to position and dimensions of image within atlas. Next, we add new object with all font metadata to current font characters data at position of character code we chose before. For yOffset we are doing small calculation to center added images relative to "A" - we want center of A and added images on the same level. xOffset is 1 and it says, that there will be 1 pixel space after previous character. xAdvance then says how much has font renderer step to draw next character. We set this to width + 2 (= xOffset + width + 1). On last line, we are setting texture property. Here you may get error - just head to phaser.d.ts and change BMFontChar interface to use PIXI.Texture instead of PIXI.BaseTexture.


Test


 To test our gem images in text add this code:

            let text = "Hi, " + String.fromCharCode(5000, 5005, 5006) + " there!\n\nHow are you? " + String.fromCharCode(5001, 5002);
            let bmText = new Phaser.BitmapText(this.game, 0, 0, "Font", text, 110);
            bmText.anchor.x = 0.5;
            this.world.add(bmText);

 To include gems we make string from character codes with call to String.fromCharCode(). You should see this on screen:



Draw calls


 While everything works, there is small issue you should be aware of. As our font images and gem images are in different textures, there can be more draw calls. In above case there are four draw calls to draw this single piece of text.

 Fortunately, there is also solution for this. Merge your font into atlas as described in one of previous tutorials. Code changes only very little:


            let font = this.cache.getBitmapFont("Font");
            let fontData = font.font;
            let charA = fontData.chars[65];

            for (let i = 0; i < Level.MAX_GEM; i++) {
                let f = this.cache.getFrameByName("Game", "Gem" + (i + 1));

                fontData.chars[5000 + i] = {
                    x: f.x,
                    y: f.y,
                    width: f.width,
                    height: f.height,
                    xOffset: 1,
                    yOffset: charA.yOffset + Math.floor((charA.height - f.height) / 2),
                    xAdvance: f.width + 2,
                    kerning: [],
                    texture: new PIXI.Texture(font.base, new PIXI.Rectangle(f.x, f.y, f.width, f.height)) 
                };
            }

 You do not need reference to atlas, because gem images are in the same texture as font characters and in last line you can get base texture from font data.

 This reduces draw calls to one.


Conclusion


 With presented solution you can easily mix text with icons. If you merge font with atlas, there are no additional costs in terms of draw calls.








Tuesday, June 21, 2016

Mobile Income Report #23 - May 2016






previous parts
  Mobile Income Report #22 - April 2016
  Mobile Income Report #21 - March 2016
  Mobile Income Report #20 - February 2016
  Mobile Income Report #19 - January 2016
  Mobile Income Report #18 - December 2015
  Mobile Income Report #17 - November 2015
  Mobile Income Report #16 - October 2015
  Mobile Income Report #15 - September 2015
  Mobile Income Report #14 - August 2015
  Mobile Income Report #13 - July 2015
  Mobile Income Report #12 - June 2015
  Mobile Income Report #11 - May 2015
  Mobile Income Report #10 - April 2015
  Mobile Income Report #9 - March 2015
  Mobile Income Report #8 - January and February 2015
  Mobile Income Report #7 - December 2014
  Mobile Income Report #6 - November 2014
  Mobile Income Report #5 - October 2014
  Mobile Income Report #4 - September 2014
  Mobile Income Report #3 - August 2014
  Mobile Income Report #2 - July 2014
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)

 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 Under Apps page you can see my portfolio. It is list of the games that are then reported in Income Reports.


What I did in May

  • worked on endless procedural platformer runner for Gamee platform. Game is finished and I am really prod of the generator. It generates platforms in real time and the result is not looking bad. For player animation I utilized my Spriter player for Phaser:
  • continued work on "Pirates! - the match-3". We started to create final levels. For this I have built Cordova version of game for Android using Google Analytics. In the evenings we can play it and generate statistics for tuning.



Report


 Figures for mobile games are these:


 There is big decrease, compared to April, from $154,5 to $116,9. I did not investigate the reason, but number of downloads is more or less stable.

 More than 90% of income is again from ads.

 Beside this, we got some small fee for our HTML5 games - $95,3.

 This month, I did not get any income for hired work - it is shifted to June.

 Total income for May is $212,2. It is a lot less than in April ($1 391,1) because of absence of income from hired work.



Next 

 

 In June I am still working on "Pirates! - the match-3" - creating final levels and testing it. Working on another client work. We are also trying to sell licences for HTML5 version of Shards - the brickbreaker.







Friday, May 20, 2016

Mobile Income Report #22 - April 2016






previous parts
  Mobile Income Report #21 - March 2016
  Mobile Income Report #20 - February 2016
  Mobile Income Report #19 - January 2016
  Mobile Income Report #18 - December 2015
  Mobile Income Report #17 - November 2015
  Mobile Income Report #16 - October 2015
  Mobile Income Report #15 - September 2015
  Mobile Income Report #14 - August 2015
  Mobile Income Report #13 - July 2015
  Mobile Income Report #12 - June 2015
  Mobile Income Report #11 - May 2015
  Mobile Income Report #10 - April 2015
  Mobile Income Report #9 - March 2015
  Mobile Income Report #8 - January and February 2015
  Mobile Income Report #7 - December 2014
  Mobile Income Report #6 - November 2014
  Mobile Income Report #5 - October 2014
  Mobile Income Report #4 - September 2014
  Mobile Income Report #3 - August 2014
  Mobile Income Report #2 - July 2014
  Mobile Income Report #1 - June 2014
  Apps page - Portfolio (what are my assets?)

 If you do not want to miss any of my Income Reports you can follow me on Twitter. Just click the button above.

 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 April

  • finished HTML5 version of Shards - the brickbreaker. Game was rewritten in Phaser engine. Currently we are looking for sponsors. Shards is modern Arkanoid / Brickbreaker clone with glass bricks and glassy enemies - Shardiens. Game has 80 levels and every single one has its own fractal background:

  • finished hired HTML5 work on game Meteoric for Gamee platform. It is fast paced puzzle in which you merge asteroids into planets and planets into suns:


  • also working on our game "Pirates! - the match-3", which is, as the name says, match-3 game:



Report


 Here are April figures for mobile games:





 Income from mobile games is still quite stable ($175,8 in March) ... and low. Most profitable game remains Shards - the brickbreaker.


 Most of the income is from ads (88% in March) - share of paid apps and in-app purchases decreased.

 In April I got also some income from licences and hired work: $1 223.

 Total income for April is: $1 391,1. This is similar to February ($1 323,0) and much more than March ($175,8).




Next


 In May I am still working on "Pirates!, the match-3". This is my priority now as game is working in all direction. What we are missing are levels. We are also replacing placeholder graphics with our own as well as some static images with animations.
 I am also doing another hired work.