Mobile Games Development: Javascript

Showing posts with label Javascript. Show all posts

Tuesday, December 5, 2017

Shards at Yahoo! Japan

On 28th November our game Shards was published at Yahoo! Japan. Game was published by Worker Bee Inc. and you can play it on their site here.

Sunday, September 17, 2017

Flat Jewels Match 3 at Yahoo! Japan

On 11th September our game Flat Jewels Match 3 was published at Yahoo! Japan. Game was published by Worker Bee Inc. and you can play it on their site here.

http://games.wkb.jp/ykg/?game_id=flatjewelslevels

Wednesday, July 12, 2017

Fruit Dating at Yahoo! Japan

Our logical puzzle game Fruit Dating was published at Yahoo! Japan today. It was published by Worker Bee Inc. and you can play it here.

Wednesday, April 19, 2017

New games released: Elsa Jewels, JumpTuber and Brick Stacker

Follow @SBC_Games

It has been long since I last posted info about games I finished. So, here is list of games finished or released in first quarter of 2017.

Elsa Jewels

Elsa Jewels was exclusively made for Famobi. It features popular Disney's characters - Anna and Elsa from Frozen. And yes, Olaf is there too!

You can play the game here.

JumpTuber

JumpTuber is game to promote local youtuber Jirka Kral. Jirka is running from left to right in his youtuber den, picking likes and hamburgers. He has to avoid ducks and other items thrown at him by other youtubers. Game was made for Gamee platform and you can play it here.

Brick Stacker

Last game in this list is Brick Stacker. It is another game made for Gamee. You have to build as high tower of blocks as possible. Test your building skills here (it is the best to play it on some device with portrait screen).

Monday, January 23, 2017

Phaser tutorial: How to balance random booleans for game

Follow @SBC_Games

Previous Phaser tutorials and articles:
Phaser tutorial: Fun with bitmap fonts
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

Last year I worked on many small games, were obstacles were generated procedurally on the fly. Getting random numbers from random numbers generator played big role in it. Unfortunately, randomness can be sometimes pretty ... random. Let's say you just want to get randomly true or false to place some obstacle to the right or left. Be sure, that very quickly you will encounter situations, when you will not like the result. Sometimes, there will be too many obstacles on one or other side and game may get boring for long time periods.
Fast fix may be to add some counters to check if not too many obstacles is on one or other side.
I was solving this often and to make situation worse, clients had requests like: "I want first 5 obstacles to be left and right in turns, so it will be kind of tutorial for player."

Solution

So, I decided to solve it once and forever with small class, which I named RandomBooleanBalancer. Here is complete code for it in TypeScript:

namespace Helper {

    export class RandomBooleanBalancer {

        private _rnd: Phaser.RandomDataGenerator;
        private _lbound: number;
        private _ubound: number;
        private _currentBalance: number;

        // -------------------------------------------------------------------------
        // balancer - how many consecutive same values maximally
        public constructor(rnd: Phaser.RandomDataGenerator, balancer: number) {
            this._rnd = rnd;
            this.reset(balancer);
        }

        // -------------------------------------------------------------------------
        public reset(balancer: number): void {
            --balancer;

            let lbound = Math.ceil(balancer / 2);
            this._lbound = -lbound;
            this._ubound = balancer - lbound;

            this._currentBalance = balancer === 0 ? this._rnd.integerInRange(-1, 0) : 0;
        }

        // -------------------------------------------------------------------------
        public getBoolean(): boolean {

            let result = this._currentBalance + this._rnd.integerInRange(this._lbound, this._ubound);

            //console.log("lbound = " + (this._lbound + this._currentBalance) + ", ubound = " + (this._ubound + this._currentBalance) +
            //    ", currentBalance = " + this._currentBalance + ", value = " + (result >= 0));

            this._currentBalance += result >= 0 ? -1 : 1;

            return result >= 0;
        }
    }
}

In constructor it takes random numbers generator and "magic number" called balancer. This number is your request, how many consecutive same values it shall return when you repeatedly call getBoolean() method.

For example, if you want true or false maximally two times after each other, then set it to 2.

reset() method allows you to change this request during runtime.

Test

Let's do some tests. Our test code will be simple loop with 50 iterations - it just prints string with 50 comma separated results, where true / false is converted to 1 / 0 to shorten output. We will start with balancer value equal 1:

            let randomBalancer = new Helper.RandomBooleanBalancer(this.rnd, 1);
            let result = "";
            for (let i = 0; i < 50; i++) {
                result += (randomBalancer.getBoolean() ? "1" : "0") + (i < 50 - 1 ? ", " : "");
            }
            console.log(result);

Here is output from console:

0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1

As our request was to have maximally 1 consecutive true or false, we got them switching regularly. If you run this test multiple times, you will notice, that whole sequence starts randomly with true or false.

Now, change number in constructor to 2 and run the test again. This is console output:

0, 1, 0, 1, 0, 1, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 0, 1

As you can see, returned values are random, but you get maximally two randoms of the same value after each other.

Now, change requested value in constructor to 5. You may get something like this:

1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 1, 0, 1, 0, 1, 0, 1, 1, 1, 0, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0, 0, 1, 1, 1, 0, 0, 1, 1, 1, 0, 1, 0, 0, 1, 1, 1, 0, 0, 0

In my run I did not get any sequence of 5 ones or zeroes. This is another nice feature of this class. As you get more and more, let's say, ones, there is decreasing probability, that next random will be also one. It is more and more probable it will be zero. But of course, it is possible to get true or false 5 times in row - but this is cap, as you requested: "5 times true or false in row, but no more".

Conclusion

I hope this small code snippet will make your life easier. If you are interested in how it works, you can uncomment debug output in getBoolean() method and watch it after each call.

Mobile Income Report #30 - December 2016

What I did in December

as usual, I was working on client projects. One of them, one-button game Little Plane, was already published at Gamee:

worked on both Unity and HTML5 version of our match-3 game Pirates! 58 of 62 levels in world 1 are finished and we are doing finishing touches like adding more particle effects. Our friend Juraj from SoundRose studio made music tracks for game and is now working on sound effects.

my book "Create procedural endless runner in Phaser with TypeScript" crossed first 100 of sales.

Create procedural endless runner in Phaser with TypeScript

Report

As already announced in November, this is last income report. I decided to end it, because it started as income report from mobile games, but it is more and more about HTML5 games as income from mobile ones is still pretty low. Picking such a small figures from many internet consoles is boring and time consuming. I decided to invest saved time into writing more tutorials and technical articles.

Figures for December are here:

There is again decrease compared to November ($107,3). But, as I already said in past, I did nothing with this my mobile portfolio for very long time. I hope this will change in 2017 as I plan to focus more on Unity and spread my time between it and Phaser.

Most of the income is still from ad in Shards - the brickbreaker game.

Income from HTML5 hired work and HTML5 licences for December is $1 968,3.

Income from my book for December is $252,6.

Total income for December is $2 303,0. It is 28,9% increase, compared to November ($1 787,0).

In January I am still working on some games for clients and continue with levels and finishing touches for first world of Pirates! I am also taking some Unity video courses I purchased on Udemy.

Tuesday, December 20, 2016

Mobile Income Report #29 - November 2016

What I did in November

spent some time with work on client projects. Will bring screenshots in next report,
added new levels to HTML5 version of Pirates! - the match 3. Still have to test it:

worked on Unity version of Pirates. Currently, main menu, map selection and map scenes are working. Only missing little thing is game itself :-)

if you examined screenshot above, you may noticed some markers on map. In November I invested into a few Unity plugins:

Text Mesh Pro - really great plugin for working with texts,
Pro Camera 2D - very nice plugin for various camera handlings,
ProBuilder Advanced - tool for rapid prototyping of 3D levels,
UFPS: Ultimate FPS - base platform for FPS games

So, my Christmas happen already in November. Last two plugins are 3D related and shows my interests in next year - I finally want to create also something in 3D!

my first book "Create procedural endless runner in Phaser with TypeScript" reached 80 sales.

Report

Here is first of last two income reports. I decided to end it in December to close year 2016. It started as income report from mobile games, but it is more and more about HTML5 games as income from mobile ones is still pretty low. Picking such a small figures from many internet consoles is boring and I decided to invest saved time into writing more tutorials and technical articles next year.

Here is income from mobile games in November:

Figures are slightly better than in October ($84,3)

As usually, the highest income is from ads.

Income from HTML5 hired work and HTML5 licences for November is $1 480,9.

Income from my book for November is $198,8.

Total income for November is $1 787,0. It is 28,3% decrease, compared to October ($2 490,8).

In December I am again working on some client projects. Beside it, I am rewriting Pirates into Unity and making new levels for it.

Tuesday, November 22, 2016

Mobile Income Report #28 - October 2016

What I did in October

in October I finished another one-button game for Gamee platform. Its name is Gravity Ninja and it is fast paced runner with gravity flipping. You can play it here. Now, when writing this post, it already has 2.4 millions of plays!

my first book "Create procedural endless runner in Phaser with TypeScript" reached 60 sales.

finally, I got back to "Pirates - the match-3". But in little bit different way. While finishing HTML5 version on one side, I started to convert it into Unity on other side. We also have new main menu screen:

Report

Here is income from mobile games for October:

There is big decrease, compared to September ($124,8). But it is also true, that I did no changes or updates to my mobile apps for very long time.

As in past, the highest income is from ads.

Income from HTML5 hired work and HTML5 licences for October is $2 063,8.

Income from my book for October is $342,7.

Total income for October is $2 490,8. It is 20,9% decrease, compared to September ($3 147,8).

In November I am again working on games for clients. I finally got back to Pirates - I am working on HTML5 version as well as on Unity version. I am starting to take my Unity exploration seriously.

Tuesday, October 25, 2016

Mobile Income Report #27 - September 2016

What I did in September

finished another one-button game for Gamee platform. It is called Ridhwan's Unicorn. In this game I used P2 physics and developed some new procedures for my future games.

last time I mentioned Jewel Jungle game made for Famobi, but I did not attached screenshots. So, here are some as I think Tomas made really nice graphics.

sales of my first book "Create procedural endless runner in Phaser with TypeScript" are getting close to first 50 sales. Currently, there is 46 of them.

working on another client game. Next, month I will add details and screenshots.

Report

Bellow you can see table with data for income from mobile games:

There is $9 increase, compared to August ($115,8). As in past, strongest asset in my mobile portfolio is Shards.

Most of the income still comes from ads - 90% (85% in August).

Income from HTML5 hired work and HTML5 licences for September is $2 845,70.

This month, there is new type of income first time - income from my book. For September it earned $177,30.

Total income for September is $3 147,80. It is 51,7% increase, compared to August ($2 074,40), but not all the earnings are mine (I have to share with other team members).

In October, I am again working on some client projects. Unfortunately, I still did not get back to Pirates and my Unity experiments.

Monday, September 26, 2016

Mobile Income Report #26 - August 2016

Follow @SBC_Games

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.

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.

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

Follow @SBC_Games

After a few months of work I finally finished my first Phaser book. Its name is "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

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.

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

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.

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.

Learn Phaser

These books and plugins can rapidly speed up your development capabilities!

Pages

Tuesday, December 5, 2017

Sunday, September 17, 2017

Wednesday, July 12, 2017

Wednesday, April 19, 2017

Elsa Jewels

JumpTuber

Brick Stacker

Monday, January 23, 2017

Introduction

Solution

Test

Conclusion

What I did in December

Report

Next

Tuesday, December 20, 2016

What I did in November

Report

Next

Tuesday, November 22, 2016

What I did in October

Report

Next

Tuesday, October 25, 2016

What I did in September

Report

Next

Monday, September 26, 2016

What I did in August

Report

Next

Wednesday, September 21, 2016

Thursday, August 25, 2016

What I did in July

Report

Next

Sunday, July 17, 2016

What I did in June

Report

Next