Colyseus, an uncomplicated library for multiplayer games

/0 Comments/in , , , , /by

A couple of weeks ago we released our latest game, Mini Pool. It has been a success and Colyseus.io has contributed a lot to achieving this. Our programmers had less stress dealing with server issues and could concentrate on developing game play.

 


We considered to code the server side directly with node and websockets. It isn’t an incredible amount of work but why reinvent the wheel? Colyseus is above all easy to understand and implement. It takes care of the rooms creation, matching and player’s disconnection handling. One of the strengths of this framework is how it manages the room state. Basically we create a custom data structure for the room state and every time those data are changed by the server all clients are informed and act correspondingly. This feature means less messages and less code in the server side.

 

For example the state object of the Room in the server side has a field called “currentTurn”. If the server logic change its value both clients are notified that the turn has changed without having to broadcast manually a message.

 

 

Due to performance reasons the physics engine is implemented in the client side. However the server is authoritative, each turn it validates balls positions and makes sure that both clients are synchronized and positions are consistent.

 

Another interesting feature of Colyseus is that is coded in TypeScript which is precisely the language we use in the client side.

Colyseus is open source, the project is well maintained and has a forum where usually all doubts are solved in matter of hours.

Porting games to HTML5

/0 Comments/in , , /by

Do you have an old and successful game that you’d like to port to HML5? Let’s talk!

Our studio has already worked developing exclusive games for many clients from the game industry, like Miniclip or Spil Games, but also from other ambits, like Adesso, a talent recruiting agency. While we enjoy developing original concepts, there are times when clients already have a great game, but it was originally coded for a specific environment. What we offer is to port these successful games to HTML5. Games that were downloadable for PC, or just playable from smartphones, now can be adapted to HTML5, with all of its advantages.

The main advantage of having a game ported to HTML5 is its ubiquity. The games can be played on all kinds of devices directly from a browser. It doesn’t matter if it’s a desktop, a mobile device or a smart TV. If you decide to have it in Google Play or the App Store too we can wrap it so that you can publish it there.

In most cases your game will just need to be re-coded in JavaScript. Than means less costs versus developing a brand new game. Basically because you can recycle existing art and a pre-stablished gameplay. Occasionally some changes may be required in the controls to support touch screens.

Here an example of a game we’ve ported:

Hotel Solitaire is owned by GameHouse. It worked very well for years and that’s why they wanted to squeeze a bit more their IP. Originally it was coded in Java. We used the existing graphic and audio set to produce a game that works well on desktop and mobile devices.

Besides game ports, another way of producing games with a tight budget is re-skinning, but that’s a complete different option we covered on this blog entry.

 

Guess which is our favourite Git client

/1 Comment/in , , , /by

We’ve been implementing Git for quite a while on our HTML5 games projects and we love its code management possibilities and its collaborative features.

Using Git with the command line is too hard for us, that’s why we need a client. Until recently we were using SourceTree. SourceTree is a great product and it’s free, however there were 2 things we don’t like. First, the theme is white as siberian snow, and our tired programmer eyes really favour a dark theme. Second, SourceTree seems to work better on Mac than Windows. That’s why we’ve decided to test the free version of GitKraken.

git clients compared

The team of programmers developing each of our game projects usually consists just on 1 or 2 guys, so  the free version is enough for our current needs.

GitKraken is based in Electron. It’s coded in javascript and uses html and css, which means it’s cross platform. Its GUI besides being nifty, is dark. Fonts are nice and the icons and its diagrams makes it easy and intuitive to use. Branching, stashing or checking out a branch just requires one click.

Do you already have your own favourite Git client? Have you also suffered from white backgrounds and bleeding eyes?

Jscrambler helps to protect our HTML5 games

/1 Comment/in , , , /by

jscrambler_protection

We love to code HTML5 games and JavaScript is a nice programing language but unfortunately everyone can access to the source code of our games. And that includes those cheeky guys who doesn’t want to respect existing license agreements or those just looking for “inspiration” for their next cloned game.

Luckily we have a powerful ally called Jscrambler.

Jscrambler is quite intuitive and it’s web based. There are some other javascript obfuscators but JScrambler offers the most complete and secure solution. Its version 4 has just been released. According to Pedro Fortuna, CTO of JScrambler:

“Version 4 brings the product from a code protection solution to a platform that provides a tamper-proof environment to the application, making sure it is executed without interferences and by legitimate users only.”

We’d like to show you an example of the level of protection that Jscrambler offers, we’ll take a function of our game “Alien Kindergarten” and obfuscate it.

We can see that even after using JSbeautifier the code is quite difficult to understand. Besides site-locking they offer some interesting transformations such as dead code insertion (that’s why the obfuscated code is longer) and member enumeration.

Mission accomplished…. it looks like that doing the whole thing from scratch is much easier than attempting a reverse engineering.

Ahhhh! forgot to say that Jscrambler is optimized for games and doesn’t affect performance.

Help phaser development

/2 Comments/in , , , , , /by
 phaser_logo

We’ve been using an html5 game engine called Phaser for over a year. It’s open source and was created by a photon storm.Our experiences with Phaser have been fantastic. We’ve tried several frameworks but found Phaser the best game engine to develop our games from the usability and performance points of view.Now Richard Davey, the man behind Phaser, has started a campaign to collect money to be able to dedicate more time enhancing his incredible framework.Please check this out:

>> Phaser on Patreon

It’s time to optimize the loading time of html5 games

/2 Comments/in , , , /by

Loading time is critical on mobile html5games. Some optimizations can be achieved by reducing the size and the quantity of the assets to be uploaded without giving up quality.

We’ll describe some of the basic things that can be done to minimize loading time. They are quite standard, followed by most developers and include optimizations on these fronts:

 

Audio – Code – Graphics

 

Audio

Our game Foot Chinko contains more than 30 audio effects, that’s a lot. We wrapped them in just 1 audio file with this open source application:
Tõnis Tiigi Audio Sprite on github

The resulting file is called audio sprite. Size wasn’t reduced but the amount of assets indeed, and this helped a lot to keep loading time low.

Game Engine – code

We are currently implementing Phaser for all our html5 games. Our cute Pocahontas Slots doesn’t make use of all the capabilities of this great and robust framework. It doesn’t need the physics module, for example. Instead of referencing this file in the index.html:

phaser.min.js (709kb)

we include the smaller:

phaser-no-physics.min.js (472kb)

Don’t forget to minimize your code too.

Graphics

Choose a good and unique resolution, all assets of your game will be dependent of this initial decision. We usually work with the iPad2 resolution, that is 1024 x 768 px. Our games look alright on desktop and devices with a big display without punishing players with smaller resolution devices.

Did you know about texture atlas?

http://en.wikipedia.org/wiki/Texture_atlas

A good program to generate them is Texture Packer. Once you’ve packed all the images into a texture atlas is time to compress the resulting png. We use an online tool called tinypng for that. This is the last step before releasing the production game.

In case you need a simple background image with a color gradient, for example, let’s say for the sky, generate a bitmap procedurally.